make the new style also work for blog posts

[web.git] / style.scss

diff --git a/style.scss b/style.scss
index 0fa1fa77e82b530a5b27e1e8e1389f0d0fd344b3..c01d0117217078fbc575c9323a50d95cfcb88d04 100644 (file)
--- a/style.scss
+++ b/style.scss
@@ -34,20 +34,15 @@ h4 {
 $navi-width:      11em;
 $navi-indent:     1.2em;
 $frame-max-width: 50em;
-$intrusion-width: 0.8em;
+$intrusion-width: 1.0em;
 $outer-margin:    0.8em;
 $full-content-width: $frame-max-width + $navi-width + 2*$outer-margin + $intrusion-width;
 
-$frame-color: #121212;
-$title-color: #08f;
-$navi-color: #36ff00;
-$current-color: #ffa700;
-$background-color: white;
+$background-color:       white;
 $text-color:             #313131;
-$code-background-color: #505050;
-$light-text-color:       #888;
-$link-color: #268BD2;
-
+$light-text-color:       #808080;
+$code-background-color:  #F7F7F7;
+$link-color:             #268BD2;
 
 /* General page structure */
 body { /* This centers us in the page, and handles the "too wide" case */
@@ -132,7 +127,7 @@ body { /* This centers us in the page, and handles the "too wide" case */
 }
 
 /* Small screens */
-@media screen and (max-width:#{ $frame-max-width } ) {
+@media screen and (max-width:#{ $frame-max-width + 2*$outer-margin } ) {
     body, #-frame, #-title, #-content, #-navi {
         margin: 0;
         padding: 0;
@@ -203,22 +198,43 @@ body { /* This centers us in the page, and handles the "too wide" case */
 
 /* Content styling */
 #-content {
-    .subtitle .side {
+    .side {
         float: right;
         color: $light-text-color;
     }
 
-    code {
-        padding: 0.1em 0.2em;
+    #-pretitle, .subtitle {
+        h1 {
+            display: inline-block;
+            font-size: 165%;
+        }
+        .side {
+            margin-left: 0.5em;
+            margin-top: 0.9em;
+        }
+    }
+    .subtitle {
+        margin-top: 1.5em;
+    }
+
+    #-title {
+        clear: both;
+    }
+
+    pre, code {
+        background-color: $code-background-color;
         font-family: monospace;
         font-size: 82%;
     }
+    code {
+        padding: 0.1em 0.2em;
+    }
     pre {
         padding: 0.6em;
     }
     pre code {
-        background-color: $code-background-color;
         padding: 0;
+        font-size: 100%;
     }
 
     p {
@@ -227,7 +243,7 @@ body { /* This centers us in the page, and handles the "too wide" case */
     }
     a {
         text-decoration: none;
-        color:$link-color;
+        color: $link-color;
     }
     a:hover, a:focus {
         text-decoration: underline;