blob: 378b47cb6d8697b40126d106b5d4404f0a446d72 (
plain)
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
|
@tailwind base;
@tailwind components;
@tailwind utilities;
.baskerville {
font-family: baskerville, serif;
}
blockquote::before {
font-family: "Font Awesome 6 Free";
color: #79c753;
content: "\f10d";
font-weight: 900;
font-size: 2rem;
position: absolute;
left: 10px;
top: -15px;
}
@layer base {
blockquote {
@apply border-l-4 p-6 py-1 m-8 relative border-lime-500 baskerville;
}
blockquote p:last-of-type {
@apply text-center uppercase mt-4 tracking-wide;
}
h1 {
@apply text-5xl font-bold my-4;
}
h2 {
@apply text-4xl font-bold my-4;
}
h3 {
@apply text-3xl font-bold my-4;
}
h4 {
@apply text-2xl font-bold my-4;
}
h5 {
@apply text-xl font-bold my-4;
}
h6 {
@apply text-lg font-bold my-4;
}
}
@layer components {
#hero {
text-shadow: 2px 2px 3px black;
}
.main-content p {
@apply my-4 text-xl;
}
.main-content p code {
@apply text-blue-500 px-1;
}
.main-content a {
@apply px-1 text-lime-500;
}
.main-content a[href^="http"]::after {
content: "";
width: 11px;
height: 11px;
margin-left: 4px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
}
.main-content dl {
@apply px-8 text-xl;
}
.main-content dt {
@apply font-bold;
}
.main-content dd {
@apply ml-8;
}
/* The following one are post render thus I need to build them */
.main-content .highlight .chroma {
@apply p-1 overflow-x-scroll;
}
}
@layer utilities {
@font-face {
font-family: "BerkshireSwash-Regular";
font-display: optional;
src:
url("/css/fonts/BerkshireSwash-Regular.ttf.woff") format("woff"),
url("/css/fonts/BerkshireSwash-Regular.ttf.svg#BerkshireSwash-Regular")
format("svg"),
url("/css/fonts/BerkshireSwash-Regular.ttf.eot"),
url("/css/fonts/BerkshireSwash-Regular.ttf.eot?#iefix")
format("embedded-opentype");
font-weight: normal;
font-style: normal;
}
.berkshire-swash {
font-family: "BerkshireSwash-Regular";
}
}
|
