diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 903b9d70f..1f130b263 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -14,5 +14,5 @@ jobs: accountEmail: ${{ secrets.CF_ACCOUNT_EMAIL }} apiKey: ${{ secrets.CF_API_KEY }} accountId: '9ddae624c98677d68d93df6e524a6061' - project: 'knossos' + project: 'omorphia' githubToken: ${{ secrets.GITHUB_TOKEN }} diff --git a/postcss.config.cjs b/postcss.config.cjs index 69b265672..00b80eded 100644 --- a/postcss.config.cjs +++ b/postcss.config.cjs @@ -5,7 +5,13 @@ const config = { require('postcss-strip-inline-comments'), require('postcss-extend-rule'), require('postcss-nested'), - require('postcss-preset-env'), + require('postcss-preset-env')({ + features: { + 'custom-media-queries': { + importFrom: './src/lib/styles/variables/queries.postcss' + } + } + }), require('postcss-pxtorem'), require('autoprefixer'), process.env.NODE_ENV === 'development' && require('cssnano')({ diff --git a/src/app.html b/src/app.html index 3969c038b..e563b4146 100644 --- a/src/app.html +++ b/src/app.html @@ -5,6 +5,12 @@ + + + + + + %svelte.head% diff --git a/src/lib/components/CheckboxVirtualList.svelte b/src/lib/components/CheckboxVirtualList.svelte index e3ddca819..ddf9eca8f 100644 --- a/src/lib/components/CheckboxVirtualList.svelte +++ b/src/lib/components/CheckboxVirtualList.svelte @@ -43,16 +43,3 @@ - - \ No newline at end of file diff --git a/src/lib/styles/variables/queries.postcss b/src/lib/styles/variables/queries.postcss new file mode 100644 index 000000000..59164ff32 --- /dev/null +++ b/src/lib/styles/variables/queries.postcss @@ -0,0 +1,4 @@ +@custom-media --sm (min-width: 544px); +@custom-media --md (min-width: 768px); +@custom-media --lg (min-width: 1012px); +@custom-media --xl (min-width: 544px); \ No newline at end of file diff --git a/src/lib/styles/variables/spacing.postcss b/src/lib/styles/variables/spacing.postcss index 9e9ef7415..32a828d2d 100644 --- a/src/lib/styles/variables/spacing.postcss +++ b/src/lib/styles/variables/spacing.postcss @@ -1,4 +1,5 @@ :root { + /* these are values for the display CSS property */ /* --display-values: ( diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte index 21f5069ca..4b52b24b8 100644 --- a/src/routes/__layout.svelte +++ b/src/routes/__layout.svelte @@ -6,11 +6,13 @@ import Header from './_internal/components/Header.svelte' -
+
- +
+ +
@@ -24,43 +26,36 @@ margin: 0; font-size: var(--body-font-size); font-family: var(--body-font); + --accent-color: hsl(331, 80%, 45%); --accent-color-transparent: hsla(331, 80%, 45%, 0.15); } } .app { - display: grid; + display: flex; + flex-direction: column; min-height: 100vh; overflow: hidden; - --sidebar-width: 325px; - --header-height: 56px; - @media (width <= 500px) { - display: flex; - flex-direction: column; - } + background-color: var(--color-bg); + + --sidebar-width: 275px; &__content { - padding: var(--header-height) 0 0 var(--sidebar-width); + @media (--md) { + padding-left: var(--sidebar-width); + } overflow-x: hidden; overflow-y: auto; - background-color: hsl(220, 13%, 91%); - :global { - a:not(.example__preview *) { - color: var(--accent-color); + article { + max-width: 800px; + padding-block: 140px 64px; + padding-inline: 24px; - &:hover { - text-decoration: underline; - } - } - - h1:not(.example__preview *) { - font-size: 54px; - } - - p:not(.example__preview *) { - line-height: 1.5; + @media (--sm) { + padding-inline: 48px; + padding-block: 140px 24px; } } } diff --git a/src/routes/_internal/components/Example.svelte b/src/routes/_internal/components/Example.svelte index b35a4b1af..d5991f184 100644 --- a/src/routes/_internal/components/Example.svelte +++ b/src/routes/_internal/components/Example.svelte @@ -36,6 +36,7 @@ flex-wrap: wrap; position: relative; justify-content: flex-start; + z-index: 1; &__options { position: absolute; diff --git a/src/routes/_internal/components/Header.svelte b/src/routes/_internal/components/Header.svelte index 6fbf270a5..c21b91cf6 100644 --- a/src/routes/_internal/components/Header.svelte +++ b/src/routes/_internal/components/Header.svelte @@ -21,15 +21,19 @@
- +
@@ -39,7 +43,8 @@ display: flex; grid-gap: 10px; align-items: center; - padding: 0 32px; + flex-wrap: wrap; + padding: 16px 24px; position: fixed; height: var(--header-height); left: 0; @@ -50,6 +55,16 @@ box-shadow: hsla(221, 39%, 11%, 0.2) 0 2px 4px 0, hsla(221, 39%, 11%, 0.05) 0 -2px 2px 0 inset; transition: top 0.3s ease-in-out; + @media (--sm) { + padding: 10px 32px; + } + + :global(&__logo) { + max-width: 32px; + min-width: 32px; + aspect-ratio: 1 / 1; + } + &__title { font-size: 20px; font-weight: 600; @@ -57,17 +72,30 @@ &__links { margin-left: auto; - display: flex; grid-gap: 16px; align-items: center; + justify-content: center; + display: flex; :global(svg) { height: 22px; width: auto; } - a:not(:hover) { - color: unset; + .hide-sm { + display: none; + + @media (--sm) { + display: flex; + } + } + + a { + text-decoration: none; + + &:not(:hover) { + color: unset; + } } } } diff --git a/src/routes/_internal/components/Sidebar.svelte b/src/routes/_internal/components/Sidebar.svelte index 34baae634..e5e48efe5 100644 --- a/src/routes/_internal/components/Sidebar.svelte +++ b/src/routes/_internal/components/Sidebar.svelte @@ -1,4 +1,6 @@ -
+{/if} +