Further improved media styles

omnifaces · Jan 1, 2017 · 954302b · 954302b
1 parent 096b5ec
commit 954302b
Showing 1 changed file with 35 additions and 10 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -1,6 +1,7 @@
 /*******************************************************************************
 Slate Theme for GitHub Pages
 by Jason Costello, @jsncostello
+Modified by BalusC
 *******************************************************************************/
 
 @import url(github-light.css);
@@ -35,10 +36,6 @@ footer, header, hgroup, menu, nav, section {
   display: block;
 }
 
-ol, ul {
-  list-style-position: inside;
-}
-
 table {
   border-collapse: collapse;
   border-spacing: 0;
@@ -52,9 +49,7 @@ body {
   box-sizing: border-box;
   color:#373737;
   background: #212121;
-  font-size: 17px;
   font-family: 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
-  line-height: 1.7;
   -webkit-font-smoothing: antialiased;
 }
 
@@ -166,8 +161,6 @@ pre, code {
   background-color: #fff;
 
   font-family: Consolas, Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
-  font-size: 14px;
-  line-height: 1.4;
 }
 
 pre {
@@ -313,13 +306,38 @@ Full-Width Styles
 }
 
 
+/*******************************************************************************
+Large Device Styles
+*******************************************************************************/
+
+@media screen {
+  body {
+    font-size: 17px;
+    line-height: 1.7;
+    transition: all .3s;
+  }
+  pre, code {
+    font-size: 14px;
+    line-height: 1.4;
+    transition: all .3s;
+  }
+}
+
+
 /*******************************************************************************
 Medium Device Styles
 *******************************************************************************/
 
 @media screen and (max-width: 1023px) {
   body {
-    font-size:16px;
+    font-size: 16px;
+    line-height: 1.6;
+    transition: all .3s;
+  }
+  pre, code {
+    font-size: 13px;
+    line-height: 1.3;
+    transition: all .3s;
   }
 }
 
@@ -330,6 +348,13 @@ Small Device Styles
 
 @media screen and (max-width: 480px) {
   body {
-    font-size:15px;
+    font-size: 15px;
+    line-height: 1.5;
+    transition: all .3s;
+  }
+  pre, code {
+    font-size: 12px;
+    line-height: 1.2;
+    transition: all .3s;
   }
 }