frame9-jekyll-theme 1.0.0

data/_sass/block/footer.sass

@@ -0,0 +1,2 @@
+.footer
+    columns: 15em auto

data/_sass/block/gallery.sass

@@ -0,0 +1,14 @@
+
+
+.gallery
+
+    --gap: calc( 2 * var(--x))
+    margin-top: var(--gap)
+    margin-bottom: var(--gap)
+    
+    display: grid
+
+    grid-gap: calc( 0.5 * var(--x) )
+
+    grid-template-columns: repeat( 3, 1fr )
+

data/_sass/block/img-wrap.sass

@@ -0,0 +1,81 @@
+
+.img-wrap
+    display: flex
+    justify-content: center
+    position: relative
+    object-fit: cover
+
+    overflow: hidden
+    max-width: 100%
+
+    img
+        max-width: 100vw
+        @include media-query('md')
+            max-width: 100%
+
+    a > *
+        max-width: 80% 
+
+
+
+
+
+.gallery .img-wrap
+
+
+    margin: 0
+    width: 100%
+    height: 0
+    padding-top: 100%
+    img, a
+        position: absolute
+        top: 0em
+        height: 100%
+        width: auto
+
+
+.layout:page .img-small
+    width: 100%
+
+@include media-query('md')
+    .layout\:post .img-wrap
+        width: 33%
+
+    .img-wrap.float-left
+        margin-right: var(--x)
+        margin-bottom: var(--x)
+    .img-wrap.float-right
+        margin-left: var(--x)
+        margin-bottom: var(--x)
+
+
+.img-wrap[openable] a
+    transition: transform .5s ease-in-out .2s, opacity .5s ease-in-out .2s
+    color: var(--scribe-white) !important
+    &:hover, &:focus
+        color: var(--scribe-white) !important
+        text-decoration: none
+    display: flex
+    width: 100%
+    background-color: #000a
+    opacity: 0.0
+    div
+        margin: auto
+
+.img-wrap[viewer], 
+.img-wrap[openable]
+    transform: scale(1)
+    transition: transform .2s .05s
+    
+    img
+        transform: scale(1)
+        transition: transform .5s .05s
+
+.img-wrap[viewer]:hover:not([viewer="open"]),
+.img-wrap[openable]:hover:not([viewer="open"])
+    transform: scale(1.05)
+    img
+        transform: scale(1.1)
+    a
+        opacity: 1.0
+        transform: scale(1.02)

data/_sass/block/logo.sass

@@ -0,0 +1,20 @@
+.logo
+    display: flex
+    justify-content: center
+    
+
+    img
+        max-width: 50vw
+        position: relative
+        transform: scale(1)
+        transition: transform .2s 0s
+
+    img:hover
+        transform: scale(1.04)
+
+    @include media-query('md')
+        width: fit-content
+        display: block
+        img
+            max-width: 20vw
+            // margin-bottom: 2%

data/_sass/block/menu.sass

@@ -0,0 +1,27 @@
+.menu
+    display: block
+    position: relative
+    width: 100%
+    text-align: center
+    @include media-query('md')
+        position: absolute
+        width: auto
+        text-align: right
+        bottom: unset
+        top: var(--x)
+        right: calc( -0.5 * var(--x) )
+    a
+        display: block
+        text-decoration: none
+        font-weight: bold
+        transition: transform 50ms
+        transform-origin: 50% 80%
+    
+    a[active]
+        color: var(--scribe-main-b)
+        pointer-events: none
+
+    a:hover, a:focus
+        transform: scaleY(1.2)
+
+            

data/_sass/block/root-layout.sass

