eriiicam avatar eriiicam committed 32871fe

mobile template

Comments (0)

Files changed (5)

sass/_antiscreen.sass

 =antiscreen
   +global-reset
   #page
-    +reset-mobile
-    header[role="banner"], nav[role="navigation"], div[role="main"], footer[role="contentinfo"]
-      +reset-mobile
+    &, 
+    header[role="banner"], nav[role="navigation"], div[role="main"], footer[role="contentinfo"],
     .author, .credit
       +reset-mobile
 
 *
   /*  As much contrast as possible */
   background: #fff  
-  color: #000
+  color: #000
+
+/* Mobile Styles --------------------------------------------------------------*/
+
+#client-url
+  #page
+    padding: .5em
+    
+    /* mobile template -----*/
+    nav[role="navigation"]
+      +leader
+      +trailer
+      ul
+        +list-default
+        
 
 /* Mobile --------------------------------------------------------------
 
-@import antiscreen
+@import antiscreen

static/css/mobile.css

   background: white;
   color: black;
 }
+
+/* Mobile Styles -------------------------------------------------------------- */
+#client-url #page {
+  padding: 0.5em;
+  /* mobile template ----- */
+}
+#client-url #page nav[role="navigation"] {
+  margin-top: 1.5em;
+  margin-bottom: 1.5em;
+}
+#client-url #page nav[role="navigation"] ul {
+  margin: 0 1.5em 1.5em 0;
+  list-style: disc;
+}

static/css/screen.css

     border: none;
   }
 
-  #page {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    outline: 0;
-    display: block;
-    float: none;
-    width: auto;
-    text-align: left;
-    background: none;
-  }
-  #page header[role="banner"], #page nav[role="navigation"], #page div[role="main"], #page footer[role="contentinfo"] {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    outline: 0;
-    display: block;
-    float: none;
-    width: auto;
-    text-align: left;
-    background: none;
-  }
+  #page,
+  #page header[role="banner"], #page nav[role="navigation"], #page div[role="main"], #page footer[role="contentinfo"],
   #page .author, #page .credit {
     margin: 0;
     padding: 0;
     border: none;
   }
 
-  #page {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    outline: 0;
-    display: block;
-    float: none;
-    width: auto;
-    text-align: left;
-    background: none;
-  }
-  #page header[role="banner"], #page nav[role="navigation"], #page div[role="main"], #page footer[role="contentinfo"] {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    outline: 0;
-    display: block;
-    float: none;
-    width: auto;
-    text-align: left;
-    background: none;
-  }
+  #page,
+  #page header[role="banner"], #page nav[role="navigation"], #page div[role="main"], #page footer[role="contentinfo"],
   #page .author, #page .credit {
     margin: 0;
     padding: 0;
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.