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
--- a/assets/sass/themes/default/_main.sass
+++ b/assets/sass/themes/default/_main.sass
@@ -0,0 +1,9 @@
+@forward 'global'
+@forward 'parts/banner'
+/* @forward 'parts/resume' */
+@forward 'parts/messages'
+/* @forward 'parts/tv' */
+@forward 'parts/keys'
+@forward 'parts/intro'
+@forward 'parts/thinkers'
+@forward 'parts/contact'
--- a/assets/sass/themes/default/export.sass
+++ b/assets/sass/themes/default/export.sass
@@ -0,0 +1,9 @@
+/* Because this file will be symlinked to a file at the path 
+ * prefixed to path 'themes/${DEFAULT_THEME_NAME}', all 
+ * imports to, forwards to, and uses of SASS files at paths under this 
+ * file's directory level must be prefixed with directory path 
+ * 'themes/${DEFAULT_THEME_NAME}'. This is exemplified below. */ 
+@forward 'themes/default/main'
+@tailwind 'base'
+@tailwind 'components'
+@tailwind 'utilities'
--- a/assets/sass/themes/default/palettes/_animations.sass
+++ b/assets/sass/themes/default/palettes/_animations.sass
@@ -0,0 +1,32 @@
+$breathing-animation: breathe
+
+@mixin dilating-expanding($anchor-width: 20vw, $anchor-height: 20vh)
+    $measure: 0.5
+    
+    0%
+        width: $anchor-width - ($measure * 5)
+        height: $anchor-height - ($measure * 5)
+
+    25%
+        width: $anchor-width - ($measure * 1)
+        height: $anchor-height - ($measure * 1)
+
+    50%
+        width: $anchor-width
+        height: $anchor-height
+
+    75%
+        width: $anchor-width + ($measure * 1)
+        height: $anchor-height - ($measure * 1)
+
+    100%
+        width: $anchor-width - ($measure * 5)
+        height: $anchor-height - ($measure * 5)
+
+@mixin blinking-border($b-color)
+    0%
+        border-color: transparent
+    50%
+        border-color: $b-color
+    100%
+        border-color: transparent
--- a/assets/sass/themes/default/palettes/_brushes.sass
+++ b/assets/sass/themes/default/palettes/_brushes.sass
@@ -0,0 +1,34 @@
+@use 'sass:color'
+
+// HELPER ELEMENTS
+$bg-helper-base-color: #121212
+$bg-helper-highlight-color: color.scale($bg-helper-base-color, $blackness: 33%)
+$bg-helper-lowlight-color: color.scale($bg-helper-base-color, $whiteness: 33%)
+$border-helper-base-color: #e9b074
+$fg-helper-base-color: #CCCCCC 
+$fg-helper-highlight-color: color.scale($fg-helper-base-color, $blackness: 33%)
+$fg-helper-lowlight-color: color.scale($fg-helper-base-color, $whiteness: 25%)
+// helper notification elements
+$bg-base-notification: $bg-helper-highlight-color
+$border-base-notification: #9d1934
+$fg-base-notification: $fg-helper-lowlight-color
+// helper slider & progress bar elements
+// $bg-base-slider: #3366FF
+$bg-base-slider: #8710A8
+$border-base-slider: #CCCCCC
+$fg-base-slider: color.scale($border-base-notification, $red: 33%)
+// helper tooltip elements
+$bg-base-tooltip: color.scale($border-helper-base-color, $saturation: -15%)
+$fg-base-tooltip: $bg-helper-highlight-color
+// helper icon elements
+$stroke-icon: $bg-helper-base-color
+$fill-icon: $fg-helper-base-color
+
+// INPUT ELEMENTS
+$bg-input-base-color: #333333
+$border-input-base-color: #CCCCCC
+$fg-input-base-color: $bg-helper-base-color
+
+// OUTPUT ELEMENTS
+$bg-output-base-color: #993333
+$fg-output-base-color: #FFFFCC
--- a/assets/sass/themes/default/palettes/_montages.sass
+++ b/assets/sass/themes/default/palettes/_montages.sass
--- a/assets/sass/themes/default/palettes/_stylebook.sass
+++ b/assets/sass/themes/default/palettes/_stylebook.sass
@@ -0,0 +1,40 @@
+$message-border-width: 0.8vw
+$shared-shadow-depth: 0px 3px 5px
+$topbottom-framing-pad: 3vh 0
+
+@mixin render-columnist
+    display: flex
+    flex-flow: row nowrap
+    justify-content: center
+    align-items: stretch
+    column-gap: 4%
+
+@mixin render-strip
+    display: flex
+    flex-flow: column wrap
+    justify-content: center
+    align-items: center
+    row-gap: 4%
+
+@mixin make-notif($right-origin-x: 1.25vw, $bottom-origin-y: 3vh)
+    position: fixed
+    bottom: $bottom-origin-y
+    right: $right-origin-x
+    min-height: 6vh
+    max-height: 10vh
+    max-width: 15vw
+    overflow: scroll
+    -ms-overflow-style: none
+    scrollbar-width: none
+    padding: 5px
+    z-index: 1
+
+    &::-webkit-scrollbar
+        display: none
+
+@mixin init-font($font-name, $extension: "ttf")
+    font-family: $font-name 
+    src: url('./fonts/' + $font-name + '.' + $extension)
+
+@mixin set-corners($tl: 15%, $tr: 15%, $br: 15%, $bl: 15%)
+    border-radius: $tl $tr $br $bl
--- a/assets/sass/themes/default/palettes/_typewriters.sass
+++ b/assets/sass/themes/default/palettes/_typewriters.sass
@@ -0,0 +1,10 @@
+/* $titular-font: "UnifrakturCook-Bold" */
+$titular-font: "Cronicle"
+$journalistic-font: "Almendra-Regular"
+$socializing-font-size: 12pt
+/* $sys-message-font: "SyneMono-Regular" */
+$sys-message-font: "INSULA"
+$sys-message-font-size: 16pt
+$programming-font: "CaesarDressing-Regular"
+$alt-journalistic-font: "Satanic_Demon"
+$cryptic-font: "Drachenklaue"
--- a/assets/sass/themes/default/parts/_banner.sass
+++ b/assets/sass/themes/default/parts/_banner.sass
@@ -0,0 +1,80 @@
+@use '../palettes/animations' as motion
+@use '../palettes/typewriters' as typo
+@use '../palettes/stylebook' as book
+@use '../palettes/brushes' as hues
+
+@keyframes breathe_one
+    @include motion.dilating-expanding(15vw, 15vh)
+
+@media (orientation: portrait)
+    @keyframes breathe_two
+        @include motion.dilating-expanding(30vw, 30vh)
+
+#banner
+    text-align: center
+
+    #site_nav
+        background-color: inherit
+        font-size: clamp(10pt, 1vw, 16pt)
+
+    #site_title
+        font-size: clamp(12pt, 2vw, 64pt)
+
+@media (orientation: landscape)
+    #banner
+        padding: book.$topbottom-framing-pad 0
+        
+        & #site_logo
+            // width: 10vw
+            // height: 10vh
+            width: 15vw
+            height: 15vh
+
+@media (orientation: portrait)
+    #banner
+        & #site_logo
+            // width: 20vw
+            // height: 20vh
+            width: 30vw
+            height: 30vh
+
+
+        & #site_title
+            position: relative
+            bottom: 3vh
+
+@media screen
+    #banner #site_title
+        transition: letter-spacing 1s, margin-bottom 1s
+
+        &:hover
+            letter-spacing: 5pt
+
+    #banner #site_nav > a
+        font-weight: bold
+        font-family: typo.$sys-message-font
+        margin: 1vw
+        padding: 10px
+        border-radius: 10%
+
+        &:link
+            color: hues.$border-helper-base-color
+
+        &:active, &:visited
+            background-color: hues.$bg-helper-highlight-color
+            color: hues.$border-helper-base-color
+            box-shadow: inset book.$shared-shadow-depth hues.$bg-helper-lowlight-color
+
+    @media (orientation: landscape)
+        #banner #site_logo
+            &:hover, &:active
+                animation: breathe_one 4s infinite
+
+    @media (orientation: portrait)
+        #banner #site_logo
+            &:hover, &:active
+                animation: breathe_two 4s infinite
+
+        #banner #site_nav
+            margin-top: -3vh
+            margin-bottom: 5vh
--- a/assets/sass/themes/default/parts/_contact.sass
+++ b/assets/sass/themes/default/parts/_contact.sass
@@ -0,0 +1,156 @@
+@use 'sass:color'
+@use '../palettes/brushes' as hues
+
+#affil_wrap
+    display: flex
+    flex-direction: row
+    flex-wrap: nowrap
+
+    & > div:first-child
+        display: flex
+        flex-direction: column
+        flex-wrap: nowrap
+        flex-shrink: 2
+        padding: 2vh 1vw 2vh
+        margin-left: 1vw
+        margin-top: 5vw
+        margin-bottom: 12vw
+
+        & > a
+            display: flex
+            flex-direction: row
+            justify-content: center
+            align-items: center
+            width: 2vw
+            margin: 1vh 0.5vw
+            padding: 0.5vw
+            background-color: hues.$fill-icon
+            border: 1px solid #fff
+            border-radius: 50% 66%
+            text-decoration: none
+
+            &::after
+                //z-index: 1
+                display: block
+                position: absolute
+                width: 3.3vw
+                height: 3vw
+                border-radius: 50% 66%
+                background-image: url('/images/themes/default/textures/iridescence.png')
+                // background-color: #ccc
+                background-size: 100%
+                content: ''
+                // opacity: 0.8
+
+            & svg
+                width: 2vw
+                fill: color.change(hues.$border-base-notification, $saturation: 50%)
+
+    & > div:last-child 
+        // margin: 6vh auto
+        margin: 3vw auto 0 25%
+        padding: 2vw
+
+    #affil_info
+        display: flex
+        flex-direction: column
+        justify-content: center
+        // width: 50vw
+        // height: 33vh
+        // margin-left: 10%
+
+        & a
+            text-decoration: none
+
+        & a:has(article)
+            cursor: pointer
+            background-color: #F5F2E8
+            color: #45413C 
+            border: 1px solid hues.$bg-helper-highlight-color
+            width: 20vw
+            height: 33vw
+            font-size: clamp(9pt, 1vw, 32pt)
+            position: absolute
+            border-radius: 3%
+            box-shadow: 0 2px 2px hues.$bg-helper-highlight-color
+            // z-index: 1
+            transition: z-index 3s, box-shadow 3s, transform 2s
+            $card_siblings: 4
+            $step: calc(calc(-180 / $card_siblings) / 57.3)
+            $trans_step: $step + calc(calc(180 / ($card_siblings*2)) / 57.3)
+            transform: rotate(calc(calc(-180 / $card_siblings) / 57.3)*0.5+rad)
+
+
+            @for $i from 0 through $card_siblings - 1
+                &:nth-child(#{2*$i})
+                    transform: rotate(($i*$step)+rad)
+                    transition: transform 2s, z-index 3s
+
+                    &:hover
+                        transform: rotate(($i*0.75*$trans_step)+rad)
+                        z-index: 1
+
+                        &:active
+                            transform: translateY(-4vh)
+
+                &:not(:first-child):nth-child(#{2*$i+1})
+                    transform: rotate(($i*1.5*$step)+rad)
+                    transition: transform 2s, z-index 3s
+
+                    &:hover
+                        transform: rotate(($i*1.25*$trans_step)+rad)
+                        z-index: 1
+
+                        &:active
+                            transform: translateY(-4vh)
+
+
+            // &:nth-child(2n)
+            //     transform: rotate(-5deg)
+            //     transition: transform 2s, z-index 3s
+
+            //     &:hover
+            //         transform: rotate(-2deg)
+            //         z-index: 1
+
+            // &:not(:first-child):nth-child(2n+1)
+            //     transform: rotate(-15deg)
+            //     transition: transform 2s, z-index 3s
+
+            //     &:hover
+            //         transform: rotate(-12deg)
+            //         z-index: 1
+
+            &:hover
+                transform: rotate(calc(calc(-180 / $card_siblings) / 57.3)*0.25+rad)
+                box-shadow: 0 4px 8px hues.$bg-helper-highlight-color
+                z-index: 1
+
+                &:active
+                    transform: translateY(-4vh)
+
+            & span > p
+                margin: 0 auto
+                text-align: center
+                word-break: break-all
+                max-width: 66%
+
+                &.contact_datum
+                    background-color: #45413C
+                    color: #F5F2E8
+
+            &::after
+                position: absolute
+                background-image: url('/images/themes/default/textures/embossed.png')
+                background-size: 100%
+                width: 100%
+                opacity: 0.9
+                height: 101%
+                top: 0
+                content: ''
+
+        & > img
+            filter: grayscale(100%) contrast(1.8)
+            margin: 0 auto
+            width: 50%
+            transform: rotate(-60deg)
--- a/assets/sass/themes/default/parts/_intro.sass
+++ b/assets/sass/themes/default/parts/_intro.sass
@@ -0,0 +1,27 @@
+@use '../palettes/brushes' as hues
+
+#intro
+    margin-top: 2em
+    padding: 3em 1% 2em
+    // max-width: 33vw
+    font-size: clamp(12pt, 1vw, 24pt)
+    margin: 0 auto
+
+    & #footnotes
+        max-height: 200px
+        overflow: scroll
+        background-color: hues.$fg-helper-lowlight-color
+        color: hues.$bg-helper-base-color
+        border-radius: 5% 3%
+        border: 4px inset hues.$border-helper-base-color
+
+    & span a, h1, h2, h3, h4, h5, h6
+        color: hues.$border-base-notification
+
+@media (orientation: landscape)
+    #intro
+        max-width: 35vw
+
+@media (orientation: portrait)
+    #intro
+        max-width: 75vw
--- a/assets/sass/themes/default/parts/_keys.sass
+++ b/assets/sass/themes/default/parts/_keys.sass
@@ -0,0 +1,78 @@
+@use '../palettes/brushes' as hues
+@use '../palettes/stylebook' as book
+
+@keyframes fall
+    0%
+        opacity: 0.0
+        transform: rotate(-60deg) scale(2)
+
+    25%
+        opacity: 0.3
+        transform: rotate(-36deg) scale(1.7)
+    
+    50%
+        opacity: 0.6
+        transform: rotate(-12deg) scale(1.3)
+
+    75%
+        opacity: 0.9
+        transform: rotate(0deg) scale(1)
+            
+    100%
+        opacity: 1.0
+        transform: rotate(0deg) scale(1)
+
+@keyframes fadingin
+    0%
+        opacity: 0.0
+        
+    100%
+        opacity: 1.0
+        
+
+#gpg_link
+    text-align: center
+    margin: 0 auto
+    padding: 5%
+    border-radius: 2%
+
+    & #pubkey_link h1
+        font-size: clamp(16pt, 5vw, 45pt)
+        font-weight: bold
+
+    & #pubkey_content
+        cursor: pointer
+        word-break: break-word
+        width: 45%
+        padding: 3em 5em 0
+        margin: 0 auto
+        font-size: clamp(10pt, 2.5vw, 14pt)
+        font-weight: bold
+        max-height: 33vh
+        overflow: scroll
+        scrollbar-width: none
+        display: none
+
+        &:hover
+            display: block
+
+    & a
+        color: hues.$border-base-notification
+
+    & image
+        box-shadow: 5px 10px 18px hues.$bg-helper-base-color
+ 
+    & svg
+        cursor: pointer
+        background-color: hues.$fg-helper-base-color
+        border-radius: 5%
+        animation: fall 0.5s linear
+
+        & g
+            fill: hues.$border-base-notification
+
+    & svg:hover + span > #pubkey_content
+        display: block
+        animation: fadingin 5s ease
+
+/* @media (orientation: landscape) */
--- a/assets/sass/themes/default/parts/_messages.sass
+++ b/assets/sass/themes/default/parts/_messages.sass
@@ -0,0 +1,79 @@
+@use '../palettes/brushes' as hues
+@use '../palettes/typewriters' as typo
+@use '../palettes/stylebook' as book
+@use '../palettes/animations' as motion
+
+@media screen
+    .error_message
+        font-size: clamp(9pt, 2.25vw, typo.$sys-message-font-size)
+        font-family: typo.$sys-message-font
+
+    .social_message
+        font-size: clamp(10pt, 2.25vw, typo.$socializing-font-size)
+        font-family: typo.$journalistic-font
+
+    .message
+        background-color: hues.$bg-base-notification
+        color: hues.$fg-base-notification
+        border-width: book.$message-border-width
+
+        &.error_message
+            @include book.set-corners
+            background-color: hues.$bg-base-notification
+            border: 5px solid hues.$border-base-notification
+
+        body#err_body &.error_message
+            @include book.set-corners(5px, 5px, 5px, 5px)
+            padding: 3vw
+            max-width: 33vw
+            margin: 0 auto
+            position: relative
+            top: 30vh
+            transform: rotate(5deg)
+            text-overflow: ellipsis
+            overflow-y: hidden
+
+            &::before
+                content: "1 \a 2 \a 3 \a 4 \a 5 \a 6 \a 7 \a 8 \a 9 \a . \a . \a ."
+                font-family: typo.$sys-message-font
+                font-size: clamp(9pt, 2.25vw, typo.$sys-message-font-size)
+                font-weight: bold
+                color: hues.$border-base-notification
+                white-space: pre
+                position: absolute
+                left: 1vw
+                top: 3vw
+
+            & > span
+                text-overflow: ellipsis
+                border-right: 5px solid hues.$border-base-notification
+                animation: blink .75s step-end infinite
+
+        body#default_body > &.error_message
+            @include book.make-notif
+
+        &.social_message
+            @include book.set-corners(50%, 70%, 10%, 30%)
+
+    body#err_body .error_code
+        font-size: clamp(16pt, 2.5vw, 24pt)
+        font-style: italic
+        width: 125px
+        height: 125px
+        color: hues.$border-helper-base-color
+        border: 5px double hues.$border-helper-base-color
+        border-radius: 50% 50% / 33% 50% 50%
+        position: absolute
+        right: 25vw
+        top: 25vh
+        z-index: 2
+        text-align: center
+        filter: blur(0.05vw)
+        box-shadow: 2px 2px 5px hues.$border-helper-base-color
+
+        & > span
+            overflow-wrap: visible
+            text-shadow: 2px 2px 5px hues.$border-helper-base-color
+
+@keyframes blink
+    @include motion.blinking-border(hues.$border-base-notification)
--- 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)