@@ -0,0 +1,43 @@
+
+
+
+
+.root-layout
+    display: grid
+    width: 100%
+    
+    grid-template-columns: 1fr minmax( 10em, 60em) 1fr
+    
+    grid-template-rows: minmax( 5vh, auto) minmax(10vh, auto)
+    grid-auto-rows: minmax( 1em, auto ) 
+
+    grid-gap: var(--x)
+
+    & > *
+        grid-column: 2 / 3
+
+    .l-banner
+
+        grid-column: 1 / 4
+        grid-row: 1 / 3
+                
+
+    .l-header
+        grid-row: 1 / 2
+        position: relative
+
+    .l-main
+        grid-row: 2 / 4
+
+    .l-menu
+        grid-row: 1 / 2
+        position: relative
+
+
+    .l-content
+        padding-bottom: get-size('900')
+
+    .l-logo
+        margin-left: calc( -1 * var(--x) )
+
+    

data/_sass/block/sibling-nav.sass

@@ -0,0 +1,30 @@
+
+.sibling-nav
+    display: grid
+    grid-auto-columns: 1fr
+    gap: 0
+
+    margin-bottom: calc( var(--x) * -1 )
+    padding-top: var(--x)
+
+.sibling-btn
+    border-top: solid 1px var(--scribe-mute)
+    display: block
+    width: 100%
+    background-color: var(--fill-main-a)
+    padding: 1em
+
+.sibling-nav > div + div .sibling-btn
+    border-left: solid 1px var(--scribe-mute)
+
+.sibling-btn:hover
+    background-color: var(--fill-mute)
+    text-decoration: none !important
+
+.sibling-btn:hover > *:not(label)
+    text-decoration: underline
+
+.sibling-btn label
+    display: block
+    line-height: 1em
+    color: var(--scribe-mute)

data/_sass/composition/action.sass

@@ -0,0 +1,35 @@
+a
+    color: var(--scribe-action)
+    display: inline-block
+    transform-origin: 50% 90%
+    transition: transform 10ms
+    @include media-query('md')
+        text-decoration: none
+
+a.action
+    text-decoration: none
+    text-align: center
+    font-family: 'Augusta', serif
+    font-size: get-size('700')
+    font-weight: bold
+    width: 100%
+    @include media-query('md')
+        font-size: get-size('900')
+
+
+a:not(.menu a):hover, a:not(.menu a):focus
+    text-decoration: underline
+    color: var(--scribe-action-hover)
+
+a.logo, a.logo:hover, a.logo:focus
+    transform: none !important
+    
+
+.btn
+    padding: .2em .5em
+    border-radius: .5em
+    letter-spacing: 1px
+
+.btn-border
+    border: currentColor 2px solid
+    

data/_sass/composition/code.scss

@@ -0,0 +1,20 @@
+.highlighter-rouge > *, figure.highlight {
+  padding: .5em;
+  border-radius: .5em;
+}
+
+.highlighter-rouge, figure.highlight {
+  margin: 1em 0;
+  overflow: auto;
+}
+
+code {
+  background: var(--fill-code);
+  color: var(--scribe-code);
+  padding: 0 .2em;
+  border-radius: .3em;
+}
+
+pre {
+  white-space: pre-wrap;
+}

data/_sass/composition/normalize.sass

@@ -0,0 +1,12 @@
+
+    
+\*
+    margin: 0
+    padding: 0
+    box-sizing: border-box
+
+ul
+    list-style-type: none
+
+ol
+    list-style-position: inside

data/_sass/composition/size.sass

@@ -0,0 +1,5 @@
+\:root
+    --x: #{get-size('300')}
+
+    @include media-query('md')
+        --x: #{get-size('900')}

data/_sass/composition/table.sass

@@ -0,0 +1,13 @@
+
+
+table
+    width: 100%
+    border-collapse: collapse
+td
+    border-bottom: var(--scribe-mute) 1px solid
+    padding: 5px
+
+td:last-child
+    text-align: right
+td:first-child
+    text-align: left

data/_sass/composition/text.sass

@@ -0,0 +1,6 @@
+
+* + h1, 
+* + h2, 
+* + h3,
+* + .action
+    margin-top: var(--x)

data/_sass/composition/theme.sass

