Update styles and make cc image locally served
authorJoerg Jaspert <joerg@debian.org>
Thu, 25 Feb 2016 06:07:56 +0000 (07:07 +0100)
committerJoerg Jaspert <joerg@debian.org>
Sun, 28 Feb 2016 14:39:12 +0000 (15:39 +0100)
_layouts/default.html
_scss/base.scss
assets/images/cc_by-nc-sa_88x31.png [new file with mode: 0644]

index 067c53b..60c1b1f 100644 (file)
@@ -49,7 +49,7 @@ layout: compress
     <p class="copyright">Copyright &copy; 2004 - {{ site.time | date: '%Y' }} Joerg Jaspert.</p>
     <div id="license">
       <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/de/">
-        <img alt="Creative Commons License" src="https://i.creativecommons.org/l/by-nc-sa/3.0/de/88x31.png" width="88" height="31"/></a>
+        <img alt="Creative Commons License" src="/assets/images/cc_by-nc-sa_88x31.png" width="88" height="31"/></a>
         <p>This weblog is licensed under a <a href="https://creativecommons.org/licenses/by-nc-sa/3.0/de/">Creative Commons License</a>.</p>
     </div>
   </footer>
index 6bf370a..4aa1e51 100644 (file)
@@ -24,9 +24,9 @@ $base-font-pct: 1.45*100%;
 $base-font-rel: 1rem;
 
 $breakpoints: (
-    'phone': 360px,
-    'tablet': 800px,
-    'desktop': 1280px
+    'phone': 22.5001em,
+    'tablet': 50.001em,
+    'desktop': 80.001em,
 ) !default;
 
 @import "_include-media";
@@ -96,13 +96,9 @@ table {
 }
 
 /*** Basics ***/
-html, body {
+body {
     background-color: $base03;
     color: $base0;
-}
-
-
-body {
     font: {
         size: $base-font-pct;
         size: $base-font-rel;
@@ -110,11 +106,28 @@ body {
         variant-ligatures: common-ligatures;
         kerning: normal;
         weight: normal;
+        smoothing: antialiased;
     }
     text-rendering: optimizeLegibility;
     line-height: 1.7;
 }
 
+h1, h2, h3 {
+    color: $yellow;
+}
+
+@each $hlev, $fspx, $fsrel in (h1, 17, 2.7),
+(h2, 15, 1.8),
+(h3, 15, 1.4) {
+    #{$hlev} {
+        font: {
+            size: #{$fspx}px;
+            size: #{$fsrel}em;
+        }
+        margin: 0 0 10px 0;
+    }
+}
+
 a {
     text-decoration: none;
     padding-bottom: 2px;
@@ -138,25 +151,20 @@ a {
         color: $yellow;
         border-bottom: 1px solid $base01;
     }
-}
-
-h1, h2, h3 {
-    color: $yellow;
-}
-
-h1 a {
-    color: $red;
 
-    &:visited, &:active {
-        color: $red;
-    }
-
-    &:hover {
-        background-color: $base02;
-        border-color: $base02;
+    h1 > & {
         color: $red;
+        
+        &:visited, &:active {
+            color: $red;
+        }
+        
+        &:hover {
+            background-color: $base02;
+            border-color: $base02;
+            color: $red;
+        }
     }
-
 }
 
 p, pre {
@@ -262,97 +270,22 @@ acronym, abbr {
     border-bottom: 1px dashed;
 }
 
-@each $hlev, $fspx, $fsrel in (h1, 17, 2.7),
-(h2, 15, 1.8),
-(h3, 15, 1.4) {
-    #{$hlev} {
-        font: {
-            size: #{$fspx}px;
-            size: #{$fsrel}em;
-        }
-        margin: 0 0 10px 0;
-    }
-}
-
-/*** Useful Classes ***/
-
-.clear {
-    clear: both;
-}
-
-
-.float-left {
-    float: left;
-}
-
-.float-right {
-    float: right;
-}
-
-.text-left {
-    text-align: left;
-}
-
-.text-right {
-    text-align: right;
-}
-
-.text-center {
-    text-align: center;
-}
-
-.text-justify {
-    text-align: justify;
-}
-
-.img-left {
-    float: left;
-    margin: 4px 10px 4px 0;
-}
-
-.img-right {
-    float: right;
-    margin: 4px 0 4px 10px;
-}
-
-.img-middle {
-    vertical-align: middle;
-}
-
-.nopadding {
-    padding: 0;
-}
-
-.nounderline {
-    text-decoration: underline;
-}
-
 /*** Structure ***/
 
-#page {
-    margin-left: 10%;
-    // width: 100vw;
-    @include media('all', '<tablet' ) {
-        margin: {
-            left: initial;
-            top: auto;
-        }
-        position: static;
-        float: none;
-    }
-}
 
 #header {
+    // While the BC is the same as the one in body, and as such inherited,
+    // not setting it here means the scrolling content is visible behind header.
+    // Setting it --> it hides the scrolling content.
+    background-color: $base03;
     font: {
         family: $font-family-header;
     }
-    background-color: $base03;
     width: 100vw;
     position: fixed;
     top: 0;
     bottom: auto;
     text-align: center;
-    z-index: 2;
 
     h1 {
         color: $orange;
@@ -361,10 +294,6 @@ acronym, abbr {
             size: 4.2vw;
         }
         margin-bottom: 4px;
-
-        a {
-            border: none;
-        }
     }
     h2 {
         color: $green;
@@ -373,38 +302,27 @@ acronym, abbr {
             size: 2vw;
         }
     }
-    p {
-        font: {
-            size: 1.5*$base-font-pct;
-            size: 1.5*$base-font-rel;
-        }          
-    }
+
     @include media('all', "height<=500px") {
         position: relative;
         float: none;
         margin-left: initial;
-        width: 100vw;
-        p {
-            font: {
-                size: $base-font-pct;
-                size: $base-font-rel;
-            }          
-        }
     }
     @include media('all', '<tablet' ) {
         position: static;
         float: none;
         margin-left: initial;
-        width: 100vw;
     }
 }
 
 #footer {
     width: 75vw;
-    margin: 50px auto 20px auto;
+    margin: 3.125em auto 1.25em  auto;
     padding-top: 10px;
-    border-top: 1px solid $base02;
-    border-color: $base02;
+    border: {
+        top: 0.062em solid $base02;
+        color: $base02;
+    }
     @include media('all', '<tablet' ) {
         width: 100vw;
     }
@@ -421,11 +339,12 @@ acronym, abbr {
     width: 75%;
     margin: {
         top: 11vw;
-        left: 2vmax;
+        left: 11%
     }
     @include media('all', '<tablet' ) {
         margin: {
             top: auto;
+            left: initial;
         }
         width: 98vw;
     }
diff --git a/assets/images/cc_by-nc-sa_88x31.png b/assets/images/cc_by-nc-sa_88x31.png
new file mode 100644 (file)
index 0000000..4b7b36d
Binary files /dev/null and b/assets/images/cc_by-nc-sa_88x31.png differ