global.css (7680B)
1 @font-face { 2 font-family: "Tobias"; 3 src: url("/fonts/tobias.woff2") format("woff2"); 4 } 5 6 :root { 7 --serif-font-family: "Tobias", Iowan Old Style, Apple Garamond, Baskerville, 8 Times New Roman, Droid Serif, Times, Source Serif Pro, serif, 9 Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; 10 --sans-serif-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", 11 avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, 12 roboto, noto, arial, sans-serif; 13 --primary-color: light-dark(#333, #fafafa); 14 --secondary-color: light-dark(#999, #c7c7c7); 15 --background-color: light-dark(#fafafa, #333); 16 17 font-family: var(--sans-serif-font-family); 18 line-height: 1.618; 19 20 color-scheme: light dark; 21 color: var(--primary-color); 22 background-color: var(--background-color); 23 } 24 25 header { 26 padding-block-start: 2em; 27 padding-inline: 2em; 28 margin-inline: auto; 29 30 #back svg { 31 width: 3ch; 32 } 33 34 h1 { 35 text-transform: uppercase; 36 } 37 38 .index { 39 display: none; 40 } 41 42 &:has(div.index) { 43 display: flex; 44 justify-content: space-between; 45 46 width: 100%; 47 max-width: 92ch; 48 padding-inline: 0; 49 50 svg { 51 width: 12em; 52 padding-inline: 1em; 53 } 54 } 55 } 56 57 main { 58 width: 75%; 59 max-width: 72ch; 60 margin: 2em; 61 62 &:has(div.index) { 63 display: grid; 64 grid-template-columns: repeat(6, 1fr); 65 grid-template-rows: 0.5fr 0.75fr 1fr 0.75fr 1.25fr; 66 grid-template-areas: 67 "par par par par par par" 68 "writing writing writing projects projects projects" 69 "about about reviews reviews reviews reviews" 70 "about about links links links links" 71 "work work work work work work"; 72 gap: 2ch; 73 margin-inline: auto; 74 margin-block-end: 0; 75 76 section { 77 padding: 1.5em; 78 border-style: solid; 79 border-width: 10px; 80 place-self: start; 81 82 border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 491 209"><path fill="SelectedItem" d="m449.708 208.766 16.795-1.736 1.971.822 4.08.01 4.631-2.575 3.839-2.816 3.269-4.294 2.573-5.618-.014-3.085-.837-1.978-.001-6.99 4.972-26.013v-40.986l-1.98-23.958-3.022-15.691-2.813-33.781-5.956-18.546-2.699-6.463-2.292-3.318-7.095-2.785-28.636-3.951-4.019.133-.974.652-2.004-.784h-29.993l-3.066.853-34.738-2.463-12.206-1.391-15.993-.013-20.547 2.123-26.41 1.719-2.047-.828-8.996-.014-2.026.147-1.978.837-7.989.001L210.5.001 190.786 1.92 171.18 4.484l-13.094 2.03-6.552 1.465-.375.497.338 1.504.977.871 5.019.135 44.014-5.972 16.993-.013 38.007 4.985 19.989-.001 3.031-.828 1.976.828 21.997.014 37-3.97 40.007 3.957 28.989-.001 3.067-.854 36.405 1.904 15.706 2.856 4.551 1.86 2.086 3.027 1.904 4.753 4.144 12.187 1.7 6.784 2.95 35.702 2.909 14.332 2.068 38.971v18.986l-4.031 23.453-1.766 20.359-3.263 4.828-3.896 2.766-32.537 3.087-35-1.972-24.99.001-3.066.854-76.938-1.858-26.275-1.53-16.724-1.48-39.993.013-35.431 1.94L171.5 202l-38.993-.014-27.007-2.957-59.993 2.956-22.975-1.94-8.908-1.819-3.809-1.938-3.1-3.098-1.577-2.636-.124-10.047 1.856-8.945L7 168.5l-1.986-17.007L5 145.5l2.573-24.65 1.398-9.35-1.957-37.007V46.507l3.767-18.329 2.884-8.323 58.842-4.841 16.99.001 1.977.837L95.5 16l42.996-.015 1.978-.837 3.02-.134 3.952 1.848 2.05.122 2.007-1.004.472-1.541-4.449-3.29-1.03-.134h-17.993l-3.007.97L116.5 12l-4.026-.148-1.978-.836-2.022.131-.974.652-.974-.652-4.023-.132-2.003.784-2.004-.784-40.989-.001-22.944 2.853-2.106-.709-18.967 1.919-3.65 1.613-1.167 2.14-1.892 6.348-4.767 24.329v9.986l1.972 27.014v28.986l-2.972 20.014.001 21.989.97 3.007.001 13.99-1.855 7.945-.117 5.056 3.062 8.638 4.74 4.156 4.027 2.061 8.095 1.886 12.57 1.751h31.985l18.014-1.972 25.993-.013 14.509 1.194 34.484 1.791 33.777-2.11 53.23-1.875 79.007 4.985 3.989-.001 1.978-.837 2.026-.147 7 .999 7.996-.015 1.977-.828 3.031.828h16.992l1.978-.837 4.022-.133 1.978.837 3.026.148 4.026-.148 1.977-.837 8.997-.014 25.007 1.985"/></svg>') 83 10% 5% 10% 5% stretch stretch; 84 85 h2 { 86 text-transform: uppercase; 87 } 88 89 h3 { 90 font-family: var(--serif-font-family); 91 font-weight: 500; 92 } 93 94 a { 95 text-decoration: none; 96 } 97 98 .content { 99 display: flex; 100 flex-wrap: wrap; 101 row-gap: 2ch; 102 column-gap: 8ch; 103 } 104 105 .caption { 106 color: var(--secondary-color); 107 } 108 109 .more svg { 110 width: 14ch; 111 } 112 } 113 114 #par { 115 grid-area: par; 116 padding-inline: 4ch; 117 text-align: center; 118 font-style: italic; 119 place-self: center; 120 } 121 #writing { 122 grid-area: writing; 123 } 124 #reviews { 125 grid-area: reviews; 126 } 127 #projects { 128 grid-area: projects; 129 } 130 #work { 131 grid-area: work; 132 } 133 #about { 134 grid-area: about; 135 } 136 #links { 137 grid-area: links; 138 } 139 } 140 } 141 142 footer { 143 margin: 2em; 144 145 .index { 146 display: none; 147 } 148 149 &:has(div.index) { 150 width: 75%; 151 max-width: 72ch; 152 display: flex; 153 flex-direction: column; 154 align-items: center; 155 margin-block-start: 0; 156 margin-inline: auto; 157 158 form { 159 text-align: center; 160 margin-block-end: 1ch; 161 162 #buttondown_label { 163 margin-inline-end: 1ch; 164 } 165 166 #buttondown_submit { 167 margin-inline-start: 1ch; 168 } 169 } 170 } 171 172 svg { 173 color: var(--secondary-color); 174 width: 3ch; 175 } 176 } 177 178 a { 179 color: inherit; 180 181 &:hover, 182 &:focus { 183 color: #8e60a7; 184 } 185 } 186 187 p, 188 details { 189 margin-block-start: 0ch; 190 margin-block-end: 2ch; 191 } 192 193 h1, 194 h2, 195 h3, 196 h4, 197 h5, 198 h6 { 199 margin: 0; 200 position: relative; 201 202 a { 203 text-decoration: none; 204 } 205 206 &:hover > .zola-anchor { 207 opacity: 100; 208 } 209 } 210 211 ul { 212 list-style: square; 213 } 214 215 video, 216 picture, 217 img { 218 width: 100%; 219 } 220 221 small { 222 color: var(--secondary-color); 223 font-family: var(--serif-font-family); 224 font-size: 100%; 225 226 a { 227 text-decoration: none; 228 } 229 } 230 231 blockquote { 232 margin-inline: 0; 233 padding-inline-start: 1em; 234 235 border-left: 20px solid; 236 border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 50 517"><path fill="SelectedItem" fill-rule="evenodd" d="m36.64 516.8.113-28.62.998-46.39 1.531-19.77 7.165-66.88 2.748-43.05-.057-66.405-1.687-18.46-1.916-12.444-7.503-30.777-6.584-21.107-15.946-39.892-6.928-20.626-2.075-8.16-1.753-10.401-1.012-17.45.998-18.632.746-2.84 2.112-6.127 2.434-4.714 16.154-27.66 1.988.344-2.224-5.82-6.466 11.74L8.996 29.23l-4.4 8.511-1.989 5.893-.856 4.138-1.015 18.61 1.991 24.452 3.836 16.481 3.99 11.788 16.945 42.892 6.927 20.626 8.012 34.851 2.825 22.139 1.058 38.369-1.068 38.04-3.73 49.45-5.882 50.35-1.779 19.91.424 72.54m.398-17.52h-.366l.183-18.61" clip-rule="evenodd"/></svg>') 237 1 10 1 10 stretch stretch; 238 } 239 240 code { 241 font-size: 120%; 242 } 243 244 .zola-anchor { 245 opacity: 0%; 246 position: absolute; 247 top: -0.5em; 248 right: 100%; 249 width: 1em; 250 transition: opacity 0.3s cubic-bezier(1, 0, 0, 1); 251 252 &.visible { 253 opacity: 100%; 254 } 255 } 256 257 .plain-list { 258 list-style: none; 259 margin: 0; 260 padding-inline-start: 0; 261 262 li { 263 position: relative; 264 } 265 } 266 267 .section-title { 268 font-family: var(--serif-font-family); 269 text-decoration: none; 270 } 271 272 .summary { 273 color: var(--secondary-color); 274 font-size: 90%; 275 } 276 277 .icon svg { 278 padding-inline-start: 0.5ch; 279 width: 1ch; 280 } 281 282 /* Vertical grid for mobile screens */ 283 @media (max-width: 115ch) { 284 main { 285 &:not(:has(div.index)) { 286 width: unset; 287 } 288 289 &:has(div.index) { 290 grid-template-columns: 1fr; 291 grid-template-rows: unset; 292 grid-template-areas: 293 "par" 294 "writing" 295 "projects" 296 "reviews" 297 "about" 298 "work" 299 "links"; 300 301 #par { 302 padding-inline: 0; 303 width: 110%; 304 } 305 } 306 } 307 }