@@ -0,0 +1,8 @@
+\:root
+    @each $var, $color in $light-theme
+        --#{$var}: #{$color}
+
+@media (prefers-color-scheme: dark)
+    \:root
+        @each $var, $color in $dark-theme
+            --#{$var}: #{$color}

data/_sass/exception/img-wrap.sass

@@ -0,0 +1,34 @@
+
+
+
+[viewer='open'].img-wrap
+    width: 100vw
+    height: 100vh
+
+    background: #000a
+
+    display: block
+
+    z-index: 100
+    position: fixed
+    top: 0
+    left: 0
+
+    overflow: scroll
+
+    img
+        margin: 0
+        margin-top: 2em
+        width: auto
+        max-height: 100vw
+
+@include media-query('md')
+
+
+    [viewer='open'].img-wrap
+        display: flex
+        justify-content: space-around
+
+        img
+            margin: 0 auto
+            height: 100vh

data/_sass/frame9-jekyll-theme.sass

@@ -0,0 +1,43 @@
+
+
+// Colors
+@import theme/colors
+
+
+// Gorko and gorko config
+@import gorko-config
+@import gorko/gorko
+
+// Theme
+@import theme/font
+@import theme/monokai
+
+
+// CUBE, Composition Utility Block Exception
+// Composition
+@import composition/theme
+@import composition/size
+@import composition/normalize
+@import composition/action
+@import composition/text
+@import composition/table
+@import composition/code
+    
+// Utility
+@import utility/bleed
+@import utility/box
+@import utility/shadow
+@import utility/columns
+
+// Block
+@import block/root-layout
+@import block/banner
+@import block/gallery
+@import block/menu
+@import block/logo
+@import block/footer
+@import block/img-wrap
+@import block/sibling-nav
+    
+// Exception
+@import exception/img-wrap

data/_sass/gorko-config.scss

@@ -0,0 +1,79 @@
+@use "sass:map";
+
+/// BASE SIZE
+/// All calculations are based on this. It’s recommended that
+/// you keep it at 1rem because that is the root font size. You
+/// can set it to whatever you like and whatever unit you like.
+///
+$gorko-base-size: 1rem;
+
+/// SIZE SCALE
+/// This is a Major Third scale that powers all the utilities that
+/// it is relevant for (font-size, margin, padding). All items are
+/// calcuated off the base size, so change that and cascade across
+/// your whole project.
+///
+$gorko-size-scale: (
+  '300': $gorko-base-size * 0.8,
+  '400': $gorko-base-size,
+  '500': $gorko-base-size * 1.25,
+  '600': $gorko-base-size * 1.6,
+  '700': $gorko-base-size * 2,
+  '900': $gorko-base-size * 3
+);
+
+$justify-align-content: (
+    'start': 'start',
+    'end': 'end',
+    'center': 'center',
+    'normal': 'normal',
+    'between': 'space-between',
+    'around': 'space-around',
+    'evenly': 'space-evenly',
+    'stretch': 'stretch'
+);
+
+
+$gorko-colors: $colors;
+
+/// CORE CONFIG
+/// This powers everything from utility class generation to breakpoints
+/// to enabling/disabling pre-built components/utilities.
+///
+$gorko-config: (
+  'fill': (
+    'items': $fill-colors,
+    'output': 'standard',
+    'property': 'background'
+  ),
+  'scribe': (
+    'items': $scribe-colors,
+    'output': 'standard',
+    'property': 'color'
+  ),
+  'x': (
+    'items': $gorko-size-scale,
+    'output': 'responsive',
+    'property': '--x'
+  ),
+  'text-align': (
+    'items': (
+      'right': 'right',
+      'left': 'left',
+      'center': 'center'
+    ),
+    'output': 'standard',
+    'property': 'text-align'
+  ),
+  'float': (
+    'items': (
+      'left': 'left',
+      'right': 'right'
+    ),
+    'output': 'responsive',
+    'property': 'float'
+  ),
+  'breakpoints': (
+    'md': '(min-width: 48em)'
+  )
+);