diff --git a/src/app.css b/src/app.css index 761d95f..8b7aad3 100644 --- a/src/app.css +++ b/src/app.css @@ -19,15 +19,6 @@ body { padding: 0; } -main { - max-width: 1200px; - margin: 0 auto; - margin-bottom: 100px; - display: flex; - flex-direction: column; - align-items: center; -} - code, pre { font-family: var(--font-monospace); } @@ -47,4 +38,19 @@ a:hover { background-color: rgb(30,31,31); color: #eee; } +} + +html, body { + height: 100%; +} +body { + display: flex; + flex-direction: column; + align-items: center; +} +body > main { + flex: 1 0 auto; +} +body > footer { + flex-shrink: 0; } \ No newline at end of file diff --git a/src/app.html b/src/app.html index 7c93443..8f5c933 100644 --- a/src/app.html +++ b/src/app.html @@ -8,6 +8,6 @@ %svelte.head% -
%svelte.body%
+ %svelte.body% diff --git a/src/lib/Footer.svelte b/src/lib/Footer.svelte new file mode 100644 index 0000000..1b9755e --- /dev/null +++ b/src/lib/Footer.svelte @@ -0,0 +1,34 @@ + + + \ No newline at end of file diff --git a/src/lib/Header.svelte b/src/lib/Header.svelte index 0632025..1697227 100644 --- a/src/lib/Header.svelte +++ b/src/lib/Header.svelte @@ -7,7 +7,7 @@ width: calc(100%); padding: 0; margin: 0; - box-shadow: 0px 2px 15px rgba(10, 10, 10, 0.4); + box-shadow: 0px 2px 8px rgba(10, 10, 10, 0.2); background-color: rgb(140, 241, 100); color: rgb(30,31,31); font-weight: 600; diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte index 14fe45d..d9a1355 100644 --- a/src/routes/__layout.svelte +++ b/src/routes/__layout.svelte @@ -4,6 +4,7 @@ import themeDark from 'svelte-highlight/styles/apprentice'; import themeLight from 'svelte-highlight/styles/atelier-forest-light'; import Header from '$lib/Header.svelte'; + import Footer from '$lib/Footer.svelte'; let theme = ` +
- -
\ No newline at end of file +
+
+
+
+ +
+ +