diff options
| author | Volpeon <git@volpeon.ink> | 2020-12-27 22:03:42 +0100 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2020-12-27 22:03:42 +0100 |
| commit | 517fc58cf46595990fd5af64a1bd647ee5ac3c08 (patch) | |
| tree | 3720064c91a95230b1208352b9fa63b554e1b0cd /assets/css | |
| parent | Build script: Improved path and relative link calculation, added vars to conf... (diff) | |
| download | volpeon.ink-517fc58cf46595990fd5af64a1bd647ee5ac3c08.tar.gz volpeon.ink-517fc58cf46595990fd5af64a1bd647ee5ac3c08.tar.bz2 volpeon.ink-517fc58cf46595990fd5af64a1bd647ee5ac3c08.zip | |
Added stylelint, generate some metadata automatically
Diffstat (limited to 'assets/css')
| -rw-r--r-- | assets/css/_basics.scss | 166 | ||||
| -rw-r--r-- | assets/css/_functions.scss | 14 | ||||
| -rw-r--r-- | assets/css/_utils.scss | 24 | ||||
| -rw-r--r-- | assets/css/_vars.scss | 62 | ||||
| -rw-r--r-- | assets/css/components/_nav.scss | 77 | ||||
| -rw-r--r-- | assets/css/components/_page-header.scss | 28 | ||||
| -rw-r--r-- | assets/css/components/_refs.scss | 8 | ||||
| -rw-r--r-- | assets/css/layouts/_container.scss | 30 | ||||
| -rw-r--r-- | assets/css/scopes/_page.scss | 160 | ||||
| -rw-r--r-- | assets/css/style.scss | 18 |
10 files changed, 295 insertions, 292 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index 9505cdd..560ec94 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss | |||
| @@ -1,161 +1,161 @@ | |||
| 1 | @font-face { | 1 | @font-face { |
| 2 | font-family: "Iosevka Term SS09"; | 2 | font-family: 'Iosevka Term SS09'; |
| 3 | font-style: normal; | 3 | font-style: normal; |
| 4 | font-weight: normal; | 4 | font-weight: normal; |
| 5 | src: url("/iosevka-term-ss09-regular.woff2") format("woff2"); | 5 | src: url('/iosevka-term-ss09-regular.woff2') format('woff2'); |
| 6 | } | 6 | } |
| 7 | 7 | ||
| 8 | @font-face { | 8 | @font-face { |
| 9 | font-family: "Iosevka Term SS09"; | 9 | font-family: 'Iosevka Term SS09'; |
| 10 | font-style: normal; | 10 | font-style: normal; |
| 11 | font-weight: bold; | 11 | font-weight: bold; |
| 12 | src: url("/iosevka-term-ss09-bold.woff2") format("woff2"); | 12 | src: url('/iosevka-term-ss09-bold.woff2') format('woff2'); |
| 13 | } | 13 | } |
| 14 | 14 | ||
| 15 | ::selection { | 15 | ::selection { |
| 16 | color: var(--select--fg); | 16 | background-color: var(--select--bg); |
| 17 | background-color: var(--select--bg); | 17 | color: var(--select--fg); |
| 18 | } | 18 | } |
| 19 | 19 | ||
| 20 | html, | 20 | html, |
| 21 | pre, | 21 | pre, |
| 22 | code { | 22 | code { |
| 23 | font-family: "Iosevka Term SS09", "Lucida Console", "Courier New", Courier, | 23 | font-family: 'Iosevka Term SS09', 'Lucida Console', 'Courier New', Courier, |
| 24 | monospace; | 24 | monospace; |
| 25 | font-feature-settings: "calt" 0, "dlig" 1; | 25 | font-feature-settings: 'calt' 0, 'dlig' 1; |
| 26 | } | 26 | } |
| 27 | 27 | ||
| 28 | html { | 28 | html { |
| 29 | font-size: px-to-em($font-size, 16px); | 29 | background-color: var(--bg); |
| 30 | line-height: $line-height; | 30 | color: var(--fg); |
| 31 | background-color: var(--bg); | 31 | font-size: px-to-em($font-size, 16px); |
| 32 | color: var(--fg); | 32 | line-height: $line-height; |
| 33 | } | 33 | } |
| 34 | 34 | ||
| 35 | body { | 35 | body { |
| 36 | margin: 0; | 36 | margin: 0; |
| 37 | padding: 0; | 37 | padding: 0; |
| 38 | } | 38 | } |
| 39 | 39 | ||
| 40 | code { | 40 | code { |
| 41 | color: var(--code--fg); | 41 | color: var(--code--fg); |
| 42 | } | 42 | } |
| 43 | 43 | ||
| 44 | pre { | 44 | pre { |
| 45 | margin: 0; | 45 | margin: 0; |
| 46 | color: var(--code-block--fg); | 46 | overflow: hidden; |
| 47 | font-size: $code-block--font-size; | 47 | color: var(--code-block--fg); |
| 48 | line-height: $code-block--line-height; | 48 | font-size: $code-block--font-size; |
| 49 | text-overflow: ""; | 49 | line-height: $code-block--line-height; |
| 50 | overflow: hidden; | 50 | text-overflow: ''; |
| 51 | 51 | ||
| 52 | strong { | 52 | strong { |
| 53 | font-weight: normal; | 53 | font-weight: normal; |
| 54 | } | 54 | } |
| 55 | } | 55 | } |
| 56 | 56 | ||
| 57 | strong { | 57 | strong { |
| 58 | color: var(--fg-plus-2); | 58 | color: var(--fg-plus-2); |
| 59 | font-weight: bold; | 59 | font-weight: bold; |
| 60 | } | 60 | } |
| 61 | 61 | ||
| 62 | ul, | 62 | ul, |
| 63 | ol { | 63 | ol { |
| 64 | margin: ($line-height * 1em) 0 0; | 64 | margin: ($line-height * 1em) 0 0; |
| 65 | padding: 0; | 65 | padding: 0; |
| 66 | list-style: none; | 66 | list-style: none; |
| 67 | } | 67 | } |
| 68 | 68 | ||
| 69 | li { | 69 | li { |
| 70 | position: relative; | 70 | position: relative; |
| 71 | padding-left: $subcontent--indent; | 71 | padding-left: $subcontent--indent; |
| 72 | 72 | ||
| 73 | &::before { | 73 | &::before { |
| 74 | position: absolute; | 74 | display: inline-block; |
| 75 | display: inline-block; | 75 | position: absolute; |
| 76 | width: $subcontent--indent; | 76 | width: $subcontent--indent; |
| 77 | margin-left: -1 * $subcontent--indent; | 77 | margin-left: -1 * $subcontent--indent; |
| 78 | color: var(--fg-minus); | 78 | color: var(--fg-minus); |
| 79 | } | 79 | } |
| 80 | } | 80 | } |
| 81 | 81 | ||
| 82 | ul > li::before { | 82 | ul > li::before { |
| 83 | content: "-"; | 83 | content: '-'; |
| 84 | } | 84 | } |
| 85 | 85 | ||
| 86 | ol { | 86 | ol { |
| 87 | counter-reset: cnt; | 87 | counter-reset: cnt; |
| 88 | 88 | ||
| 89 | > li { | 89 | > li { |
| 90 | counter-increment: cnt; | 90 | counter-increment: cnt; |
| 91 | 91 | ||
| 92 | &::before { | 92 | &::before { |
| 93 | content: counter(cnt) "."; | 93 | content: counter(cnt) '.'; |
| 94 | } | ||
| 94 | } | 95 | } |
| 95 | } | ||
| 96 | } | 96 | } |
| 97 | 97 | ||
| 98 | h1, | 98 | h1, |
| 99 | h2, | 99 | h2, |
| 100 | h3 { | 100 | h3 { |
| 101 | margin: ($line-height * 2em) 0 0; | 101 | margin: ($line-height * 2em) 0 0; |
| 102 | 102 | ||
| 103 | + h1, | 103 | + h1, |
| 104 | + h2, | 104 | + h2, |
| 105 | + h3 { | 105 | + h3 { |
| 106 | margin-top: $line-height * 1em; | 106 | margin-top: $line-height * 1em; |
| 107 | } | 107 | } |
| 108 | } | 108 | } |
| 109 | 109 | ||
| 110 | h1 { | 110 | h1 { |
| 111 | text-transform: uppercase; | 111 | color: var(--heading--fg); |
| 112 | font-size: 1em; | 112 | font-size: 1em; |
| 113 | color: var(--heading--fg); | 113 | text-transform: uppercase; |
| 114 | } | 114 | } |
| 115 | 115 | ||
| 116 | h2 { | 116 | h2 { |
| 117 | font-size: 1em; | 117 | color: var(--heading--fg); |
| 118 | color: var(--heading--fg); | 118 | font-size: 1em; |
| 119 | } | 119 | } |
| 120 | 120 | ||
| 121 | h3 { | 121 | h3 { |
| 122 | font-size: 1em; | 122 | font-size: 1em; |
| 123 | } | 123 | } |
| 124 | 124 | ||
| 125 | p { | 125 | p { |
| 126 | margin: ($line-height * 1em) 0 0; | 126 | margin: ($line-height * 1em) 0 0; |
| 127 | hyphens: auto; | 127 | hyphens: auto; |
| 128 | } | 128 | } |
| 129 | 129 | ||
| 130 | :link, | 130 | :link, |
| 131 | :visited { | 131 | :visited { |
| 132 | position: relative; | 132 | position: relative; |
| 133 | z-index: 1000; | 133 | z-index: 1; |
| 134 | padding: 0.2em 0.3em; | 134 | margin: 0 -.3em; |
| 135 | margin: 0 -0.3em; | 135 | padding: .2em .3em; |
| 136 | color: var(--link--idle--fg); | 136 | color: var(--link--idle--fg); |
| 137 | 137 | ||
| 138 | &:hover { | 138 | &:hover { |
| 139 | background-color: var(--link--hover--bg); | 139 | background-color: var(--link--hover--bg); |
| 140 | color: var(--link--hover--fg); | 140 | color: var(--link--hover--fg); |
| 141 | text-decoration: none; | 141 | text-decoration: none; |
| 142 | } | 142 | } |
| 143 | } | 143 | } |
| 144 | 144 | ||
| 145 | :visited { | 145 | :visited { |
| 146 | color: var(--link--visited--fg); | 146 | color: var(--link--visited--fg); |
| 147 | } | 147 | } |
| 148 | 148 | ||
| 149 | hr { | 149 | hr { |
| 150 | height: 1px; | 150 | height: 1px; |
| 151 | margin: ($line-height * 2em) 0 ($line-height * 2em); | 151 | margin: ($line-height * 2em) 0 ($line-height * 2em); |
| 152 | background-color: var(--bg-plus); | 152 | border: 0; |
| 153 | border: 0; | 153 | background-color: var(--bg-plus); |
| 154 | } | 154 | } |
| 155 | 155 | ||
| 156 | blockquote { | 156 | blockquote { |
| 157 | position: relative; | 157 | position: relative; |
| 158 | margin: ($line-height * 1em) 0 0; | 158 | margin: ($line-height * 1em) 0 0; |
| 159 | padding-left: calc(#{$subcontent--indent} - 2px); | 159 | padding-left: calc(#{$subcontent--indent} - 2px); |
| 160 | border-left: 2px solid var(--bg-plus); | 160 | border-left: 2px solid var(--bg-plus); |
| 161 | } | 161 | } |
diff --git a/assets/css/_functions.scss b/assets/css/_functions.scss index cd8947e..1523772 100644 --- a/assets/css/_functions.scss +++ b/assets/css/_functions.scss | |||
| @@ -1,12 +1,12 @@ | |||
| 1 | @function px-to-em($s, $b: $font-size) { | 1 | @function px-to-em($s, $b: $font-size) { |
| 2 | @return 1 / ($b / 1px) * ($s / 1px) * 1em; | 2 | @return 1 / ($b / 1px) * ($s / 1px) * 1em; |
| 3 | } | 3 | } |
| 4 | 4 | ||
| 5 | @function str-repeat($s, $n) { | 5 | @function str-repeat($s, $n) { |
| 6 | $r: ""; | 6 | $r: ''; |
| 7 | @while $n > 0 { | 7 | @while $n > 0 { |
| 8 | $r: $r + $s; | 8 | $r: $r + $s; |
| 9 | $n: $n - 1; | 9 | $n: $n - 1; |
| 10 | } | 10 | } |
| 11 | @return $r; | 11 | @return $r; |
| 12 | } | 12 | } |
diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss index 036a87e..e241d84 100644 --- a/assets/css/_utils.scss +++ b/assets/css/_utils.scss | |||
| @@ -1,17 +1,17 @@ | |||
| 1 | .u-hidden { | 1 | .u-hidden { |
| 2 | display: none; | 2 | display: none; |
| 3 | 3 | ||
| 4 | @each $name, $width in $breakpoints { | 4 | @each $name, $width in $breakpoints { |
| 5 | &\@#{$name}-down { | 5 | &\@#{$name}-down { |
| 6 | @media (max-width: $width) { | 6 | @media (max-width: $width) { |
| 7 | display: none; | 7 | display: none; |
| 8 | } | 8 | } |
| 9 | } | 9 | } |
| 10 | 10 | ||
| 11 | &\@#{$name}-up { | 11 | &\@#{$name}-up { |
| 12 | @media (min-width: $width + 1) { | 12 | @media (min-width: $width + 1) { |
| 13 | display: none; | 13 | display: none; |
| 14 | } | 14 | } |
| 15 | } | ||
| 15 | } | 16 | } |
| 16 | } | ||
| 17 | } | 17 | } |
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index 96e56c6..9cd4b24 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss | |||
| @@ -24,45 +24,45 @@ $page--item-prefix--pad: 2ch; | |||
| 24 | $page--item-prefix--width: $page--item-prefix--max-chars + $page--item-prefix--pad; | 24 | $page--item-prefix--width: $page--item-prefix--max-chars + $page--item-prefix--pad; |
| 25 | 25 | ||
| 26 | $breakpoints: ( | 26 | $breakpoints: ( |
| 27 | xs: 380px, | 27 | xs: 380px, |
| 28 | sm: 700px, | 28 | sm: 700px, |
| 29 | ); | 29 | ); |
| 30 | 30 | ||
| 31 | :root { | 31 | :root { |
| 32 | --gray0: hsl(270, 0%, 7%); | 32 | --gray0: hsl(270, 0%, 7%); |
| 33 | --gray1: hsl(270, 0%, 10%); | 33 | --gray1: hsl(270, 0%, 10%); |
| 34 | --gray2: hsl(270, 1%, 29%); | 34 | --gray2: hsl(270, 1%, 29%); |
| 35 | --gray3: hsl(270, 2%, 54%); | 35 | --gray3: hsl(270, 2%, 54%); |
| 36 | --gray4: hsl(270, 2%, 73%); | 36 | --gray4: hsl(270, 2%, 73%); |
| 37 | --gray5: hsl(270, 2%, 83%); | 37 | --gray5: hsl(270, 2%, 83%); |
| 38 | --gray6: hsl(270, 2%, 100%); | 38 | --gray6: hsl(270, 2%, 100%); |
| 39 | 39 | ||
| 40 | --bg-minus: var(--gray0); | 40 | --bg-minus: var(--gray0); |
| 41 | --bg: var(--gray1); | 41 | --bg: var(--gray1); |
| 42 | --bg-plus: var(--gray2); | 42 | --bg-plus: var(--gray2); |
| 43 | --fg-minus: var(--gray3); | 43 | --fg-minus: var(--gray3); |
| 44 | --fg: var(--gray4); | 44 | --fg: var(--gray4); |
| 45 | --fg-plus: var(--gray5); | 45 | --fg-plus: var(--gray5); |
| 46 | --fg-plus-2: var(--gray6); | 46 | --fg-plus-2: var(--gray6); |
| 47 | 47 | ||
| 48 | --heading--fg: var(--fg-plus-2); | 48 | --heading--fg: var(--fg-plus-2); |
| 49 | 49 | ||
| 50 | --select--bg: hsla(270, 2%, 100%, 0.996); | 50 | --select--bg: hsla(270, 2%, 100%, .996); |
| 51 | --select--fg: var(--bg-minus); | 51 | --select--fg: var(--bg-minus); |
| 52 | 52 | ||
| 53 | --code--fg: var(--fg-minus); | 53 | --code--fg: var(--fg-minus); |
| 54 | --code-block--fg: var(--fg-minus); | 54 | --code-block--fg: var(--fg-minus); |
| 55 | 55 | ||
| 56 | --page--item-prefix--fg: var(--fg-minus); | 56 | --page--item-prefix--fg: var(--fg-minus); |
| 57 | 57 | ||
| 58 | --link--idle--fg: var(--fg-plus-2); //#90acf2; | 58 | --link--idle--fg: var(--fg-plus-2); //#90acf2; |
| 59 | --link--visited--fg: var(--fg-plus); //#bc9df2; | 59 | --link--visited--fg: var(--fg-plus); //#bc9df2; |
| 60 | --link--hover--bg: var(--fg-plus-2); | 60 | --link--hover--bg: var(--fg-plus-2); |
| 61 | --link--hover--fg: var(--bg-minus); | 61 | --link--hover--fg: var(--bg-minus); |
| 62 | 62 | ||
| 63 | --nav--bg: var(--bg-minus); | 63 | --nav--bg: var(--bg-minus); |
| 64 | --nav--logo--fg: var(--fg-minus); | 64 | --nav--logo--fg: var(--fg-minus); |
| 65 | --nav--item--idle--fg: var(--fg); | 65 | --nav--item--idle--fg: var(--fg); |
| 66 | --nav--item--hover--fg: var(--fg-plus-2); | 66 | --nav--item--hover--fg: var(--fg-plus-2); |
| 67 | --nav--item--active--fg: var(--fg-plus-2); | 67 | --nav--item--active--fg: var(--fg-plus-2); |
| 68 | } | 68 | } |
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss index a3f7004..60b3584 100644 --- a/assets/css/components/_nav.scss +++ b/assets/css/components/_nav.scss | |||
| @@ -1,51 +1,54 @@ | |||
| 1 | .c-nav { | 1 | .c-nav { |
| 2 | background-color: var(--nav--bg); | 2 | position: sticky; |
| 3 | font-size: $nav--font-size; | 3 | z-index: 1000; |
| 4 | top: 0; | ||
| 5 | background-color: var(--nav--bg); | ||
| 6 | font-size: $nav--font-size; | ||
| 4 | 7 | ||
| 5 | &__items { | 8 | &__items { |
| 6 | display: flex; | 9 | display: flex; |
| 7 | align-items: baseline; | 10 | align-items: baseline; |
| 8 | } | 11 | } |
| 9 | 12 | ||
| 10 | &__logo { | 13 | &__logo { |
| 11 | display: inline-block; | 14 | display: inline-block; |
| 12 | margin: 0; | 15 | margin: 0; |
| 13 | padding: $nav--item--pad-v 0; | 16 | padding: $nav--item--pad-v 0; |
| 14 | color: var(--nav--logo--fg); | 17 | color: var(--nav--logo--fg); |
| 15 | text-decoration: none; | 18 | text-decoration: none; |
| 16 | 19 | ||
| 17 | &:link, | 20 | &:link, |
| 18 | &:visited { | 21 | &:visited { |
| 19 | &:hover { | 22 | &:hover { |
| 20 | background-color: transparent; | 23 | background-color: transparent; |
| 21 | color: var(--nav--item--hover--fg); | 24 | color: var(--nav--item--hover--fg); |
| 22 | font-weight: bold; | 25 | font-weight: bold; |
| 23 | } | 26 | } |
| 27 | } | ||
| 24 | } | 28 | } |
| 25 | } | ||
| 26 | 29 | ||
| 27 | &__item { | 30 | &__item { |
| 28 | display: inline-block; | 31 | display: inline-block; |
| 29 | padding: $nav--item--pad-v $nav--item--pad-h calc(#{$nav--item--pad-v} - 2px); | 32 | margin: 0 (-1 * $nav--item--pad-h) 0 ($nav--item--spacing - $nav--item--pad-h); |
| 30 | margin: 0 (-1 * $nav--item--pad-h) 0 ($nav--item--spacing - $nav--item--pad-h); | 33 | padding: $nav--item--pad-v $nav--item--pad-h calc(#{$nav--item--pad-v} - 2px); |
| 31 | color: var(--nav--item--idle--fg); | 34 | border-bottom: 2px solid transparent; |
| 32 | text-decoration: none; | 35 | color: var(--nav--item--idle--fg); |
| 33 | border-bottom: 2px solid transparent; | 36 | text-decoration: none; |
| 34 | 37 | ||
| 35 | &:hover { | 38 | &:hover { |
| 36 | background-color: transparent; | 39 | background-color: transparent; |
| 37 | color: var(--nav--item--hover--fg); | 40 | color: var(--nav--item--hover--fg); |
| 38 | font-weight: bold; | 41 | font-weight: bold; |
| 42 | } | ||
| 39 | } | 43 | } |
| 40 | } | ||
| 41 | 44 | ||
| 42 | @media (max-width: map-get($breakpoints, "sm")) { | 45 | @media (max-width: map-get($breakpoints, 'sm')) { |
| 43 | &__item { | 46 | &__item { |
| 44 | margin-left: $nav--item--spacing-sm - $nav--item--pad-h; | 47 | margin-left: $nav--item--spacing-sm - $nav--item--pad-h; |
| 48 | } | ||
| 45 | } | 49 | } |
| 46 | } | ||
| 47 | 50 | ||
| 48 | /* | 51 | /* |
| 49 | @media (max-width: map-get($breakpoints, "xs")) { | 52 | @media (max-width: map-get($breakpoints, "xs")) { |
| 50 | &__logo { | 53 | &__logo { |
| 51 | display: none; | 54 | display: none; |
diff --git a/assets/css/components/_page-header.scss b/assets/css/components/_page-header.scss index dd273df..886b3e9 100644 --- a/assets/css/components/_page-header.scss +++ b/assets/css/components/_page-header.scss | |||
| @@ -1,17 +1,17 @@ | |||
| 1 | .c-page-header { | 1 | .c-page-header { |
| 2 | margin-bottom: $line-height * 2em; | 2 | margin-bottom: $line-height * 2em; |
| 3 | overflow: hidden; | 3 | overflow: hidden; |
| 4 | 4 | ||
| 5 | &::after { | 5 | &::after { |
| 6 | position: relative; | 6 | content: str-repeat('â–‘', 120); |
| 7 | z-index: -10; | 7 | display: block; |
| 8 | content: str-repeat("â–‘", 120); | 8 | position: relative; |
| 9 | display: block; | 9 | z-index: -10; |
| 10 | height: $line-height; | 10 | height: $line-height; |
| 11 | margin-top: px-to-em(2px); | 11 | margin-top: px-to-em(2px); |
| 12 | padding-top: px-to-em(2px); | 12 | padding-top: px-to-em(2px); |
| 13 | color: var(--fg-minus); | 13 | border-top: 1px solid var(--fg-minus); |
| 14 | border-top: 1px solid var(--fg-minus); | 14 | color: var(--fg-minus); |
| 15 | line-height: $code-block--line-height; | 15 | line-height: $code-block--line-height; |
| 16 | } | 16 | } |
| 17 | } | 17 | } |
diff --git a/assets/css/components/_refs.scss b/assets/css/components/_refs.scss index b90252d..51524bd 100644 --- a/assets/css/components/_refs.scss +++ b/assets/css/components/_refs.scss | |||
| @@ -1,7 +1,7 @@ | |||
| 1 | .c-refs__item { | 1 | .c-refs__item { |
| 2 | padding-left: 0; | 2 | padding-left: 0; |
| 3 | 3 | ||
| 4 | &::before { | 4 | &::before { |
| 5 | display: none; | 5 | display: none; |
| 6 | } | 6 | } |
| 7 | } | 7 | } |
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss index eb71070..ec061c6 100644 --- a/assets/css/layouts/_container.scss +++ b/assets/css/layouts/_container.scss | |||
| @@ -1,20 +1,20 @@ | |||
| 1 | .l-container { | 1 | .l-container { |
| 2 | padding-left: $container--pad-h; | 2 | padding-right: $container--pad-h; |
| 3 | padding-right: $container--pad-h; | 3 | padding-left: $container--pad-h; |
| 4 | 4 | ||
| 5 | &--content { | 5 | &--content { |
| 6 | margin-left: auto; | 6 | max-width: $content--width; |
| 7 | margin-right: auto; | 7 | margin-right: auto; |
| 8 | max-width: $content--width; | 8 | margin-left: auto; |
| 9 | } | 9 | } |
| 10 | 10 | ||
| 11 | &--pad-v { | 11 | &--pad-v { |
| 12 | padding-top: $container--pad-v; | 12 | padding-top: $container--pad-v; |
| 13 | padding-bottom: $container--pad-v; | 13 | padding-bottom: $container--pad-v; |
| 14 | } | 14 | } |
| 15 | 15 | ||
| 16 | @media (max-width: map-get($breakpoints, "sm")) { | 16 | @media (max-width: map-get($breakpoints, 'sm')) { |
| 17 | padding-left: $container--pad-h-sm; | 17 | padding-right: $container--pad-h-sm; |
| 18 | padding-right: $container--pad-h-sm; | 18 | padding-left: $container--pad-h-sm; |
| 19 | } | 19 | } |
| 20 | } | 20 | } |
diff --git a/assets/css/scopes/_page.scss b/assets/css/scopes/_page.scss index 7c9e2d4..a27c1a2 100644 --- a/assets/css/scopes/_page.scss +++ b/assets/css/scopes/_page.scss | |||
| @@ -1,106 +1,106 @@ | |||
| 1 | .s-page { | 1 | .s-page { |
| 2 | &__content { | 2 | &__content { |
| 3 | padding-left: $page--item-prefix--width; | 3 | padding-left: $page--item-prefix--width; |
| 4 | 4 | ||
| 5 | > :first-child { | 5 | > :first-child { |
| 6 | margin-top: 0; | 6 | margin-top: 0; |
| 7 | } | ||
| 7 | } | 8 | } |
| 8 | } | ||
| 9 | 9 | ||
| 10 | h1, | 10 | h1, |
| 11 | h2, | 11 | h2, |
| 12 | h3, | 12 | h3, |
| 13 | .c-refs__item, | 13 | .c-refs__item, |
| 14 | pre { | 14 | pre { |
| 15 | position: relative; | 15 | position: relative; |
| 16 | margin-left: -1 * $page--item-prefix--width; | 16 | margin-left: -1 * $page--item-prefix--width; |
| 17 | padding-left: $page--item-prefix--width; | 17 | padding-left: $page--item-prefix--width; |
| 18 | 18 | ||
| 19 | &::before { | 19 | &::before { |
| 20 | position: absolute; | 20 | display: inline-block; |
| 21 | box-sizing: border-box; | 21 | position: absolute; |
| 22 | display: inline-block; | 22 | box-sizing: border-box; |
| 23 | margin-left: -1 * $page--item-prefix--width; | 23 | width: $page--item-prefix--width; |
| 24 | padding-right: $page--item-prefix--pad; | 24 | margin-left: -1 * $page--item-prefix--width; |
| 25 | width: $page--item-prefix--width; | 25 | padding-right: $page--item-prefix--pad; |
| 26 | color: var(--page--item-prefix--fg); | 26 | color: var(--page--item-prefix--fg); |
| 27 | font-weight: normal; | 27 | font-weight: normal; |
| 28 | text-align: right; | 28 | text-align: right; |
| 29 | } | ||
| 29 | } | 30 | } |
| 30 | } | ||
| 31 | 31 | ||
| 32 | h1 { | 32 | h1 { |
| 33 | font-size: px-to-em($content--h1--font-size); | 33 | font-size: px-to-em($content--h1--font-size); |
| 34 | 34 | ||
| 35 | &::before { | 35 | &::before { |
| 36 | content: "#"; | 36 | content: '#'; |
| 37 | font-size: px-to-em($font-size, $content--h1--font-size); | 37 | font-size: px-to-em($font-size, $content--h1--font-size); |
| 38 | } | ||
| 38 | } | 39 | } |
| 39 | } | ||
| 40 | 40 | ||
| 41 | h2::before { | 41 | h2::before { |
| 42 | content: "##"; | 42 | content: '##'; |
| 43 | } | ||
| 44 | |||
| 45 | h3::before { | ||
| 46 | content: "###"; | ||
| 47 | } | ||
| 48 | |||
| 49 | .c-refs__item::before { | ||
| 50 | content: "|>"; | ||
| 51 | } | ||
| 52 | |||
| 53 | pre { | ||
| 54 | &::before { | ||
| 55 | content: str-repeat("``\A", 40); | ||
| 56 | height: 100%; | ||
| 57 | color: var(--page--item-prefix--fg); | ||
| 58 | overflow: hidden; | ||
| 59 | } | 43 | } |
| 60 | } | ||
| 61 | 44 | ||
| 62 | hr { | 45 | h3::before { |
| 63 | margin-left: -1 * $page--item-prefix--width; | 46 | content: '###'; |
| 64 | } | ||
| 65 | |||
| 66 | .c-page-header { | ||
| 67 | margin-left: -1 * $page--item-prefix--width; | ||
| 68 | padding-left: $page--item-prefix--width; | ||
| 69 | |||
| 70 | &::after { | ||
| 71 | margin-left: -1 * $page--item-prefix--width; | ||
| 72 | } | 47 | } |
| 73 | } | ||
| 74 | 48 | ||
| 75 | @media (max-width: map-get($breakpoints, "sm")) { | 49 | .c-refs__item::before { |
| 76 | &__content { | 50 | content: '|>'; |
| 77 | padding-left: 0; | ||
| 78 | } | 51 | } |
| 79 | 52 | ||
| 80 | h1, | ||
| 81 | h2, | ||
| 82 | h3, | ||
| 83 | .c-refs__item, | ||
| 84 | pre { | 53 | pre { |
| 85 | margin-left: 0; | 54 | &::before { |
| 86 | padding-left: 0; | 55 | content: str-repeat('``\A', 40); |
| 87 | 56 | height: 100%; | |
| 88 | &::before { | 57 | overflow: hidden; |
| 89 | display: none; | 58 | color: var(--page--item-prefix--fg); |
| 90 | } | 59 | } |
| 91 | } | 60 | } |
| 92 | 61 | ||
| 93 | hr { | 62 | hr { |
| 94 | margin-left: 0; | 63 | margin-left: -1 * $page--item-prefix--width; |
| 95 | } | 64 | } |
| 96 | 65 | ||
| 97 | .c-page-header { | 66 | .c-page-header { |
| 98 | margin-left: 0; | 67 | margin-left: -1 * $page--item-prefix--width; |
| 99 | padding-left: 0; | 68 | padding-left: $page--item-prefix--width; |
| 69 | |||
| 70 | &::after { | ||
| 71 | margin-left: -1 * $page--item-prefix--width; | ||
| 72 | } | ||
| 73 | } | ||
| 74 | |||
| 75 | @media (max-width: map-get($breakpoints, 'sm')) { | ||
| 76 | &__content { | ||
| 77 | padding-left: 0; | ||
| 78 | } | ||
| 79 | |||
| 80 | h1, | ||
| 81 | h2, | ||
| 82 | h3, | ||
| 83 | .c-refs__item, | ||
| 84 | pre { | ||
| 85 | margin-left: 0; | ||
| 86 | padding-left: 0; | ||
| 87 | |||
| 88 | &::before { | ||
| 89 | display: none; | ||
| 90 | } | ||
| 91 | } | ||
| 92 | |||
| 93 | hr { | ||
| 94 | margin-left: 0; | ||
| 95 | } | ||
| 96 | |||
| 97 | .c-page-header { | ||
| 98 | margin-left: 0; | ||
| 99 | padding-left: 0; | ||
| 100 | 100 | ||
| 101 | &::after { | 101 | &::after { |
| 102 | margin-left: 0; | 102 | margin-left: 0; |
| 103 | } | 103 | } |
| 104 | } | ||
| 104 | } | 105 | } |
| 105 | } | ||
| 106 | } | 106 | } |
diff --git a/assets/css/style.scss b/assets/css/style.scss index 2ca4cd4..0473689 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss | |||
| @@ -1,13 +1,13 @@ | |||
| 1 | @import "vars"; | 1 | @import 'vars'; |
| 2 | @import "functions"; | 2 | @import 'functions'; |
| 3 | @import "basics"; | 3 | @import 'basics'; |
| 4 | 4 | ||
| 5 | @import "components/refs"; | 5 | @import 'components/refs'; |
| 6 | @import "components/nav"; | 6 | @import 'components/nav'; |
| 7 | @import "components/page-header"; | 7 | @import 'components/page-header'; |
| 8 | 8 | ||
| 9 | @import "layouts/container"; | 9 | @import 'layouts/container'; |
| 10 | 10 | ||
| 11 | @import "scopes/page"; | 11 | @import 'scopes/page'; |
| 12 | 12 | ||
| 13 | @import "utils"; | 13 | @import 'utils'; |
