diff --git a/Makefile b/Makefile
index e75938e..d460b4e 100644
--- a/Makefile
+++ b/Makefile
@@ -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 $< $@
diff --git a/components/cz/header.html b/components/cz/header.html
index d947f07..59baf84 100644
--- a/components/cz/header.html
+++ b/components/cz/header.html
@@ -4,7 +4,6 @@
diff --git a/components/en/header.html b/components/en/header.html
index ba7dbb7..e68c8d7 100644
--- a/components/en/header.html
+++ b/components/en/header.html
@@ -4,7 +4,6 @@
diff --git a/doc/01_notes.md b/doc/01_notes.md
index 5834760..8df23c9 100644
--- a/doc/01_notes.md
+++ b/doc/01_notes.md
@@ -15,8 +15,8 @@
- Budova G
# Web
-- Ú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
diff --git a/images/background.jpg b/images/background.jpg
new file mode 100644
index 0000000..48c0ed8
Binary files /dev/null and b/images/background.jpg differ
diff --git a/images/word_cloud_cz.png b/images/word_cloud_cz.png
new file mode 100644
index 0000000..25a5794
Binary files /dev/null and b/images/word_cloud_cz.png differ
diff --git a/images/word_cloud_en.png b/images/word_cloud_en.png
new file mode 100644
index 0000000..502e9fa
Binary files /dev/null and b/images/word_cloud_en.png differ
diff --git a/pages/cz/index.html b/pages/cz/index.html
index c3f7a47..c0f4aa2 100644
--- a/pages/cz/index.html
+++ b/pages/cz/index.html
@@ -35,7 +35,7 @@
--:--:--:--
- 
+ 
Kdo je Richard Stallman?
diff --git a/pages/en/index.html b/pages/en/index.html
index 5109889..c660c9f 100644
--- a/pages/en/index.html
+++ b/pages/en/index.html
@@ -24,7 +24,7 @@
--:--:--:--
- 
+ 
Who is Richard Stallman?
diff --git a/styles/styles.css b/styles/styles.css
index 043ba57..a8db5f9 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -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 {