Add responsive CSS

2025-08-13 01:03:57 +02:00 · 2012-07-10 20:07:50 -04:00
parent d0b9038d1f
commit d911031ec5
3 changed files with 55 additions and 2 deletions
--- a/styles/all.less
+++ b/styles/all.less
@@ -15,3 +15,55 @@
@import "site/site-navigation.less";
@import "site/site-content.less";
@import "site/site-footer.less";
+
+/* Tablets and Smartphones */
+
+@media only screen and (max-width : 1024px) {
+    .build-date{
+        text-align: center;
+    }
+    .site-header{
+        height: 220px;
+        position: absolute;
+        top: 20px;
+        left: 0;
+        width: 100%;
+    }
+    .site-navigation{
+        margin-top: 240px;
+        padding: 20px;
+        position: relative;
+        width: auto;
+
+        ul{
+            border: 1px solid #999;
+            border-bottom: none;
+        }
+        li{
+            .man;
+            .pan;
+        }
+        a{
+            background: #CCC;
+            display: block;
+            border-bottom: 1px solid #999;
+            padding: 10px;
+            text-decoration: none;
+        }
+        ul ul{
+            border: none;
+            .man;
+            .pan;
+        }
+        ul ul a{
+            background: transparent;
+        }
+    }
+    .site-content{
+        padding: 20px;
+    }
+    .top{
+        display: inline-block;
+        float: none;
+    }
+}