diff --git a/src/app.d.ts b/src/app.d.ts new file mode 100644 index 0000000..fdcc0b2 --- /dev/null +++ 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; +} diff --git a/src/app.html b/src/app.html new file mode 100644 index 0000000..86d4867 --- /dev/null +++ b/src/app.html @@ -0,0 +1,24 @@ + + + + + + + + + + + + + %sveltekit.head% + + +
%sveltekit.body%
+ + diff --git a/src/styles/generic-article.scss b/src/styles/generic-article.scss new file mode 100644 index 0000000..76bd1f9 --- /dev/null +++ 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; +} diff --git a/src/styles/media-queries.scss b/src/styles/media-queries.scss new file mode 100644 index 0000000..208de91 --- /dev/null +++ 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; + } +}