styles.css

 1/* This file is compiled to /assets/styles/tailwind.css via script/tailwind */
 2
 3@import url("https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;1,200;1,300&display=swap");
 4@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,300;0,600;1,100;1,300;1,600&display=swap");
 5
 6@tailwind base;
 7@tailwind components;
 8@tailwind utilities;
 9
10@layer base {
11  html {
12    font-size: 125%;
13    text-rendering: geometricPrecision;
14  }
15  h1 {
16    @apply text-4xl;
17    @apply tracking-tighter;
18  }
19  h2 {
20    @apply text-3xl;
21    @apply tracking-tighter;
22  }
23  h3 {
24    @apply text-2xl;
25    @apply tracking-tighter;
26  }
27  h4 {
28    @apply text-xl;
29  }
30
31  .underline,
32  .hover\:underline:hover {
33    text-underline-offset: 4px;
34  }
35
36  @media screen and (min-width: 1124px) {
37    .text-columns-2 {
38        column-count: 2;
39        column-gap: 3rem;
40    }
41    
42}
43
44  .text-columns-2 {
45    -webkit-column-break-inside: avoid;
46    page-break-inside: avoid;
47    break-inside: avoid;
48  }
49
50  .text-columns-2 p {
51    break-inside: avoid;
52  }
53
54  /* This fixes scrollbar jump */
55  @media screen and (min-width: 960px) {
56    html {
57      margin-left: calc(100vw - 100%);
58      margin-right: 0;
59    }
60  }
61}