summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/de/euro/coins.template.html12
-rw-r--r--src/de/nav-bar.html1
-rw-r--r--src/en/euro/coins.template.html12
-rw-r--r--src/en/nav-bar.html1
-rw-r--r--src/pt/euro/coins.template.html12
-rw-r--r--src/pt/nav-bar.html1
-rw-r--r--src/style.css132
7 files changed, 149 insertions, 22 deletions
diff --git a/src/de/euro/coins.template.html b/src/de/euro/coins.template.html
index 1f57a55..f4a4210 100644
--- a/src/de/euro/coins.template.html
+++ b/src/de/euro/coins.template.html
@@ -89,7 +89,17 @@
<tr>
<th colspan=8>Standard Issues</th>
</tr>
- <tr>
+ <tr class=mobile>
+ <th>1c</th>
+ <th>2c</th>
+ <th>5c</th>
+ <th>10c</th>
+ <th>20c</th>
+ <th>50c</th>
+ <th>€1</th>
+ <th>€2</th>
+ </tr>
+ <tr class=not-mobile>
<th>1 Cent</th>
<th>2 Cent</th>
<th>5 Cent</th>
diff --git a/src/de/nav-bar.html b/src/de/nav-bar.html
index a427cca..1636e0e 100644
--- a/src/de/nav-bar.html
+++ b/src/de/nav-bar.html
@@ -1,5 +1,4 @@
<ul>
- <!--<li><div class=selected>Home</div></li>-->
<li><a href=/XX>Home</a></li>
<li><a href=/XX/changelog>Changelog</a></li>
<li><a href=/XX/euro>Euro-Coins & -Banknotes</a></li>
diff --git a/src/en/euro/coins.template.html b/src/en/euro/coins.template.html
index 1f57a55..f4a4210 100644
--- a/src/en/euro/coins.template.html
+++ b/src/en/euro/coins.template.html
@@ -89,7 +89,17 @@
<tr>
<th colspan=8>Standard Issues</th>
</tr>
- <tr>
+ <tr class=mobile>
+ <th>1c</th>
+ <th>2c</th>
+ <th>5c</th>
+ <th>10c</th>
+ <th>20c</th>
+ <th>50c</th>
+ <th>€1</th>
+ <th>€2</th>
+ </tr>
+ <tr class=not-mobile>
<th>1 Cent</th>
<th>2 Cent</th>
<th>5 Cent</th>
diff --git a/src/en/nav-bar.html b/src/en/nav-bar.html
index 21e15ad..726f309 100644
--- a/src/en/nav-bar.html
+++ b/src/en/nav-bar.html
@@ -1,5 +1,4 @@
<ul>
- <!--<li><div class=selected>Home</div></li>-->
<li><a href=/XX>Home</a></li>
<li><a href=/XX/changelog>Changelog</a></li>
<li><a href=/XX/euro>Euro-Coins & -Banknotes</a></li>
diff --git a/src/pt/euro/coins.template.html b/src/pt/euro/coins.template.html
index 1f57a55..f4a4210 100644
--- a/src/pt/euro/coins.template.html
+++ b/src/pt/euro/coins.template.html
@@ -89,7 +89,17 @@
<tr>
<th colspan=8>Standard Issues</th>
</tr>
- <tr>
+ <tr class=mobile>
+ <th>1c</th>
+ <th>2c</th>
+ <th>5c</th>
+ <th>10c</th>
+ <th>20c</th>
+ <th>50c</th>
+ <th>€1</th>
+ <th>€2</th>
+ </tr>
+ <tr class=not-mobile>
<th>1 Cent</th>
<th>2 Cent</th>
<th>5 Cent</th>
diff --git a/src/pt/nav-bar.html b/src/pt/nav-bar.html
index 1f8cbea..e17627a 100644
--- a/src/pt/nav-bar.html
+++ b/src/pt/nav-bar.html
@@ -1,5 +1,4 @@
<ul>
- <!--<li><div class=selected>Home</div></li>-->
<li><a href=/XX>Home</a></li>
<li><a href=/XX/changelog>Changelog</a></li>
<li><a href=/XX/euro>Euro-Coins & -Banknotes</a></li>
diff --git a/src/style.css b/src/style.css
index f9581f2..979ea04 100644
--- a/src/style.css
+++ b/src/style.css
@@ -40,7 +40,49 @@
--background-image-opacity: 30%;
- --slant-delta: 120px;
+ --slant-delta: 40px;
+}
+
+@media only screen and (min-width: 800px) {
+ :root {
+ --slant-delta: 60px;
+ }
+}
+
+@media only screen and (min-width: 1000px) {
+ :root {
+ --slant-delta: 80px;
+ }
+}
+
+@media only screen and (min-width: 1400px) {
+ :root {
+ --slant-delta: 100px;
+ }
+}
+
+@media only screen and (min-width: 1800px) {
+ :root {
+ --slant-delta: 120px;
+ }
+}
+
+.not-mobile {
+ display: none;
+}
+
+@media only screen and (min-width: 600px) {
+ .mobile {
+ display: none;
+ }
+
+ .not-mobile {
+ display: unset;
+ }
+
+ tr.not-mobile {
+ display: table-row;
+ }
}
* {
@@ -74,16 +116,19 @@ nav a:link, nav a:visited {
}
nav ul {
- background-color: var(--secondary-color);
- border-bottom: 1px solid white;
display: flex;
- font-size: 1.2rem;
+ font-size: 1rem;
list-style: none;
margin: 0;
padding: 0;
z-index: 69;
}
+nav > ul {
+ white-space: nowrap;
+ overflow-x: scroll;
+}
+
@media only screen and (min-width: 1000px) {
nav ul {
font-size: 1.2rem;
@@ -131,6 +176,11 @@ nav li a, #lang-selected {
nav li {
position: relative;
+ background-color: var(--secondary-color);
+}
+
+nav > ul > li, nav > ul > li li:last-child {
+ border-bottom: 1px solid white;
}
nav li a, nav li div, nav li label {
@@ -161,7 +211,7 @@ nav ul > * {
}
header h1 {
- font-size: 2rem;
+ font-size: 1.5rem;
margin-bottom: 0;
}
@@ -185,19 +235,31 @@ header h1 {
header h6 {
font-style: italic;
- font-size: 1.1rem;
+ font-size: 1rem;
text-align: right;
opacity: var(--font-secondary-opacity);
margin-top: 0;
}
+@media only screen and (min-width: 1400px) {
+ header h6 {
+ font-size: 1.1rem;
+ }
+}
+
p {
text-align: justify;
- font-size: 1.3rem;
- line-height: 2.5rem;
+ font-size: 1rem;
+ line-height: 2rem;
width: 95%;
}
+@media only screen and (min-width: 800px) {
+ p {
+ font-size: 1.3rem;
+ }
+}
+
@media only screen and (min-width: 1000px) {
p {
font-size: 1.4rem;
@@ -286,7 +348,13 @@ main section {
}
.cl-section h2 {
- font-size: 2rem;
+ font-size: 1.5rem;
+}
+
+@media only screen and (min-width: 1000px) {
+ .cl-section h2 {
+ font-size: 2rem;
+ }
}
.c-section > * {
@@ -303,10 +371,6 @@ main section {
background-color: var(--secondary-hover-color);
}
-.c-section:hover h2 {
- font-size: 2.2rem;
-}
-
.c-section:hover img {
height: 500px;
}
@@ -318,15 +382,25 @@ main section {
}
.c-section h2 {
- font-size: 2rem;
+ font-size: 1.5rem;
width: 95%;
text-align: left;
}
+.c-section:hover h2 {
+ font-size: 1.7rem;
+}
+
+
@media only screen and (min-width: 1000px) {
.c-section h2 {
+ font-size: 2rem;
width: 75%;
}
+
+ .c-section:hover h2 {
+ font-size: 2.2rem;
+ }
}
@media only screen and (min-width: 1400px) {
@@ -375,6 +449,10 @@ main section {
#table-key tr td:last-child {
padding: 0 25px;
+ font-size: 1rem;
+}
+
+@media only screen and (min-width: 1000px) {
font-size: 1.2rem;
}
@@ -417,11 +495,15 @@ main section {
}
.country-table td {
- font-size: 1.25rem;
+ font-size: 1rem;
text-align: center;
width: 25%;
}
+@media only screen and (min-width: 1000px) {
+ font-size: 1.25rem;
+}
+
.country-table td:hover {
background-color: var(--tertiary-hover-color);
}
@@ -535,7 +617,25 @@ main section {
}
.coin-table thead tr:first-child th {
- font-size: 2rem;
+ font-size: 1.2rem;
+}
+
+@media only screen and (min-width: 1000px) {
+ .coin-table thead tr:first-child th {
+ font-size: 1.5rem;
+ }
+}
+
+@media only screen and (min-width: 1400px) {
+ .coin-table thead tr:first-child th {
+ font-size: 1.8rem;
+ }
+}
+
+@media only screen and (min-width: 1800px) {
+ .coin-table thead tr:first-child th {
+ font-size: 2rem;
+ }
}
.coin-table th {