style.css (6915B)
1 /* Fonts */ 2 3 /* 4 @font-face { 5 font-family: charter; 6 font-style: normal; 7 font-weight: normal; 8 font-stretch: normal; 9 src: url('/pub/fonts/charter/charter_regular.woff2') format('woff2'); 10 } 11 12 @font-face { 13 font-family: 'Source Serif Pro'; 14 font-style: normal; 15 font-weight: 400; 16 font-display: swap; 17 src: url(https://nunosempere.com/pub/fonts/source-serif/source-serif-pro-latin-ext.woff2) format('woff2'), 18 url(https://nunosempere.com/pub/fonts/source-serif/source-serif-pro-latin.woff2) format('woff2'); 19 unicode-range: U+0000-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; 20 } 21 22 23 @font-face { 24 font-family: charter; 25 font-style: italic; 26 font-weight: normal; 27 font-stretch: normal; 28 src: url('/pub/fonts/charter/charter_italic.woff2') format('woff2'); 29 } 30 31 @font-face { 32 font-family: charter; 33 font-style: normal; 34 font-weight: bold; 35 font-stretch: normal; 36 src: url('/pub/fonts/charter/charter_bold.woff2') format('woff2'); 37 } 38 39 @font-face { 40 font-family: charter; 41 font-style: italic; 42 font-weight: bold; 43 font-stretch: normal; 44 src: url('/pub/fonts/charter/charter_bold_italic.woff2') format('woff2'); 45 } 46 */ 47 /* Body */ 48 49 body { 50 display: flex; 51 flex-wrap: wrap; 52 /* font-family: 'Source Serif Pro'; */ 53 /* font-family: 'Times New Roman'; */ 54 font-family: "Garamond", 'serif'; 55 /* font-family: 'charter'; */ 56 font-size: 25px; 57 background-color: #fcfcfc; 58 line-height: 130%; 59 color:#333; 60 } 61 62 * { /* incorporates the padding and borders into the object size*/ 63 box-sizing: border-box; 64 } 65 66 /* header */ 67 header { 68 flex-basis: 100%; 69 border-bottom: 2px solid #eee; 70 } 71 72 header h1 { 73 margin: 0.5em 0 0.5em 0.7em; 74 color:#333; 75 } 76 77 header a { 78 text-decoration: none; 79 color: #333; 80 } 81 82 header h1 span { 83 margin-left: 0em; 84 color: #555; 85 /* 86 font-size: 70%; 87 font-style: italic; 88 */ 89 } 90 91 header nav { /* Not used by me, but used by suckless.org */ 92 display: flex; 93 justify-content: space-between; 94 } 95 96 /* Header */ 97 98 h1 { 99 line-height: 110%; 100 } 101 102 /* Navigation bar */ 103 104 nav { 105 display: flex; 106 flex-basis: 20%; 107 max-width: 20%; 108 min-width: 20%; 109 float: left; 110 margin: 0 1px 0 0; 111 border-right: 2px solid #eee; 112 /* width: 350px; */ 113 } 114 115 nav a{ 116 text-decoration: none; 117 /* color: #005386; */ 118 color: #333; 119 } 120 121 nav a:hover { 122 background-color: #ddd; 123 } 124 125 nav ul { 126 display: flex; 127 flex-direction: column; 128 list-style-type: none; 129 list-style-position: outside; 130 padding-left: 0; 131 } 132 133 nav li ul { 134 padding-left: 0.6em; 135 } 136 137 nav li a { 138 display: block; 139 margin: 0; 140 padding: 0.3em 2em 0.8ex 1em; 141 } 142 143 /* article */ 144 article{ 145 flex-basis: 70%; 146 max-width: 70%; 147 min-width: 70%; 148 padding-left: 1em; 149 color: #333; 150 /* padding: 0.3em 0 0 0; */ 151 } 152 153 /* footer */ 154 footer { 155 display: none; 156 /* display: block; */ 157 /* 158 flex-grow: 1; 159 flex-basis: 100%; 160 flex-shrink: 0; 161 justify-content: space-between; 162 padding: 0.1em 0em 1em 1em; 163 border-top: 2px solid #eee 164 */ 165 } 166 167 /* links */ 168 169 a { 170 /* color: #005386; */ 171 color: #333; 172 } 173 174 /* Images and figures */ 175 176 figure figcaption { 177 display: block; 178 margin-left: auto; 179 margin-right: auto; 180 } 181 182 figcaption { 183 text-align: center; 184 font-size: 16px; 185 } 186 187 .img-frontpage-center, 188 .img-medium-center, 189 img { 190 display: block; 191 margin-left: auto; 192 margin-right: auto; 193 } 194 195 img { 196 width: 80%; 197 } 198 199 .img-frontpage-center { 200 width: 40%; 201 } 202 203 .img-medium-center { 204 width: 50%; 205 } 206 207 /* Block quotes */ 208 209 blockquote{ 210 width:60%; 211 margin: 5px auto; 212 /* color: #555555; */ 213 color: #333; 214 padding: 1.2em 30px 1.2em 75px; 215 /* border-left: 8px solid #005386 ; */ 216 border-left: 8px solid #333; 217 line-height:1.3; 218 position: relative; 219 background: #F0F0F0; 220 } 221 222 blockquote::before{ 223 font-family:Arial; 224 content: "\201C"; 225 /* color:#005386; */ 226 color: #333; 227 font-size:4em; 228 position: absolute; 229 left: 10px; 230 top:-10px; 231 } 232 233 /* Code bloocks */ 234 pre { 235 background-color: #eeeeee; 236 border: 2px solid; 237 overflow-x: auto; 238 } 239 pre, 240 code { 241 display: block; 242 padding: 0.5em; 243 } 244 245 /* Lists */ 246 /* this aligns the sitemap */ 247 248 ul { 249 margin-left: 15px; 250 } 251 252 li{ 253 list-style-position: outside; 254 /* list-style-type: '- ' /* ndash, a*/ 255 } 256 257 /* Tables */ 258 /* old style: 259 table { 260 border-collapse: collapse; 261 margin-left: auto; 262 margin-right: auto; 263 margin-top: 1em; 264 margin-bottom: 1em; 265 } 266 267 td, 268 th { 269 border: 1px solid var(--border); 270 text-align: left; 271 padding: 0.5rem; 272 } 273 274 th { 275 background: var(--accent-bg); 276 font-weight: bold; 277 } 278 */ 279 280 table { 281 /* border: 3px solid #005386; */ 282 border: 3px solid #333; 283 border-collapse: collapse; 284 table-layout: fixed; 285 text-align: left; 286 width: 100%; 287 } 288 289 table thead { 290 /* position: sticky; 291 top: 0; */ 292 } 293 294 table tbody tr:nth-child(even) { 295 /* background: #E9F1F4; */ 296 background: #ededed; 297 } 298 299 table th { 300 /* background: #005386; */ 301 background: #333; 302 color: #fcfcfc; 303 font-weight: bold; 304 } 305 table th, table td { 306 padding: 1em 1em 1em 1em; 307 /* border: 3px solid #005386; */ 308 } 309 310 /* Newsletter stuff */ 311 312 .subscribe-button { 313 /* background: #0055d4; */ 314 background: #333; 315 padding: 15px 30px; 316 border-radius: 3px; 317 border: 0; 318 cursor: pointer; 319 text-decoration: none; 320 color: #ffff; 321 display: inline-block; 322 min-width: 150px; 323 font-size: 20px; 324 text-align: center; 325 } 326 327 .subscribe-input { 328 padding: 10px 15px; 329 border: 1px solid #888; 330 border-radius: 3px; 331 width: 33%; 332 box-shadow: 2px 2px 0 #f3f3f3; 333 border: 1px solid #ddd; 334 font-size: 20px; 335 } 336 337 input:focus { 338 border-color: #0055d4; 339 } 340 341 input:focus::placeholder { 342 color: transparent; 343 } 344 345 /* Figcaptions for markdown 346 * Per <https://stackoverflow.com/questions/19331362/using-an-image-caption-in-markdown-jekyll> 347 */ 348 349 img + em { 350 display: block; 351 text-align: center; 352 font-size: 1em; 353 } 354 355 /* Isso comments */ 356 /* You can see the general comments style: <https://comments.nunosempere.com/css/isso.css> */ 357 358 .isso-textarea, #isso-postbox-author, #isso-postbox-email, #isso-postbox-website, .isso-post-action > input { 359 font-size: 20px; 360 } 361 362 .isso-textarea { 363 height: 15em; 364 resize: vertical !important; 365 366 } 367 368 /* Set image-frontpage-center size across devices */ 369 @media screen and (max-width: 1000px) { 370 body { 371 display: block; 372 font-size: 40px; 373 } 374 .img-frontpage-center { 375 width: 60%; /* 700px * 0.6 = 420px */ 376 } 377 } 378 379 @media screen and (min-width: 1000px) and (max-width: 1500px) { 380 .img-frontpage-center { 381 width: 420px 382 } 383 } 384 385 @media screen and (min-width: 1500px) { 386 .img-frontpage-center { 387 width: 40%; /* 1500px * 0.7 (article) * 0.4 = 420px */ 388 } 389 } 390 391 /* General media stuff */ 392 @media screen and (max-width: 1500px) { 393 body { 394 display: block; 395 } 396 .hidden-mobile { 397 display: none; 398 } 399 article { 400 flex-basis: 100%; 401 max-width: 100%; 402 min-width: 100%; 403 padding: 5px; 404 } 405 header h1 { 406 margin-left: 0; 407 } 408 } 409 410 @media screen and (min-width: 1500px) { 411 .hide-not-mobile { 412 display: none; 413 } 414 }