From 1fcb815d507629719b94280cf8030ce273b44da0 Mon Sep 17 00:00:00 2001 From: ryan Date: Mon, 19 Aug 2024 07:13:11 -0400 Subject: [PATCH] add legal pages, scrolling for notifed cards --- assets/style/config.css | 3 - assets/style/main.css | 1 + assets/style/pages/article/post.css | 6 +- assets/style/pages/help.css | 3 + assets/style/pages/index/notified.css | 124 ++++++++++++++----------- assets/style/pages/legal/impressum.css | 13 --- assets/style/pages/legal/legal.css | 104 +++++++++++++-------- assets/style/pages/legal/navbar.css | 43 --------- assets/style/pages/legal/privacy.css | 12 --- assets/style/pages/legal/sidebar.css | 26 ------ assets/style/pages/pages.css | 4 + assets/style/style.css | 7 +- components/Footer.vue | 4 +- components/index/Notified.vue | 17 +++- content/legal/impressum.md | 17 ---- content/legal/privacy.md | 63 ++++++++++++- content/legal/terms.md | 9 -- content/legal/user-agreement.md | 37 ++++++++ package-lock.json | 70 +++++++------- package.json | 6 +- pages/articles/[slug].vue | 4 +- pages/help.vue | 2 +- pages/legal/privacy.vue | 23 +---- pages/legal/terms.vue | 24 ----- pages/legal/user-agreement.vue | 5 + pages/resources.vue | 2 +- 26 files changed, 308 insertions(+), 321 deletions(-) create mode 100644 assets/style/pages/help.css delete mode 100644 assets/style/pages/legal/impressum.css delete mode 100644 assets/style/pages/legal/navbar.css delete mode 100644 assets/style/pages/legal/privacy.css delete mode 100644 assets/style/pages/legal/sidebar.css delete mode 100644 content/legal/impressum.md delete mode 100644 content/legal/terms.md create mode 100644 content/legal/user-agreement.md delete mode 100644 pages/legal/terms.vue create mode 100644 pages/legal/user-agreement.vue diff --git a/assets/style/config.css b/assets/style/config.css index e58fc33..8b912c8 100644 --- a/assets/style/config.css +++ b/assets/style/config.css @@ -36,9 +36,6 @@ --fs-color: #c3c6c9; /* secondary */ --ft-color: #919397; /* trinary */ --fh-color: #262a30; /* hover */ - - /* Misc */ - --ts-color: #02140b; /* tinysites */ } @custom-media --viewport-3 (max-width: 372px); diff --git a/assets/style/main.css b/assets/style/main.css index 14c78dc..835fb4d 100644 --- a/assets/style/main.css +++ b/assets/style/main.css @@ -38,6 +38,7 @@ h3, h4, h5, h6, +li, span, label, summary { diff --git a/assets/style/pages/article/post.css b/assets/style/pages/article/post.css index 689ede2..57e2c9c 100644 --- a/assets/style/pages/article/post.css +++ b/assets/style/pages/article/post.css @@ -78,17 +78,17 @@ h4, h5, h6 { - scroll-margin-top: 2.5rem; + margin: 0; a { font-weight: 600 } } h3 { - margin: 2.5rem 0 .5rem 0; + padding: 2.5rem 0 .5rem 0; a { font-size: 1.75rem } } h4 { - margin: 1.5rem 0 0 0; + padding: 1.5rem 0 0 0; a { font-size: 1.5rem } } diff --git a/assets/style/pages/help.css b/assets/style/pages/help.css new file mode 100644 index 0000000..7a7777d --- /dev/null +++ b/assets/style/pages/help.css @@ -0,0 +1,3 @@ +.help { + padding: 0; +} \ No newline at end of file diff --git a/assets/style/pages/index/notified.css b/assets/style/pages/index/notified.css index b7fdda5..385d491 100644 --- a/assets/style/pages/index/notified.css +++ b/assets/style/pages/index/notified.css @@ -1,11 +1,11 @@ .index { .notified { - /* background-image: linear-gradient(0deg, transparent 24%, rgba(0, 0, 0, .03) 25%, rgba(0, 0, 0, .03) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .03) 75%, rgba(0, 0, 0, .03) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(0, 0, 0, .03) 25%, rgba(0, 0, 0, .03) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .03) 75%, rgba(0, 0, 0, .03) 76%, transparent 77%, transparent); */ - /* background-size: 3.35rem 3.35rem; */ padding: 7rem 0 4rem 0; .msg { + position: relative; max-width: 52rem; + height: 11rem; padding: 0 1rem; margin: 0 auto; @@ -14,7 +14,7 @@ font-weight: 700; line-height: 3.25rem; letter-spacing: -.05rem; - margin: 0 0 2rem 0; + margin: 0; span { color: var(--s-color); @@ -23,6 +23,8 @@ } p { + position: absolute; + bottom: -1.25rem; font-size: 1.25rem; line-height: 1.85rem; margin: 0 0 0 .2rem; @@ -31,48 +33,49 @@ .cards-container { position: relative; - width: 100%; + overflow: hidden; + --note: 24.5rem; + --card: 22.5rem; + --ease: 0.3s cubic-bezier(0.3, -0.1, 0.1, 1.1); - .scroll { - display: none; - position: absolute; - right: calc((100% - 48rem) / 2); - top: -1.5rem; + input { + position: fixed; + top: -999vw; + left: -999vw; + opacity: 0.01; + } - a { - color: var(--fs-color); - font-size: 1.25rem; - margin: 0 .5rem; - - &:hover span { - color: var(--w-color); - cursor: pointer; - } + .scroll-nav { + display: flex; + justify-content: space-around; + align-items: center; + width: 3.75rem; + margin: 0 0 0 calc((100% + 32rem) / 2); + + label { + width: .85rem; + height: .9rem; + background: var(--ft-color); + margin: 0 .2rem; + border-radius: 99rem; + transition: var(--ease); + cursor: pointer; } - } - - #first, - #last { - scroll-margin-top: 20rem; - scroll-margin-left: 56vw; - scroll-margin-right: 50vw; - } - + .cards { + box-sizing: content-box; + display: flex; + justify-content: space-between; width: 100%; - height: 27.25rem; - overflow-x: scroll; - overflow-y: hidden; - scroll-behavior: smooth; - padding: 0 0 2rem calc((100% - 49.5rem)/2); - margin: 0 auto; - white-space: nowrap; + max-width: 94rem; + padding: 2.5rem 0 2rem calc((100% - 49.75rem)/2); + transition: var(--ease); .card { - display: inline-block; - width: 22.5rem; - margin: 2rem 2rem 2rem 0; + position: relative; + margin: 0 2rem 2rem 0; + transition: var(--ease); text-align: left; a { @@ -113,16 +116,15 @@ } } } + } - &:last-of-type { - margin: 2rem 30vw 2rem 0; - } + .card-min { + min-width: var(--card); } .card-last { - width: 20rem; - height: 15rem; - vertical-align: top; + min-width: 20.5rem; + height: 15.05rem; background: var(--bs-color); text-align: center; padding: 2rem; @@ -168,13 +170,19 @@ } } - .cards { - -ms-overflow-style: none; /* Internet Explorer 10+ */ - scrollbar-width: none; /* Firefox */ + [id="0"]:checked { + & ~ .cards { transform: translateX(calc(var(--note) * 0)) } + & ~ .scroll-nav [for="0"] { background: var(--s-color) } } - - .cards::-webkit-scrollbar { - display: none; /* Safari and Chrome */ + + [id="1"]:checked { + & ~ .cards { transform: translateX(calc(var(--note) * -1)) } + & ~ .scroll-nav [for="1"] { background: var(--s-color) } + } + + [id="2"]:checked { + & ~ .cards { transform: translateX(calc(var(--note) * -2)) } + & ~ .scroll-nav [for="2"] { background: var(--s-color)} } } } @@ -182,49 +190,55 @@ @media only screen and (--viewport-13) { .index .notified .cards-container .cards .card:last-of-type { - margin: 2rem 20vw 2rem 0; + margin: 0 20vw 2rem 0; } } @media only screen and (--viewport-10) { .index .notified .cards-container .cards .card:last-of-type { - margin: 2rem 12vw 2rem 0; + margin: 0 12vw 2rem 0; } } @media only screen and (--viewport-4) { .index .notified { - padding: 4rem 2.25rem; + padding: 4rem 2.25rem 6rem 2.25rem; .msg { + height: unset; padding: 0; margin: 0; h2 { font-size: 2.25rem; line-height: 2.5rem; + margin: 0 0 2rem 0; } p { + position: unset; margin: 0; } } .cards-container { - .scroll { + .scroll-nav { display: none; } .cards { width: 100%; + box-sizing: unset; + display: unset; + justify-content: unset; height: unset; padding: 0 0 4rem calc((100% - 49.5rem)/2); margin: 0 auto; .card { display: block; - width: unset; - margin: 2rem 0 4rem 0; + min-width: unset; + margin: 2rem 0 3rem 0; &:last-of-type { margin: 2rem 0 0 0; diff --git a/assets/style/pages/legal/impressum.css b/assets/style/pages/legal/impressum.css deleted file mode 100644 index cc3e8f3..0000000 --- a/assets/style/pages/legal/impressum.css +++ /dev/null @@ -1,13 +0,0 @@ -.legal { - .impressum { - p { - a { color: var(--s-color) } - - .icon-at { - font-size: 1rem; - position: relative; - top: .1rem - } - } - } -} \ No newline at end of file diff --git a/assets/style/pages/legal/legal.css b/assets/style/pages/legal/legal.css index 7ec1831..be7e7dc 100644 --- a/assets/style/pages/legal/legal.css +++ b/assets/style/pages/legal/legal.css @@ -1,53 +1,83 @@ -.legal { - display: grid; - grid-template-columns: 3fr 8fr; - max-width: 62rem; - padding: 4rem 4rem; - margin: 0 auto; +.privacy, +.user-agreement { + padding: 4rem 0 6rem 0; - .privacy, - .terms, - .impressum { - grid-column: 2; - grid-row: 2; - padding: 0 2rem; - margin: 0; + h2, + h3 { + margin: 4rem 0 1rem 0; + + a { + font-weight: 600; + } } - .sidebar { - grid-column: 1; - grid-row: 1/3; + h2 { + font-size: 2rem; + font-weight: 700; + margin: 1.25rem 0 1.25rem -.15rem; } - h3, - h3 a { - font-size: 1.25rem; - font-weight: 600; - } + h3 { + font-size: 1.5rem; + font-weight: 700; + margin: 2.75rem 0 1rem 1.5rem; + scroll-margin-top: 2rem; - h4, - h4 a { - font-size: 1.10rem; - font-weight: 500; - scroll-margin-top: 6rem; + & + p, + & + p + p { + padding: 0 3.25rem 0 1.5rem; + margin: 1rem 0; + } } p { - font-size: 1rem; - font-weight: 400; + font-size: 1.1rem; + font-weight: 300; + line-height: 1.65rem; + margin: 1rem 1rem 1rem 0; + + a { + color: var(--s-color); + + &:hover { + text-decoration: underline; + } + } + + span { + color: var(--ft-color); + font-size: .9rem; + } } ul { - list-style-type: none; - white-space:nowrap; - padding: 0; - margin: 0; - + margin: 2rem 0; + li { - color: var(--f-color); - font-family: var(--p-font); - font-weight: 400; - margin: 0; + font-size: 1.15rem; + font-weight: 300; + line-height: 1.5rem; + margin: 1rem 0; + } + } +} + +@media only screen and (--viewport-4) { + .privacy, + .user-agreement { + padding: 4rem 2.25rem 6rem 2.25rem; + + h3 { + margin: 2.75rem 0 1rem 0; + + & + p, + & + p + p { + padding: 0 0 0 0; + } + } + + p { + margin: 1rem 0; } } } \ No newline at end of file diff --git a/assets/style/pages/legal/navbar.css b/assets/style/pages/legal/navbar.css deleted file mode 100644 index d0ff0b5..0000000 --- a/assets/style/pages/legal/navbar.css +++ /dev/null @@ -1,43 +0,0 @@ -.legal { - .navbar { - grid-column: 2; - grid-row: 1; - padding: 1rem 1.75rem; - - .dropdown { - position: relative; - - .toggle { - padding: .45rem 1.25rem .55rem 1.25rem; - background: var(--bh-color); - - &:hover { - cursor: pointer; - background: var(--bhs-color); - } - - span { - position: relative; - top: .15rem; - margin: 0 0 0 .5rem; - } - } - - .links { - position: absolute; - top: 2.25rem; - background: var(--bh-color); - - a { - display: block; - padding: .45rem 1.25rem .55rem 1.25rem; - - &:hover { - cursor: pointer; - background: var(--bhs-color); - } - } - } - } - } -} \ No newline at end of file diff --git a/assets/style/pages/legal/privacy.css b/assets/style/pages/legal/privacy.css deleted file mode 100644 index f9ca1de..0000000 --- a/assets/style/pages/legal/privacy.css +++ /dev/null @@ -1,12 +0,0 @@ -.legal { - .privacy { - .hero { - width: 100%; - background-image: url('/img/abstract/482006556.svg'); - background-size: 90%; - background-repeat: repeat; - height: 10vw; - - } - } -} \ No newline at end of file diff --git a/assets/style/pages/legal/sidebar.css b/assets/style/pages/legal/sidebar.css deleted file mode 100644 index 2dd2b8d..0000000 --- a/assets/style/pages/legal/sidebar.css +++ /dev/null @@ -1,26 +0,0 @@ -.legal { - .sidebar { - padding: 0 2rem; - - .updated { - font-size: .9rem; - padding: .25rem 0 1.25rem; - } - - .quicklinks { - position: sticky; - top: 6rem; - - a { - display: inline-block; - color: var(--s-color); - font-size: 1rem; - margin: .25rem 0; - - &:hover { - text-decoration: underline; - } - } - } - } -} \ No newline at end of file diff --git a/assets/style/pages/pages.css b/assets/style/pages/pages.css index 127c6e3..474ac9f 100644 --- a/assets/style/pages/pages.css +++ b/assets/style/pages/pages.css @@ -63,6 +63,10 @@ text-align: center; } + b{ + font-weight: 400; + } + strong { display: block; font-size: 1.5rem; diff --git a/assets/style/style.css b/assets/style/style.css index b7649b6..61a5d50 100644 --- a/assets/style/style.css +++ b/assets/style/style.css @@ -11,8 +11,9 @@ @import 'components/heading'; /* Pages */ -@import 'pages/pages'; @import 'pages/contact'; +@import 'pages/help'; +@import 'pages/pages'; @import 'pages/reserved'; /* Index */ @@ -46,10 +47,6 @@ /* Legal */ @import 'pages/legal/legal'; -@import 'pages/legal/navbar'; -@import 'pages/legal/sidebar'; -@import 'pages/legal/privacy'; -@import 'pages/legal/impressum'; /* Dashboard */ @import 'pages/dashboard/hero'; diff --git a/components/Footer.vue b/components/Footer.vue index f144648..7b63f31 100644 --- a/components/Footer.vue +++ b/components/Footer.vue @@ -42,7 +42,7 @@