Skip to content

Commit cf2c87d

Browse files
AsafGartnerAsafGartner
committed
WRJ2023 style update
1 parent afff1fb commit cf2c87d

3 files changed

Lines changed: 594 additions & 367 deletions

File tree

‎src/templates/src/jam_2023_wrj_feed.html‎

Lines changed: 295 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,298 @@
1-
{{ template "wheeljam_2023_base.html" . }}
1+
{{ template "base-2024.html" . }}
2+
3+
{{ define "extrahead" }}
4+
<link rel="stylesheet" href="{{ static "fonts/mohave/stylesheet.css" }}">
5+
<style>
6+
/* Copy-paste from project.css yay */
7+
{{/* {{ $c := hex2color "23CE76" }} */}}
8+
{{ $c := hex2color "1DB768" }}{{/* modified for contrast reasons */}}
9+
10+
{{/* In the 2024 redesign, these were all forced to use the dark theme variants. */}}
11+
{{ $themeDim := lightness 0.35 $c | color2css }}
12+
{{ $themeDimmer := lightness 0.3 $c | color2css }}
13+
{{ $themeDimmest := lightness 0.2 $c | color2css }}
14+
15+
{{ $themeDark := lightness 0.30 $c | color2css }}
16+
17+
{{ $linkColor := lightness 0.55 $c | color2css }}
18+
{{ $linkHoverColor := lightness 0.65 $c | color2css }}
19+
20+
:root {
21+
--content-background: #f8f8f8;
22+
--card-background: rgba(255, 255, 255, 0.1);
23+
--card-background-hover: rgba(255, 255, 255, 0.16);
24+
25+
--theme-color: {{ $c | color2css }};
26+
--theme-color-dim: {{ $themeDim }};
27+
--theme-color-dimmer: {{ $themeDimmer }};
28+
--theme-color-dimmest: {{ $themeDimmest }};
29+
30+
--timeline-media-background: rgba(255, 255, 255, 0.1);
31+
}
32+
33+
body {
34+
/* background: linear-gradient(#23CE76, #299CE0); */
35+
/* modified for contrast reasons */
36+
background: linear-gradient(#1DB768, #258FCE);
37+
}
38+
39+
.user-options,
40+
header form,
41+
header .menu-bar .wiki,
42+
header .menu-bar .library
43+
{
44+
display: none !important;
45+
}
46+
47+
.hmn-logo {
48+
background-color: rgba(255, 255, 255, 0.1) !important;
49+
}
50+
51+
header a, footer a {
52+
color: white !important;
53+
}
54+
55+
header .submenu {
56+
background-color: var(--theme-color);
57+
}
58+
59+
#top-container {
60+
margin: 3rem 0;
61+
}
62+
63+
#logo {
64+
width: 16rem;
65+
}
66+
67+
h1, h2, h3 {
68+
font-family: 'MohaveHMN', sans-serif;
69+
margin-bottom: 0;
70+
font-weight: normal;
71+
}
72+
73+
#title {
74+
color: white;
75+
font-size: 2.4rem;
76+
line-height: 0.8;
77+
margin-top: 2rem;
78+
letter-spacing: -0.06rem;
79+
text-transform: uppercase;
80+
}
81+
82+
#dates {
83+
font-variant: small-caps;
84+
font-size: 1.6rem;
85+
margin-top: 0.2rem;
86+
}
87+
88+
#tagline {
89+
font-size: 1rem;
90+
margin-top: 1rem;
91+
line-height: 1.4;
92+
}
93+
94+
#top-container a {
95+
color: white !important;
96+
text-decoration: underline;
97+
}
98+
99+
.actions {
100+
margin-top: 1.5rem;
101+
}
102+
103+
.actions a {
104+
text-decoration: none !important;
105+
line-height: 1.4;
106+
font-weight: 500;
107+
108+
transition: background-color 50ms ease-in-out;
109+
background-color:rgba(255, 255, 255, 0.1);
110+
}
111+
112+
.actions a:hover {
113+
background-color: rgba(255, 255, 255, 0.2);
114+
}
115+
116+
.actions a:active {
117+
background-color: rgba(255, 255, 255, 0.15);
118+
}
119+
120+
.section {
121+
font-size: 1rem;
122+
line-height: 1.4;
123+
}
124+
125+
.section h2 {
126+
font-variant: small-caps;
127+
font-size: 2.2rem;
128+
line-height: 1.1;
129+
}
130+
131+
.section h3 {
132+
font-variant: small-caps;
133+
font-size: 2rem;
134+
line-height: 0.8;
135+
margin-top: 1.4rem;
136+
}
137+
138+
.section p {
139+
margin-top: 1em;
140+
margin-bottom: 1em;
141+
}
142+
143+
.section a {
144+
text-decoration: underline;
145+
}
146+
147+
.emphasized {
148+
padding-left: 1rem;
149+
border-left: 0.3rem solid white;
150+
}
151+
152+
.flex-fair {
153+
flex-basis: 1px;
154+
flex-grow: 1;
155+
flex-shrink: 1;
156+
}
157+
158+
ul {
159+
list-style-type: disc;
160+
}
161+
162+
li {
163+
margin-top: 0.6rem;
164+
margin-bottom: 0.6rem;
165+
}
166+
167+
.section li p {
168+
margin-top: 0.6rem;
169+
margin-bottom: 0.6rem;
170+
}
171+
172+
.showcase-item {
173+
background-color: rgba(0, 0, 0, 0.2);
174+
border-color: rgba(255, 255, 255, 0.5);
175+
}
176+
177+
.carousel-thinger {
178+
position: absolute;
179+
top: 0;
180+
width: 6rem;
181+
height: 100%;
182+
background-color: rgba(255, 255, 255, 0.1); /* bg-white-10 */
183+
border-radius: 0.5rem; /* br3 */
184+
cursor: pointer;
185+
}
186+
187+
.carousel-thinger.prev {
188+
left: -7rem;
189+
border-top-left-radius: 0;
190+
border-bottom-left-radius: 0;
191+
background: linear-gradient(to left, rgba(255, 255, 255, 0.1), transparent);
192+
}
193+
194+
.carousel-thinger.next {
195+
right: -7rem;
196+
border-top-right-radius: 0;
197+
border-bottom-right-radius: 0;
198+
background: linear-gradient(to right, rgba(255, 255, 255, 0.1), transparent);
199+
}
200+
201+
@media screen and (min-width: 30em) {
202+
/* not small styles */
203+
204+
#top-container {
205+
margin: 5.4rem 0;
206+
}
207+
208+
#logo {
209+
width: 31rem;
210+
}
211+
212+
#title {
213+
font-size: 5.2rem;
214+
margin-top: 4rem;
215+
}
216+
217+
#dates {
218+
font-size: 2.8rem;
219+
}
220+
221+
#tagline {
222+
font-size: 1.2rem;
223+
margin-top: 1.2rem;
224+
}
225+
226+
.actions {
227+
margin-top: 2.2rem;
228+
}
229+
230+
.actions a {
231+
font-size: 1.2rem;
232+
}
233+
234+
.section h2 {
235+
font-size: 3.4rem;
236+
}
237+
238+
.section h3 {
239+
font-size: 2.4rem;
240+
margin-top: 1.6rem;
241+
}
242+
}
243+
244+
h3.mt0 {
245+
margin-top: 0; /* ugh seriously */
246+
}
247+
248+
.back-to-normal * {
249+
font-family: "Fira Sans", sans-serif;
250+
}
251+
252+
.back-to-normal h1,
253+
.back-to-normal h2,
254+
.back-to-normal h3,
255+
.back-to-normal h4,
256+
.back-to-normal h5
257+
{
258+
font-weight: 500;
259+
margin: 0;
260+
margin-bottom: 0.5rem;
261+
font-size: 1.5rem;
262+
line-height: 1.25em;
263+
}
264+
265+
.back-to-normal a {
266+
text-decoration: none;
267+
}
268+
269+
.snippet-project {
270+
background-color: rgba(255, 255, 255, 0.1);
271+
text-decoration: none !important;
272+
}
273+
274+
/* More copy-paste from project.css */
275+
.bg-theme {
276+
background-color: {{ $c | color2css }};
277+
background-color: var(--theme-color);
278+
}
279+
280+
.bg-theme-dim {
281+
background-color: {{ $themeDim }};
282+
background-color: var(--theme-color-dim);
283+
}
284+
285+
.bg-theme-dimmer {
286+
background-color: {{ $themeDimmer }};
287+
background-color: var(--theme-color-dimmer);
288+
}
289+
290+
.bg-theme-dimmest {
291+
background-color: {{ $themeDimmest }};
292+
background-color: var(--theme-color-dimmest);
293+
}
294+
</style>
295+
{{ end }}
2296

3297
{{ define "content" }}
4298
<style>

0 commit comments

Comments
 (0)