Added SASS files to be pre-processed as CSS by a file watcher

2025-09-02 21:59:50 -04:00
parent a264077e33
commit 8d34a4a3db
15 changed files with 832 additions and 0 deletions
--- a/assets/sass/themes/default/_global.sass
+++ b/assets/sass/themes/default/_global.sass
@@ -0,0 +1,119 @@
+@use 'palettes/typewriters' as typo
+@use 'palettes/stylebook' as book
+@use 'palettes/brushes' as hues
+
+@font-face
+    @include book.init-font(typo.$sys-message-font)
+
+@font-face
+    @include book.init-font(typo.$journalistic-font)
+
+@font-face
+    @include book.init-font(typo.$alt-journalistic-font)
+
+@font-face
+    @include book.init-font(typo.$titular-font)
+
+@font-face
+    @include book.init-font(typo.$cryptic-font)
+
+// @TODO find an appropriate background image for html
+// html
+//    background-image: url('https://visualizingcultures.mit.edu/tokyo_1960/image/anp7117_Hamaya_RG17_Jun2816.gif')
+//    background-size: 100%
+
+body
+    color: hues.$fg-helper-base-color
+
+article 
+    & span
+        &::selection, &::-moz-selection
+            background-color: hues.$bg-base-slider
+            color: #fff
+
+        & h1, & h2, & h3, & h4, & h5, & h6
+            text-align: center
+
+@media (orientation: landscape)
+    body#default_body
+        max-width: 66vw
+        margin: 4vh auto 4vh auto
+
+@media (orientation: portrait)
+    body#default_body
+        max-width: 90%
+        padding: book.$topbottom-framing-pad 0
+        margin: 2vh auto 2vh auto
+
+#logo_shape
+    fill: #ffffff
+    stroke-width: 7px
+
+#logo_shape.icon_shape
+    stroke: hues.$fg-helper-lowlight-color
+
+.title
+    font-family: typo.$titular-font
+
+.cryptic
+    font-family: typo.$cryptic-font
+
+
+// @NOTE: below is temporary
+footer
+    display: none
+
+@media print
+    #site_nav
+        display: none
+
+@media screen
+    html
+        background-color: hues.$bg-helper-highlight-color
+
+    body#default_body
+        display: block
+        background-color: hues.$bg-helper-base-color
+        box-shadow: book.$shared-shadow-depth hues.$bg-helper-lowlight-color
+        border-radius: 1%
+
+    html:has(#err_body)
+        background: hues.$bg-helper-highlight-color url("images/dotted.png") repeat center center
+        background-size: 133px
+        // border-radius: 0
+        // box-shadow: book.$shared-shadow-depth hues.$bg-helper-lowlight-color inset
+
+    @media (orientation: landscape)
+        body#default_body
+            transform: rotate(0.5deg)
+
+    @media (orientation: portrait)
+        body#default_body
+            transform: rotate(0deg)
+
+    a
+        text-decoration: overline hues.$border-helper-base-color solid 2pt
+
+        &#home
+            text-decoration: none
+            color: hues.$fg-helper-base-color
+
+    .icon_shape
+        stroke: hues.$fg-helper-lowlight-color
+
+    #logo_shape
+        fill: hues.$bg-helper-base-color
+
+    #content
+        font-family: typo.$journalistic-font
+
+    #portrait_shape
+        fill: hues.$fg-helper-base-color
+    
+    // .portrait
+    //     border-radius: 100%
+
+    #extra
+        position: absolute
+        right: 0
+        bottom: 0