From ad7a7db643c4f97cc1b38ce6e1bb6b1c997f90be Mon Sep 17 00:00:00 2001 From: Eduardo Date: Sat, 25 Nov 2023 03:34:13 +0100 Subject: [PATCH] basic page styles header, footer, common classes and fonts pages done: - TOS - Contact --- src/assets/css/style.css | 151 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 151 insertions(+) create mode 100644 src/assets/css/style.css diff --git a/src/assets/css/style.css b/src/assets/css/style.css new file mode 100644 index 0000000..042dec4 --- /dev/null +++ b/src/assets/css/style.css @@ -0,0 +1,151 @@ +@font-face { + font-family: "BAHNSCHRIFT"; + src: url("../fonts/BAHNSCHRIFT.TTF"); + font-display: swap; +} + +@font-face { + font-family: "CPnUfo"; + src: url("../fonts/CP\ and\ U-Fo.otf"); + font-display: swap; +} + +html { + color: black; + font-family: BAHNSCHRIFT, Montserrat, Tahoma, Arial; + text-align: center; + min-height: 100vh; + background: linear-gradient(to bottom right, #fbb03b, #ffccff); +} + +body { + min-height: 100vh; + min-height: 100svh; +} + +:is(h1, h2, h3, h4, h5, h6) { + font-family: CPnUfo, Trebuchet, Tahoma, Arial; +} + +::selection { + color: #ffffffbd; + background: #ae00ff; +} + +.bold { + font-weight: bold; +} + +.italic { + font-style: italic; +} + +.line-through { + text-decoration: line-through; +} + +.underline { + text-decoration: underline; +} + +.center { + text-align: center; +} + +.separator { + display: block; + border-bottom: 2px solid #00000020; + margin: 20px 0; +} +.no-link { + text-decoration: none; + color: inherit; +} + +.big-text { + font-size: x-large; +} + +#content { + margin-top: 10px; + margin-inline: 5vw; + padding-bottom: 100px; +} + +/* header */ + +#header { + display: flex; + align-items: flex-end; + justify-content: space-between; + border-bottom: 2px solid #000000bb; + margin-bottom: 35px; +} + +#header > img { + flex-grow: 2; + align-self: center; + padding-top: 1.3vh; + padding-bottom: 1.3vh; + padding-left: 2vw; + max-width: 25vw; +} + +#header > div { + flex-grow: 1; +} + +#header > #menu { + flex-grow: 2; + padding-top: 0.5vh; + padding-bottom: 1.75vw; +} + +#header > #menu > ul { + display: flex; + justify-content: space-evenly; + list-style: none; + padding-inline-start: 0; + margin-block-start: 0; + margin-block-end: 0; +} +#header > #menu a { + font-family: CPnUfo, Trebuchet, Tahoma, Arial; + text-decoration: none; + color: inherit; +} +/* footer */ + +#footer { + padding-top: 25px; + padding-bottom: 50px; + font-size: small; + position: sticky; + top: 100vh; + top: 100svh; +} + +#footer a { + text-decoration: none; +} + +#footer a:hover { + text-decoration: underline; +} + +/* TOS */ + +#TOS { + margin-top: 10px; + margin-inline: 5vw; + padding-bottom: 100px; +} + +#TOS li { + text-align: left; +} + +/* override */ +.material-icons { + vertical-align: middle; +} -- 2.30.2