github.com/HaswinVidanage/gqlgen@v0.8.1-0.20220609041233-69528c1bf712/docs/static/main.css (about) 1 :root { 2 --font-text: 'Roboto', sans-serif; 3 --font-heading: 'Work Sans', sans-serif; 4 --font-code: 'Source Code Pro', monospace; 5 6 --main-bg-color: coral; 7 8 --color-link: #336699; 9 --color-text: #556; 10 11 --color-heading-text: #445; 12 --color-heading-background: #e9ebed; 13 14 --color-nav-text: #eee; 15 --color-nav-background: #0A215C; 16 --color-nav-active: #284578; 17 18 --color-anchor-default: #DDD; 19 --color-anchor-hover: #666; 20 21 --color-code-text: #445; 22 --color-code-background: #f5f9fc; 23 24 --color-blockquote-background: #fffaf3; 25 --color-blockquote-highlight: rgba(0, 0, 0, 0.1); 26 27 --margin-default: 15px; 28 } 29 30 html, body, div, span, applet, object, iframe, 31 h1, h2, h3, h4, h5, h6, p, blockquote, pre, 32 a, abbr, acronym, address, big, cite, code, 33 del, dfn, em, img, ins, kbd, q, s, samp, 34 small, strike, strong, sub, sup, tt, var, 35 b, u, i, center, 36 dl, dt, dd, ol, ul, li, 37 fieldset, form, label, legend, 38 table, caption, tbody, tfoot, thead, tr, th, td, 39 article, aside, canvas, details, embed, 40 figure, figcaption, footer, header, hgroup, 41 menu, nav, output, ruby, section, summary, 42 time, mark, audio, video { 43 margin: 0; 44 padding: 0; 45 border: 0; 46 font-size: 100%; 47 font: inherit; 48 vertical-align: baseline; 49 } 50 /* HTML5 display-role reset for older browsers */ 51 article, aside, details, figcaption, figure, 52 footer, header, hgroup, menu, nav, section { 53 display: block; 54 } 55 ol, ul { 56 margin-bottom: var(--margin-default); 57 list-style: disc; 58 margin-left: 1.5em; 59 } 60 blockquote, q { 61 quotes: none; 62 } 63 blockquote:before, blockquote:after, 64 q:before, q:after { 65 content: ''; 66 content: none; 67 } 68 table { 69 border-collapse: collapse; 70 border-spacing: 0; 71 } 72 73 body { 74 font-family: var(--font-text); 75 font-size: 15px; 76 line-height: 1.55em; 77 display: flex; 78 flex-direction: column; 79 min-height: 100vh; 80 } 81 82 a { 83 color: var(--color-link); 84 text-decoration: none; 85 } 86 87 a:hover { 88 text-decoration: underline; 89 } 90 91 @media (min-width: 768px) { 92 body { 93 display: grid; 94 grid-template: 95 'logo header' 96 'nav content' 97 'nav footer'; 98 grid-template-columns: 200px 1fr; 99 grid-template-rows: min-content auto min-content; 100 } 101 } 102 103 main { 104 flex: 1; 105 padding: 0 20px 20px; 106 color: var(--color-text); 107 } 108 109 .content { 110 position: relative; 111 grid-area: content; 112 max-width: 920px; 113 margin: auto; 114 } 115 116 main .content { 117 margin-top: 40px; 118 } 119 120 header { 121 grid-area: header; 122 background: var(--color-heading-background); 123 padding: 45px 20px; 124 overflow: hidden; 125 } 126 127 footer { 128 padding: 2px; 129 text-align: center; 130 font-size: 0.7em; 131 color: var(--color-heading-text); 132 } 133 134 h1,h2,h3,h4,h5,h6 { 135 font-family: var(--font-heading); 136 color: #445; 137 } 138 139 h1 { 140 font-size: 25px; 141 font-weight: 700; 142 margin: 15px 0 10px 0; 143 position: relative; 144 } 145 146 .description { 147 font-family: 'Work Sans', sans-serif; 148 font-size: 18px; 149 color: var(--color-text); 150 } 151 152 .header-link { 153 position: absolute; 154 top: 0; 155 right: 0; 156 } 157 158 h2 { 159 margin-top: 2em; 160 margin-bottom: var(--margin-default); 161 font-size: 19px; 162 font-weight: 700; 163 } 164 165 h3 { 166 margin-top: 1.5em; 167 margin-bottom: var(--margin-default); 168 font-size: 16px; 169 font-weight: 500; 170 } 171 172 p { 173 margin-bottom: var(--margin-default); 174 } 175 176 nav { 177 grid-area: nav; 178 color: var(--color-nav-text); 179 background-color: var(--color-nav-background); 180 font-family: var(--font-heading); 181 font-weight: 500; 182 } 183 184 .menu { 185 186 } 187 188 .menu a { 189 color: inherit; 190 } 191 192 .menu a:hover { 193 text-decoration: none; 194 } 195 196 .menu-item { 197 display: block; 198 padding: 5px 10px; 199 } 200 201 .submenu .menu-item { 202 padding: 5px 20px; 203 } 204 205 .submenu-heading { 206 margin-top: 15px; 207 } 208 209 ul.menu { 210 margin-left:0; 211 list-style: none; 212 } 213 214 ul.submenu { 215 margin-left: 0; 216 list-style: none; 217 margin-bottom: 0; 218 } 219 220 ul.submenu span { 221 padding: 5px 10px; 222 } 223 224 ul.menu li.active, 225 ul.menu a:hover { 226 background-color: var(--color-nav-active); 227 } 228 229 .layout--logo { 230 grid-area: logo; 231 background-color: var(--color-nav-background); 232 } 233 234 .logo { 235 grid-area: logo; 236 color: #eee; 237 margin: 15px; 238 text-align: center; 239 display: block; 240 } 241 242 .logo svg { 243 fill: currentColor; 244 max-width: 30px; 245 } 246 247 .logo--name { 248 vertical-align: top; 249 height: 100%; 250 font-size: 30px; 251 } 252 253 .logo:hover { 254 text-decoration: none; 255 } 256 257 code { 258 padding: 1px 5px; 259 font-family: var(--font-code); 260 font-weight: 500; 261 color: var(--color-code-text); 262 background-color: var(--color-code-background); 263 border-radius: 3px; 264 font-size: 13px; 265 margin-bottom: var(--margin-default); 266 } 267 268 strong { 269 font-weight: 700; 270 } 271 272 em { 273 font-style: italic; 274 } 275 276 .anchor-link { 277 display: inline-block; 278 } 279 280 .anchor-link:hover { 281 text-decoration: none; 282 } 283 284 .anchor-icon { 285 fill: var(--color-anchor-default); 286 display: inline-block; 287 vertical-align: middle; 288 padding: 0 5px; 289 width: 14px; 290 } 291 292 .anchor-icon:hover { 293 fill: var(--color-anchor-hover); 294 } 295 296 @media (min-width: 768px) { 297 .logo { 298 margin: 20px 50px; 299 300 } 301 .logo svg { 302 max-width: none; 303 margin: 5px; 304 } 305 nav input { 306 display: none; 307 } 308 } 309 310 /* pure css hamburger, adapted from https://codepen.io/erikterwan/pen/EVzeRP */ 311 312 @media (max-width: 767px) { 313 .layout--logo { 314 z-index: 2; 315 } 316 317 nav { 318 -webkit-user-select: none; 319 user-select: none; 320 321 } 322 323 .hamburger { 324 position: absolute; 325 top: 0px; 326 left: 0px; 327 margin: 15px; 328 z-index: 3; 329 } 330 331 nav input { 332 display: block; 333 width: 70px; 334 height: 70px; 335 position: absolute; 336 top: -7px; 337 left: -5px; 338 339 cursor: pointer; 340 341 opacity: 0; /* hide this */ 342 z-index: 4; /* and place it over the hamburger */ 343 344 -webkit-touch-callout: none; 345 } 346 347 .hamburger span { 348 display: block; 349 width: 28px; 350 height: 4px; 351 margin: 5px; 352 position: relative; 353 background: currentColor; 354 border-radius: 3px; 355 z-index: 1; 356 transform-origin: 0 1.5px; 357 358 transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), 359 background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), 360 opacity 0.55s ease; 361 } 362 363 nav input:checked ~ .hamburger span { 364 opacity: 1; 365 transform: rotate(45deg) translate(-2px, -1px); 366 } 367 368 nav input:checked ~ .hamburger span:nth-last-child(2) { 369 opacity: 0; 370 transform: rotate(0deg) scale(0.2, 0.2); 371 } 372 373 nav input:checked ~ .hamburger span:nth-last-child(1) { 374 transform: rotate(-45deg) translate(0, -1px); 375 } 376 377 .menu { 378 z-index: 1; 379 position: absolute; 380 width: 300px; 381 height: 100%; 382 margin: -100px 0 0 -50px; 383 padding: 150px 0; 384 385 color: var(--color-heading-text); 386 background-color: var(--color-heading-background); 387 font-family: var(--font-heading); 388 389 list-style-type: none; 390 -webkit-font-smoothing: antialiased; 391 /* to stop flickering of text in safari */ 392 393 transform-origin: 0% 0%; 394 transform: translate(-100%, 0); 395 396 transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0); 397 } 398 399 ul.menu li.active, 400 ul.menu a:hover { 401 background-color: #d3d5d7; 402 } 403 404 nav input:checked ~ ul { 405 transform: none; 406 } 407 408 } 409 410 411 blockquote { 412 background-color: var(--color-blockquote-background); 413 border-left-color: var(--color-blockquote-highlight); 414 border-left-width: 9px; 415 border-left-style: solid; 416 padding: 1em 20px 1em 11px; 417 margin-bottom: var(--margin-default); 418 margin-left: -20px; 419 margin-right: -20px; 420 } 421 422 blockquote p { 423 margin-bottom: 0; 424 } 425 426 /* Blockquote headings. */ 427 blockquote p:first-of-type { 428 font-weight: bold; 429 } 430 431 blockquote code { 432 background-color: var(--color-blockquote-highlight); 433 } 434 435 table { 436 width: 100%; 437 } 438 439 td, th { 440 padding: 0.2em 1em; 441 } 442 443 tr { 444 border-bottom: 1px solid var(--color-heading-background); 445 } 446 447 tr td:first-child, th { 448 font-weight: bold; 449 }