Skip to content

Commit 215d8be

Browse files
tujtuj
authored
Merge pull request #184 from os2display/feature/update-aakb-dokk1-themes
Theme updates: aakb, dokk1
2 parents 05158c4 + 1625382 commit 215d8be

File tree

5 files changed

+257
-42
lines changed

5 files changed

+257
-42
lines changed

‎CHANGELOG.md‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ All notable changes to this project will be documented in this file.
44

55
## Unreleased
66

7+
- [#184](https://github.com/os2display/display-templates/pull/184)
8+
- Update Dokk1 and Aakb themes. Add news feed. Adapt new identity for Aakb.
9+
710
## [2.5.1] - 2025-06-23
811

912
- [#178](https://github.com/os2display/display-templates/pull/178)
@@ -18,8 +21,8 @@ All notable changes to this project will be documented in this file.
1821
- Fixed news feed issues.
1922
- [#174](https://github.com/os2display/display-templates/pull/174)
2023
- Fixed test issue with calendar dates.
21-
- [#161](https://github.com/os2display/display-templates/pull/161)
22-
- Added social news template.
24+
- [#161](https://github.com/os2display/display-templates/pull/161)
25+
- Added social news template.
2326

2427
## [2.4.0] - 2025-03-31
2528

‎src/news-feed/news-feed.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ function NewsFeed({ slide, content, run, slideDone, executionId }) {
6161
setQr(null);
6262
} else {
6363
QRCode.toDataURL(currentPost.link, {
64+
margin: 0,
6465
color: {
6566
dark: "#000000",
6667
light: "#ffffff00",

‎src/news-feed/news-feed.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,8 +86,8 @@
8686
justify-content: end;
8787

8888
.qr {
89-
width: 20%;
90-
margin-bottom: 2%;
89+
width: 15%;
90+
margin-bottom: 5%;
9191
}
9292

9393
.read-more {

‎src/themes/aakb.css‎

Lines changed: 136 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,36 @@
22
* Aarhus Kommunes Biblioteker theme css
33
*/
44

5-
/* Import FaktPro font */
5+
/* Import Lora font */
6+
@font-face {
7+
font-family: "Lora";
8+
font-style: normal;
9+
font-weight: 400;
10+
src: url(https://fonts.gstatic.com/s/lora/v36/0QI6MX1D_JOuGQbT0gvTJPa787weuxJBkqt8ndeYxZ0.woff)
11+
format("woff");
12+
unicode-range:
13+
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
14+
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
15+
U+2215, U+FEFF, U+FFFD;
16+
}
17+
18+
/* Import Lora font */
619
@font-face {
20+
font-family: "Noto Sans";
21+
font-style: normal;
22+
font-weight: 400;
23+
font-stretch: 100%;
24+
src: url(https://fonts.gstatic.com/s/notosans/v39/o-0mIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjcz6L1SoM-jCpoiyD9A-9a6VTYyWtZ3rI.woff)
25+
format("woff");
26+
unicode-range:
27+
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
28+
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
29+
U+2215, U+FEFF, U+FFFD;
30+
}
31+
32+
/* Fonts from old design */
33+
/* Import FaktPro font */
34+
/* @font-face {
735
font-family: "FaktPro-Normal";
836
src: url("https://db.onlinewebfonts.com/t/fdd40b399610a1e015242521427561b1.woff")
937
format("woff");
@@ -18,8 +46,7 @@
1846
format("woff");
1947
font-weight: 400;
2048
font-style: normal;
21-
}
22-
49+
} */
2350

2451
#SLIDE_ID {
2552
/* Default variables */
@@ -32,22 +59,35 @@
3259
--color-info: #008488;
3360
--color-warning: #fee13d;
3461
--color-danger: #d32f2e;
62+
--color-bg-primary: #f6f5f0;
63+
--color-bg-secondary: #eee9e5;
64+
--color-text-primary: #000;
65+
--color-text-secondary: #484848;
3566

3667
--color-blue: var(--color-primary);
3768
--color-red: var(--color-danger);
3869
--color-yellow: var(--color-warning);
3970
--color-green: var(--color-success);
4071

41-
--font-family-base: "FaktPro-Normal", sans-serif;
42-
--font-family-bold: "FaktPro-SemiBold", sans-serif;
72+
--font-family-sans: "Noto Sans", sans-serif;
73+
--font-family-serif: "Lora", serif;
4374
--font-weight-base: 400;
44-
--font-weight-bold: 400;
75+
--font-weight-bold: 700;
4576

4677
/* Darkmode overrides */
4778
--bg-dark: #333333;
4879
--text-light: #ffffff;
4980

50-
font-family: var(--font-family-base);
81+
font-family: var(--font-family-sans);
82+
83+
h1,
84+
h2,
85+
h3,
86+
h4,
87+
h5,
88+
h6 {
89+
font-family: var(--font-family-serif);
90+
}
5191
}
5292

5393
/*
@@ -58,32 +98,33 @@
5898

5999
#SLIDE_ID .template-poster .header-area {
60100
padding: 10%;
101+
background-color: var(--color-bg-primary);
102+
color: var(--color-text-primary);
61103
}
62104

63105
#SLIDE_ID .template-poster .info-area {
64106
padding: 10%;
65107
font-size: calc(var(--font-size-base) * 1.25);
66108
font-weight: 300;
109+
background-color: var(--color-bg-secondary);
67110
}
68111

69112
#SLIDE_ID .template-poster .logo-area {
70113
padding: 3% 10% 0 10%;
71-
background-color: var(--bg-light);
114+
background-color: var(--color-bg-secondary);
72115
}
73116

74117
#SLIDE_ID .template-poster img {
75118
margin-right: 0;
76119
}
77120

78121
#SLIDE_ID .template-poster h1 {
79-
font-family: var(--font-family-base);
80-
font-weight: var(--font-weight-base);
122+
font-family: var(--font-family-serif);
123+
font-size: calc(var(--h1-font-size) * 1.25);
81124
}
82125

83126
#SLIDE_ID .template-poster .lead {
84-
font-family: var(--font-family-bold);
85-
font-weight: var(--font-weight-bold);
86-
font-size: calc(var(--font-size-base) * 1.25);
127+
line-height: 1.5;
87128
}
88129

89130
#SLIDE_ID .template-poster .info-area .date {
@@ -100,12 +141,14 @@
100141
*
101142
*/
102143

103-
#SLIDE_ID .template-book-review {
104-
--text-color: var(--color-grey-700);
144+
#SLIDE_ID .template-book-review .text-area h1 + p strong {
145+
color: var(--color-text-secondary);
146+
font-weight: normal;
105147
}
106148

107149
#SLIDE_ID .template-book-review .author {
108-
--text-color: var(--color-grey-500);
150+
color: var(--color-text-secondary);
151+
font-weight: normal;
109152
}
110153

111154
/*
@@ -115,23 +158,26 @@
115158
*/
116159

117160
#SLIDE_ID .template-rss {
118-
--text-color: var(--text-light, hsl(0deg, 0%, 100%));
161+
--text-color: var(--color-text-primary);
162+
--bg-color: var(--color-bg-primary);
119163
padding: calc(var(--spacer) * 4);
120164
gap: calc(var(--spacer) * 6);
121-
background-color: var(--color-primary);
122-
color: var(--text-color);
165+
/* background-color: var(--color-bg-primary); */
166+
/* color: var(--text-primary); */
123167
}
124168

125169
.color-scheme-dark #SLIDE_ID .template-rss {
126-
--text-color: var(--text-dark, hsl(0deg, 0%, 0%));
170+
--text-color: var(--color-bg-primary);
171+
--bg-color: var(--color-text-primary);
172+
/* background-color: var(--text-dark, hsl(0deg, 0%, 0%)); */
127173
}
128174

129175
#SLIDE_ID .template-rss .feed-info {
130176
gap: calc(var(--spacer) * 2);
131177
}
132178

133179
#SLIDE_ID .template-rss .feed-info--date {
134-
border-right: 3px solid var(--color-white);
180+
border-right: 3px solid var(--color-primary);
135181
padding-right: calc(var(--spacer) * 2);
136182
font-size: calc(var(--font-size-base) * 2);
137183
}
@@ -152,7 +198,7 @@
152198
line-height: 1.2;
153199
}
154200

155-
#SLIDE_ID .template-rss .description {
201+
#SLIDE_ID .template-rss {
156202
font-size: calc(var(--font-size-base) * 3);
157203
line-height: 1.3;
158204
}
@@ -163,15 +209,20 @@
163209
*
164210
*/
165211

212+
#SLIDE_ID .template-image-text .background-image {
213+
background-color: var(--color-bg-secondary);
214+
}
215+
166216
#SLIDE_ID .template-image-text .box {
167-
background-color: var(--bg-dark);
168-
color: var(--text-light);
217+
background-color: var(--color-bg-primary);
218+
color: var(--text-dark);
169219
}
170220

171221
#SLIDE_ID .template-image-text.reversed {
172222
color: var(--text-light);
173223
text-shadow: var(--shadow-text-m);
174224
}
225+
175226
#SLIDE_ID .template-image-text.reversed .box {
176227
background-color: transparent;
177228
box-shadow: none;
@@ -186,12 +237,15 @@
186237
--h1-font-size: calc(var(--font-size-base) * 3.5);
187238
--h4-font-size: calc(var(--font-size-base) * 1.75);
188239
--font-size-xl: calc(var(--font-size-base) * 2);
189-
190-
background-color: var(--color-white);
240+
background-color: var(--color-bg-secondary);
191241
}
192242

