From 3dc2ae86335d162d5433107e169032c21719da16 Mon Sep 17 00:00:00 2001 From: Jochem Vogel Date: Sat, 3 Sep 2022 09:56:20 +0200 Subject: [PATCH 1/7] Add fixed width to articles --- src/lib/components/method/MethodCard.svelte | 4 +++- src/lib/styles/__mixins.scss | 3 ++- static/img/extra/thumbnail/joker.png | Bin 9068 -> 0 bytes 3 files changed, 5 insertions(+), 2 deletions(-) delete mode 100644 static/img/extra/thumbnail/joker.png diff --git a/src/lib/components/method/MethodCard.svelte b/src/lib/components/method/MethodCard.svelte index c21f19b..dee6849 100644 --- a/src/lib/components/method/MethodCard.svelte +++ b/src/lib/components/method/MethodCard.svelte @@ -56,6 +56,8 @@ box-sizing: border-box; margin: 0.5em 0; gap: 1em; + height: 11.25rem; + width: 70rem; &:hover { transform: scale(1.01); @@ -129,7 +131,7 @@ } @include desktop-large { - width: 42.5em; + width: 40em; } } } diff --git a/src/lib/styles/__mixins.scss b/src/lib/styles/__mixins.scss index 8370802..7c8b5b9 100644 --- a/src/lib/styles/__mixins.scss +++ b/src/lib/styles/__mixins.scss @@ -1,6 +1,7 @@ // Breakpoints $bp-desktop-large: 1600px; -$bp-desktop: 1280px; +$bp-desktop: 1400px; +// $bp-desktop: 1280px; $bp-tablet-landscape: 1024px; $bp-tablet: 768px; $bp-mobile: 480px; diff --git a/static/img/extra/thumbnail/joker.png b/static/img/extra/thumbnail/joker.png deleted file mode 100644 index df71954879986e8efc87a868ff7694d6799a0143..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 9068 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 ee+$4i0{H)8Ufr0ZEF%s80000 Date: Sun, 4 Sep 2022 10:31:07 +0200 Subject: [PATCH 2/7] Update breakpoint mixins --- src/lib/components/SearchField.svelte | 8 ++++---- src/lib/components/layout/Footer.svelte | 2 +- src/lib/components/layout/Topbar.svelte | 10 +++++----- .../components/layout/sidebar/MobileHamburger.svelte | 2 +- src/lib/components/layout/sidebar/Sidebar.svelte | 12 ++++++------ src/lib/components/method/MethodCard.svelte | 6 +++--- src/lib/components/method/MethodList.svelte | 4 ++-- src/lib/components/tabs/CategoryTab.svelte | 2 +- src/lib/components/tabs/TabButton.svelte | 2 +- src/lib/components/utils/Tag.svelte | 8 ++++---- src/lib/styles/__mixins.scss | 8 +++++++- src/routes/+layout.svelte | 4 ++-- src/routes/+page.svelte | 2 +- src/routes/[category]/+page.svelte | 2 +- src/routes/[category]/[method]/+page.svelte | 4 ++-- src/routes/about/+page.svelte | 4 ++-- 16 files changed, 43 insertions(+), 37 deletions(-) diff --git a/src/lib/components/SearchField.svelte b/src/lib/components/SearchField.svelte index 4974086..e056af0 100644 --- a/src/lib/components/SearchField.svelte +++ b/src/lib/components/SearchField.svelte @@ -83,7 +83,7 @@ justify-content: center; padding: 1em; - @include desktop { + @include desktop-small { padding: 0; } @@ -104,7 +104,7 @@ color: var(--color-text-secondary); } - @include desktop { + @include desktop-small { width: 40em; font-size: 0.8em; text-align: left; @@ -131,7 +131,7 @@ justify-content: center; align-items: center; - @include desktop { + @include desktop-small { display: flex; } @@ -161,7 +161,7 @@ border-bottom-left-radius: 0.5em; border-bottom-right-radius: 0.5em; - @include desktop { + @include desktop-small { width: 100%; } diff --git a/src/lib/components/layout/Footer.svelte b/src/lib/components/layout/Footer.svelte index 85b22c5..0241ba2 100644 --- a/src/lib/components/layout/Footer.svelte +++ b/src/lib/components/layout/Footer.svelte @@ -10,7 +10,7 @@ word-spacing: 0.5px; font-size: 1.15em; - @include desktop { + @include desktop-small { display: none; } diff --git a/src/lib/components/layout/Topbar.svelte b/src/lib/components/layout/Topbar.svelte index de57a22..e017c0e 100644 --- a/src/lib/components/layout/Topbar.svelte +++ b/src/lib/components/layout/Topbar.svelte @@ -61,7 +61,7 @@ align-items: center; flex-direction: column; - @include desktop { + @include desktop-small { height: 4em; border-bottom: 1.5px solid var(--color-bg); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); @@ -79,14 +79,14 @@ width: 10em; left: 0; - @include desktop { + @include desktop-small { margin: 0; } } .icon-container { display: none; - @include desktop { + @include desktop-small { display: flex; flex-direction: row; gap: 1.5em; @@ -94,7 +94,7 @@ .github, .bmc { - @include desktop { + @include desktop-small { width: 2em; height: 2em; @@ -108,7 +108,7 @@ .theme-switch-desktop { display: none; - @include desktop { + @include desktop-small { display: block; position: absolute; right: 7.5%; diff --git a/src/lib/components/layout/sidebar/MobileHamburger.svelte b/src/lib/components/layout/sidebar/MobileHamburger.svelte index 27f319d..6691bde 100644 --- a/src/lib/components/layout/sidebar/MobileHamburger.svelte +++ b/src/lib/components/layout/sidebar/MobileHamburger.svelte @@ -30,7 +30,7 @@ z-index: 2; // @TODO: z-index.scss border: none; - @include desktop { + @include desktop-small { display: none; } diff --git a/src/lib/components/layout/sidebar/Sidebar.svelte b/src/lib/components/layout/sidebar/Sidebar.svelte index 4b620cc..c708d61 100644 --- a/src/lib/components/layout/sidebar/Sidebar.svelte +++ b/src/lib/components/layout/sidebar/Sidebar.svelte @@ -50,7 +50,7 @@ nav { display: none; - @include desktop { + @include desktop-small { display: block; min-width: 15em; max-width: 17.5em; @@ -82,7 +82,7 @@ flex-direction: column; align-items: center; - @include desktop { + @include desktop-small { align-items: stretch; } @@ -100,7 +100,7 @@ padding: 0.25em; border-radius: 0.75em; - @include desktop { + @include desktop-small { font-size: 1em; padding: 1em 2em; } @@ -111,7 +111,7 @@ .active { color: var(--color-black); - @include desktop { + @include desktop-small { color: var(--color-white); background-color: var(--color-primary); } @@ -121,7 +121,7 @@ p { display: none; - @include desktop { + @include desktop-small { position: absolute; display: flex; justify-content: center; @@ -146,7 +146,7 @@ transform: scale(0.9); margin-top: 2em; - @include desktop { + @include desktop-small { display: none; } } diff --git a/src/lib/components/method/MethodCard.svelte b/src/lib/components/method/MethodCard.svelte index dee6849..ac38977 100644 --- a/src/lib/components/method/MethodCard.svelte +++ b/src/lib/components/method/MethodCard.svelte @@ -126,7 +126,7 @@ } &__body { - @include desktop { + @include desktop-small { width: 32.5em; } @@ -140,7 +140,7 @@ display: flex; flex-wrap: wrap; - @include desktop { + @include desktop-small { display: flex; } } @@ -148,7 +148,7 @@ .more-info { display: none; - @include desktop { + @include desktop-small { display: flex; } } diff --git a/src/lib/components/method/MethodList.svelte b/src/lib/components/method/MethodList.svelte index 8fddd0a..2b700d0 100644 --- a/src/lib/components/method/MethodList.svelte +++ b/src/lib/components/method/MethodList.svelte @@ -86,7 +86,7 @@ display: flex; justify-content: center; - @include desktop { + @include desktop-small { justify-content: flex-end; } @@ -101,7 +101,7 @@ width: 1em; margin: 0.1em; - @include desktop { + @include desktop-small { margin: 0.2em; width: 1.5em; height: 1.5em; diff --git a/src/lib/components/tabs/CategoryTab.svelte b/src/lib/components/tabs/CategoryTab.svelte index e0c2497..2be206a 100644 --- a/src/lib/components/tabs/CategoryTab.svelte +++ b/src/lib/components/tabs/CategoryTab.svelte @@ -78,7 +78,7 @@ padding: 0.5em 1.25em; scroll-snap-type: x mandatory; - @include desktop { + @include desktop-small { box-sizing: border-box; min-height: 3em; justify-content: center; diff --git a/src/lib/components/tabs/TabButton.svelte b/src/lib/components/tabs/TabButton.svelte index 078b49a..2fedb56 100644 --- a/src/lib/components/tabs/TabButton.svelte +++ b/src/lib/components/tabs/TabButton.svelte @@ -29,7 +29,7 @@ font-size: 1.15em; scroll-snap-align: center; - @include desktop { + @include desktop-small { padding: 1em; font-size: 1.1em; margin: 0 1em; diff --git a/src/lib/components/utils/Tag.svelte b/src/lib/components/utils/Tag.svelte index 5d1c383..8496378 100644 --- a/src/lib/components/utils/Tag.svelte +++ b/src/lib/components/utils/Tag.svelte @@ -30,7 +30,7 @@ align-items: center; gap: 0.25em; - @include desktop { + @include desktop-small { font-size: 0.8em; } } @@ -38,7 +38,7 @@ .tag-tooltip { display: none; - @include desktop { + @include desktop-small { text-transform: none; visibility: hidden; position: absolute; @@ -61,7 +61,7 @@ } .tag:hover .tag-tooltip { - @include desktop { + @include desktop-small { visibility: visible; cursor: not-allowed; @@ -81,7 +81,7 @@ .info { display: none; - @include desktop { + @include desktop-small { display: flex; } } diff --git a/src/lib/styles/__mixins.scss b/src/lib/styles/__mixins.scss index 7c8b5b9..5769e45 100644 --- a/src/lib/styles/__mixins.scss +++ b/src/lib/styles/__mixins.scss @@ -1,7 +1,7 @@ // Breakpoints $bp-desktop-large: 1600px; $bp-desktop: 1400px; -// $bp-desktop: 1280px; +$bp-desktop-small: 1280px; $bp-tablet-landscape: 1024px; $bp-tablet: 768px; $bp-mobile: 480px; @@ -25,6 +25,12 @@ $bp-mobile: 480px; } } +@mixin desktop-small { + @media only screen and (min-width: #{$bp-desktop-small}) { + @content; + } +} + @mixin desktop { @media only screen and (min-width: #{$bp-desktop}) { @content; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index e29bf09..561db32 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -88,7 +88,7 @@ padding: 2em; } - @include desktop { + @include desktop-small { padding: 2.5em; min-height: 83vh; max-width: 75em; @@ -97,7 +97,7 @@ } .content { - @include desktop { + @include desktop-small { display: flex; } } diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index f0dc5dd..92fd6b5 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -23,7 +23,7 @@ width: 100%; text-align: center; - @include desktop { + @include desktop-small { text-align: left; margin-left: 0; } diff --git a/src/routes/[category]/+page.svelte b/src/routes/[category]/+page.svelte index 913054f..8091443 100644 --- a/src/routes/[category]/+page.svelte +++ b/src/routes/[category]/+page.svelte @@ -22,7 +22,7 @@ width: 100%; text-align: center; - @include desktop { + @include desktop-small { text-align: left; margin-left: 0; } diff --git a/src/routes/[category]/[method]/+page.svelte b/src/routes/[category]/[method]/+page.svelte index 1f9c117..56f123f 100644 --- a/src/routes/[category]/[method]/+page.svelte +++ b/src/routes/[category]/[method]/+page.svelte @@ -82,7 +82,7 @@ height: 22.5rem; } - @include desktop { + @include desktop-small { height: 25rem; } } @@ -119,7 +119,7 @@ letter-spacing: 0.2px; margin-top: 0.35em; - @include desktop { + @include desktop-small { max-width: 50vw; } } diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte index 38bae62..1ef02c1 100644 --- a/src/routes/about/+page.svelte +++ b/src/routes/about/+page.svelte @@ -104,7 +104,7 @@ } li { - @include desktop { + @include desktop-small { font-size: 1em; } } @@ -112,7 +112,7 @@ p { margin-top: 0.5em; - @include desktop { + @include desktop-small { font-size: 1em; } } From 5de5cdfc88ebee34bb573227d51ba46d520154f1 Mon Sep 17 00:00:00 2001 From: Jochem Vogel Date: Sun, 4 Sep 2022 10:47:59 +0200 Subject: [PATCH 3/7] Fix article/card layout on smaller screens --- src/lib/components/method/MethodCard.svelte | 24 +++++++++++++-------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/src/lib/components/method/MethodCard.svelte b/src/lib/components/method/MethodCard.svelte index ac38977..ec044e1 100644 --- a/src/lib/components/method/MethodCard.svelte +++ b/src/lib/components/method/MethodCard.svelte @@ -49,21 +49,27 @@ padding: 2em; border-radius: 1.5em; - @include desktop { + @include desktop-small { + width: 60rem; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; - margin: 0.5em 0; - gap: 1em; height: 11.25rem; - width: 70rem; &:hover { transform: scale(1.01); box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); } } + + @include desktop { + width: 67.5rem; + } + + @include desktop-large { + width: 70rem; + } } h1 { @@ -73,7 +79,7 @@ width: 10em; color: var(--color-black); - @include desktop { + @include desktop-small { font-size: 1em; } } @@ -85,14 +91,14 @@ line-height: 0; text-transform: capitalize; - @include desktop { + @include desktop-small { font-size: 0.9em; } } button { - @include desktop { - margin-left: 5em; + @include desktop-small { + margin-left: 2em; } } @@ -102,7 +108,7 @@ gap: 1em; margin-bottom: 1.5em; - @include desktop { + @include desktop-small { margin-bottom: 0; } From 6cc193346e88d5928720468ef1f2de5ae8bcbd7c Mon Sep 17 00:00:00 2001 From: Jochem Vogel Date: Sun, 4 Sep 2022 12:41:26 +0200 Subject: [PATCH 4/7] Add dot framework page and add default prefetching url functionality --- src/app.html | 2 +- .../components/layout/sidebar/Sidebar.svelte | 1 + .../layout/sidebar/SidebarIcon.svelte | 2 +- src/lib/components/method/MethodList.svelte | 6 +- src/lib/routes.ts | 10 +- src/routes/+page.svelte | 1 - src/routes/[category]/[method]/+page.svelte | 2 +- src/routes/dot-framework/+page.svelte | 184 ++++++++++++++++++ src/routes/dot-framework/backup.svelte | 19 ++ static/sitemap.xml | 7 +- 10 files changed, 219 insertions(+), 15 deletions(-) create mode 100644 src/routes/dot-framework/+page.svelte create mode 100644 src/routes/dot-framework/backup.svelte diff --git a/src/app.html b/src/app.html index 01a007a..ddc2f58 100644 --- a/src/app.html +++ b/src/app.html @@ -60,7 +60,7 @@ ICT Research Methods — Methods Pack for Research in ICT %sveltekit.head% - +