global.css (7303B)
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 75 section { 76 padding: 1.5em; 77 border-style: solid; 78 border-width: 10px; 79 place-self: start; 80 81 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>') 82 10% 5% 10% 5% stretch stretch; 83 84 h2 { 85 text-transform: uppercase; 86 } 87 88 h3 { 89 font-family: var(--serif-font-family); 90 font-weight: 500; 91 } 92 93 a { 94 text-decoration: none; 95 } 96 97 .content { 98 display: flex; 99 flex-wrap: wrap; 100 row-gap: 2ch; 101 column-gap: 8ch; 102 } 103 104 .caption { 105 color: var(--secondary-color); 106 } 107 108 .more svg { 109 width: 14ch; 110 } 111 } 112 113 #par { 114 grid-area: par; 115 padding-inline: 4ch; 116 text-align: center; 117 font-style: italic; 118 place-self: center; 119 } 120 #writing { 121 grid-area: writing; 122 } 123 #reviews { 124 grid-area: reviews; 125 } 126 #projects { 127 grid-area: projects; 128 } 129 #work { 130 grid-area: work; 131 } 132 #about { 133 grid-area: about; 134 } 135 #links { 136 grid-area: links; 137 } 138 } 139 } 140 141 footer { 142 margin: 2em; 143 144 .index { 145 display: none; 146 } 147 148 &:has(div.index) { 149 display: flex; 150 justify-content: center; 151 } 152 153 svg { 154 color: var(--secondary-color); 155 width: 3ch; 156 } 157 } 158 159 a { 160 color: inherit; 161 162 &:hover, 163 &:focus { 164 color: #8e60a7; 165 } 166 } 167 168 p, 169 details { 170 margin-block-start: 0ch; 171 margin-block-end: 2ch; 172 } 173 174 h1, 175 h2, 176 h3, 177 h4, 178 h5, 179 h6 { 180 margin: 0; 181 position: relative; 182 183 a { 184 text-decoration: none; 185 } 186 187 &:hover > .zola-anchor { 188 opacity: 100; 189 } 190 } 191 192 ul { 193 list-style: square; 194 } 195 196 video, 197 picture, 198 img { 199 width: 100%; 200 } 201 202 small { 203 color: var(--secondary-color); 204 font-family: var(--serif-font-family); 205 font-size: 100%; 206 207 a { 208 text-decoration: none; 209 } 210 } 211 212 blockquote { 213 margin-inline: 0; 214 padding-inline-start: 1em; 215 216 border-left: 20px solid; 217 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>') 218 1 10 1 10 stretch stretch; 219 } 220 221 .zola-anchor { 222 opacity: 0%; 223 position: absolute; 224 top: -0.5em; 225 right: 100%; 226 width: 1em; 227 transition: opacity 0.3s cubic-bezier(1, 0, 0, 1); 228 229 &.visible { 230 opacity: 100%; 231 } 232 } 233 234 .plain-list { 235 list-style: none; 236 margin: 0; 237 padding-inline-start: 0; 238 239 li { 240 position: relative; 241 } 242 } 243 244 .section-title { 245 font-family: var(--serif-font-family); 246 text-decoration: none; 247 } 248 249 .summary { 250 color: var(--secondary-color); 251 font-size: 90%; 252 } 253 254 .icon svg { 255 padding-inline-start: 0.5ch; 256 width: 1ch; 257 } 258 259 /* Vertical grid for mobile screens */ 260 @media (max-width: 115ch) { 261 main { 262 &:not(:has(div.index)) { 263 width: unset; 264 } 265 266 &:has(div.index) { 267 grid-template-columns: 1fr; 268 grid-template-rows: unset; 269 grid-template-areas: 270 "par" 271 "writing" 272 "projects" 273 "reviews" 274 "about" 275 "work" 276 "links"; 277 278 #par { 279 padding-inline: 0; 280 width: 110%; 281 } 282 } 283 } 284 }