diff --git a/app/app.vue b/app/app.vue old mode 100644 new mode 100755 index d7e2b06..56302ca --- a/app/app.vue +++ b/app/app.vue @@ -1,18 +1,5 @@ - - \ No newline at end of file diff --git a/app/assets/styles/button.css b/app/assets/styles/button.css index e334808..3a78022 100755 --- a/app/assets/styles/button.css +++ b/app/assets/styles/button.css @@ -1,6 +1,6 @@ .Button { - --padding: var(--padding-xs); - --background: var(--color-main-dark); + --padding: .2rem; + --background: var(--color-gradient-main-dark); --color: var(--color-lightest); --background-hover: var(--color-main-dark); @@ -8,7 +8,7 @@ display: flex; justify-content: center; align-items: center; - gap: var(--padding-default); + gap: 1rem; cursor: pointer; transition: var(--transition-default); outline: none; @@ -19,17 +19,17 @@ &.transparent { --background: transparent; box-shadow: none; - padding: var(--padding-s) var(--padding-l); + padding: .5em 1.5em; border-radius: var(--radius-default); } &.raised { box-shadow: var(--box-shadow-z2); - padding: var(--padding-s) var(--padding-l); + padding: .5em 1.5em; border-radius: var(--radius-default); &.danger { - --background: var(--color-error); + --background: var(--color-gradient-error); --color: var(--color-lightest); } } @@ -37,7 +37,7 @@ &.text { --background: transparent; --color: var(--color-darkest); - padding: var(--padding-s) var(--padding-l); + padding: .5em 1.5em; border-radius: var(--radius-default); &:hover { @@ -62,13 +62,13 @@ justify-content: center; align-items: center; border-radius: 100%; - padding: var(--padding-s); + padding: .5rem; } &.cta { background: var(--background); color: var(--color); - padding: var(--padding-s) var(--padding-l); + padding: .5rem 1.5rem; border-radius: var(--radius-default); box-shadow: var(--box-shadow-z2); @@ -93,30 +93,18 @@ } } - &.search-button { - --background: var(--color-lightest); - --color: var(--color-main-darkest); - border-radius: 100%; - padding: var(--padding); - font-size: var(--font-size-l); - - &:hover { - scale: 1.2; - } - } - &.mini-button { - padding: var(--padding-s) var(--padding-l); + padding: .5rem 1.5rem; display: flex; flex-direction: column; - gap: var(--padding-xs); + gap: .5rem; & > .icon { - font-size: var(--font-size-xl); + font-size: 1.5rem; } & > span { - font-size: var(--font-size-s); + font-size: .8rem; } } } \ No newline at end of file diff --git a/app/assets/styles/buttonGroup.css b/app/assets/styles/buttonGroup.css index bb8ffd8..91eb4bc 100644 --- a/app/assets/styles/buttonGroup.css +++ b/app/assets/styles/buttonGroup.css @@ -1,6 +1,9 @@ .ButtonGroup { display: flex; background: var(--color-main); + border-radius: var(--radius-default); + overflow: hidden; + box-shadow: var(--box-shadow-z2); & button { --color: var(--color-light); @@ -9,8 +12,8 @@ display: flex; align-items: center; justify-content: center; - gap: var(--padding-xs); - padding: var(--padding-s); + gap: .5rem; + padding: .5rem; flex-grow: 1; background: var(--background); color: var(--color); @@ -21,5 +24,13 @@ --color: var(--color-lightest); --background: var(--color-main-dark); } + + &:first-child { + border-radius: var(--radius-default) 0 0 var(--radius-default); + } + + &:last-child { + border-radius: 0 var(--radius-default) var(--radius-default) 0; + } } } \ No newline at end of file diff --git a/app/assets/styles/dialog.css b/app/assets/styles/dialog.css deleted file mode 100644 index 7338d36..0000000 --- a/app/assets/styles/dialog.css +++ /dev/null @@ -1,71 +0,0 @@ - -dialog { - top: 50%; - left: 50%; - width: clamp(400px, 100vw, calc(var(--page-max-width) - var(--padding-xxl) * 2)); - translate: -50% -50%; - border: none; - border-radius: var(--radius-default); - background: var(--color-lightest); - font-size: var(--font-size-default); - color: var(--color-darkest); - position: relative; - - opacity: 0; - scale: 0; - transition: - opacity var(--transition-default) ease-out, - scale var(--transition-default) ease-out, - overlay var(--transition-default) ease-out allow-discrete, - display var(--transition-default) ease-out allow-discrete; - - &[open] { - opacity: 1; - scale: 1; - - &::backdrop { - background-color: rgb(0 0 0 / 25%); - } - } - - &::backdrop { - z-index: 2000; - background-color: rgb(0 0 0 / 0%); - transition: - display var(--transition-default) allow-discrete, - overlay var(--transition-default) allow-discrete, - background-color var(--transition-default); - } - - & > .wrapper { - display: flex; - flex-direction: column; - gap: var(--padding-default); - } - - & header { - justify-content: space-between; - align-items: center; - padding: var(--padding-default) var(--padding-default) 0; - } - - main { - padding: 0 var(--padding-default); - } - - & footer { - justify-content: space-between; - padding: 0 var(--padding-default) var(--padding-default); - } -} - -@starting-style { - dialog[open] { - opacity: 0; - scale: 0; - - &::backdrop { - background-color: rgb(0 0 0 / 0%); - } - } -} diff --git a/app/assets/styles/footer.css b/app/assets/styles/footer.css index b6420c8..b23b844 100644 --- a/app/assets/styles/footer.css +++ b/app/assets/styles/footer.css @@ -1,49 +1,38 @@ .Footer { position: relative; background: var(--color-darkest); - padding: var(--padding-default); + padding: 1rem; z-index: 100; & h4 { color: var(--color-lightest); text-align: center; - margin-bottom: var(--padding-default); + margin-bottom: 1rem; } & .bottom { display: flex; - justify-content: center; + gap: 1rem; + justify-content: space-between; color: var(--color-light); } - & .copy { - font-size: var(--font-size-xs); - color: var(--color-light); - margin-top: var(--padding-default); - text-align: center; - - & a { - color: var(--color-main); - text-decoration: none; - } - } - & .socials { - font-size: var(--font-size-xl); + font-size: 1.5rem; justify-content: center; - margin-bottom: var(--padding-xl); + margin-bottom: 2rem; } & .data-links { justify-content: flex-end; - font-size: var(--font-size-s); + font-size: .8rem; } & ul { list-style: none; display: flex; align-items: center; - gap: var(--padding-default); + gap: 1rem; & a { color: var(--color-lightest); diff --git a/app/assets/styles/form/search.css b/app/assets/styles/form/search.css deleted file mode 100644 index e03c6a4..0000000 --- a/app/assets/styles/form/search.css +++ /dev/null @@ -1,15 +0,0 @@ -.Search { - border-radius: 9999px; - background: var(--color-lightest); - padding: 0 var(--padding-default); - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--padding-default); - - & > input { - all: unset; - flex-grow: 1; - padding: var(--padding-s) 0; - } -} \ No newline at end of file diff --git a/app/assets/styles/form/textfield.css b/app/assets/styles/form/textfield.css deleted file mode 100755 index d2cfaf8..0000000 --- a/app/assets/styles/form/textfield.css +++ /dev/null @@ -1,72 +0,0 @@ -.TextField { - --border-color: var(--color-light); - --label-color: var(--color-middle); - --label-position-top: var(--font-size-default); - --label-position-left: 2.5rem; - --label-font-size: var(--font-size-default); - --message-color: var(--color-middle); - - position: relative; - flex: 25% 1 0; - - &:focus-within { - --border-color: var(--color-main-dark); - } - - &:focus-within, - &:has(input:not(:placeholder-shown)) { - --label-color: var(--color-main-dark); - } - - &.error { - --label-color: var(--color-error) !important; - --border-color: var(--color-error); - --message-color: var(--color-error); - } - - & .wrapper { - display: flex; - align-items: center; - padding: var(--padding-xxs) var(--padding-xs); - border: 1px solid var(--border-color); - border-radius: var(--radius-default); - } - - & label { - position: absolute; - display: flex; - align-items: center; - color: var(--label-color); - gap: 2px; - top: -6px; - left: calc(var(--padding-xs) - 2px); - font-size: var(--font-size-s); - transition: var(--transition-default); - - & > * { - background: var(--color-lightest); - padding: 0 2px; - } - } - - & .icon { - position: relative; - color: var(--label-color); - font-size: var(--font-size-default); - top: -1px; - } - - & input { - all: unset; - padding: var(--padding-xxs) var(--padding-s) var(--padding-xxs) 0; - font-size: var(--font-size-s); - width: 100%; - flex: 25% 1 0; - color: var(--color-darkest); - } - - & > span { - color: var(--message-color); - font-size: var(--font-size-xs); - } -} diff --git a/app/assets/styles/formInput.css b/app/assets/styles/formInput.css new file mode 100755 index 0000000..3d9c8a0 --- /dev/null +++ b/app/assets/styles/formInput.css @@ -0,0 +1,52 @@ +.Input { + &.error { + & .input-wrapper { + border-color: var(--color-error); + outline-width: 2px; + } + + & span { + color: var(--color-error); + } + } + + & span { + font-size: .65em; + } + + & .input-wrapper { + position: relative; + flex: 25% 1 0; + border: 2px solid var(--color-main-dark); + border-radius: var(--radius-default); + overflow: hidden; + transition: var(--transition-default); + outline: 0 solid var(--color-lightest); + + & label { + position: absolute; + font-size: .8em; + top: .3rem; + left: .5rem; + transition: var(--transition-default); + } + + & input { + all: unset; + width: calc(100% - 1rem); + padding: 1.3rem .5rem .5rem .5rem; + background: var(--color-lightest); + + &[type="number"] { + text-align: right; + } + } + + & input:focus, + & input:not(:placeholder-shown) { + & + label { + color: var(--color-main-dark); + } + } + } +} \ No newline at end of file diff --git a/app/assets/styles/general.css b/app/assets/styles/general.css index 1028fda..9a68aee 100755 --- a/app/assets/styles/general.css +++ b/app/assets/styles/general.css @@ -1,191 +1,195 @@ :root { - --color-success: #328104; - --color-error: #a20606; - --color-blue-light: #d7e1f1; - --color-blue: #05b0ff; - --color-blue-dark: #0266f2; - --color-blue-darkest: #013174; + --padding-default: 1rem; + --padding-small: .5rem; + --radius-default: 3px; + --transition-default: 150ms; - --color-darkest: #292929; - --color-dark: #404040; - --color-middle: #707070; - --color-light: #e0e0e6; - --color-lightest: #fafaff; + --color-success: #328104; + --color-error: #A20606; + --color-blue-light: #0DDCE7; + --color-blue: #05B0FF; + --color-blue-dark: #0266F2; + --color-blue-darkest: #013174; - --color-green-light: #05ffc5; - --color-green: #02f276; - --color-green-dark: #09dc33; - --color-green-darkest: #07b029; - --color-green-darkest-most: #157c2a; + --color-darkest: #292929; + --color-dark: #404040; + --color-middle: #707070; + --color-light: #E0E0E6; + --color-lightest: #FAFAFF; - --color-main: var(--color-blue); - --color-main-lightest: var(--color-blue-light); - --color-main-light: var(--color-blue-light); - --color-main-dark: var(--color-blue-dark); - --color-main-darkest: var(--color-blue-darkest); + --color-green-light: #05FFC5; + --color-green: #02F276; + --color-green-dark: #09DC33; + --color-green-darkest: #07B029; + --color-green-darkest-most: #157C2A; - --color-accent: var(--color-green); - --color-accent-light: var(--color-green-light); - --color-accent-dark: var(--color-green-dark); - --color-accent-darkest: var(--color-green-darkest); - --color-text: var(--color-darkest); - --color-text-invert: var(--color-lightest); + --color-main: var(--color-blue); + --color-main-light: var(--color-blue-light); + --color-main-dark: var(--color-blue-dark); + --color-main-darkest: var(--color-blue-darkest); - --color-gradient-main: linear-gradient(to bottom right, var(--color-main), var(--color-main-light)); - --color-gradient-main-dark: linear-gradient(to bottom right, var(--color-main-darkest), var(--color-main-dark)); - --color-gradient-accent: linear-gradient(to bottom right, var(--color-accent), var(--color-accent-light)); - --color-gradient-accent-dark: linear-gradient(to bottom right, var(--color-accent-darkest), var(--color-accent-dark)); - --color-gradient-error: linear-gradient(to bottom right, #b00707, #dc0909); - --color-gradient-error-reverse: linear-gradient(to top left, #b00707, #dc0909); + --color-accent: var(--color-green); + --color-accent-light: var(--color-green-light); + --color-accent-dark: var(--color-green-dark); + --color-accent-darkest: var(--color-green-darkest); - --box-shadow-upper: 0 -3px 6px rgba(0, 0, 0, 0.16), 0 -3px 6px rgba(0, 0, 0, 0.23); - --box-shadow-z2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); - --box-shadow-inset: inset 0 3px 6px rgba(0, 0, 0, 0.16), inset 0 3px 6px rgba(0, 0, 0, 0.23); + --color-gradient-main: linear-gradient(to bottom right, var(--color-main), var(--color-main-light)); + --color-gradient-main-dark: linear-gradient(to bottom right, var(--color-main-darkest), var(--color-main-dark)); + --color-gradient-accent: linear-gradient(to bottom right, var(--color-accent), var(--color-accent-light)); + --color-gradient-accent-dark: linear-gradient(to bottom right, var(--color-accent-darkest), var(--color-accent-dark)); + --color-gradient-error: linear-gradient(to bottom right, #B00707, #DC0909); + --color-gradient-error-reverse: linear-gradient(to top left, #B00707, #DC0909); - /* Font Sizes & Scaling Factor*/ - --scaling-factor: 1.25; - --font-size-xs: calc(var(--font-size-s) / var(--scaling-factor)); - --font-size-s: calc(var(--font-size-default) / var(--scaling-factor)); - --font-size-default: 1rem; - --font-size-l: calc(var(--font-size-default) * var(--scaling-factor)); - --font-size-xl: calc(var(--font-size-l) * var(--scaling-factor)); - --font-size-xxl: calc(var(--font-size-xl) * var(--scaling-factor)); + --box-shadow-upper: 0 -3px 6px rgba(0,0,0,0.16), 0 -3px 6px rgba(0,0,0,0.23); + --box-shadow-z2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); + --box-shadow-inset: inset 0 3px 6px rgba(0,0,0,0.16), inset 0 3px 6px rgba(0,0,0,0.23); - /* Paddings depend on Font-Size */ - --padding-xxs: calc(var(--padding-xs) / var(--scaling-factor)); - --padding-xs: calc(var(--padding-s) / var(--scaling-factor)); - --padding-default: var(--font-size-default); - --padding-s: calc(var(--padding-default) / var(--scaling-factor)); - --padding-l: calc(var(--padding-default) * var(--scaling-factor)); - --padding-xl: calc(var(--padding-l) * var(--scaling-factor)); - --padding-xxl: calc(var(--padding-xl) * var(--scaling-factor)); - - --radius-default: calc(var(--font-size-default) / 3); - --radius-border: var(--font-size-default); - - --transition-default: 150ms; - - --page-max-width: 820px; } * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } html, body { - height: 100%; - overflow-x: hidden; - font-family: sans-serif; - color: var(--color-text); - font-size: var(--font-size-default); - max-width: var(--page-max-width); - margin: 0 auto; - background-image: url("/img/desktop-background.svg"); - background-position: center; - box-shadow: var(--box-shadow-z2); - + height: 100%; + overflow-x: hidden; + font-family: sans-serif; + color: var(--color-darkest); } -h1, h2, h3 { - margin: var(--padding-xl) 0 var(--padding-default); - text-wrap: balance; - hyphens: auto; - font-size: var(--font-size-xl); +.dot { + --size: 10px; + width: var(--size); + height: var(--size); + top: 5px; + right: 25%; + border-radius: 50%; + background-color: var(--color-accent); + display: inline-block; + margin-right: 0.5rem; + position: absolute; + box-shadow: var(--box-shadow-z2); + scale: 0; + transition: var(--transition-default); + + &.visible { + scale: 1; + animation: pulse 1s infinite; + } } -h2 { - margin: var(--padding-l) 0 var(--padding-default); - font-size: var(--font-size-l); -} +@keyframes pulse { + 0% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); + } + 70% { + transform: scale(1); + box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); + } -h3 { - margin: var(--padding-default) 0 var(--padding-default); - font-size: var(--font-size-default); -} - -a:has(button) { - text-decoration: none; + 100% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); + } } .card { - overflow: hidden; - border-radius: var(--radius-default); - box-shadow: var(--box-shadow-z2); + overflow: hidden; + border-radius: var(--radius-default); + box-shadow: var(--box-shadow-z2); +} + +.content { + padding: 1rem; + min-height: 100dvh; +} + +.filter-bar { + margin-bottom: 1rem; +} + +.pc-wrapper { + gap: 1rem; + margin-bottom: 1rem; } .flex-col { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .flex-row { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } .text-white { - color: var(--color-text-invert); + color: var(--color-lightest); } .bg-main { - background-color: var(--color-main); + background-color: var(--color-main); } .bg-main-hover:hover { - background-color: var(--color-main); + background-color: var(--color-main); } .bg-main-dark { - background-color: var(--color-main-dark); -} - -.bg-main-darkest { - background-color: var(--color-main-darkest); + background-color: var(--color-main-dark); } .bg-main-dark-hover:hover { - background-color: var(--color-main-dark); + background-color: var(--color-main-dark); } .gap-default { - gap: var(--padding-default); + gap: 1rem; } .bg-blue { - background: var(--color-blue); + background: var(--color-blue); } .bg-white { - background: var(--color-lightest); + background: var(--color-lightest); } .padding { - gap: var(--padding-default); - padding: var(--padding-default); + gap: 1rem; + padding: var(--padding-default); } .padding-small { - gap: var(--padding-default); - padding: var(--padding-s); + gap: 1rem; + padding: var(--padding-small); } -.roboto-condensed { - font-family: "Roboto Condensed", sans-serif; -} +dialog { + top: 50%; + left: 50%; + width: 100vw; + transform: translate(-50%, -50%); + border: none; + border-radius: var(--radius-default); -.roboto { - font-family: "Roboto", sans-serif; -} + font-size: 1rem; -.open-sans { - font-family: "Open Sans", sans-serif; -} + & header { + justify-content: space-between; + align-items: center; + } -.grow { - flex-grow: 1; - height: var(--padding-s); + & footer { + justify-content: space-between; + } + + &::backdrop { + background: rgba(0, 0, 0, 0.5); + } } \ No newline at end of file diff --git a/app/assets/styles/header.css b/app/assets/styles/header.css index 101693a..568236a 100755 --- a/app/assets/styles/header.css +++ b/app/assets/styles/header.css @@ -1,88 +1,68 @@ .Header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--padding-default); + background-color: rgba(255 255 255 / .8); + backdrop-filter: blur(10px); + box-shadow: var(--box-shadow-z2); + color: var(--color-darkest); position: sticky; top: 0; z-index: 100; - display: flex; - align-items: center; - gap: var(--padding-default); - padding: var(--padding-default); - &:not(.lp) { - background: var(--color-main-darkest); + & strong { + font-size: 2em; + + & span { + color: var(--color-main-dark); + } } - &.lp { - position: absolute; - background: rgba(0,0,0,.5); - backdrop-filter: blur(10px); - mask: linear-gradient(to top, transparent, black 30%); - width: 100%; - max-width: var(--page-max-width); + & input[type="checkbox"] { + display: none; + } + + & input[type="checkbox"]:checked + nav { + translate: 0; + } + + & nav, + & ul { + gap: 1em; + } + + & nav { + position: fixed; + padding: var(--padding-default); + translate: 100% 0; + width: 100vw; + right: 0; top: 0; - padding-bottom: var(--padding-xxl); + height: 100dvh; + transition: 150ms ease-in-out; + background: var(--color-lightest); + font-size: 2em; + align-items: end; + z-index: 100; } - & .logo { - height: 40px; - } - - & .burger-button { - all: unset; - color: var(--color-lightest); - } - - & header { - display: flex; - align-items: center; - justify-content: space-between; + & ul { width: 100%; - font-weight: bold; + align-items: center; + & li { + list-style: none; - & a { - text-decoration: none; - color: var(--color-lightest); - } + & a { + color: var(--color-black); + text-decoration: none; + transition: var(--transition-default); - & .header-text { - display: flex; - align-items: center; - gap: var(--padding-default); - - & > div { - display: flex; - flex-direction: column; + &.active { + color: var(--color-main); + font-weight: bold; + } } - - & .big { - font-size: var(--font-size-xl); - } - - & .small { - font-size: var(--font-size-s); - font-weight: 100; - } - } - } - - &:not(.lp) { - &:after, &:before { - content: ''; - display: block; - position: absolute; - bottom: calc(-1 * var(--radius-border)); - background: var(--color-blue-darkest); - width: var(--radius-border); - height: var(--radius-border); - } - - &:after { - right: 0; - mask: radial-gradient(var(--radius-border) at 0 100%,#0000 98%,#000); - } - - &:before { - left: 0; - mask: radial-gradient(var(--radius-border) at 100% 100%,#0000 98%,#000); } } } \ No newline at end of file diff --git a/app/assets/styles/landingpage.css b/app/assets/styles/landingpage.css deleted file mode 100644 index 9a6f3c6..0000000 --- a/app/assets/styles/landingpage.css +++ /dev/null @@ -1,40 +0,0 @@ -.home-hero { - background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url("/img/hero-image.webp"); /* single color gradient for dark layer over image */ - background-repeat: no-repeat; - background-position: center center; - background-size: cover; - color: var(--color-text-invert); - text-align: center; - height: 100vh; - display: flex; - justify-content: center; - align-items: center; - - button { - margin: var(--padding-xxl) auto; - } - - .text { - padding: var(--padding-default); - } - - h1 { - font-size: var(--font-size-xxl); - } -} - -.home-text { - padding: var(--padding-xxl) var(--padding-default); - text-align: center; - - & h3:has(+ .padding) { - margin-bottom: 0; - } -} - -.timeline { - display: flex; - flex-direction: column; - gap: var(--padding-default); -} - diff --git a/app/assets/styles/navigation.css b/app/assets/styles/navigation.css deleted file mode 100644 index 2b12356..0000000 --- a/app/assets/styles/navigation.css +++ /dev/null @@ -1,69 +0,0 @@ -.Navigation { - position: fixed; - display: flex; - justify-content: flex-end; - align-items: center; - z-index: 5000; - width: 100vw; - height: 100dvh; - right: 0; - top: 0; - transition: 150ms ease-in-out; - pointer-events: none; - - &.open { - pointer-events: all; - background: rgba(0, 0, 0, .5); - - & nav { - translate: -1rem 0; - } - } - - nav { - background: var(--color-lightest); - align-items: end; - box-shadow: var(--box-shadow-z2); - padding: var(--padding-default); - height: calc(100% - var(--padding-xxl)); - width: 70%; - translate: 100% 0; - transition: 150ms ease-in-out; - border-radius: var(--radius-default); - } - - & button { - justify-self: flex-end; - font-size: var(--font-size-xl); - } - - & ul { - width: 100%; - align-items: flex-start; - font-size: var(--font-size-l); - gap: var(--padding-default); - - & li { - list-style: none; - width: 100%; - - & a { - text-decoration: none; - display: flex; - align-items: center; - gap: var(--padding-default); - color: var(--color-middle); - border-radius: var(--radius-default); - padding: var(--padding-xs) var(--padding-s); - transition: var(--transition-default); - background: transparent; - cursor: pointer; - - &.active { - background: var(--color-main-light); - color: var(--color-main-dark); - } - } - } - } -} \ No newline at end of file diff --git a/app/assets/styles/page.css b/app/assets/styles/page.css deleted file mode 100644 index 7dd7b75..0000000 --- a/app/assets/styles/page.css +++ /dev/null @@ -1,80 +0,0 @@ -.page-wrapper { - display: flex; - flex-direction: column; - height: 100vh; - - & .page { - flex-grow: 1; - - & .nuxt-page-wrapper { - height: 100%; - justify-content: space-between; - } - } -} - -.filter-bar { - background: var(--color-lightest); - display: flex; - justify-content: space-between; - padding: var(--padding-default); - - & > button { - all: unset; - cursor: pointer; - color: var(--color-main-darkest); - font-weight: bolder; - font-family: 'Roboto', sans-serif; - - &.active { - color: var(--color-main-darkest); - } - - &:not(.active) { - opacity: .5; - } - } -} - -.search-bar { - z-index: 100; - - & p { - font-weight: 100; - color: var(--color-lightest); - } -} - -.content { - overflow: hidden; - background: var(--color-lightest); - height: 100%; - - h1:first-of-type, - h2:first-of-type, - h3:first-of-type, - p:first-of-type, - figure:first-of-type { - margin-top: 0; - } -} - -.content-text { - padding: var(--padding-xl) var(--padding-default) 0; - color: var(--color-darkest); - text-align: center; -} - -.info-text { - padding: 0 var(--padding-default); - text-align: center; - width: 100%; - top: 40%; - transform: translateY(-50%); - position: absolute; -} - -.Legal { - padding: var(--padding-l) var(--padding-default); - color: var(--color-darkest); -} \ No newline at end of file diff --git a/app/assets/styles/priceCard.css b/app/assets/styles/priceCard.css index 8052435..b8702ea 100755 --- a/app/assets/styles/priceCard.css +++ b/app/assets/styles/priceCard.css @@ -1,8 +1,11 @@ .PriceCard { position: relative; + overflow: hidden; width: 100%; + transition: 150ms; + opacity: 1; color: var(--color-darkest); - border-bottom: 1px dashed var(--color-light); + background: black; .bottom { position: absolute; @@ -15,7 +18,7 @@ & > * { flex-grow: 1; color: var(--color-lightest); - font-size: var(--font-size-xl); + font-size: 2rem; display: flex; align-items: center; @@ -25,14 +28,14 @@ } & .bg-edit { - background: var(--color-main-dark); - padding: var(--padding-xl); + background: var(--color-gradient-main-dark); + padding: 2rem; text-align: left; } & .bg-delete { - background: var(--color-error); - padding: var(--padding-xl); + background: var(--color-gradient-error-reverse); + padding: 2rem; text-align: right; justify-content: flex-end; } @@ -42,8 +45,9 @@ position: relative; background: var(--color-lightest); z-index: 2; - gap: var(--padding-default); - padding: var(--padding-default); + gap: 1rem; + padding: 1rem; + border-radius: var(--radius-default); &.animated { transition: var(--transition-default); @@ -56,14 +60,14 @@ color: var(--color-darkest); & .icon { - font-size: var(--font-size-default); + font-size: 1rem; cursor: pointer; } } & .name-price { display: flex; - gap: var(--padding-xs); + gap: .5rem; & > span:nth-child(1) { font-weight: bold; @@ -75,7 +79,7 @@ & > span:nth-child(2)::before { content: '•'; - margin-right: var(--padding-xs); + margin-right: .5rem; color: var(--color-middle); } } @@ -84,19 +88,19 @@ display: flex; flex-direction: row; width: 100%; - gap: var(--padding-default); + gap: 1rem; justify-content: space-between; & > .info { flex-grow: 0; align-items: center; - gap: var(--padding-xxs); + gap: .25rem; font-weight: bold; & > .price { display: flex; align-items: center; - gap: var(--padding-xs); + gap: .5rem; & > .icon { color: var(--color-main-dark); @@ -104,7 +108,7 @@ } & > .pro { - font-size: var(--font-size-xs); + font-size: .6rem; color: var(--color-middle); font-weight: lighter; } diff --git a/app/assets/styles/timelineCard.css b/app/assets/styles/timelineCard.css deleted file mode 100644 index 700261a..0000000 --- a/app/assets/styles/timelineCard.css +++ /dev/null @@ -1,28 +0,0 @@ -.TimelineCard { - display: flex; - align-items: center; - gap: var(--padding-default); - border: 1px solid var(--color-light); - border-radius: var(--radius-default); - padding: var(--padding-xs); - - & > .icon { - flex: 0 0 25%; - font-size: var(--font-size-xxl); - color: var(--color-main-dark); - } - - & .text { - text-align: left; - flex-grow: 1; - } - - & .state { - --color: var(--color-darkest); - display: flex; - align-items: center; - gap: var(--padding-xxs); - margin-top: var(--padding-s); - color: var(--color); - } -} \ No newline at end of file diff --git a/app/assets/styles/toolbar.css b/app/assets/styles/toolbar.css index d78e9f7..a634889 100755 --- a/app/assets/styles/toolbar.css +++ b/app/assets/styles/toolbar.css @@ -4,10 +4,11 @@ background: var(--color-main-darkest); position: sticky; bottom: 0; - z-index: 1000; + z-index: 100; box-shadow: var(--box-shadow-upper); & > .Button { - font-size: var(--font-size-default); + --padding: 1rem; + font-size: 1rem; } } \ No newline at end of file diff --git a/app/components/Pp/DeleteDialog.vue b/app/components/Pp/DeleteDialog.vue index b7d5388..dd24927 100644 --- a/app/components/Pp/DeleteDialog.vue +++ b/app/components/Pp/DeleteDialog.vue @@ -1,24 +1,24 @@ diff --git a/app/components/Pp/Form/Search.vue b/app/components/Pp/Form/Search.vue deleted file mode 100755 index db72ba8..0000000 --- a/app/components/Pp/Form/Search.vue +++ /dev/null @@ -1,25 +0,0 @@ - - - diff --git a/app/components/Pp/Form/TextField.vue b/app/components/Pp/Form/TextField.vue deleted file mode 100755 index 4e84828..0000000 --- a/app/components/Pp/Form/TextField.vue +++ /dev/null @@ -1,30 +0,0 @@ - - - diff --git a/app/components/Pp/FormInput.vue b/app/components/Pp/FormInput.vue new file mode 100755 index 0000000..cd1ec71 --- /dev/null +++ b/app/components/Pp/FormInput.vue @@ -0,0 +1,43 @@ + + + diff --git a/app/components/Pp/Header.vue b/app/components/Pp/Header.vue index 977348b..6398aac 100755 --- a/app/components/Pp/Header.vue +++ b/app/components/Pp/Header.vue @@ -1,28 +1,56 @@ + + \ No newline at end of file diff --git a/app/components/Pp/Navigation.vue b/app/components/Pp/Navigation.vue deleted file mode 100644 index 9e88fb8..0000000 --- a/app/components/Pp/Navigation.vue +++ /dev/null @@ -1,41 +0,0 @@ - - - \ No newline at end of file diff --git a/app/components/Pp/PriceCard.vue b/app/components/Pp/PriceCard.vue index 8f9280d..c4236e6 100755 --- a/app/components/Pp/PriceCard.vue +++ b/app/components/Pp/PriceCard.vue @@ -1,5 +1,5 @@ diff --git a/app/components/Pp/PriceCardDialog.vue b/app/components/Pp/PriceCardDialog.vue index bf0bf89..00dd42f 100644 --- a/app/components/Pp/PriceCardDialog.vue +++ b/app/components/Pp/PriceCardDialog.vue @@ -1,134 +1,96 @@ + \ No newline at end of file diff --git a/app/components/Pp/TimelineCard.vue b/app/components/Pp/TimelineCard.vue deleted file mode 100644 index e3c209d..0000000 --- a/app/components/Pp/TimelineCard.vue +++ /dev/null @@ -1,51 +0,0 @@ - - - \ No newline at end of file diff --git a/app/composables/navigation.ts b/app/composables/navigation.ts deleted file mode 100644 index e54c6f6..0000000 --- a/app/composables/navigation.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { ref } from 'vue' - -const isNavigationVisible = ref(false) - -export const useNavigation = () => { - const toggleNavigation = () => { - isNavigationVisible.value = !isNavigationVisible.value - } - - const showNavigation = () => { - isNavigationVisible.value = true - } - - const hideNavigation = () => { - isNavigationVisible.value = false - } - - return { - isNavigationVisible, - toggleNavigation, - showNavigation, - hideNavigation - } -} \ No newline at end of file diff --git a/app/layouts/default.vue b/app/layouts/default.vue deleted file mode 100755 index cbd7b6c..0000000 --- a/app/layouts/default.vue +++ /dev/null @@ -1,11 +0,0 @@ - - \ No newline at end of file diff --git a/app/layouts/landingpage.vue b/app/layouts/landingpage.vue deleted file mode 100644 index 3c91317..0000000 --- a/app/layouts/landingpage.vue +++ /dev/null @@ -1,11 +0,0 @@ - - \ No newline at end of file diff --git a/app/pages/imprint.vue b/app/pages/imprint.vue index 2060e07..a2b2e54 100644 --- a/app/pages/imprint.vue +++ b/app/pages/imprint.vue @@ -1,7 +1,6 @@