diff options
Diffstat (limited to 'src/style.css')
-rw-r--r-- | src/style.css | 470 |
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; +} |