diff options
Diffstat (limited to 'assets/css/_basics.scss')
| -rw-r--r-- | assets/css/_basics.scss | 166 |
1 files changed, 83 insertions, 83 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 | } |
