zumepro/libre-liberec-web
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

redesign base

Browse Source
This commit is contained in:
Ondřej Mekina
2025-04-17 00:12:48 +02:00
parent ddb39f9e57
commit 6e12ff636a
10 changed files with 45 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
Makefile
View File

@@ -1,7 +1,7 @@
PAGES := index.html 404.html javascript.html contact.html
SHARED_FILES := stallman.webp stallman_2024.webp favicon.ico \
poster_cz.webp poster_en.webp poster_cz.jpg poster_en.jpg \
word_cloud_cz.jpg word_cloud_en.jpg \
word_cloud_cz.png word_cloud_en.png background.jpg \
moon.svg sun.svg narrow_light.svg narrow_dark.svg wide_light.svg wide_dark.svg lang_cz.svg lang_en.svg \
styles.css icons.css \
countdown.js theme.js lang.js \
@@ -53,6 +53,10 @@ dst/poster_%.jpg: images/poster_%.png
@mkdir -p $(@D)
magick $< -resize 2000x2000 $@
dst/word_cloud_%.png: images/word_cloud_%.png
@mkdir -p $(@D)
magick $< -resize 2000x2000 $@
dst/%.jpg: images/%.jpg
@mkdir -p $(@D)
ln -f $< $@

1
components/cz/header.html
View File

@@ -4,7 +4,6 @@
<div class="header-subtitle">na Technické univerzitě v Liberci</div>
</div>
<div class="buttons">
<img src="data:," alt="Přepínač světlého a tmavého režimu" class="light-dark-switch" onclick="switch_theme();">
<img src="data:," alt="Přepínač širokého a úzkého rozvržení" class="layout-switch" onclick="switch_layout();">
<img src="data:," alt="Přepínač jazyka" class="lang-switch" onclick="switch_lang();">
</div>

1
components/en/header.html
View File

@@ -4,7 +4,6 @@
<div class="header-subtitle">at the Technical University in Liberec</div>
</div>
<div class="buttons">
<img src="data:," alt="Lightmode/darkmode switch" class="light-dark-switch" onclick="switch_theme();">
<img src="data:," alt="Wide/short layout switch" class="layout-switch" onclick="switch_layout();">
<img src="data:," alt="Language selector" class="lang-switch" onclick="switch_lang();">
</div>

4
doc/01_notes.md
View File

@@ -15,8 +15,8 @@
- Budova G
# Web
- Úvod nad ~~plakátem~~ fotkou s word cloudem
- Odpočet dole (pod textem, nad fotkou)
<!-- Úvod nad ~~plakátem~~ fotkou s word cloudem -->
<!-- Odpočet dole (pod textem, nad fotkou) -->
- Předělat index stránku do podoby plakátu
<!-- - Info dopryč (spojit s indexem) -->
<!-- - PDF s budovou G pryč -->

BIN
images/background.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 408 KiB

BIN
images/word_cloud_cz.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 MiB

BIN
images/word_cloud_en.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 MiB

2
pages/cz/index.html
View File

@@ -35,7 +35,7 @@
<div class="countdown">--:--:--:--</div>
<figure class="poster">
<img src="../word_cloud_cz.jpg" alt="Plakát na přednášku s Richardem Stallmanem">
<img src="../word_cloud_cz.png" alt="Plakát na přednášku s Richardem Stallmanem">
</figure>
<h1>Kdo je Richard Stallman?</h1>

2
pages/en/index.html
View File

@@ -24,7 +24,7 @@
<div class="countdown">--:--:--:--</div>
<figure class="poster">
<img src="../word_cloud_en.jpg" alt="Poster for Richard Stallman's lecture">
<img src="../word_cloud_en.png" alt="Poster for Richard Stallman's lecture">
</figure>
<h1>Who is Richard Stallman?</h1>

113
styles/styles.css
View File

