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/parts/_thinkers.sass
+++ b/assets/sass/themes/default/parts/_thinkers.sass
@@ -0,0 +1,158 @@
+@use 'sass:color'
+@use '../palettes/brushes' as hues
+@use '../palettes/typewriters' as typo
+// @use '../palettes/stylebook' as book
+
+#influences
+    margin: 0 auto
+    font-size: clamp(11pt, 1vw, 23pt)
+    text-align: justify
+
+    & h1, & h2, & h3, & h4, & h5, & h6
+        color: hues.$border-base-notification
+
+#thinker_gallery
+    display: flex
+    margin: 5vh auto 0
+    padding: 0 10% 3vh
+    
+    & > .thinker
+        z-index: 0
+        display: flex
+        flex-direction: column
+        justify-content: center
+        align-items: center
+        height: inherit
+        border: 1px outset hues.$bg-helper-highlight-color
+        background-color: color.scale(hues.$fg-helper-lowlight-color, $whiteness: 66%)
+        color: hues.$bg-helper-highlight-color
+        cursor: zoom-in
+        font-family: typo.$alt-journalistic-font
+        // margin: 10px
+        filter: url('/images/themes/default/textures/noise.svg#noiseFilter')
+        transform: rotate(10deg) skew(0deg)
+        transition: border-radius 2s, box-shadow 2s, border 1s, transform 2s, max-width 2s, background-color 2s, font-size 2s
+
+        &::after
+            position: absolute
+            display: block
+            content: ''
+            opacity: 0.45
+            background-image: url('/images/themes/default/textures/cream_paper.png')
+            background-size: 100%
+            top: 0
+            left: 0
+            right: 0
+            bottom: 0
+            border-top-left-radius: 40px 20px
+            border-top-right-radius: 10px 20px
+            border-bottom-left-radius: 10px 5px
+
+        &:nth-child(2n)
+            transform: rotate(-15deg)
+
+        &:hover:nth-child(2n), &:active:nth-child(2n)
+            transform: rotate(-5deg) skew(-5deg, 3deg)
+
+        &:hover
+            cursor: grab
+
+        &:hover, &:active
+            z-index: 1
+            background-color: color.scale(hues.$fg-helper-lowlight-color, $whiteness: 75%)
+            box-shadow: 0 5px 10px hues.$bg-helper-highlight-color
+            border: 0 outset hues.$bg-helper-highlight-color
+            border-top-left-radius: 40px 20px
+            border-top-right-radius: 10px 20px
+            border-bottom-left-radius: 10px 5px
+            transform: rotate(3deg) skew(5deg, -3deg)
+
+        & img
+            max-width: 88%
+            border-radius: 3%
+            filter: grayscale(100%) contrast(1.8) brightness(1)
+            opacity: 0.9
+            transition: filter 2s
+
+        &:active img
+            display: none
+
+        &:hover img, &:active img
+            filter: grayscale(100%) contrast(1.6) brightness(1.3)
+
+        & figcaption
+            max-width: 88%
+            margin: 0 auto
+            // opacity: 0.0
+            transition: opacity 2s
+
+            & .tname
+                font-weight: bold
+
+            & .ttype
+                display: none
+                text-align: center
+                padding: 0 0 2.5% 0
+
+            & .concept_tags
+                display: none
+
+                & > *
+                    background-color: hues.$bg-helper-highlight-color
+                    color: color.scale(hues.$fg-helper-lowlight-color, $whiteness: 66%)
+                    padding: 2%
+                    font-style: oblique
+
+            & .tdesc
+                display: none
+                padding: 2%
+
+        &:active
+            cursor: grabbing
+
+            & .concept_tags
+                display: initial
+
+            & .tdesc
+                display: initial
+
+            & .ttype
+                display: inline-block
+
+            & figcaption
+                max-height: initial
+
+@media (orientation: landscape)
+    #influences
+        max-width: 33vw
+
+    #thinker_gallery
+        flex-wrap: wrap
+        flex-direction: row
+        justify-content: space-evenly
+        align-items: baseline
+
+        & > .thinker
+            max-width: 15%
+            font-size: clamp(9pt, 0.5vw, 14pt)
+
+            &:hover, &:active
+                max-width: 16%
+                font-size: clamp(10pt, 0.6vw, 15pt)
+
+@media (orientation: portrait)
+    #influences
+        max-width: 50vw
+
+    #thinker_gallery
+        flex-direction: column
+        justify-content: center
+        align-items: center
+
+        & > .thinker
+            max-width: 50%
+            font-size: clamp(12pt, 2vw, 24pt)
+
+            &:hover, &:active
+                max-width: 53%
+                font-size: clamp(16pt, 2.1vw, 24pt)