diff options
| -rw-r--r-- | .gitignore | 2 | ||||
| -rw-r--r-- | assets/css/_basics.scss | 85 | ||||
| -rw-r--r-- | assets/css/_vars.scss | 20 | ||||
| -rw-r--r-- | assets/css/components/_footer.scss | 6 | ||||
| -rw-r--r-- | assets/css/components/_hero.scss | 45 | ||||
| -rw-r--r-- | assets/css/components/_nav.scss | 71 | ||||
| -rw-r--r-- | assets/css/components/_page.scss | 3 | ||||
| -rw-r--r-- | assets/css/layouts/_container.scss | 29 | ||||
| -rw-r--r-- | assets/css/layouts/_site.scss | 46 | ||||
| -rw-r--r-- | assets/css/scopes/_code.scss | 27 | ||||
| -rw-r--r-- | assets/css/scopes/_page.scss | 25 | ||||
| -rw-r--r-- | assets/css/style.scss | 11 | ||||
| -rw-r--r-- | assets/favicon/favicon.svg | 75 | ||||
| -rw-r--r-- | content/favicon.ico | bin | 7406 -> 15086 bytes | |||
| -rw-r--r-- | templates/layouts/index.html | 22 | ||||
| -rw-r--r-- | templates/layouts/page.html | 11 | 
16 files changed, 267 insertions, 211 deletions
| @@ -1,2 +1,4 @@ | |||
| 1 | assets/favicon/*.png | ||
| 2 | assets/favicon/*.ico | ||
| 1 | node_modules | 3 | node_modules | 
| 2 | output | 4 | output | 
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index 1cd5547..740b293 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss  | |||
| @@ -1,28 +1,27 @@ | |||
| 1 | @font-face { | 1 | @font-face { | 
| 2 | font-family: 'IBM Plex Sans'; | 2 | font-family: 'IBM Plex Sans'; | 
| 3 | font-style: normal; | 3 | font-style: normal; | 
| 4 | font-weight: normal; | 4 | font-weight: normal; | 
| 5 | src: //local('IBM Plex Sans'), | 5 | src: url('/IBMPlexSans-Regular.woff2') format('woff2'); | 
| 6 | url('/IBMPlexSans-Regular.woff2') format('woff2'); | ||
| 7 | } | 6 | } | 
| 8 | 7 | ||
| 9 | @font-face { | 8 | @font-face { | 
| 10 | font-family: 'IBM Plex Sans'; | 9 | font-family: 'IBM Plex Sans'; | 
| 11 | font-style: normal; | 10 | font-style: normal; | 
| 12 | font-weight: bold; | 11 | font-weight: bold; | 
| 13 | src: url('/IBMPlexSans-Bold.woff2') format('woff2'); | 12 | src: url('/IBMPlexSans-Bold.woff2') format('woff2'); | 
| 14 | } | 13 | } | 
| 15 | 14 | ||
| 16 | @font-face { | 15 | @font-face { | 
| 17 | font-family: 'Garet Variable'; | 16 | font-family: 'Garet Variable'; | 
| 18 | font-style: normal; | 17 | font-style: normal; | 
| 19 | font-weight: 50 950; | 18 | font-weight: 50 950; | 
| 20 | src: url('/GaretVariable.woff2') format('woff2-variations'); | 19 | src: url('/GaretVariable.woff2') format('woff2-variations'); | 
| 21 | } | 20 | } | 
| 22 | 21 | ||
| 23 | ::selection { | 22 | ::selection { | 
| 24 | background-color: var(--select--bg); | 23 | background-color: var(--select--bg); | 
| 25 | color: var(--select--fg); | 24 | color: var(--select--fg); | 
| 26 | } | 25 | } | 
| 27 | 26 | ||
| 28 | img::selection { | 27 | img::selection { | 
| @@ -37,14 +36,14 @@ code { | |||
| 37 | 36 | ||
| 38 | html { | 37 | html { | 
| 39 | background-color: prop(--colors --bg); | 38 | background-color: prop(--colors --bg); | 
| 40 | color: prop(--colors --fg); | 39 | color: prop(--colors --fg); | 
| 41 | font-family: $font-fam--text; | 40 | font-family: $font-fam--text; | 
| 42 | font-size: px-to-em($font-size, 16px); | 41 | font-size: px-to-em($font-size, 16px); | 
| 43 | line-height: $line-height; | 42 | line-height: $line-height; | 
| 44 | } | 43 | } | 
| 45 | 44 | ||
| 46 | body { | 45 | body { | 
| 47 | margin: 0; | 46 | margin: 0; | 
| 48 | padding: 0; | 47 | padding: 0; | 
| 49 | } | 48 | } | 
| 50 | 49 | ||
| @@ -58,7 +57,7 @@ code { | |||
| 58 | } | 57 | } | 
| 59 | 58 | ||
| 60 | pre { | 59 | pre { | 
| 61 | margin: ($line-height * 1em) 0 0; | 60 | margin: ($line-height * 1em) 0 0; | 
| 62 | overflow-x: auto; | 61 | overflow-x: auto; | 
| 63 | 62 | ||
| 64 | code { | 63 | code { | 
| @@ -67,27 +66,27 @@ pre { | |||
| 67 | } | 66 | } | 
| 68 | 67 | ||
| 69 | strong { | 68 | strong { | 
| 70 | color: prop(--colors --fg-lo); | 69 | color: prop(--colors --fg-lo); | 
| 71 | font-weight: bold; | 70 | font-weight: bold; | 
| 72 | } | 71 | } | 
| 73 | 72 | ||
| 74 | ul, | 73 | ul, | 
| 75 | ol { | 74 | ol { | 
| 76 | margin: ($line-height * 1em) 0 0; | 75 | margin: ($line-height * 1em) 0 0; | 
| 77 | padding: 0; | 76 | padding: 0; | 
| 78 | list-style: none; | 77 | list-style: none; | 
| 79 | } | 78 | } | 
| 80 | 79 | ||
| 81 | li { | 80 | li { | 
| 82 | position: relative; | 81 | position: relative; | 
| 83 | padding-left: $subcontent--indent; | 82 | padding-left: $subcontent--indent; | 
| 84 | 83 | ||
| 85 | &::before { | 84 | &::before { | 
| 86 | display: inline-block; | 85 | display: inline-block; | 
| 87 | position: absolute; | 86 | position: absolute; | 
| 88 | width: $subcontent--indent; | 87 | width: $subcontent--indent; | 
| 89 | margin-left: -1 * $subcontent--indent; | 88 | margin-left: -1 * $subcontent--indent; | 
| 90 | color: prop(--colors --fg-hi); | 89 | color: prop(--colors --fg-hi); | 
| 91 | font-family: $font-fam--mono; | 90 | font-family: $font-fam--mono; | 
| 92 | } | 91 | } | 
| 93 | } | 92 | } | 
| @@ -113,7 +112,7 @@ ul ul { | |||
| 113 | } | 112 | } | 
| 114 | 113 | ||
| 115 | dl { | 114 | dl { | 
| 116 | margin: ($line-height * 1em) 0 0; | 115 | margin: ($line-height * 1em) 0 0; | 
| 117 | padding: 0; | 116 | padding: 0; | 
| 118 | } | 117 | } | 
| 119 | 118 | ||
| @@ -123,12 +122,12 @@ dd { | |||
| 123 | } | 122 | } | 
| 124 | 123 | ||
| 125 | dt { | 124 | dt { | 
| 126 | color: prop(--colors --fg-lo); | 125 | color: prop(--colors --fg-lo); | 
| 127 | font-weight: bold; | 126 | font-weight: bold; | 
| 128 | 127 | ||
| 129 | &::after { | 128 | &::after { | 
| 130 | content: ':'; | 129 | content: ':'; | 
| 131 | color: prop(--colors --fg); | 130 | color: prop(--colors --fg); | 
| 132 | font-weight: normal; | 131 | font-weight: normal; | 
| 133 | } | 132 | } | 
| 134 | } | 133 | } | 
| @@ -143,11 +142,11 @@ h3, | |||
| 143 | h4, | 142 | h4, | 
| 144 | h5, | 143 | h5, | 
| 145 | h6 { | 144 | h6 { | 
| 146 | margin: ($line-height * 2em) 0 0; | 145 | margin: ($line-height * 2em) 0 0; | 
| 147 | font-family: $font-fam--large; | 146 | font-family: $font-fam--large; | 
| 148 | font-size: 1em; | 147 | font-size: 1em; | 
| 149 | font-weight: 600; | 148 | font-weight: 600; | 
| 150 | line-height: 1.2; | 149 | line-height: 1.2; | 
| 151 | font-feature-settings: 'ss02' 1; | 150 | font-feature-settings: 'ss02' 1; | 
| 152 | 151 | ||
| 153 | + h1, | 152 | + h1, | 
| @@ -170,22 +169,22 @@ h1 { | |||
| 170 | } | 169 | } | 
| 171 | 170 | ||
| 172 | p { | 171 | p { | 
| 173 | margin: ($line-height * 1em) 0 0; | 172 | margin: ($line-height * 1em) 0 0; | 
| 174 | hyphens: auto; | 173 | hyphens: auto; | 
| 175 | } | 174 | } | 
| 176 | 175 | ||
| 177 | :link, | 176 | :link, | 
| 178 | :visited { | 177 | :visited { | 
| 179 | position: relative; | 178 | position: relative; | 
| 180 | z-index: 1; | 179 | z-index: 1; | 
| 181 | margin: 0 -.3em; | 180 | margin: 0 -.3em; | 
| 182 | padding: .2em .3em; | 181 | padding: .2em .3em; | 
| 183 | color: var(--link--idle--fg); | 182 | color: var(--link--idle--fg); | 
| 184 | 183 | ||
| 185 | &:hover { | 184 | &:hover { | 
| 186 | background-color: var(--link--hover--bg); | 185 | background-color: var(--link--hover--bg); | 
| 187 | color: var(--link--hover--fg); | 186 | color: var(--link--hover--fg); | 
| 188 | text-decoration: none; | 187 | text-decoration: none; | 
| 189 | } | 188 | } | 
| 190 | 189 | ||
| 191 | strong { | 190 | strong { | 
| @@ -194,15 +193,15 @@ p { | |||
| 194 | } | 193 | } | 
| 195 | 194 | ||
| 196 | hr { | 195 | hr { | 
| 197 | height: 1px; | 196 | height: 1px; | 
| 198 | margin: ($line-height * 1em) 0; | 197 | margin: ($line-height * 1em) 0; | 
| 199 | border: 0; | 198 | border: 0; | 
| 200 | background-color: prop(--colors --obj); | 199 | background-color: prop(--colors --obj); | 
| 201 | } | 200 | } | 
| 202 | 201 | ||
| 203 | blockquote, | 202 | blockquote, | 
| 204 | pre { | 203 | pre { | 
| 205 | margin: ($line-height * 1em) 0 0 1px; | 204 | margin: ($line-height * 1em) 0 0 1px; | 
| 206 | padding-left: calc(#{$subcontent--indent} - 3px); | 205 | padding-left: calc(#{$subcontent--indent} - 3px); | 
| 207 | border-left: 2px solid prop(--colors --obj); | 206 | border-left: 2px solid prop(--colors --obj); | 
| 208 | } | 207 | } | 
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index ae8a7a8..3461b81 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss  | |||
| @@ -13,12 +13,12 @@ $unit-intervals: ( | |||
| 13 | '': 0 | 13 | '': 0 | 
| 14 | ); | 14 | ); | 
| 15 | 15 | ||
| 16 | $font-fam--text: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; | 16 | $font-fam--text: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; | 
| 17 | $font-fam--large: 'Garet Variable', $font-fam--text; | 17 | $font-fam--large: 'Garet Variable', $font-fam--text; | 
| 18 | $font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; | 18 | $font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; | 
| 19 | $font-size: 16px; | 19 | $font-size: 16px; | 
| 20 | $line-height: 1.7; | 20 | $line-height: 1.7; | 
| 21 | $content--width: 56rem; | 21 | $content--width: 56rem; | 
| 22 | $subcontent--indent: 2em; | 22 | $subcontent--indent: 2em; | 
| 23 | 23 | ||
| 24 | $gray0: hsl(220, 0%, 7%); | 24 | $gray0: hsl(220, 0%, 7%); | 
| @@ -43,6 +43,14 @@ $gray5: hsl(220, 0%, 100%); | |||
| 43 | ) | 43 | ) | 
| 44 | )); | 44 | )); | 
| 45 | 45 | ||
| 46 | @each $breakpoint in map-keys($breakpoints) { | ||
| 47 | @include media('<=#{$breakpoint}') { | ||
| 48 | @include store(( | ||
| 49 | --colors: () | ||
| 50 | ), $breakpoint); | ||
| 51 | } | ||
| 52 | } | ||
| 53 | |||
| 46 | :root { | 54 | :root { | 
| 47 | --heading--fg: var(--colors--fg-lo); | 55 | --heading--fg: var(--colors--fg-lo); | 
| 48 | 56 | ||
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss index 8fcbc98..db30fcd 100644 --- a/assets/css/components/_footer.scss +++ b/assets/css/components/_footer.scss  | |||
| @@ -9,9 +9,9 @@ | |||
| 9 | )); | 9 | )); | 
| 10 | 10 | ||
| 11 | @include component(namespace()) { | 11 | @include component(namespace()) { | 
| 12 | padding-top: prop(--dims --pad-y); | 12 | padding-top: prop(--dims --pad-y); | 
| 13 | padding-bottom: prop(--dims --pad-y); | 13 | padding-bottom: prop(--dims --pad-y); | 
| 14 | color: prop(--colors --fg); | 14 | color: prop(--colors --fg); | 
| 15 | text-align: right; | 15 | text-align: right; | 
| 16 | } | 16 | } | 
| 17 | } | 17 | } | 
diff --git a/assets/css/components/_hero.scss b/assets/css/components/_hero.scss index 6c497a1..3d8890e 100644 --- a/assets/css/components/_hero.scss +++ b/assets/css/components/_hero.scss  | |||
| @@ -1,6 +1,7 @@ | |||
| 1 | @include namespace('hero') { | 1 | @include namespace('hero') { | 
| 2 | @include store(( | 2 | @include store(( | 
| 3 | --colors: ( | 3 | --colors: ( | 
| 4 | --emph-fg: prop(--colors --accent, $global: true), | ||
| 4 | --back-fg: prop(--colors --bg-hi, $global: true) | 5 | --back-fg: prop(--colors --bg-hi, $global: true) | 
| 5 | ) | 6 | ) | 
| 6 | )); | 7 | )); | 
| @@ -8,42 +9,44 @@ | |||
| 8 | @include component(namespace()) { | 9 | @include component(namespace()) { | 
| 9 | display: flex; | 10 | display: flex; | 
| 10 | position: relative; | 11 | position: relative; | 
| 11 | flex-direction: column; | ||
| 12 | align-items: center; | 12 | align-items: center; | 
| 13 | justify-content: center; | 13 | justify-content: center; | 
| 14 | text-align: center; | 14 | text-align: center; | 
| 15 | 15 | ||
| 16 | @include element('title', 'backtitle') { | 16 | @include element('title') { | 
| 17 | margin: 0 auto; | 17 | margin-top: 0; | 
| 18 | font-family: $font-fam--large; | 18 | font-family: $font-fam--large; | 
| 19 | text-transform: none; | 19 | text-transform: none; | 
| 20 | } | ||
| 21 | 20 | ||
| 22 | @include element('emph') { | 21 | @include modifier('front') { | 
| 23 | color: prop(--colors --accent, $global: true); | 22 | max-width: 7em; | 
| 24 | font-weight: 500; | 23 | font-size: 2.5rem; | 
| 25 | } | 24 | font-weight: 200; | 
| 25 | } | ||
| 26 | 26 | ||
| 27 | @include element('title') { | 27 | @include modifier('back') { | 
| 28 | max-width: 11em; | 28 | position: absolute; | 
| 29 | font-weight: 200; | 29 | z-index: -10; | 
| 30 | transform: translateY(-.08em); | ||
| 31 | color: prop(--colors --back-fg); | ||
| 32 | } | ||
| 30 | } | 33 | } | 
| 31 | 34 | ||
| 32 | @include element('backtitle') { | 35 | @include element('emph') { | 
| 33 | position: absolute; | 36 | color: prop(--colors --emph-fg); | 
| 34 | z-index: -10; | 37 | font-weight: 500; | 
| 35 | transform: translateY(-.08em); | ||
| 36 | color: prop(--colors --back-fg); | ||
| 37 | } | 38 | } | 
| 38 | 39 | ||
| 39 | @include iro-responsive-env(('xs', 'sm', 'md')) { | 40 | @include iro-responsive-env(('xs', 'sm', 'md')) { | 
| 40 | @include element('title') { | 41 | @include element('title') { | 
| 41 | padding: iro-responsive-set((7rem, 7rem, 10rem)) 0; | 42 | @include modifier('front') { | 
| 42 | font-size: iro-responsive-set((1.8rem, 2.8rem, 3.3rem)); | 43 | padding: iro-responsive-set((7rem, 7rem, 10rem)) 0; | 
| 43 | } | 44 | font-size: iro-responsive-set((2.2rem, 3rem, 3.5rem)); | 
| 45 | } | ||
| 44 | 46 | ||
| 45 | @include element('backtitle') { | 47 | @include modifier('back') { | 
| 46 | font-size: iro-responsive-set((12rem, 14rem, 16rem)); | 48 | font-size: iro-responsive-set((12rem, 14rem, 16rem)); | 
| 49 | } | ||
| 47 | } | 50 | } | 
| 48 | } | 51 | } | 
| 49 | } | 52 | } | 
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss index 2472706..8fc4564 100644 --- a/assets/css/components/_nav.scss +++ b/assets/css/components/_nav.scss  | |||
| @@ -2,13 +2,10 @@ | |||
| 2 | @include store(( | 2 | @include store(( | 
| 3 | --dims: ( | 3 | --dims: ( | 
| 4 | --font-size: 15px, | 4 | --font-size: 15px, | 
| 5 | --pad-y: 1em, | 5 | --pad-y: 1em, | 
| 6 | --pad-y-sm: .5em, | ||
| 7 | --item: ( | 6 | --item: ( | 
| 8 | --pad-x: 1em, | 7 | --pad-x: 1em, | 
| 9 | --pad-x-sm: .75em, | ||
| 10 | --pad-y: 1em, | 8 | --pad-y: 1em, | 
| 11 | --pad-y-sm: .75em, | ||
| 12 | ), | 9 | ), | 
| 13 | ), | 10 | ), | 
| 14 | --colors: ( | 11 | --colors: ( | 
| @@ -34,69 +31,63 @@ | |||
| 34 | ) | 31 | ) | 
| 35 | )); | 32 | )); | 
| 36 | 33 | ||
| 34 | @include store(( | ||
| 35 | --dims: ( | ||
| 36 | --pad-y: .5em, | ||
| 37 | --item: ( | ||
| 38 | --pad-x: .75em, | ||
| 39 | --pad-y: .75em, | ||
| 40 | ), | ||
| 41 | ) | ||
| 42 | ), 'sm'); | ||
| 43 | |||
| 37 | @include component(namespace()) { | 44 | @include component(namespace()) { | 
| 38 | display: flex; | 45 | display: flex; | 
| 39 | align-items: center; | 46 | align-items: center; | 
| 40 | padding: prop(--dims --pad-y) 0; | 47 | padding: prop(--dims --pad-y) 0; | 
| 41 | font-size: prop(--dims --font-size); | 48 | font-size: prop(--dims --font-size); | 
| 42 | 49 | ||
| 43 | @include element('logo') { | 50 | @include element('logo') { | 
| 44 | display: inline-block; | 51 | display: inline-block; | 
| 45 | margin: 0; | 52 | margin: 0; | 
| 46 | padding: prop(--dims --item --pad-y) 0; | 53 | padding: prop(--dims --item --pad-y) 0; | 
| 47 | color: prop(--colors --logo --idle --fg); | 54 | color: prop(--colors --logo --idle --fg); | 
| 48 | font-family: $font-fam--mono; | 55 | font-family: $font-fam--mono; | 
| 49 | text-decoration: none; | 56 | text-decoration: none; | 
| 50 | 57 | ||
| 51 | &:link, | 58 | &:link, | 
| 52 | &:visited { | 59 | &:visited { | 
| 53 | &:hover { | 60 | &:hover { | 
| 54 | background-color: transparent; | 61 | background-color: transparent; | 
| 55 | color: prop(--colors --logo --hover --fg); | 62 | color: prop(--colors --logo --hover --fg); | 
| 56 | } | 63 | } | 
| 57 | } | 64 | } | 
| 58 | } | 65 | } | 
| 59 | 66 | ||
| 60 | @include element('logo-symbol') { | 67 | @include element('logo-symbol') { | 
| 61 | display: block; | 68 | display: block; | 
| 62 | width: $line-height * .9em; | 69 | width: $line-height * .9em; | 
| 63 | height: $line-height * 1em; | 70 | height: $line-height * 1em; | 
| 64 | } | 71 | } | 
| 65 | 72 | ||
| 66 | @include element('item') { | 73 | @include element('item') { | 
| 67 | display: inline-block; | 74 | display: inline-block; | 
| 68 | margin: 0 calc(-1 * #{prop(--dims --item --pad-x)}) 0 prop(--dims --item --pad-x); | 75 | margin: 0 calc(-1 * #{prop(--dims --item --pad-x)}) 0 prop(--dims --item --pad-x); | 
| 69 | padding: prop(--dims --item --pad-y) prop(--dims --item --pad-x); | 76 | padding: prop(--dims --item --pad-y) prop(--dims --item --pad-x); | 
| 70 | color: prop(--colors --item --idle --fg); | 77 | color: prop(--colors --item --idle --fg); | 
| 71 | text-decoration: none; | 78 | text-decoration: none; | 
| 72 | text-transform: uppercase; | 79 | text-transform: uppercase; | 
| 73 | 80 | ||
| 74 | &:hover { | 81 | &:hover { | 
| 75 | background-color: transparent; | 82 | background-color: transparent; | 
| 76 | color: prop(--colors --item --hover --fg); | 83 | color: prop(--colors --item --hover --fg); | 
| 77 | text-decoration: underline; | 84 | text-decoration: underline; | 
| 78 | } | 85 | } | 
| 79 | 86 | ||
| 80 | @include modifier('active') { | 87 | @include modifier('active') { | 
| 81 | border-color: prop(--colors --item --active --fg); | 88 | border-color: prop(--colors --item --active --fg); | 
| 82 | color: prop(--colors --item --active --fg); | 89 | color: prop(--colors --item --active --fg); | 
| 83 | font-weight: bold; | 90 | font-weight: bold; | 
| 84 | } | ||
| 85 | } | ||
| 86 | |||
| 87 | @include media('<=sm') { | ||
| 88 | padding: prop(--dims --pad-y-sm) 0; | ||
| 89 | |||
| 90 | @include element('logo', 'item') { | ||
| 91 | padding-top: prop(--dims --item --pad-y-sm); | ||
| 92 | padding-bottom: prop(--dims --item --pad-y-sm); | ||
| 93 | } | ||
| 94 | |||
| 95 | @include element('item') { | ||
| 96 | margin-right: calc(-1 * #{prop(--dims --item --pad-x-sm)}); | ||
| 97 | margin-left: prop(--dims --item --pad-x-sm); | ||
| 98 | padding-right: prop(--dims --item --pad-x-sm); | ||
| 99 | padding-left: prop(--dims --item --pad-x-sm); | ||
| 100 | } | 91 | } | 
| 101 | } | 92 | } | 
| 102 | } | 93 | } | 
diff --git a/assets/css/components/_page.scss b/assets/css/components/_page.scss deleted file mode 100644 index ef39061..0000000 --- a/assets/css/components/_page.scss +++ /dev/null  | |||
| @@ -1,3 +0,0 @@ | |||
| 1 | @include component('page') { | ||
| 2 | // | ||
| 3 | } | ||
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss index 2bb4d80..2e102ee 100644 --- a/assets/css/layouts/_container.scss +++ b/assets/css/layouts/_container.scss  | |||
| @@ -2,35 +2,30 @@ | |||
| 2 | @include store(( | 2 | @include store(( | 
| 3 | --dims: ( | 3 | --dims: ( | 
| 4 | --pad-x: 2rem, | 4 | --pad-x: 2rem, | 
| 5 | --pad-x-sm: 1rem, | 5 | --pad-y: $line-height * 2rem | 
| 6 | --pad-y: $line-height * 2rem, | ||
| 7 | --pad-y-sm: $line-height * 1rem | ||
| 8 | ) | 6 | ) | 
| 9 | )); | 7 | )); | 
| 10 | 8 | ||
| 9 | @include store(( | ||
| 10 | --dims: ( | ||
| 11 | --pad-x: 1rem, | ||
| 12 | --pad-y: $line-height * 1rem | ||
| 13 | ) | ||
| 14 | ), 'sm'); | ||
| 15 | |||
| 11 | @include layout(namespace()) { | 16 | @include layout(namespace()) { | 
| 12 | padding-right: prop(--dims --pad-x); | 17 | padding-right: prop(--dims --pad-x); | 
| 13 | padding-left: prop(--dims --pad-x); | 18 | padding-left: prop(--dims --pad-x); | 
| 14 | 19 | ||
| 15 | @include modifier('content') { | 20 | @include modifier('content') { | 
| 16 | max-width: $content--width; | 21 | max-width: $content--width; | 
| 17 | margin-right: auto; | 22 | margin-right: auto; | 
| 18 | margin-left: auto; | 23 | margin-left: auto; | 
| 19 | } | 24 | } | 
| 20 | 25 | ||
| 21 | @include modifier('pad-v') { | 26 | @include modifier('pad-v') { | 
| 22 | padding-top: prop(--dims --pad-y); | 27 | padding-top: prop(--dims --pad-y); | 
| 23 | padding-bottom: prop(--dims --pad-y); | 28 | padding-bottom: prop(--dims --pad-y); | 
| 24 | } | 29 | } | 
| 25 | |||
| 26 | @include media('<=sm') { | ||
| 27 | padding-right: prop(--dims --pad-x-sm); | ||
| 28 | padding-left: prop(--dims --pad-x-sm); | ||
| 29 | |||
| 30 | @include modifier('pad-v') { | ||
| 31 | padding-top: prop(--dims --pad-y-sm); | ||
| 32 | padding-bottom: prop(--dims --pad-y-sm); | ||
| 33 | } | ||
| 34 | } | ||
| 35 | } | 30 | } | 
| 36 | } | 31 | } | 
diff --git a/assets/css/layouts/_site.scss b/assets/css/layouts/_site.scss new file mode 100644 index 0000000..2c06606 --- /dev/null +++ b/assets/css/layouts/_site.scss  | |||
| @@ -0,0 +1,46 @@ | |||
| 1 | @include namespace('site') { | ||
| 2 | @include store(( | ||
| 3 | --dims: ( | ||
| 4 | --outer-pad-x: 6rem, | ||
| 5 | --inner-pad-x: 2rem, | ||
| 6 | --pad-y: 6rem, | ||
| 7 | ) | ||
| 8 | )); | ||
| 9 | |||
| 10 | @include layout(namespace()) { | ||
| 11 | display: flex; | ||
| 12 | flex-direction: row; | ||
| 13 | justify-content: space-around; | ||
| 14 | |||
| 15 | @include element('col') { | ||
| 16 | box-sizing: border-box; | ||
| 17 | flex: 0 0 auto; | ||
| 18 | width: 100%; | ||
| 19 | min-width: 0; | ||
| 20 | max-width: 35rem; | ||
| 21 | height: 100%; | ||
| 22 | padding: prop(--dims --pad-y) prop(--dims --inner-pad-x) prop(--dims --pad-y) prop(--dims --outer-pad-x); | ||
| 23 | |||
| 24 | @include next-twin-element { | ||
| 25 | flex: 1 1 auto; | ||
| 26 | max-width: 45rem; | ||
| 27 | height: auto; | ||
| 28 | padding-right: prop(--dims --outer-pad-x); | ||
| 29 | padding-left: prop(--dims --inner-pad-x); | ||
| 30 | } | ||
| 31 | } | ||
| 32 | |||
| 33 | @include media('<=sm') { | ||
| 34 | display: block; | ||
| 35 | |||
| 36 | @include element('col') { | ||
| 37 | width: auto; | ||
| 38 | height: auto; | ||
| 39 | |||
| 40 | @include next-twin-element { | ||
| 41 | width: auto; | ||
| 42 | } | ||
| 43 | } | ||
| 44 | } | ||
| 45 | } | ||
| 46 | } | ||
diff --git a/assets/css/scopes/_code.scss b/assets/css/scopes/_code.scss deleted file mode 100644 index 3f50ce3..0000000 --- a/assets/css/scopes/_code.scss +++ /dev/null  | |||
| @@ -1,27 +0,0 @@ | |||
| 1 | @include scope('code') { | ||
| 2 | @include modifier('highlight') { | ||
| 3 | pre { | ||
| 4 | color: var(--fg-lo); | ||
| 5 | } | ||
| 6 | } | ||
| 7 | |||
| 8 | pre { | ||
| 9 | font-size: 1em; | ||
| 10 | line-height: $line-height; | ||
| 11 | } | ||
| 12 | |||
| 13 | /* stylelint-disable selector-class-pattern */ | ||
| 14 | |||
| 15 | .c { | ||
| 16 | color: var(--fg-hi); | ||
| 17 | } | ||
| 18 | |||
| 19 | .kt, | ||
| 20 | .k, | ||
| 21 | .kr, | ||
| 22 | .o, | ||
| 23 | .si, | ||
| 24 | .p { | ||
| 25 | color: var(--fg); | ||
| 26 | } | ||
| 27 | } | ||
diff --git a/assets/css/scopes/_page.scss b/assets/css/scopes/_page.scss deleted file mode 100644 index 70489fb..0000000 --- a/assets/css/scopes/_page.scss +++ /dev/null  | |||
| @@ -1,25 +0,0 @@ | |||
| 1 | @include scope('page-content') { | ||
| 2 | :link { | ||
| 3 | color: var(--page--link--idle--fg); | ||
| 4 | } | ||
| 5 | |||
| 6 | :visited { | ||
| 7 | color: var(--page--link--visited--fg); | ||
| 8 | } | ||
| 9 | |||
| 10 | :link, | ||
| 11 | :visited { | ||
| 12 | &:hover { | ||
| 13 | background-color: var(--page--link--hover--bg); | ||
| 14 | color: var(--page--link--hover--fg); | ||
| 15 | } | ||
| 16 | } | ||
| 17 | |||
| 18 | img { | ||
| 19 | max-width: 100%; | ||
| 20 | } | ||
| 21 | |||
| 22 | > :first-child { | ||
| 23 | margin-top: 0; | ||
| 24 | } | ||
| 25 | } | ||
diff --git a/assets/css/style.scss b/assets/css/style.scss index dad774a..c8fd0c1 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss  | |||
| @@ -9,17 +9,20 @@ | |||
| 9 | @import 'basics'; | 9 | @import 'basics'; | 
| 10 | 10 | ||
| 11 | @import 'components/nav'; | 11 | @import 'components/nav'; | 
| 12 | @import 'components/page'; | ||
| 13 | @import 'components/hero'; | 12 | @import 'components/hero'; | 
| 14 | @import 'components/footer'; | 13 | @import 'components/footer'; | 
| 15 | 14 | ||
| 15 | @import 'layouts/site'; | ||
| 16 | @import 'layouts/container'; | 16 | @import 'layouts/container'; | 
| 17 | 17 | ||
| 18 | @import 'scopes/code'; | ||
| 19 | @import 'scopes/page'; | ||
| 20 | |||
| 21 | @import 'utils'; | 18 | @import 'utils'; | 
| 22 | 19 | ||
| 23 | :root { | 20 | :root { | 
| 24 | @include assign; | 21 | @include assign; | 
| 22 | |||
| 23 | @each $breakpoint in map-keys($breakpoints) { | ||
| 24 | @include media('<=#{$breakpoint}') { | ||
| 25 | @include assign($breakpoint); | ||
| 26 | } | ||
| 27 | } | ||
| 25 | } | 28 | } | 
diff --git a/assets/favicon/favicon.svg b/assets/favicon/favicon.svg new file mode 100644 index 0000000..31f9007 --- /dev/null +++ b/assets/favicon/favicon.svg  | |||
| @@ -0,0 +1,75 @@ | |||
| 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?> | ||
| 2 | <svg | ||
| 3 | xmlns:dc="http://purl.org/dc/elements/1.1/" | ||
| 4 | xmlns:cc="http://creativecommons.org/ns#" | ||
| 5 | xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" | ||
| 6 | xmlns:svg="http://www.w3.org/2000/svg" | ||
| 7 | xmlns="http://www.w3.org/2000/svg" | ||
| 8 | xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" | ||
| 9 | xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" | ||
| 10 | aria-hidden="true" | ||
| 11 | version="1.1" | ||
| 12 | id="svg8" | ||
| 13 | sodipodi:docname="favicon.svg" | ||
| 14 | width="16" | ||
| 15 | height="16" | ||
| 16 | inkscape:version="1.0.2 (e86c870879, 2021-01-15)" | ||
| 17 | inkscape:export-filename="/mnt/EvoData/Projects/WebStd/volpeon.ink/assets/favicon/favicon.png" | ||
| 18 | inkscape:export-xdpi="96" | ||
| 19 | inkscape:export-ydpi="96"> | ||
| 20 | <metadata | ||
| 21 | id="metadata14"> | ||
| 22 | <rdf:RDF> | ||
| 23 | <cc:Work | ||
| 24 | rdf:about=""> | ||
| 25 | <dc:format>image/svg+xml</dc:format> | ||
| 26 | <dc:type | ||
| 27 | rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> | ||
| 28 | <dc:title /> | ||
| 29 | </cc:Work> | ||
| 30 | </rdf:RDF> | ||
| 31 | </metadata> | ||
| 32 | <defs | ||
| 33 | id="defs12" /> | ||
| 34 | <sodipodi:namedview | ||
| 35 | pagecolor="#ffffff" | ||
| 36 | bordercolor="#666666" | ||
| 37 | borderopacity="1" | ||
| 38 | objecttolerance="10" | ||
| 39 | gridtolerance="10" | ||
| 40 | guidetolerance="10" | ||
| 41 | inkscape:pageopacity="0" | ||
| 42 | inkscape:pageshadow="2" | ||
| 43 | inkscape:window-width="1920" | ||
| 44 | inkscape:window-height="992" | ||
| 45 | id="namedview10" | ||
| 46 | showgrid="false" | ||
| 47 | fit-margin-top="0" | ||
| 48 | fit-margin-left="0" | ||
| 49 | fit-margin-right="0" | ||
| 50 | fit-margin-bottom="0" | ||
| 51 | inkscape:zoom="22.627417" | ||
| 52 | inkscape:cx="5.9845144" | ||
| 53 | inkscape:cy="5.0936969" | ||
| 54 | inkscape:window-x="1536" | ||
| 55 | inkscape:window-y="0" | ||
| 56 | inkscape:window-maximized="1" | ||
| 57 | inkscape:current-layer="svg8" | ||
| 58 | inkscape:document-rotation="0" | ||
| 59 | showguides="false" /> | ||
| 60 | <path | ||
| 61 | d="M 3.879982,13 H 6.0160181 L 2.6160361,3 H 0.48 Z" | ||
| 62 | style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:8px;line-height:1.25;font-family:'Iosevka SS09';-inkscape-font-specification:'Iosevka SS09 Heavy';font-variant-ligatures:discretionary-ligatures;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;letter-spacing:0px;word-spacing:0px;fill:#ed2c3f;fill-opacity:1;stroke:none" | ||
| 63 | id="path884" | ||
| 64 | sodipodi:nodetypes="ccccc" /> | ||
| 65 | <path | ||
| 66 | d="m 9.91599,13 h 2.168035 L 8.584018,3 H 6.4159819 Z" | ||
| 67 | style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:8px;line-height:1.25;font-family:'Iosevka SS09';-inkscape-font-specification:'Iosevka SS09 Heavy';font-variant-ligatures:discretionary-ligatures;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;letter-spacing:0px;word-spacing:0px;fill:#ed2c3f;fill-opacity:1;stroke:none" | ||
| 68 | id="path886" | ||
| 69 | sodipodi:nodetypes="ccccc" /> | ||
| 70 | <path | ||
| 71 | d="M 9.915975,13 H 12.08401 L 15.584018,3 h -2.168036 z" | ||
| 72 | style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:8px;line-height:1.25;font-family:'Iosevka SS09';-inkscape-font-specification:'Iosevka SS09 Heavy';font-variant-ligatures:discretionary-ligatures;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;letter-spacing:0px;word-spacing:0px;fill:#ed2c3f;fill-opacity:1;stroke:none" | ||
| 73 | id="path888" | ||
| 74 | sodipodi:nodetypes="ccccc" /> | ||
| 75 | </svg> | ||
diff --git a/content/favicon.ico b/content/favicon.ico index b1b98ec..3c399ff 100644 --- a/content/favicon.ico +++ b/content/favicon.ico  | |||
| Binary files differ | |||
diff --git a/templates/layouts/index.html b/templates/layouts/index.html index 3105472..aaac808 100644 --- a/templates/layouts/index.html +++ b/templates/layouts/index.html  | |||
| @@ -1,14 +1,14 @@ | |||
| 1 | <div class="c-hero l-container"> | 1 | <main> | 
| 2 | <h1 class="c-hero__backtitle">Volpeon</h1> | 2 | <header class="c-hero"> | 
| 3 | <h2 class="c-hero__title">I'm a <strong class="c-hero__emph">red fox</strong> doing human things</h2> | 3 | <h1 class="c-hero__title c-hero__title--front">I'm a <strong class="c-hero__emph">red fox</strong> in disguise</h1> | 
| 4 | </div> | 4 | <h2 class="c-hero__title c-hero__title--back">Volpeon</h2> | 
| 5 | </header> | ||
| 5 | 6 | ||
| 6 | <main class="c-page l-container l-container--content l-container--pad-v l-container--pad-v--first"> | 7 | <section class="l-container l-container--content"> | 
| 7 | <div class="c-page__content s-page-content"> | ||
| 8 | $body$ | 8 | $body$ | 
| 9 | </div> | 9 | </section> | 
| 10 | </main> | ||
| 11 | 10 | ||
| 12 | <footer class="c-footer l-container"> | 11 | $-- <footer class="c-footer l-container"> | 
| 13 | 9thPK7O3xn | 12 | $-- 9thPK7O3xn | 
| 14 | </footer> | 13 | $-- </footer> | 
| 14 | </main> | ||
diff --git a/templates/layouts/page.html b/templates/layouts/page.html index 994d013..fca4b9f 100644 --- a/templates/layouts/page.html +++ b/templates/layouts/page.html  | |||
| @@ -1,17 +1,6 @@ | |||
| 1 | <main class="c-page l-container l-container--content l-container--pad-v"> | 1 | <main class="c-page l-container l-container--content l-container--pad-v"> | 
| 2 | <div class="c-page__content s-page-content"> | 2 | <div class="c-page__content s-page-content"> | 
| 3 | <header class="c-page__header"> | 3 | <header class="c-page__header"> | 
| 4 | $if(menus.main.active)$ | ||
| 5 | <div class="c-page__prefixed c-page__prefixed--backref c-page__header__backlink"> | ||
| 6 | <a class="c-page__header__backlink__link" href="$menus.main.active.url$"> | ||
| 7 | $if(menus.main.active.label_long)$ | ||
| 8 | $menus.main.active.label_long$ | ||
| 9 | $else$ | ||
| 10 | $menus.main.active.label$ | ||
| 11 | $endif$ | ||
| 12 | </a> | ||
| 13 | </div> | ||
| 14 | $endif$ | ||
| 15 | <h1 class="c-page__prefixed c-page__prefixed--h1 c-page__header__title">$title$</h1> | 4 | <h1 class="c-page__prefixed c-page__prefixed--h1 c-page__header__title">$title$</h1> | 
| 16 | $if(category)$ | 5 | $if(category)$ | 
| 17 | <h2 class="c-page__header__meta">in $category.name$</h2> | 6 | <h2 class="c-page__header__meta">in $category.name$</h2> | 
