New and improved in sveltekit

static/global.css

@@ -0,0 +1,45 @@
+body {
+  font-family: 'Roboto';
+  background-color: var(--backdrop);
+  color: var(--text-color);
+
+  transition: background-color var(--color-transition-duration) ease-in-out,
+    border-color var(--color-transition-duration) ease-in-out,
+    color var(--color-transition-duration) ease-in-out,
+    font-family var(--color-transition-duration) ease-in-out;
+}
+
+/* Nunito regular */
+@font-face {
+  font-family: 'Nunito';
+  src: url('/fonts/Nunito-Regular.eot?#iefix') format('embedded-opentype'),
+    url('/fonts/Nunito-Regular.woff') format('woff'),
+    url('/fonts/Nunito-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+/* Overpass regular */
+@font-face {
+  font-family: 'Overpass';
+  src: url('/fonts/Overpass-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+/* Roboto regular */
+@font-face {
+  font-family: 'Roboto';
+  src: url('/fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
+    url('/fonts/Roboto-Regular.woff') format('woff'),
+    url('/fonts/Roboto-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('/fonts/Roboto-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}

static/variables.css

@@ -0,0 +1,41 @@
+:root {
+  --background: white;
+  --backdrop: #f5f5f7;
+  --text-color: black;
+  --red: #ff97a3;
+  --blue: #9ad9ff;
+  --green: #19a786;
+
+  --header-height: 70px;
+
+  --color-transition-duration: 0.4s;
+}
+
+.dark {
+  --background: black;
+  --backdrop: #202124;
+  --text-color: white;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+a {
+  color: inherit; /* blue colors for links too */
+  text-decoration: inherit; /* no underline */
+}
+
+ul,
+li {
+  margin: 0;
+  padding: 0;
+}
+
+li {
+  list-style-type: none;
+}