Improved CSS definitions, more fine-grained content build script

12 files changed, 169 insertions, 113 deletions

diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index dd394da..202117e 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -44,8 +44,10 @@ code {
 pre {
   margin: 0;
   color: var(--code-block-fg);
-  font-size: $code-block-font-size;
+  font-size: 1em;
   line-height: $code-block-line-height;
+  text-overflow: "";
+  overflow: hidden;
 
   strong {
     font-weight: normal;
@@ -107,7 +109,7 @@ h3 {
 
 h1 {
   text-transform: uppercase;
-  font-size: px-to-em($heading-font-size);
+  font-size: 1em;
   color: var(--heading-fg);
 }
 
@@ -149,10 +151,6 @@ hr {
   margin: ($line-height * 2rem) 0 ($line-height * 2rem);
   background-color: var(--bg-plus);
   border: 0;
-
-  @media (max-width: $breakpoint-sm) {
-    margin-left: 0;
-  }
 }
 
 blockquote {
diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss
index bf7e213..036a87e 100644
--- a/assets/css/_utils.scss
+++ b/assets/css/_utils.scss
@@ -1,15 +1,17 @@
 .u-hidden {
-    display: none;
+  display: none;
 
-    &\@sm-down {
-        @media (max-width: $breakpoint-sm) {
-            display: none;
-        }
+  @each $name, $width in $breakpoints {
+    &\@#{$name}-down {
+      @media (max-width: $width) {
+        display: none;
+      }
     }
 
-    &\@sm-up {
-        @media (min-width: $breakpoint-sm + 1) {
-            display: none;
-        }
+    &\@#{$name}-up {
+      @media (min-width: $width + 1) {
+        display: none;
+      }
     }
+  }
 }
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 4883605..1ed64a5 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -1,6 +1,7 @@
-$font-size: 17px;
-$heading-font-size: $font-size + 1;
-$code-block-font-size: $font-size;
+$font-size: 16px;
+$content-font-size: $font-size + 1;
+$content-h1-font-size: $content-font-size + 1;
+
 $line-height: 1.5;
 $code-block-line-height: 1.4;
 
@@ -12,7 +13,10 @@ $page-item-prefix-width: $page-item-prefix-max-chars + $page-item-prefix-pad;
 
 $subcontent-indent: 4ch;
 
-$breakpoint-sm: 700px;
+$breakpoints: (
+  xs: 380px,
+  sm: 700px,
+);
 
 :root {
   --gray0: hsl(270, 0%, 7%);
@@ -41,8 +45,8 @@ $breakpoint-sm: 700px;
 
   --page-item-prefix-fg: var(--fg-minus);
 
-  --link-idle-fg: var(--fg-plus-2); //#90acf2; //var(--gray6);
-  --link-visited-fg: var(--fg-plus); //#bc9df2; //var(--gray5);
+  --link-idle-fg: var(--fg-plus-2); //#90acf2;
+  --link-visited-fg: var(--fg-plus); //#bc9df2;
   --link-hover-bg: var(--fg-plus-2);
   --link-hover-fg: var(--bg-minus);
 
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
index d86a484..834b6a0 100644
--- a/assets/css/components/_nav.scss
+++ b/assets/css/components/_nav.scss
@@ -1,36 +1,56 @@
 .c-nav {
-    background-color: var(--nav-bg);
-    //border-bottom: 1px solid var(--bg-plus);
+  background-color: var(--nav-bg);
 
-    &__items {
-        display: flex;
-        align-items: baseline;
+  &__items {
+    display: flex;
+    align-items: baseline;
+  }
+
+  &__logo {
+    display: inline-block;
+    color: var(--nav-logo-fg);
+    text-decoration: none;
+
+    &:link,
+    &:visited {
+      &:hover {
+        background-color: transparent;
+        color: var(--nav-item-hover-fg);
+        font-weight: bold;
+      }
     }
+  }
 
-    &__logo {
-        display: inline-block;
-        color: var(--nav-logo-fg);
-        text-decoration: none;
+  &__item {
+    display: inline-block;
+    padding: 1rem 1ch calc(1rem - 2px);
+    margin: 0 -1ch 0 3ch;
+    color: var(--nav-item-idle-fg);
+    text-decoration: none;
+    border-bottom: 2px solid transparent;
 
-        &:link:hover {
-            background-color: transparent;
-            color: var(--nav-item-hover-fg);
-            font-weight: bold;
-        }
+    &:hover {
+      background-color: transparent;
+      color: var(--nav-item-hover-fg);
+      font-weight: bold;
     }
+  }
 
+  @media (max-width: map-get($breakpoints, "sm")) {
     &__item {
-        display: inline-block;
-        padding: 1rem 1ch calc(1rem - 2px);
-        margin: 0 -1ch 0 3ch;
-        color: var(--nav-item-idle-fg);
-        text-decoration: none;
-        border-bottom: 2px solid transparent;
-
-        &:hover {
-            background-color: transparent;
-            color: var(--nav-item-hover-fg);
-            font-weight: bold;
+      margin-left: 2ch;
+    }
+  }
+
+  /*
+    @media (max-width: map-get($breakpoints, "xs")) {
+        &__logo {
+            display: none;
+        }
+
+        &__logo + &__item {
+            margin-left: -1ch;
         }
     }
+    */
 }
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
index 9159f5a..b5dee3c 100644
--- a/assets/css/layouts/_container.scss
+++ b/assets/css/layouts/_container.scss
@@ -1,20 +1,20 @@
 .l-container {
-    padding-left: 2rem;
-    padding-right: 2rem;
+  padding-left: 2rem;
+  padding-right: 2rem;
 
-    &--narrow {
-        margin-left: auto;
-        margin-right: auto;
-        max-width: $content-width;
-    }
+  &--content {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: $content-width;
+  }
 
-    &--pad-v {
-        padding-top: $line-height * 2rem;
-        padding-bottom: $line-height * 2rem;
-    }
+  &--pad-v {
+    padding-top: $line-height * 2rem;
+    padding-bottom: $line-height * 2rem;
+  }
 
-    @media (max-width: $breakpoint-sm) {
-        padding-left: 1rem;
-        padding-right: 1rem;
-    }
+  @media (max-width: map-get($breakpoints, "sm")) {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
 }
diff --git a/assets/css/scopes/_page.scss b/assets/css/scopes/_page.scss
index 4a97b79..21d49d0 100644
--- a/assets/css/scopes/_page.scss
+++ b/assets/css/scopes/_page.scss
@@ -1,8 +1,12 @@
 .s-page {
-  padding-left: $page-item-prefix-width;
+  font-size: px-to-em($content-font-size);
 
-  > :first-child {
-    margin-top: 0;
+  &__content {
+    padding-left: $page-item-prefix-width;
+
+    > :first-child {
+      margin-top: 0;
+    }
   }
 
   h1,
@@ -22,25 +26,20 @@
       padding-right: $page-item-prefix-pad;
       width: $page-item-prefix-width;
       color: var(--page-item-prefix-fg);
-      font-size: 1rem;
       font-weight: normal;
       text-align: right;
     }
+  }
 
-    @media (max-width: $breakpoint-sm) {
-      margin-left: 0;
-      padding-left: 0;
+  h1 {
+    font-size: px-to-em($content-h1-font-size, $content-font-size);
 
-      &::before {
-        display: none;
-      }
+    &::before {
+      content: "#";
+      font-size: px-to-em($content-font-size, $content-h1-font-size);
     }
   }
 
-  h1::before {
-    content: "#";
-  }
-
   h2::before {
     content: "##";
   }
@@ -53,12 +52,16 @@
     content: "|>";
   }
 
-  pre::before {
-    content: str-repeat("``\A", 40);
-    height: 100%;
-    color: var(--page-item-prefix-fg);
-    overflow: hidden;
-    line-height: $code-block-line-height * ($code-block-font-size / $font-size);
+  pre {
+    font-size: px-to-em($font-size, $content-font-size);
+
+    &::before {
+      content: str-repeat("``\A", 40);
+      height: 100%;
+      color: var(--page-item-prefix-fg);
+      overflow: hidden;
+      line-height: $code-block-line-height;
+    }
   }
 
   hr {
@@ -72,26 +75,37 @@
     &::after {
       margin-left: -1 * $page-item-prefix-width;
     }
+  }
+
+  @media (max-width: map-get($breakpoints, "sm")) {
+    &__content {
+      padding-left: 0;
+    }
 
-    @media (max-width: $breakpoint-sm) {
+    h1,
+    h2,
+    h3,
+    .c-refs__item,
+    pre {
       margin-left: 0;
       padding-left: 0;
 
-      &::after {
-        margin-left: 0;
+      &::before {
+        display: none;
       }
     }
-  }
-
-  .c-nav {
-    margin-left: -1 * $page-item-prefix-width;
 
-    @media (max-width: $breakpoint-sm) {
+    hr {
       margin-left: 0;
     }
-  }
 
-  @media (max-width: $breakpoint-sm) {
-    padding-left: 0;
+    .c-page-header {
+      margin-left: 0;
+      padding-left: 0;
+
+      &::after {
+        margin-left: 0;
+      }
+    }
   }
 }
diff --git a/scripts/build_content.sh b/scripts/build_content.sh
index ca75120..6ce857f 100755
--- a/scripts/build_content.sh
+++ b/scripts/build_content.sh
@@ -35,10 +35,28 @@ if [ -z "$1" ]; then
             do
                 handle "$FILE"
             done
-elif [ "$2" = "delete" ]; then
-    TARGET=$(target "$1")
-    echo "[DELETE ] $1 -> $TARGET"
-    rm -rf $TARGET
+elif [ "$1" = "md" ]; then
+    find content/ \
+        -type f \
+        -name "*.md" \
+        | while read FILE
+            do
+                handle "$FILE"
+            done
+elif [ "$1" = "single" ]; then
+    if [ -z "$2" ]; then
+        echo "[ERROR  ] \"single\" operation requires file argument"
+    else
+        handle "$2"
+    fi
+elif [ "$1" = "delete" ]; then
+    if [ -z "$2" ]; then
+        echo "[ERROR  ] \"delete\" operation requires file argument"
+    else
+        TARGET=$(target "$2")
+        echo "[DELETE ] $2 -> $TARGET"
+        rm -rf $TARGET
+    fi
 else
-    handle "$1"
+    echo "[ERROR  ] Unknown operation: \"$1\""
 fi
diff --git a/scripts/watch_content.sh b/scripts/watch_content.sh
index c4f55fb..769f2c5 100755
--- a/scripts/watch_content.sh
+++ b/scripts/watch_content.sh
@@ -4,8 +4,8 @@ inotifywait -qrme close_write,delete,move --format "%w%f" content \
     | while read FILENAME
         do
             if [ -f "$FILENAME" ]; then
-                scripts/build_content.sh "$FILENAME"
+                scripts/build_content.sh "single" "$FILENAME"
             elif [ ! -d "$FILENAME" ]; then
-                scripts/build_content.sh "$FILENAME" "delete"
+                scripts/build_content.sh "delete" "$FILENAME"
             fi
         done
diff --git a/scripts/watch_metadata.sh b/scripts/watch_metadata.sh
index af2e6a7..4323c90 100755
--- a/scripts/watch_metadata.sh
+++ b/scripts/watch_metadata.sh
@@ -3,5 +3,5 @@
 inotifywait -qrme close_write,delete,move --format "%w%f" metadata \
     | while read FILENAME
         do
-            scripts/build_content.sh
+            scripts/build_content.sh "md"
         done
diff --git a/scripts/watch_templates.sh b/scripts/watch_templates.sh
index 160a46c..9c7e787 100755
--- a/scripts/watch_templates.sh
+++ b/scripts/watch_templates.sh
@@ -3,5 +3,5 @@
 inotifywait -qrme close_write,delete,move --format "%w%f" templates \
     | while read FILENAME
         do
-            scripts/build_content.sh
+            scripts/build_content.sh "md"
         done
diff --git a/templates/base.html b/templates/base.html
index 96dd4ff..d381984 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -31,15 +31,15 @@
 <body>
     <nav class="c-nav">
         <div class="c-nav__items l-container">
-            <span class="c-nav__logo">$site.logo$</span>
+            <a class="c-nav__logo" href="/" title="$site.title$">$site.logo$</a>
             $for(menus.main)$
             <a class="c-nav__item c-nav__item--$it.id$" href="$it.url$">$it.label$</a>
             $endfor$
         </div>
     </nav>
         
-    <main class="l-container l-container--narrow l-container--pad-v">
-        <div class="s-page">
+    <main class="s-page l-container l-container--content l-container--pad-v">
+        <div class="s-page__content">
             $if(isHome)$
                 <header class="c-page-header" role="presentation">
 ${pageHeader()}
@@ -56,7 +56,7 @@ ${pageHeaderSm()}
     </template>
 
     <script>
-        var headerEl = document.querySelector(".s-page > header");
+        var headerEl = document.querySelector(".c-page-header");
         var headerTemplateEl = document.getElementById("header-sm");
         var headerSmEl = headerTemplateEl.content.cloneNode("true");
 
diff --git a/templates/pageHeaderSm.html b/templates/pageHeaderSm.html
index e673a73..6092f30 100644
--- a/templates/pageHeaderSm.html
+++ b/templates/pageHeaderSm.html
@@ -1,11 +1,11 @@
 <!--
- .|                      //\__      '  .'     |  . |          ' . ' 
-  |       _.~-"""-----~``  ,-´      '   '     |'   |          '   ' 
- '|    .´  ,~'\ ).,__,)/,,"         ' . '     |  | |          '  .' 
-  |_   `~´   (/\\,   (/\\,         _'   '_   _| '  |_        _'   '_
+.|                     //\__      '  .'      |  . |           ' . ' 
+ |      _.~-"""-----~``  ,-´      '   '      |'   |           '   ' 
+'|   .´  ,~'\ ).,__,)/,,"         ' . '      |  | |           '  .' 
+ |_  `~´   (/\\,   (/\\,         _'   '_    _| '  |_         _'   '_
 -->
 <pre class="$if(isHome)$u-hidden@sm-up$endif$">
- .|    <strong>                  //\__</strong>      '  .'     |  . |          ' . ' 
-  |    <strong>   _.~-"""-----~``  ,-´</strong>      '   '     |'   |          '   ' 
- '|    <strong>.´  ,~'\ ).,__,)/,,"   </strong>      ' . '     |  | |          '  .' 
-  |_   <strong>`~´   (/\\,   (/\\,    </strong>     _'   '_   _| '  |_        _'   '_</pre>
+.|   <strong>                  //\__</strong>      '  .'      |  . |           ' . ' 
+ |   <strong>   _.~-"""-----~``  ,-´</strong>      '   '      |'   |           '   ' 
+'|   <strong>.´  ,~'\ ).,__,)/,,"   </strong>      ' . '      |  | |           '  .' 
+ |_  <strong>`~´   (/\\,   (/\\,    </strong>     _'   '_    _| '  |_         _'   '_</pre>