not.whiny.lol
very simple webpage built with hugo with links to all of my profiles.
wobblybrian.xyz
palestine
+78
-43
+9
-3
layouts/_partials/header.html
+9
-3
layouts/_partials/header.html
···
1
1
<header>
2
-
2
+
<div class="notice">
3
+
<div class="notice-inner">
4
+
<img src="/Flag_of_Palestine.svg" alt="">
5
+
<h1>ISRAEL IS COMMITING A GENOCIDE IN GAZA</h1>
6
+
<a href="https://pcrf.net">DONATE TO THE PCRF</a>
7
+
</div>
8
+
</div>
9
+
3
10
<div class="header-inner">
4
11
<h1><a href="/" title="{{ .Site.Params.logohover }}">{{ .Site.Title }}</a></h1>
5
12
</div>
6
-
7
-
</header>
13
+
</header>
+2
layouts/home.html
+2
layouts/home.html
+9
static/Flag_of_Palestine.svg
+9
static/Flag_of_Palestine.svg
···
1
+
<?xml version="1.0" encoding="UTF-8" ?>
2
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 3"><rect
3
+
fill="#009639"
4
+
width="6"
5
+
height="3"
6
+
/><rect fill="#FFF" width="6" height="2" /><rect width="6" height="1" /><path
7
+
fill="#ED2E38"
8
+
d="M0,0l2,1.5L0,3Z"
9
+
/></svg>
+56
-38
static/css/style.css
+56
-38
static/css/style.css
···
34
34
margin: 0;
35
35
}
36
36
37
-
input, button, textarea, select {
38
-
font: inherit;
39
-
}
40
-
41
37
img, picture, video, canvas, svg {
42
38
display: block;
43
-
max-width: 100%;
44
-
height: auto;
39
+
max-inline-size: 100%;
40
+
block-size: auto;
45
41
}
46
42
47
43
/* Text */
48
44
49
-
p {
50
-
overflow-wrap: break-word;
51
-
word-break: break-word;
52
-
}
53
-
54
45
a {
55
46
color: var(--text);
56
47
text-decoration: none;
57
-
}
58
-
59
-
a:hover {
60
-
text-decoration: underline;
61
48
}
62
49
63
50
h1, h2 {
···
68
55
}
69
56
70
57
h1 {
71
-
font-size: 1.85rem;
72
-
line-height: 1.3;
58
+
font-size: 1.875rem;
59
+
line-height: 1.2;
73
60
}
74
61
75
62
h2 {
76
-
font-size: 1.7rem;
63
+
font-size: 1.75rem;
77
64
line-height: 1.3;
78
65
}
79
66
···
89
76
}
90
77
91
78
main {
79
+
max-inline-size: 50rem;
80
+
margin-inline: auto;
81
+
}
82
+
83
+
.notice {
84
+
background: linear-gradient(var(--purple-bg), var(--purple-accent));
85
+
}
86
+
87
+
.notice-inner {
88
+
display: flex;
89
+
gap: 1.5rem;
90
+
text-align: center;
91
+
align-items: center;
92
+
flex-direction: column;
92
93
max-width: 50rem;
93
94
margin-inline: auto;
95
+
padding: 3rem 1rem;
96
+
}
97
+
98
+
.notice img {
99
+
max-height: 128px;
100
+
}
101
+
102
+
.notice h1 {
103
+
max-width: 20ch;
104
+
font-weight: 500;
105
+
}
106
+
107
+
.notice .row {
108
+
display: flex;
109
+
gap: 1rem;
110
+
}
111
+
112
+
.notice a {
113
+
display: block;
114
+
font-family: var(--heading);
115
+
background-color: var(--purple-element);
116
+
border: 2px solid var(--purple-accent);
117
+
transition: all 150ms;
118
+
text-decoration: blin;
119
+
padding: 0.75rem 1rem;
120
+
}
121
+
122
+
.notice a:hover,
123
+
.notice a:focus {
124
+
border: 2px solid var(--text);
125
+
background-color: var(--purple-accent);
126
+
box-shadow: 0px 8px 16px 0px var(--purple-accent);
94
127
}
95
128
96
129
.header-inner {
97
-
max-width: 50rem;
130
+
max-inline-size: 50rem;
98
131
padding-block: 3rem;
99
132
margin-inline: auto;
100
133
padding-inline: 1rem;
···
107
140
padding-block-end: 1rem;
108
141
}
109
142
110
-
.container > :first-child {
111
-
margin-block-start: 0;
112
-
}
113
-
114
-
.container > :last-child {
115
-
margin-block-end: 0;
116
-
}
117
-
118
-
.container > p {
119
-
margin-block: 1rem;
120
-
max-width: 68ch;
143
+
.container > * + * {
144
+
margin-block: 1.5rem;
121
145
}
122
-
123
-
.container > h2 {
124
-
margin-block-start: 3rem;
125
-
margin-block-end: 1rem;
126
-
}
127
-
128
146
/* Grid */
129
147
130
148
.social {
···
153
171
}
154
172
155
173
.card svg {
156
-
width: 35px;
174
+
width: 32px;
157
175
}
158
176
159
177
.card .caption {
···
169
187
.card {
170
188
flex-direction: column;
171
189
}
172
-
}
190
+
}