@@ -1,14 +1,6 @@
:root {
--light-fg-color: black;
--light-bg-color: white;
--light-alt-bg-color: #FFFFD0;
--light-field-hover-bg-color: #F0F0F0;
--light-field-active-bg-color: #E0E0E0;
--light-link-idle-color: darkred;
--light-sep-color: gainsboro;
--dark-fg-color: white;
--dark-bg-color: #202020;
--dark-bg-color: black;
--dark-alt-bg-color: #101010;
--dark-field-hover-bg-color: #000000;
--dark-field-active-bg-color: #404040;
@@ -25,76 +17,38 @@
--text-subtle-color: gray;
}
@media (prefers-color-scheme: light) {
:root {
--fg-color: var(--light-fg-color);
--bg-color: var(--light-bg-color);
--alt-bg-color: var(--light-alt-bg-color);
--field-hover-bg-color: var(--light-field-hover-bg-color);
--field-active-bg-color: var(--light-field-active-bg-color);
--link-idle-color: var(--light-link-idle-color);
:root {
--fg-color: var(--dark-fg-color);
--bg-color: var(--dark-bg-color);
--alt-bg-color: var(--dark-alt-bg-color);
--field-hover-bg-color: var(--dark-field-hover-bg-color);
--field-active-bg-color: var(--dark-field-active-bg-color);
--link-idle-color: var(--dark-link-idle-color);
--theme-switch-icon: var(--light-theme-switch-icon);
--narrow-layout-switch-icon: var(--light-narrow-layout-switch-icon);
--wide-layout-switch-icon: var(--light-wide-layout-switch-icon);
--fg-gnu-head: var(--dark-gnu-head);
--bg-gnu-head: var(--light-gnu-head);
--theme-switch-icon: var(--dark-theme-switch-icon);
--narrow-layout-switch-icon: var(--dark-narrow-layout-switch-icon);
--wide-layout-switch-icon: var(--dark-wide-layout-switch-icon);
--fg-gnu-head: var(--light-gnu-head);
--bg-gnu-head: var(--dark-gnu-head);
--sep-color: var(--light-sep-color);
}
[data-color-scheme="invert"] {
--fg-color: var(--dark-fg-color);
--bg-color: var(--dark-bg-color);
--alt-bg-color: var(--dark-alt-bg-color);
--field-hover-bg-color: var(--dark-field-hover-bg-color);
--field-active-bg-color: var(--dark-field-active-bg-color);
--link-idle-color: var(--dark-link-idle-color);
--theme-switch-icon: var(--dark-theme-switch-icon);
--narrow-layout-switch-icon: var(--dark-narrow-layout-switch-icon);
--wide-layout-switch-icon: var(--dark-wide-layout-switch-icon);
--fg-gnu-head: var(--light-gnu-head);
--bg-gnu-head: var(--dark-gnu-head);
--sep-color: var(--dark-sep-color);
}
--sep-color: var(--dark-sep-color);
}
@media (prefers-color-scheme: dark) {
:root {
--fg-color: var(--dark-fg-color);
--bg-color: var(--dark-bg-color);
--alt-bg-color: var(--dark-alt-bg-color);
--field-hover-bg-color: var(--dark-field-hover-bg-color);
--field-active-bg-color: var(--dark-field-active-bg-color);
--link-idle-color: var(--dark-link-idle-color);
[data-color-scheme="invert"] {
--fg-color: var(--light-fg-color);
--bg-color: var(--light-bg-color);
--alt-bg-color: var(--light-alt-bg-color);
--field-hover-bg-color: var(--light-field-hover-bg-color);
--field-active-bg-color: var(--light-field-active-bg-color);
--link-idle-color: var(--light-link-idle-color);
--theme-switch-icon: var(--dark-theme-switch-icon);
--narrow-layout-switch-icon: var(--dark-narrow-layout-switch-icon);
--wide-layout-switch-icon: var(--dark-wide-layout-switch-icon);
--fg-gnu-head: var(--light-gnu-head);
--bg-gnu-head: var(--dark-gnu-head);
--theme-switch-icon: var(--light-theme-switch-icon);
--narrow-layout-switch-icon: var(--light-narrow-layout-switch-icon);
--wide-layout-switch-icon: var(--light-wide-layout-switch-icon);
--fg-gnu-head: var(--dark-gnu-head);
--bg-gnu-head: var(--light-gnu-head);
--sep-color: var(--dark-sep-color);
}
[data-color-scheme="invert"] {
--fg-color: var(--light-fg-color);
--bg-color: var(--light-bg-color);
--alt-bg-color: var(--light-alt-bg-color);
--field-hover-bg-color: var(--light-field-hover-bg-color);
--field-active-bg-color: var(--light-field-active-bg-color);
--link-idle-color: var(--light-link-idle-color);
--theme-switch-icon: var(--light-theme-switch-icon);
--narrow-layout-switch-icon: var(--light-narrow-layout-switch-icon);
--wide-layout-switch-icon: var(--light-wide-layout-switch-icon);
--fg-gnu-head: var(--dark-gnu-head);
--bg-gnu-head: var(--light-gnu-head);
--sep-color: var(--light-sep-color);
}
--sep-color: var(--light-sep-color);
}
:root {
@@ -122,6 +76,10 @@ html {
}
body {
background-image: url("background.jpg");
background-attachment: fixed;
background-size: cover;
background-position: center;
font-family: "Noto Sans", sans-serif;
font-size: 16px;
display: flex;
@@ -129,13 +87,13 @@ body {
color: var(--fg-color);
background-color: var(--bg-color);
margin: 0;
min-height: 100vh;
}
header {
display: flex;
padding: 1.5em 0;
position: relative;
background-color: var(--bg-color);
align-items: center;
justify-content: space-between;
width: min(90%, 50em);
@@ -214,7 +172,7 @@ header * {
.countdown {
font-family: monospace;
font-weight: bold;
font-size: 2.5em;
font-size: 2em;
text-align: center;
margin: 1em auto;
padding: 0 .5em;
@@ -225,7 +183,7 @@ header * {
@media only screen and (min-width: 50rem) {
.countdown {
font-size: 4em;
font-size: 3em;
}
}
@@ -277,6 +235,7 @@ footer>* {
}
h1 {
margin: 2em 0;
font-size: 1.5em;
}
@@ -328,7 +287,7 @@ figcaption {
.poster {
margin: 0 auto !important;
max-width: 50rem;
max-width: 40rem;
}
nav ul {