diff --git a/src/components/molecules/PageTitle.svelte b/src/components/molecules/PageTitle.svelte new file mode 100644 index 0000000..b978271 --- /dev/null +++ b/src/components/molecules/PageTitle.svelte @@ -0,0 +1,55 @@ + + +
+ {#if secondaryTitle} +
{secondaryTitle}
+ {/if} +

{title}

+
+ + diff --git a/src/components/organisms/Header.svelte b/src/components/organisms/Header.svelte index ad7c4d3..284059e 100644 --- a/src/components/organisms/Header.svelte +++ b/src/components/organisms/Header.svelte @@ -1,12 +1,30 @@ -
+ - +
@@ -15,10 +33,10 @@ .header { height: auto; min-height: 3em; - max-height: 10em; display: block; width: 100%; padding: 1em; - } - } + padding-top: 0; + } + } diff --git a/src/global.scss b/src/global.scss index 799ee8c..e4e49c3 100644 --- a/src/global.scss +++ b/src/global.scss @@ -1,89 +1,99 @@ -@import url(sanitize.css); -@import "$lib/vars.scss"; -@import "$lib/styles/crt.scss"; - -@font-face { - font-family: "Filo"; - font-style: normal; - font-weight: 500; - src: local(""), url("/fonts/Filo/Filo.otf"), url("/fonts/Filo/Filo.ttf"); -} - -@font-face { - font-family: "GradientVector"; - font-style: normal; - font-weight: 500; - src: local(""), url("/fonts/GradientVector/GradientVector.otf"); -} - - -@font-face { - font-family: "Manifold"; - font-style: normal; - font-weight: 500; - src: local(""), url("/fonts/Manifold/manifold.otf"), url("/fonts/Manifold/manifold.ttf"); -} - - -@font-face { - font-family: "3270"; - font-style: normal; - font-weight: 500; - src: local(""), url("/fonts/3270/3270SemiCondensed-Regular.otf"), url("/fonts/3270/3270SemiCondensed-Regular.ttf"); -} - -:root { - --color-background: #2B1C3D; - --color-background-light: #3A2A4D; - --color-foreground: #ffffff; - --color-foreground-tint: #ffd1f8; - --color-foreground-dim: #acbacd; - --color-primary: #ff79c6; - --color-purple: #bd93f9; - --color-cyan: #8be9fd; - --color-green: #50fa7b; - --color-red: #ff5555; - --color-orange: #ffb86c; - --color-yellow: #f1fa8c; - --color-image-frame: #fff; - --color-image-frame-text: #204; - - --font-primary: Manifold, Lexend, Arial, Helvetica, sans-serif; - --font-readable: "3270", Lexend, Arial, Helvetica, sans-serif; -} - -@layer default { - body { - font-family: var(--font-primary); - color: var(--color-foreground); - background-color: var(--color-background); - font-size: 14pt; - } + @import url(sanitize.css); + @import "$lib/vars.scss"; + @import "$lib/styles/crt.scss"; - a { - color: var(--color-primary); + @font-face { + font-family: "Filo"; + font-style: normal; + font-weight: 500; + src: local(""), url("/fonts/Filo/Filo.otf"), url("/fonts/Filo/Filo.ttf"); + } - &:hover { - background-color: var(--color-background-light); - } + @font-face { + font-family: "GradientVector"; + font-style: normal; + font-weight: 500; + src: local(""), url("/fonts/GradientVector/GradientVector.otf"); } - .page { - position: relative; + + @font-face { + font-family: "Manifold"; + font-style: normal; + font-weight: 500; + src: local(""), url("/fonts/Manifold/manifold.otf"), url("/fonts/Manifold/manifold.ttf"); } - .flex-row { - display: flex; - flex-direction: row; + + @font-face { + font-family: "3270"; + font-style: normal; + font-weight: 500; + src: local(""), url("/fonts/3270/3270SemiCondensed-Regular.otf"), url("/fonts/3270/3270SemiCondensed-Regular.ttf"); } - .flex-column { - display: flex; - flex-direction: column; + + @font-face { + font-family: "Sixtyfour"; + font-style: normal; + font-weight: 300; + src: local(""), url("/fonts/Sixtyfour/Sixtyfour[wdth,wght].ttf"), url("/fonts/Sixtyfour/Sixtyfour[wdth,wght].woff"), url("/fonts/Sixtyfour/Sixtyfour[wdth,wght].woff2"); } - .unstyled-link { - text-decoration: inherit; - color: inherit; + :root { + --color-background: #2B1C3D; + --color-background-light: #3A2A4D; + --color-foreground: #ffffff; + --color-foreground-tint: #ffd1f8; + --color-foreground-dim: #acbacd; + --color-primary: #ff79c6; + --color-purple: #bd93f9; + --color-cyan: #8be9fd; + --color-green: #50fa7b; + --color-red: #ff5555; + --color-orange: #ffb86c; + --color-yellow: #f1fa8c; + --color-image-frame: #fff; + --color-image-frame-text: #204; + + --font-primary: Manifold, Lexend, Arial, Helvetica, sans-serif; + --font-readable: "3270", Lexend, Arial, Helvetica, sans-serif; + --font-page-title: Sixtyfour, Manifold, Lexend, Arial, Helvetica, sans-serif; } -} \ No newline at end of file + + + @layer default { + body { + font-family: var(--font-primary); + color: var(--color-foreground); + background-color: var(--color-background); + font-size: 14pt; + } + + a { + color: var(--color-primary); + + &:hover { + background-color: var(--color-background-light); + } + } + + .page { + position: relative; + } + + .flex-row { + display: flex; + flex-direction: row; + } + + .flex-column { + display: flex; + flex-direction: column; + } + + .unstyled-link { + text-decoration: inherit; + color: inherit; + } + } \ No newline at end of file diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 026e540..6b40c43 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -17,8 +17,6 @@