tsc-fs2/custom-base-styles.css at main · the-special-character/tsc-fs2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
@layer base {
  body {
    @apply font-sans text-lg text-neutral-600;
  }

  h1 {
    @apply font-serif mb-6 text-neutral-800 text-6xl sm:text-8xl md:text-9xl lg:text-10xl font-semibold;
  }

  h2 {
    @apply font-serif text-4xl mb-4 text-neutral-800 sm:text-5xl md:text-7xl font-semibold;
  }

  h3 {
    @apply text-neutral-700 text-xl sm:text-xxl md:text-3xl font-bold;
  }

  h4 {
    @apply text-neutral-700 text-lg sm:text-xl font-bold;
  }

  h5 {
    @apply text-neutral-800 text-base sm:text-lg font-semibold;
  }

  h6 {
    @apply text-neutral-800 text-xs sm:text-base font-semibold;
  }

  p {
    @apply mb-5;
  }

  p.small {
    @apply text-sm;
  }

  p.large {
    @apply text-3xl;
  }

  a {
    @apply text-primary underline;
    -webkit-transition: color 300ms ease;
    transition: color 300ms ease;
  }

  label {
    @apply block mb-4 text-neutral-700 font-bold;
  }

  a:hover {
    @apply text-secondary3;
  }

  blockquote {
    @apply mb-2 shadow-quote bg-neutral-100 text-lg py-10 px-5 sm:py-12 sm:px-[50px] md:py-[58px] md:px-[63px] lg:py-[70px] lg:pr-[76px] lg:pl-[126px] sm:text-xl md:text-xxl lg:text-3xl;
    border-radius: 10px 20px 20px 10px;
    border-left: 11px solid theme("colors.secondary3");
  }

  figure {
    @apply mb-2;
  }

  figcaption {
    @apply mt-1 text-center;
  }

  strong {
    @apply font-bold;
  }

  em {
    @apply italic;
  }

  ol {
    @apply mt-0 mb-2 pl-10;
  }

  ul {
    @apply mt-0 mb-2 pl-10;
  }

  li {
    @apply mb-4;
  }

  img {
    @apply inline-block max-w-full align-middle;
  }

  code {
  }

  pre {
  }

  video {
  }

  hr {
  }

  table {
  }

  thead {
  }

  tr {
  }

  th {
  }

  td {
  }

  nav {
    & ul {
      @apply flex gap-10;
      & li {
        @apply text-neutral-700;

        &:hover {
          @apply text-secondary3;
        }

        & a {
          @apply font-sans font-bold text-lg;
        }
      }
    }
  }

  section {
    @apply min-h-screen overflow-hidden py-20 relative;
  }
}