From 7ea38eb5a6d7f161f5829e93f94d2c9b01eb4a17 Mon Sep 17 00:00:00 2001 From: Thomas Voss Date: Fri, 2 Jun 2023 15:34:59 +0200 Subject: Improve the mobile experience a bit --- src/changelog.html | 1 + src/de/euro/coins.template.html | 1 + src/de/euro/index.html | 1 + src/de/euro/notes.template.html | 1 + src/de/euro/tnotes.template.html | 1 + src/de/index.html | 1 + src/en/euro/coins.template.html | 1 + src/en/euro/index.html | 1 + src/en/euro/notes.template.html | 1 + src/en/euro/tnotes.template.html | 1 + src/en/index.html | 1 + src/pt/euro/coins.template.html | 1 + src/pt/euro/index.html | 1 + src/pt/euro/notes.template.html | 1 + src/pt/euro/tnotes.template.html | 1 + src/pt/index.html | 1 + src/style.css | 108 ++++++++++++++++++++++++++++++++++++--- 17 files changed, 116 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/changelog.html b/src/changelog.html index 6402a43..0891fc5 100644 --- a/src/changelog.html +++ b/src/changelog.html @@ -2,6 +2,7 @@ + Changelog diff --git a/src/de/euro/coins.template.html b/src/de/euro/coins.template.html index 439617d..1f57a55 100644 --- a/src/de/euro/coins.template.html +++ b/src/de/euro/coins.template.html @@ -2,6 +2,7 @@ + <!-- DEMON --> Euro Coins diff --git a/src/de/euro/index.html b/src/de/euro/index.html index d70bd8e..99bf9f7 100644 --- a/src/de/euro/index.html +++ b/src/de/euro/index.html @@ -2,6 +2,7 @@ + Euro-Coins & -Banknotes diff --git a/src/de/euro/notes.template.html b/src/de/euro/notes.template.html index f15f087..0e2cc7e 100644 --- a/src/de/euro/notes.template.html +++ b/src/de/euro/notes.template.html @@ -2,6 +2,7 @@ + €<!-- DENOM --> Banknotes diff --git a/src/de/euro/tnotes.template.html b/src/de/euro/tnotes.template.html index 982e1cf..a22c9b6 100644 --- a/src/de/euro/tnotes.template.html +++ b/src/de/euro/tnotes.template.html @@ -2,6 +2,7 @@ + Euro Test-Banknotes diff --git a/src/de/index.html b/src/de/index.html index b81583d..2501b9d 100644 --- a/src/de/index.html +++ b/src/de/index.html @@ -2,6 +2,7 @@ + Thomas’ Euro Collection diff --git a/src/en/euro/coins.template.html b/src/en/euro/coins.template.html index 439617d..1f57a55 100644 --- a/src/en/euro/coins.template.html +++ b/src/en/euro/coins.template.html @@ -2,6 +2,7 @@ + <!-- DEMON --> Euro Coins diff --git a/src/en/euro/index.html b/src/en/euro/index.html index 4961be0..5d39d4f 100644 --- a/src/en/euro/index.html +++ b/src/en/euro/index.html @@ -2,6 +2,7 @@ + Euro-Coins & -Banknotes diff --git a/src/en/euro/notes.template.html b/src/en/euro/notes.template.html index f15f087..0e2cc7e 100644 --- a/src/en/euro/notes.template.html +++ b/src/en/euro/notes.template.html @@ -2,6 +2,7 @@ + €<!-- DENOM --> Banknotes diff --git a/src/en/euro/tnotes.template.html b/src/en/euro/tnotes.template.html index 982e1cf..a22c9b6 100644 --- a/src/en/euro/tnotes.template.html +++ b/src/en/euro/tnotes.template.html @@ -2,6 +2,7 @@ + Euro Test-Banknotes diff --git a/src/en/index.html b/src/en/index.html index b81583d..2501b9d 100644 --- a/src/en/index.html +++ b/src/en/index.html @@ -2,6 +2,7 @@ + Thomas’ Euro Collection diff --git a/src/pt/euro/coins.template.html b/src/pt/euro/coins.template.html index 439617d..1f57a55 100644 --- a/src/pt/euro/coins.template.html +++ b/src/pt/euro/coins.template.html @@ -2,6 +2,7 @@ + <!-- DEMON --> Euro Coins diff --git a/src/pt/euro/index.html b/src/pt/euro/index.html index d70bd8e..99bf9f7 100644 --- a/src/pt/euro/index.html +++ b/src/pt/euro/index.html @@ -2,6 +2,7 @@ + Euro-Coins & -Banknotes diff --git a/src/pt/euro/notes.template.html b/src/pt/euro/notes.template.html index f15f087..0e2cc7e 100644 --- a/src/pt/euro/notes.template.html +++ b/src/pt/euro/notes.template.html @@ -2,6 +2,7 @@ + €<!-- DENOM --> Banknotes diff --git a/src/pt/euro/tnotes.template.html b/src/pt/euro/tnotes.template.html index 982e1cf..a22c9b6 100644 --- a/src/pt/euro/tnotes.template.html +++ b/src/pt/euro/tnotes.template.html @@ -2,6 +2,7 @@ + Euro Test-Banknotes diff --git a/src/pt/index.html b/src/pt/index.html index b81583d..2501b9d 100644 --- a/src/pt/index.html +++ b/src/pt/index.html @@ -2,6 +2,7 @@ + Thomas’ Euro Collection diff --git a/src/style.css b/src/style.css index a3ebc45..3e14f98 100644 --- a/src/style.css +++ b/src/style.css @@ -74,18 +74,34 @@ nav a:link, nav a:visited { } nav ul { - align-items: center; background-color: var(--secondary-color); border-bottom: 1px solid white; display: flex; - font-size: 1.5rem; - justify-content: space-around; + font-size: 1.2rem; list-style: none; margin: 0; padding: 0; z-index: 69; } +@media only screen and (min-width: 1000px) { + nav ul { + font-size: 1.2rem; + } +} + +@media only screen and (min-width: 1400px) { + nav ul { + font-size: 1.4rem; + } +} + +@media only screen and (min-width: 1800px) { + nav ul { + font-size: 1.5rem; + } +} + nav ul ul { border-left: 1px solid white; display: none; @@ -120,6 +136,7 @@ nav li { nav li a, nav li div, nav li label { display: flex; justify-content: center; + align-items: center; height: 100%; padding: 12px; } @@ -160,7 +177,25 @@ p { text-align: justify; font-size: 1.5rem; line-height: 2.5rem; - width: 50%; + width: 95%; +} + +@media only screen and (min-width: 1000px) { + p { + width: 75%; + } +} + +@media only screen and (min-width: 1400px) { + p { + width: 65%; + } +} + +@media only screen and (min-width: 1800px) { + p { + width: 50%; + } } main { @@ -263,10 +298,28 @@ main section { .c-section h2 { font-size: 2rem; - width: 50%; + width: 95%; text-align: left; } +@media only screen and (min-width: 1000px) { + .c-section h2 { + width: 75%; + } +} + +@media only screen and (min-width: 1400px) { + .c-section h2 { + width: 65%; + } +} + +@media only screen and (min-width: 1800px) { + .c-section h2 { + width: 50%; + } +} + .c-section img { position: absolute; height: 450px; @@ -321,7 +374,25 @@ main section { background-color: var(--tertiary-color); border-radius: 16px; border-spacing: 0; - width: 50%; + width: 95%; +} + +@media only screen and (min-width: 1000px) { + .country-table { + width: 75%; + } +} + +@media only screen and (min-width: 1400px) { + .country-table { + width: 65%; + } +} + +@media only screen and (min-width: 1800px) { + .country-table { + width: 50%; + } } .country-table td { @@ -357,12 +428,12 @@ main section { } .coin-table { - width: calc(50% + 32px); + width: calc(95% + 32px); white-space: nowrap; max-width: 100%; text-align: center; table-layout: fixed; - font-size: 1.5rem; + font-size: 1rem; background-color: var(--secondary-darker-color); border-radius: 16px; border-left: 16px solid var(--secondary-darker-color); @@ -370,6 +441,27 @@ main section { border-bottom: 16px solid var(--secondary-darker-color); } +@media only screen and (min-width: 1000px) { + .coin-table { + width: calc(75% + 32px); + font-size: 1.2rem; + } +} + +@media only screen and (min-width: 1400px) { + .coin-table { + width: calc(65% + 32px); + font-size: 1.4rem; + } +} + +@media only screen and (min-width: 1800px) { + .coin-table { + width: calc(50% + 32px); + font-size: 1.5rem; + } +} + .coin-table .first-design th { border-radius: 0; } -- cgit v1.2.3