content.scss (4089B)
1 @import "fonts"; 2 @import "variables"; 3 4 @function themed($key) { 5 @return map-get($theme-map, $key); 6 } 7 8 .content { 9 font-family: $font-text; 10 width: 100%; 11 12 &__hr { 13 margin: 4em 0 0; 14 } 15 16 .language-json { 17 font-size: 0.75rem; 18 } 19 20 .headline-hash { 21 padding: 0 0.2em; 22 @media(min-width: 600px) { 23 display: none; 24 } 25 } 26 27 .before-hash { 28 position: absolute; 29 font-size: 0.9em; 30 top: 0.1rem; 31 &.h2 { 32 left: -1.6em; 33 } 34 &.h3 { 35 left: -2.4em; 36 } 37 @media(max-width: 599px) { 38 display: none; 39 } 40 } 41 42 i:not(.no-sup) { 43 font-size: 0.8rem; 44 vertical-align: 0.4rem; 45 } 46 47 i.fa-font-awesome-flag { 48 font-size: 0.6rem; 49 } 50 51 p:not([class]) { 52 margin: 1.2rem 0; 53 } 54 55 p + ul, p + ol { 56 margin-top: -0.8rem; 57 } 58 59 table { 60 display: block; 61 overflow-x: auto; 62 border-collapse: collapse; 63 td, th { 64 border: 1px solid; 65 @include themify($themes) { 66 border-color: themed('color-text'); 67 } 68 } 69 td { 70 padding: 0.5em 1em; 71 } 72 th { 73 padding: 1em 2em; 74 @include themify($themes) { 75 background-color: themed('color-background-hover'); 76 color: themed('color-text'); 77 } 78 } 79 tr:nth-child(even) { 80 @include themify($themes) { 81 background-color: themed('color-background-hover'); 82 color: themed('color-text'); 83 } 84 } 85 } 86 87 ol { 88 margin: 1.5em 0; 89 padding: 0; 90 counter-reset: my-awesome-counter; 91 list-style: none; 92 li { 93 counter-increment: my-awesome-counter; 94 list-style-position: outside; 95 margin-bottom: 0.2em; 96 span { 97 position: relative; 98 &:before { 99 position: absolute; 100 right: 0.5em; 101 top: 0.1em; 102 content: counter(my-awesome-counter)'.'; 103 font-size: 0.8em; 104 @include themify($themes) { 105 color: themed('color-red'); 106 } 107 } 108 } 109 } 110 } 111 112 ul { 113 margin: 1.5em 0; 114 padding: 0; 115 list-style: none; 116 li { 117 margin-bottom: 0.2em; 118 position: relative; 119 span { 120 position: relative; 121 &:before { 122 right: 0.6em; 123 top: -0.2em; 124 display: inline-block; 125 content: "–"; 126 position: absolute; 127 z-index: 1; 128 @include themify($themes) { 129 color: themed('color-red'); 130 } 131 } 132 } 133 input { 134 margin-left: -1.9em; 135 position: absolute; 136 z-index: 2; 137 top: 3.9px; 138 margin-right: 0; 139 } 140 } 141 } 142 143 figcaption { 144 font-size: 0.8em; 145 } 146 147 twitter-widget, .twitter-tweet { 148 margin-left: auto; 149 margin-right: auto; 150 } 151 } 152 153 .notes { 154 margin-bottom: 2rem; 155 156 & > div, & > p { 157 margin: 0; 158 margin-top: 0.7rem; 159 & > p { 160 margin: 0; 161 margin-top: 0.7rem; 162 } 163 } 164 165 &__title { 166 margin: 0; 167 a { 168 font-family: $font-mono; 169 } 170 } 171 172 &__content { 173 margin-top: 0 !important; 174 & > p { 175 margin-top: 0 !important; 176 } 177 } 178 179 &:target { 180 outline: solid 0.2em; 181 outline-offset: 0.6em; 182 @include themify($themes) { 183 outline-color: themed('color-background-hover'); 184 } 185 @media (max-width: 599px) { 186 outline: solid 0.3em; 187 outline-offset: 0.5em; 188 } 189 } 190 191 @media (max-width: 599px) { 192 &__title { 193 margin: 10px 0 0; 194 &__separator { 195 display: none; 196 } 197 display: flex; 198 flex-direction: column; 199 } 200 } 201 } 202 203 .twitter-link { 204 margin-bottom: 0.2rem; 205 font-size: 0.9rem; 206 } 207 208 .mastodon-link { 209 margin-top: 0.2rem; 210 font-size: 0.9rem; 211 } 212 213 .responses { 214 margin-bottom: 3rem; 215 216 h1 { 217 margin-bottom: 0; 218 } 219 220 &__subtitle { 221 margin: 0; 222 a { 223 font-family: $font-mono; 224 } 225 } 226 227 &:target { 228 outline: solid 0.2rem; 229 outline-offset: 1.3rem; 230 @include themify($themes) { 231 outline-color: themed('color-background-hover'); 232 } 233 @media (max-width: 599px) { 234 outline: solid 0.3rem; 235 outline-offset: 1.2rem 0.8rem; 236 } 237 } 238 } 239 240 .image-figure { 241 margin-top: 1.5rem; 242 margin-bottom: 1.5rem; 243 }