basic page styles

header, footer, common classes and fonts
pages done:
- TOS
- Contact

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
new file mode 100644 (file)
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;
+}