summaryrefslogtreecommitdiffhomepage
path: root/src/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'src/style.css')
-rw-r--r--src/style.css470
1 files changed, 470 insertions, 0 deletions
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..d271c3b
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,470 @@
+:root {
+ --background-color: #121212;
+ --secondary-darker-color: #1B1B1B;
+ --secondary-color: #1F1F1F;
+ --tertiary-color: #282828;
+ --secondary-hover-color: #282828;
+ --tertiary-hover-color: #313131;
+
+ --font-color: #FFF;
+ --font-opacity: 87%;
+ --font-secondary-opacity: 60%;
+
+ --background-image-opacity: 30%;
+
+ --slant-delta: 120px;
+}
+
+* {
+ color: var(--font-color);
+ box-sizing: border-box;
+}
+
+body {
+ align-items: center;
+ background-color: var(--background-color);
+ display: flex;
+ flex-direction: column;
+ font-family: 'Ysabeau', sans-serif;
+ font-variant-numeric: lining-nums;
+ font-feature-settings: 'ss02';
+ font-weight: 500;
+ margin: 0;
+}
+
+h1, h2, h3, h4, h5, h6, p {
+ opacity: var(--font-opacity);
+}
+
+nav {
+ width: 100%;
+}
+
+nav a:link, nav a:visited {
+ text-decoration: inherit;
+ color: inherit;
+}
+
+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;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ z-index: 69;
+}
+
+nav ul ul {
+ border-left: 1px solid white;
+ display: none;
+ position: absolute;
+ width: 100%;
+}
+
+nav li:hover ul {
+ display: block;
+}
+
+nav li:hover {
+ background-color: var(--secondary-hover-color);
+}
+
+nav > ul > li > ul > li {
+ background-color: var(--secondary-color);
+}
+
+nav ul ul:last-child, nav ul ul li:last-child {
+ border-radius: 0 0 4px 4px;
+}
+
+nav li a, #lang-selected {
+ transition: ease 300ms;
+}
+
+nav li {
+ position: relative;
+}
+
+nav li a, nav li div, nav li label {
+ display: flex;
+ justify-content: center;
+ height: 100%;
+ padding: 12px;
+}
+
+nav li:hover a, li:hover > #lang-selected {
+ transform: translate(0, -4px);
+}
+
+nav ul > * {
+ flex-grow: 1;
+ text-align: center;
+}
+
+#lang-dd {
+ max-height: 50vh;
+ overflow: auto;
+}
+
+.unavailable {
+ font-style: italic;
+ opacity: var(--font-secondary-opacity);
+}
+
+header h1 {
+ font-size: 3rem;
+ margin-bottom: 0;
+}
+
+header h6 {
+ font-style: italic;
+ font-size: 1.1rem;
+ text-align: right;
+ opacity: var(--font-secondary-opacity);
+ margin-top: 0;
+}
+
+p {
+ text-align: justify;
+ font-size: 1.5rem;
+ line-height: 2.5rem;
+ width: 50%;
+}
+
+main {
+ width: 100%;
+}
+
+main section {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+}
+
+.selected {
+ background-color: var(--secondary-hover-color);
+}
+
+.slant-up {
+ -webkit-clip-path: polygon(
+ 0 var(--slant-delta),
+ 100% 0,
+ 100% calc(100% - var(--slant-delta)),
+ 0 100%
+ );
+ clip-path: polygon(
+ 0 var(--slant-delta),
+ 100% 0,
+ 100% calc(100% - var(--slant-delta)),
+ 0 100%
+ );
+}
+
+.slant-down {
+ -webkit-clip-path: polygon(
+ 0 0,
+ 100% var(--slant-delta),
+ 100% 100%,
+ 0 calc(100% - var(--slant-delta))
+ );
+ clip-path: polygon(
+ 0 0,
+ 100% var(--slant-delta),
+ 100% 100%,
+ 0 calc(100% - var(--slant-delta))
+ );
+}
+
+.c-section {
+ height: 600px;
+}
+
+.cl-section {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.c-section, .cl-section {
+ background-color: var(--secondary-color);
+}
+
+.cl-section > div {
+ padding: var(--slant-delta) 0;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.cl-section h2 {
+ font-size: 2rem;
+}
+
+.c-section > * {
+ text-decoration: none;
+ height: 100%;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+.c-section:hover {
+ background-color: var(--secondary-hover-color);
+}
+
+.c-section:hover h2 {
+ font-size: 2.2rem;
+}
+
+.c-section:hover img {
+ height: 500px;
+}
+
+.c-section p,
+.c-section h2,
+.c-section img {
+ transition: ease 300ms;
+}
+
+.c-section h2 {
+ font-size: 2rem;
+ width: 50%;
+ text-align: left;
+}
+
+.c-section img {
+ position: absolute;
+ height: 450px;
+ opacity: var(--background-image-opacity);
+ z-index: -1;
+}
+
+.right-align {
+ text-align: right;
+}
+
+.nifc { background-color: pink; }
+.have { background-color: green; }
+.have-nifc { background-color: #5DBB63; }
+.not-minted { background-color: black; }
+.unknown { background-color: grey; }
+.error { background-color: red; }
+
+#table-key {
+ background-color: var(--secondary-color);
+ border-radius: 8px;
+}
+
+#table-key td {
+ padding: 0;
+}
+
+#table-key tr td:first-child {
+ height: 40px;
+ width: 60px;
+}
+
+#table-key tr td:last-child {
+ padding: 0 25px;
+ font-size: 1.2rem;
+}
+
+#table-key tr td:first-child div {
+ height: 100%;
+ width: 100%;
+}
+
+#table-key tr:first-child td:first-child div {
+ border-radius: 8px 8px 0 0;
+}
+
+#table-key tr:last-child td:first-child div {
+ border-radius: 0 0 8px 8px;
+}
+
+.country-table {
+ background-color: var(--tertiary-color);
+ border-radius: 16px;
+ border-spacing: 0;
+ width: 50%;
+}
+
+.country-table td {
+ font-size: 1.25rem;
+ text-align: center;
+ width: 25%;
+}
+
+.country-table td:hover {
+ background-color: var(--tertiary-hover-color);
+}
+
+.country-table a {
+ display: block;
+ padding: 16px 0;
+ text-decoration: none;
+}
+
+.country-table tr:first-child td:first-child {
+ border-radius: 16px 0 0 0;
+}
+
+.country-table tr:first-child td:last-child {
+ border-radius: 0 16px 0 0;
+}
+
+.country-table tr:last-child td:first-child {
+ border-radius: 0 0 0 16px;
+}
+
+.country-table tr:last-child td:last-child {
+ border-radius: 0 0 16px 0;
+}
+
+.coin-table {
+ width: calc(50% + 32px);
+ white-space: nowrap;
+ max-width: 100%;
+ text-align: center;
+ table-layout: fixed;
+ font-size: 1.5rem;
+ background-color: var(--secondary-darker-color);
+ border-radius: 16px;
+ border-left: 16px solid var(--secondary-darker-color);
+ border-right: 16px solid var(--secondary-darker-color);
+ border-bottom: 16px solid var(--secondary-darker-color);
+}
+
+.coin-table .first-design th {
+ border-radius: 0;
+}
+
+.coin-table .new-design + tr td:first-child,
+.coin-table tbody tr:first-child td:first-child,
+.commemorative-table tbody tr:first-child td:nth-child(2) {
+ border-top-left-radius: 16px;
+}
+
+.coin-table .new-design + tr td:last-child,
+.coin-table tbody tr:first-child td:last-child {
+ border-top-right-radius: 16px;
+}
+
+.coin-table .last-of-design td:first-child,
+.commemorative-table tr:last-child td:nth-child(2) {
+ border-bottom-left-radius: 16px;
+}
+
+.coin-table tbody tr:only-child td:first-child,
+.commemorative-table tbody tr:only-child td:nth-child(2) {
+ border-top-left-radius: 16px;
+ border-bottom-left-radius: 16px;
+}
+
+.coin-table tbody tr:only-child td:last-child {
+ border-top-right-radius: 16px;
+ border-bottom-right-radius: 16px;
+}
+
+.coin-table .last-of-design td:last-child,
+.commemorative-table tr:last-child td:last-child {
+ border-bottom-right-radius: 16px;
+}
+
+.coin-table .missing {
+ background-color: var(--tertiary-color);
+}
+
+.coin-table .have,
+.coin-table .nifc,
+.coin-table .have-nifc,
+.coin-table .not-minted {
+ color: black;
+}
+
+.coin-table td {
+ border: 1px solid black;
+}
+
+.coin-table thead tr:first-child th {
+ font-size: 2rem;
+}
+
+.coin-table th {
+ font-style: bold;
+ width: 12.5%;
+}
+
+.coin-table th, .coin-table td {
+ padding: 8px;
+}
+
+.commemorative-table {
+ border-left: none;
+}
+
+.commemorative-table td:not(:first-child) {
+ border: 1px solid black;
+}
+
+.bnote-table td {
+ border: 1px solid black;
+}
+
+.commemorative-table td:first-child {
+ border: none;
+}
+
+.coin-table td:first-child,
+.commemorative-table td:nth-child(2) {
+ border-left: none;
+}
+
+.coin-table td:last-child,
+.commemorative-table td:last-child {
+ border-right: none;
+}
+
+.coin-table tbody tr:first-child td,
+.coin-table .new-design + tr td,
+.commemorative-table tr:first-child td {
+ border-top: none;
+}
+
+.coin-table .last-of-design td,
+.coin-table tr:last-child td,
+.commemorative-table tr:last-child td {
+ border-bottom: none;
+}
+
+.commemorative-table tr:last-child th {
+ width: 30%;
+}
+
+.commemorative-table tr:last-child th:first-child {
+ width: 10%;
+}
+
+.commemorative-table tr td:first-child {
+ background-color: var(--secondary-dark-color);
+}
+
+#test-banknote-table td:first-child {
+ width: 10%;
+}
+
+#test-banknote-table td:last-child {
+ width: 90%;
+}
+
+.coin-table sup, .commemorative-table sup {
+ color: inherit;
+ font-size: 0.8rem;
+}