style.scss (6940B) - Raw
1 @use 'pure'; 2 @use 'grids-responsive'; 3 4 $darkTextColor: #ccc; 5 $darkTextColorStr: "ccc"; 6 $darkBgGrey: #313131; 7 $blueLinkVisited: #007bff; 8 $grey: #666; 9 $lightBlue: #008ed4; 10 $lightBorderColor: #a3a3a3; 11 12 /************************/ 13 /** Very Common Things **/ 14 /************************/ 15 * { 16 -webkit-box-sizing: border-box; 17 -moz-box-sizing: border-box; 18 box-sizing: border-box; 19 } 20 21 html, button, input, select, textarea, .pure-g [class *= "pure-u"] { 22 font-family: "-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji"; 23 line-height: 1.5; 24 } 25 26 .pure-button-primary { 27 background-color: $lightBlue; 28 } 29 30 a, a:visited { 31 text-decoration: none; 32 color: $blueLinkVisited; 33 } 34 35 a:hover, a:focus { 36 text-decoration: underline; 37 } 38 39 /* So switching between scrollable and non-scrollable pages 40 does not cause a 10px shift 41 */ 42 body { 43 overflow-y: scroll; 44 } 45 46 .clear { 47 clear: both; 48 } 49 50 .hidden { 51 position: absolute; 52 top: -9999px; 53 left: -9999px; 54 } 55 56 /* Override pure.css; standard headers are too big */ 57 h1 { 58 font-size: 1.6rem; 59 } 60 61 $h2Size: 1.2rem; 62 h2 { 63 font-size: $h2Size; 64 } 65 66 /***************************/ 67 /** Part of Base template **/ 68 /***************************/ 69 70 body > div { 71 padding-top: 2em; 72 padding-left: 1.2rem; 73 padding-right: 1.2rem; 74 } 75 76 h1.brand-title { 77 text-align: center; 78 } 79 80 h1.brand-title > a, h2.brand-subtitle { 81 color: #000; 82 } 83 84 h1.brand-title { 85 a { 86 font-variant: small-caps; 87 font-size: 3rem; 88 } 89 a:hover, a:focus { 90 text-decoration: none; 91 } 92 } 93 94 h2.brand-subtitle { 95 font-size: 1.6rem; 96 text-align: center; 97 } 98 99 main { 100 margin: 0 auto; 101 max-width: 1000px; 102 margin-top: 33px; 103 } 104 105 header { 106 margin-left: auto; 107 margin-right: auto; 108 padding: 1rem 2rem 2rem 2rem; 109 border-radius: 10px; 110 max-width: 1000px; 111 background-color: #e6e6e6; 112 background: radial-gradient(circle at top left, $lightBlue 0%, #aaa 50%, #666 100%); 113 } 114 115 nav { 116 margin: 0 auto; 117 max-width: 1000px; 118 padding: 10px 0; 119 text-align: right; 120 a { 121 padding-left: 15px; 122 } 123 } 124 125 /*******************************/ 126 /* Shared by a couple of pages */ 127 /*******************************/ 128 129 $featuresGutter: 1rem; 130 #page-index .leftright { 131 padding-top: 1em; 132 margin: (0-$featuresGutter); 133 134 /* Tiles are vertically center-aligned, top margin is unnecessary */ 135 h1 { 136 margin-top: 0; 137 } 138 139 article { 140 margin: 15px 0; 141 padding: 0 $featuresGutter; 142 } 143 } 144 145 blockquote { 146 border-left: 2px solid $lightBorderColor; 147 font-style: italic; 148 line-height: 1.8; 149 padding-left: 1.5em; 150 } 151 152 @function svgarrow($color) { 153 @return url("data:image/svg+xml;utf8,<svg width='19' height='10' xmlns='http://www.w3.org/2000/svg'><path d='M17.5 1.5l-8 7-8-7' stroke='%23"+$color+"' stroke-width='2' fill='none' fill-rule='evenodd'/></svg>"); 154 } 155 156 #page-index #faq { 157 margin: 4rem 0 8rem 0; 158 border-bottom: 1px solid $lightBorderColor; 159 160 > article { 161 border-top: 1px solid $lightBorderColor; 162 163 input { 164 display: none; 165 } 166 167 $rotateTransition: transform .2s ease-in-out; 168 $hideTransition: opacity .2s ease-out, max-height 0.2s ease-out; 169 > div { 170 max-height: 1000px; 171 max-width: 768px; 172 transition: $hideTransition; 173 174 > div { 175 padding-bottom: 30px; 176 } 177 } 178 179 $labelMargin: 1.5rem; 180 label { 181 position: relative; 182 183 > h2 { 184 padding: $labelMargin 0; 185 margin: 0; 186 187 // FIXME: hide the pointer in netsurf, since the sections 188 // are always expanded. 189 cursor: pointer; 190 } 191 } 192 193 $arrowHeight: 0.8rem; 194 label::before { 195 content: ""; 196 float: right; 197 background-image: svgarrow("000"); 198 background-position: 50%; 199 background-repeat: no-repeat; 200 background-size: contain; 201 margin-top: $labelMargin + $h2Size - $arrowHeight; 202 height: $arrowHeight; 203 width: 1rem; 204 transition: $rotateTransition; 205 transform: rotate(0deg); 206 } 207 208 input:checked ~ div { 209 overflow: hidden; 210 max-height: 0; 211 transition: $hideTransition; 212 opacity: 0; 213 } 214 215 input:checked ~ label::before { 216 transition: $rotateTransition; 217 transform: rotate(180deg); 218 } 219 220 } /* > article */ 221 } /* #faq */ 222 223 /*******************/ 224 /** Page-specific **/ 225 /*******************/ 226 227 #page-index { 228 #subscribe-section { 229 margin-top: 50px; 230 background-color: #e6e6e6; 231 padding: 1rem 2rem 2rem 2rem; 232 border-radius: 10px; 233 max-width: 1000px; 234 margin-left: auto; 235 margin-right: auto; 236 text-align: center; 237 238 span.message-success, span.message-error { 239 font-weight: bold; 240 font-size: $h2Size - 0.2; 241 } 242 span.message-success { 243 color: #181; 244 } 245 span.message-error { 246 color: #e33; 247 } 248 249 input#email { 250 width: 100%; 251 text-align: center; 252 margin-top: 1rem; 253 margin-bottom: .5rem; 254 border-radius: 3px; 255 } 256 257 button { 258 width: 100%; 259 text-align: center; 260 border-radius: 3px; 261 } 262 263 > h2 { 264 color: $grey; 265 } 266 } 267 } /* #page-index */ 268 269 /**********************************/ 270 /** Media Media Responsive Media **/ 271 /**********************************/ 272 273 @media (prefers-color-scheme: dark) { 274 h1, h2, h3, body { 275 color: $darkTextColor; 276 } 277 body { 278 background-color: #222; 279 } 280 h1.brand-title > a { 281 color: #ececec; 282 } 283 284 header { 285 background-color: $darkBgGrey; 286 background: radial-gradient(circle at top left, $blueLinkVisited 0%, $darkBgGrey 50%, $darkTextColor 100%); 287 } 288 289 h2.brand-subtitle { 290 color: $darkTextColor; 291 } 292 293 blockquote { 294 border-left-color: $darkTextColor; 295 } 296 297 #page-index { 298 #subscribe-section { 299 background-color: $darkBgGrey; 300 > h2 { 301 color: $darkTextColor; 302 } 303 304 span.message-success { 305 color: #9c9; 306 } 307 308 input { 309 color: $darkTextColor; 310 border: 1px solid #555; 311 box-shadow: none; 312 -webkit-box-shadow: none; 313 background-color: #222; 314 } 315 } 316 } 317 318 #page-index #faq > article { 319 label::before { 320 // difference from the default version: the color of the 321 // shape is #ccc. 322 background-image: svgarrow($darkTextColorStr); 323 } 324 325 } 326 }