Changeset 854 for trunk/style

Timestamp:

Jan 19, 2016, 5:25:11 PM (9 years ago)

Author:

chronos

Message:

• Added: Responsive web layout. Two column layout is switched for single column for devices with smaller display.
• Modified: All four boxes at front page made as oveflowing defined height.

Location:

trunk/style

Files:

• respond.js (added)
• style.css (modified) (2 diffs)

trunk/style/style.css

@@ -257 +257 @@
 .box
 {
-  overflow: auto; 
+  overflow: auto;
+  height: 400px;
+}
+
+.shoutbox
+{
   width: 100%;
-  height: 500px;
   font-size: 80%;
   border-width: 1px;
@@ -595 +599 @@
   font-weight: normal;
 }
+
+/* Mobile Layout: 480px and below. */
+
+.box-left {
+  clear: both;
+  float: left;
+  margin-left: 0;
+  width: 100%
+  display: block;
+  margin-bottom: 10px;
+}
+  
+.box-right {
+  clear: none;
+  float: left;
+  margin-left: 0;
+  width: 100%;
+  display: block;
+  margin-bottom: 10px;
+}
+
+/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
+@media screen and (min-width: 480px) {
+
+.box-left {
+  clear: both;
+  float: left;
+  margin-left: 0;
+  width: 100%
+  display: block;
+  margin-bottom: 10px;
+}
+  
+.box-right {
+  clear: none;
+  float: left;
+  margin-left: 0;
+  width: 100%;
+  display: block;
+  margin-bottom: 10px;
+}
+  
+}
+
+/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */
+@media only screen and (min-width: 769px) {
+  
+.box-left {
+  clear: both;
+  float: left;
+  margin-left: 0;
+  width: 49%;
+  display: block;
+  margin-bottom: 10px;
+}
+  
+.box-right {
+  clear: none;
+  float: left;
+  margin-left: 1%;
+  width: 49%;
+  display: block;
+  margin-bottom: 10px;
+}
+
+}