@@ -2,7 +2,7 @@
22@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Code+Pro:wght@400;500;600;700&display=swap");
33
44:root {
5− font-size: 12px;
5+ --tray-time: 0ms;
66}
77
88html,
@@ -21,84 +21,93 @@ p a {
2121 @apply text-green;
2222}
2323
24+button {
25+ border: none;
26+}
27+
28+/* Typography */
29+
2430h1,
2531.type-h1 {
26− @apply text-4xl md:text-5xl lg:text-6xl font-bold leading-tight;
32+ @apply text-3xl md:text-4xl lg:text-5xl font-bold leading-tight;
2733}
2834
2935h2,
3036.type-h2 {
31− @apply text-3xl md:text-4xl lg:text-5xl font-bold leading-tight;
37+ @apply text-2xl md:text-3xl lg:text-4xl font-bold leading-tight;
3238}
3339
3440h3,
3541.type-h3 {
36− @apply text-xl md:text-2xl lg:text-3xl font-bold;
42+ @apply text-lg md:text-xl lg:text-2xl font-semibold;
3743}
3844
3945h4,
4046.type-ui {
41− @apply text-base md:text-lg lg:text-xl font-semibold;
47+ @apply text-sm md:text-base lg:text-lg font-semibold;
4248}
4349
4450.type-ui-small {
45− @apply text-sm lg:text-base font-medium;
51+ @apply text-xs lg:text-base font-medium;
4652}
4753
4854p,
4955.type-p {
50− @apply text-base md:text-lg lg:text-xl leading-relaxed;
56+ @apply text-sm md:text-base lg:text-base leading-relaxed;
57+}
58+
59+.type-bold {
60+ @apply text-sm md:text-base lg:text-base font-semibold leading-relaxed;
5161}
5262
5363.type-sub {
54− @apply text-sm lg:text-base font-semibold;
64+ @apply text-xs md:text-sm;
5565}
5666
57−caption,
58−.type-caption {
59− @apply text-sm lg:text-base font-medium block text-left;
67+.type-sub-bold {
68+ @apply text-xs md:text-sm font-semibold;
6069}
6170
6271code .type-code {
6372 @apply bg-wall p-4 font-mono;
6473}
6574
66−button {
67− border: none;
75+/* Utils */
76+
77+/* .tile-height {
78+ height: 32rem;
79+} */
80+
81+.measure {
82+ max-width: 34em;
6883}
6984
70−.tile-height {
71− height: 38rem;
85+.flex-center {
86+ display: flex;
87+ align-items: center;
88+ justify-content: center;
7289}
7390
74−.preview-tile-height {
75− @apply h-96;
91+.bg-img {
92+ background-repeat: no-repeat;
93+ background-position: center center;
94+ @apply bg-wall;
7695}
7796
7897.button-sm {
79− @apply table px-4 py-1 rounded-lg type-ui;
98+ @apply flex-center px-2 h-6 rounded-lg type-ui;
8099}
81100
82101.button-lg {
83− @apply flex px-4 lg:px-6 py-2 rounded-xl h-12 md:h-16 flex-center type-ui;
102+ @apply flex-center px-4 lg:px-6 py-1 rounded-xl h-10 md:h-14 type-ui;
84103}
85104
86105.badge-sm {
87− @apply flex type-ui-small px-3 lg:px-4 items-center justify-center h-8 md:h-10 rounded-full;
106+ @apply flex-center type-ui-small px-2 lg:px-2 h-6 md:h-10 rounded-full;
88107}
89108
90109.badge-lg {
91− @apply flex type-ui px-4 lg:px-6 items-center justify-center h-10 md:h-14 rounded-full;
92−}
93−
94−.tab-button-lg {
95− @apply type-h2 h-16;
96− overflow: visible;
97−}
98−
99−.tab-button-sm {
100− @apply type-ui h-12;
101− overflow: visible;
110+ @apply flex-center type-ui px-4 lg:px-6 h-10 md:h-14 rounded-full;
102111}
103112
104113.button-sm:hover,
@@ -108,15 +117,17 @@ a:hover {
108117 opacity: 0.66;
109118}
110119
111−.hero-card-height {
112− height: 562px;
120+/* BEM Classes - Use sparingly */
121+
122+.port-hero-card-height {
123+ height: 36em;
113124}
114125
115−.hero-image-height {
116− height: 512px;
126+.port-hero-image-height {
127+ height: 32em;
117128}
118129
119−.hero-image {
130+.port-hero-image {
120131 transform: translateX(8%);
121132 background-image: linear-gradient(
122133 to right,
@@ -127,26 +138,6 @@ a:hover {
127138 background-size: cover;
128139}
129140
130−.measure {
131− max-width: 34em;
132−}
133−
134−.flex-center {
135− display: flex;
136− align-items: center;
137− justify-content: center;
138−}
139−
140−.bg-img {
141− background-repeat: no-repeat;
142− background-position: center center;
143− @apply bg-wall;
144−}
145−
146−:root {
147− --tray-time: 0ms;
148−}
149−
150141.tray-menu-open {
151142 transform: translateX(0);
152143 transition: transform var(--tray-time);
@@ -207,187 +198,3 @@ a:hover {
207198 position: static !important;
208199 border-radius: 0 !important;
209200}
210−
211−.markdown *:last-child {
212− @apply pb-0 mb-0;
213−}
214−
215−.markdown *:first-child {
216− @apply pt-0 mt-0;
217−}
218−
219−.markdown *:first-child figure {
220− @apply pt-0 mt-0;
221−}
222−
223−.markdown p,
224−.markdown ul,
225−.markdown ol,
226−.markdown blockquote {
227− @apply my-8;
228−}
229−
230−.markdown h1 {
231− @apply text-3xl md:text-4xl lg:text-5xl font-bold mt-24 mb-12;
232−}
233−
234−.markdown.large-typescale h1 {
235− @apply text-4xl md:text-5xl lg:text-6xl font-bold mt-24 mb-12;
236−}
237−
238−.markdown h2 {
239− @apply text-2xl md:text-3xl lg:text-4xl font-bold mt-16 mb-12;
240−}
241−
242−.markdown.large-typescale h2 {
243− @apply text-3xl md:text-4xl lg:text-5xl font-bold mt-16 mb-12;
244−}
245−
246−.markdown h3 {
247− @apply text-lg md:text-xl lg:text-2xl font-semibold mt-8 mb-8;
248−}
249−
250−.markdown.large-typescale h3 {
251− @apply text-xl md:text-2xl lg:text-3xl font-semibold mt-8 mb-8;
252−}
253−
254−.markdown h4 {
255− @apply text-base md:text-lg lg:text-xl font-semibold mt-4 mb-4;
256−}
257−
258−.markdown.large-typescale h4 {
259− @apply text-lg md:text-xl lg:text-2xl font-semibold mt-4 mb-4;
260−}
261−
262−.markdown p {
263− @apply text-base md:text-lg lg:text-xl leading-relaxed;
264−}
265−
266−.markdown.large-typescale p {
267− @apply text-lg md:text-xl lg:text-2xl leading-relaxed;
268−}
269−
270−.markdown img {
271− width: 100%;
272− height: auto;
273− @apply rounded-lg;
274−}
275−
276−.markdown figure {
277− position: relative;
278− @apply mt-12 mb-12 z-0;
279−}
280−
281−.markdown figure {
282− width: 100%;
283− left: 0;
284−}
285−
286−@media (min-width: 768px) {
287− .markdown figure {
288− width: 125%;
289− left: -12.5%;
290− }
291−}
292−
293−.markdown pre,
294−.markdown pre[class*="language-"] {
295−}
296−
297−.markdown code,
298−.markdown code[class*="language-"] {
299− @apply px-2 py-0.5 bg-wall rounded-md;
300−}
301−
302−.markdown a code,
303−.markdown a code[class*="language-"] {
304− @apply bg-washedGreen;
305−}
306−
307−.markdown pre code,
308−.markdown pre[class*="language-"] code {
309− @apply p-4 md:p-8 rounded-xl;
310−}
311−
312−.markdown ul {
313− list-style: outside;
314− list-style-type: disc;
315−}
316−
317−.markdown ol {
318− list-style: outside;
319− list-style-type: decimal;
320−}
321−
322−.markdown li {
323− @apply py-2 ml-6 text-base md:text-lg lg:text-xl;
324−}
325−
326−.markdown.large-typescale li {
327− @apply py-2 ml-6 text-lg md:text-xl lg:text-2xl;
328−}
329−
330−.markdown li a,
331−.markdown h3 a,
332−.markdown h2 a {
333− @apply text-green;
334−}
335−
336−.markdown blockquote {
337− @apply border-l-4 border-deepWall pl-6 italic;
338−}
339−.markdown blockquote cite {
340− @apply not-italic font-semibold;
341−}
342−
343−.markdown table {
344− border-collapse: separate;
345− border-spacing: 0;
346− min-width: 350px;
347−}
348−
349−.markdown table tr th,
350−.markdown table tr td {
351− border-right-width: 2px;
352− border-right-style: solid;
353− border-bottom-width: 2px;
354− border-bottom-style: solid;
355− padding: 8px !important;
356− @apply border-wall;
357−}
358−
359−.markdown table tr th:first-child,
360−.markdown table tr td:first-child {
361− border-left-width: 2px;
362− border-left-style: solid;
363− @apply border-wall;
364−}
365−
366−.markdown table tr th {
367− background: rgba(240, 239, 236, 0.33);
368− border-top-width: 2px;
369− border-top-style: solid;
370− text-align: left;
371− vertical-align: middle;
372− @apply border-wall;
373−}
374−
375−/* top-left border-radius */
376−.markdown table tr:first-child th:first-child {
377− border-top-left-radius: 8px;
378−}
379−
380−/* top-right border-radius */
381−.markdown table tr:first-child th:last-child {
382− border-top-right-radius: 8px;
383−}
384−
385−/* bottom-left border-radius */
386−.markdown table tr:last-child td:first-child {
387− border-bottom-left-radius: 8px;
388−}
389−
390−/* bottom-right border-radius */
391−.markdown table tr:last-child td:last-child {
392− border-bottom-right-radius: 8px;
393−}