193243
#SLIDE_ID .template-instagram-feed .author-section {
194-
background-color: var(--color-white);
244+
background-color: var(--color-bg-primary);
245+
}
246+
247+
#SLIDE_ID .template-instagram-feed .author-section h1.author {
248+
font-family: var(--font-family-serif);
195249
}
196250

197251
#SLIDE_ID .template-instagram-feed .author-section .description .text {
@@ -216,10 +270,63 @@
216270
bottom: 0;
217271
padding-top: calc(var(--spacer) * 2);
218272
padding-bottom: calc(var(--spacer) * 2);
273+
274+
/* background-color: var(--color-white); */
275+
}
276+
277+
#SLIDE_ID .template-instagram-feed .brand-icon {
219278
color: var(--color-primary);
220-
background-color: var(--color-white);
279+
/* background-color: var(--color-white); */
221280
}
222281

223282
#SLIDE_ID .template-instagram-feed.landscape .brand {
224283
width: var(--percentage-narrow);
225-
}
284+
}
285+
286+
/*
287+
*
288+
* Customize news feed template
289+
*
290+
*/
291+
292+
#SLIDE_ID .template-news-feed {
293+
--background-color: var(--color-bg-primary);
294+
--color-secondary: var(--color-bg-secondary);
295+
296+
.extra-section,
297+
.text-section {
298+
color: var(--text-dark);
299+
300+
h1 {
301+
font-size: calc(var(--h1-font-size) * 1.25);
302+
}
303+
}
304+
305+
.description {
306+
color: inherit;
307+
}
308+
309+
.link {
310+
color: var(--color-primary);
311+
}
312+
}
313+
314+
/*
315+
*
316+
* Customize table template
317+
*
318+
*/
319+
320+
#SLIDE_ID .template-table {
321+
color: var(--color-text-primary);
322+
background-color: var(--color-bg-primary);
323+
324+
.template-table-header {
325+
color: var(--color-text-primary);
326+
background-color: var(--color-bg-secondary);
327+
}
328+
329+
.column-header {
330+
color: inherit;
331+
}
332+
}

0 commit comments

Comments
 (0)