From 532e786cae5a8b454f8c69328b40f6f1c8e615f8 Mon Sep 17 00:00:00 2001 From: "Alexander \"Arav\" Andreev" Date: Mon, 7 Feb 2022 04:48:44 +0400 Subject: [PATCH] Add main.css. --- web/assets/css/main.css | 132 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 132 insertions(+) create mode 100644 web/assets/css/main.css diff --git a/web/assets/css/main.css b/web/assets/css/main.css new file mode 100644 index 0000000..af71550 --- /dev/null +++ b/web/assets/css/main.css @@ -0,0 +1,132 @@ +@font-face { + font-family: 'Roboto Condensed'; + font-style: normal; + font-weight: 400; + src: local('RobotoCondensed'), local('RobotoCondensed-Regular'), + url(/shared/fonts/RobotoCondensed-Regular.ttf); } + +:root { + --background-color: #0a0a0a; + --primary-color: #cd2682; + --secondary-color: #9f2b68; + --text-color: #f5f5f5; + --text-indent: 1.6rem; + scrollbar-color: var(--primary-color) var(--background-color); } + +@media (prefers-color-scheme: light) { + :root { + --background-color: #f5f5f5; + --primary-color: #9f2b68; + --secondary-color: #cd2682; + --text-color: #0a0a0a; } } + +* { margin: 0; } + +::selection { + background-color: var(--secondary-color); + color: var(--background-color); } + +a, +button { + color: var(--primary-color); + text-decoration: none; } + +a:hover, +button:hover { + color: var(--secondary-color); + cursor: pointer; + text-decoration: underline dotted; + transition: .5s; } + +button { + background: none; + border: none; + font: inherit; + padding: 0; } + +p { + text-align: justify; + line-height: var(--text-indent); + text-indent: var(--text-indent); } + +p:not(:last-child) { margin-bottom: .1rem; } + +h1, +h2 { + font-size: 1.8rem; + font-variant: small-caps; + text-align: center; + margin-bottom: 1rem; } + +h2 { + font-size: 1.4rem; + margin: 1rem 0; } + +small { font-size: .8rem; } + +html { margin-left: calc(100vw - 100%); } + +body { + background-color: var(--background-color); + color: var(--text-color); + font-family: 'Roboto Condensed', Roboto, sans-serif; + font-size: 1.1rem; + margin: 0 auto; + max-width: 960px; + width: 98%; } + +header { + display: flex; + flex-wrap: wrap; + justify-content: space-between; } + +#logo { + display: block; + width: 360px; } + +#logo text { fill: var(--text-color); } + +#logo .logo { + font-size: 2rem; + font-variant-caps: small-caps; + font-weight: bold; } + +@media screen and (-webkit-min-device-pixel-ratio:0) { + #logo .logo { font-size: 2.082rem; } } + +@-moz-document url-prefix() { + #logo .logo { font-size: 2rem; } } + +#logo .under { font-size: .88rem; } + +nav { margin-top: .5rem; } + +nav a { font-variant: small-caps; } + +nav h1 { + color: var(--secondary-color); + margin: 0; } + +section { margin-top: 1rem; } + +section#used-space, +section#upload, +section#rules { + text-align: center; +} + +footer { + font-size: .8rem; + text-align: center; + padding: 1rem 0; } + +@media screen and (max-width: 640px) { + header { display: block; } + + #logo { + margin: 0 auto; + width: 100%; } + + nav { + width: 100%; + text-align: center; } } \ No newline at end of file