Main entry and glboal styles

2025-10-29 05:10:11 +00:00 · 2022-11-28 20:02:22 +01:00
parent c013c839bb
commit 502efef964
4 changed files with 91 additions and 0 deletions
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -0,0 +1,6 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+// and what to do when importing types
+declare namespace App {
+  string;
+}
--- a/src/app.html
+++ b/src/app.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+
+    <meta name="theme-color" content="#18332f" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+
+    <style lang="css">
+      html,
+      body {
+        padding: 0;
+        margin: 0;
+      }
+    </style>
+
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-prefetch>
+    <div>%sveltekit.body%</div>
+  </body>
+</html>
--- a/src/styles/generic-article.scss
+++ b/src/styles/generic-article.scss
@@ -0,0 +1,41 @@
+@import './media-queries.scss';
+
+article {
+  margin: 20% 2rem;
+
+  width: 60%;
+}
+
+p {
+  font-size: 1.2rem;
+  margin: 2rem 0;
+  line-height: 1.5;
+
+  strong {
+    display: block;
+    margin-top: 2rem;
+  }
+}
+
+h1 {
+  margin: 4rem 0;
+}
+
+@include mobile {
+  article {
+    width: unset;
+    margin: 0.5rem;
+  }
+}
+
+p.last-edit {
+  margin-top: 2rem;
+
+  strong {
+    display: inline-block;
+  }
+}
+
+a {
+  text-decoration: underline;
+}
--- a/src/styles/media-queries.scss
+++ b/src/styles/media-queries.scss
@@ -0,0 +1,20 @@
+$tablet-width: 1200px;
+$mobile-width: 768px;
+
+@mixin tablet {
+  @media (min-width: #{$mobile-width}) {
+    @content;
+  }
+}
+
+@mixin mobile {
+  @media (max-width: #{$mobile-width}) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media (min-width: #{$tablet-width + 1px}) {
+    @content;
+  }
+}