diff --git a/app/app.vue b/app/app.vue index 86f6369..56302ca 100755 --- a/app/app.vue +++ b/app/app.vue @@ -1,7 +1,5 @@ - - - + diff --git a/app/assets/styles/button.css b/app/assets/styles/button.css index 11a6a95..2373e67 100755 --- a/app/assets/styles/button.css +++ b/app/assets/styles/button.css @@ -93,18 +93,6 @@ } } - &.search-button { - --background: var(--color-lightest); - --color: var(--color-main-darkest); - border-radius: 100%; - padding: var(--padding); - font-size: 1.1em; - - &:hover { - scale: 1.2; - } - } - &.mini-button { padding: .5rem 1.5rem; display: flex; diff --git a/app/assets/styles/buttonGroup.css b/app/assets/styles/buttonGroup.css index 4b46732..f36e007 100644 --- a/app/assets/styles/buttonGroup.css +++ b/app/assets/styles/buttonGroup.css @@ -1,6 +1,7 @@ .ButtonGroup { display: flex; background: var(--color-main); + box-shadow: var(--box-shadow-z2); & button { --color: var(--color-light); diff --git a/app/assets/styles/fonts.css b/app/assets/styles/fonts.css deleted file mode 100755 index e4a4fec..0000000 --- a/app/assets/styles/fonts.css +++ /dev/null @@ -1,24 +0,0 @@ -@font-face { - font-family: 'Open Sans'; - font-style: normal; - font-weight: 400; - font-stretch: 100%; - font-display: swap; - src: url('/fonts/opensans.woff2') format('woff2'); -} - -@font-face { - font-family: 'Roboto Condensed'; - font-style: normal; - font-weight: 300; - font-display: swap; - src: url('/fonts/roboto_con_reg.woff2') format('woff2'); -} - -@font-face { - font-family: 'Roboto Condensed'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url('/fonts/roboto_con_bold.woff2') format('woff2'); -} diff --git a/app/assets/styles/form/search.css b/app/assets/styles/form/search.css deleted file mode 100644 index 5a30772..0000000 --- a/app/assets/styles/form/search.css +++ /dev/null @@ -1,15 +0,0 @@ -.Search { - border-radius: 9999px; - background: var(--color-lightest); - padding: 0 1rem; - display: flex; - align-items: center; - justify-content: space-between; - gap: 1rem; - - & > input { - all: unset; - flex-grow: 1; - padding: .5rem 0; - } -} \ No newline at end of file diff --git a/app/assets/styles/form/input.css b/app/assets/styles/formInput.css similarity index 100% rename from app/assets/styles/form/input.css rename to app/assets/styles/formInput.css diff --git a/app/assets/styles/general.css b/app/assets/styles/general.css index 5c77913..5b917b1 100755 --- a/app/assets/styles/general.css +++ b/app/assets/styles/general.css @@ -58,7 +58,6 @@ body { height: 100%; overflow-x: hidden; font-family: sans-serif; - background: var(--color-main-darkest); } .dot { @@ -104,6 +103,10 @@ body { box-shadow: var(--box-shadow-z2); } +.content { + min-height: 100dvh; +} + .flex-col { display: flex; flex-direction: column; diff --git a/app/assets/styles/header.css b/app/assets/styles/header.css index 43b0c3f..a59130e 100755 --- a/app/assets/styles/header.css +++ b/app/assets/styles/header.css @@ -1,67 +1,57 @@ .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; - background: var(--color-main-darkest); - display: flex; - align-items: center; - gap: 1rem; - padding: var(--padding-default); - & .logo { - height: 40px; + & strong { + font-size: 2em; + + & span { + color: var(--color-main-dark); + } } - & header { - display: flex; + & 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; + height: 100dvh; + transition: 150ms ease-in-out; + background: var(--color-lightest); + font-size: 2em; + align-items: end; + z-index: 100; + } + + & ul { + width: 100%; align-items: center; - justify-content: space-between; - font-family: 'Roboto', sans-serif; - font-weight: bold; - - & a { - text-decoration: none; - color: var(--color-lightest); - } - - & .header-text { - font-size: 1.5em; - } - - & 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; - height: 100dvh; - transition: 150ms ease-in-out; - background: var(--color-lightest); - font-size: 2em; - align-items: end; - z-index: 100; - } - - & ul { - width: 100%; - align-items: center; - & li { - list-style: none; - } + & li { + list-style: none; } } } \ 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 eb9426d..0000000 --- a/app/assets/styles/page.css +++ /dev/null @@ -1,40 +0,0 @@ -.filter-bar { - background: var(--color-lightest); - display: flex; - justify-content: space-between; - padding: 1rem; - - & > 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-family: 'Roboto Condensed', sans-serif; - font-weight: lighter; - color: var(--color-lightest); - } -} - -.content { - min-height: 100dvh; - border-top-left-radius: 15px; - border-top-right-radius: 15px; - overflow: hidden; - background: var(--color-lightest); -} \ No newline at end of file diff --git a/app/assets/styles/priceCard.css b/app/assets/styles/priceCard.css index a922b25..b108971 100755 --- a/app/assets/styles/priceCard.css +++ b/app/assets/styles/priceCard.css @@ -3,7 +3,6 @@ width: 100%; color: var(--color-darkest); border-bottom: 1px solid var(--color-light); - font-family: 'Roboto', sans-serif; .bottom { position: absolute; @@ -79,10 +78,6 @@ margin-right: .5rem; color: var(--color-middle); } - - & > span:nth-child(2) { - font-family: 'Roboto Condensed', sans-serif; - } } & .wrapper { @@ -91,7 +86,6 @@ width: 100%; gap: 1rem; justify-content: space-between; - font-family: 'Roboto Condensed', sans-serif; & > .info { flex-grow: 0; @@ -110,7 +104,7 @@ } & > .pro { - font-size: .5rem; + font-size: .6rem; color: var(--color-middle); font-weight: lighter; } 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/Input.vue b/app/components/Pp/FormInput.vue similarity index 100% rename from app/components/Pp/Form/Input.vue rename to app/components/Pp/FormInput.vue diff --git a/app/components/Pp/Header.vue b/app/components/Pp/Header.vue index e64430a..63018c4 100755 --- a/app/components/Pp/Header.vue +++ b/app/components/Pp/Header.vue @@ -1,30 +1,31 @@ - - - - - - ProPapier - - - - - - - - - - - Home - Übersicht - - - - - - + + + ProPapier + + + + + + + + + + + Home + Übersicht + + + + + \ No newline at end of file diff --git a/app/pages/index.vue b/app/pages/index.vue index 1424bee..4e386fc 100755 --- a/app/pages/index.vue +++ b/app/pages/index.vue @@ -1,48 +1,51 @@ - - - - - - - Preisvergleich. Schnell. Unkompliziert. - - - - - + + + + + + - - - - - - Hinzufügen - - - - + + + + + + Neu sortieren + + + + + Hinzufügen + + + diff --git a/app/pages/other.vue b/app/pages/other.vue deleted file mode 100644 index bd60632..0000000 --- a/app/pages/other.vue +++ /dev/null @@ -1,165 +0,0 @@ - - - - - - - - - - - - - - - - - - Neu sortieren - - - - - Hinzufügen - - - - - - - diff --git a/nuxt.config.ts b/nuxt.config.ts index 846366a..68c0d99 100755 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -16,23 +16,6 @@ export default defineNuxtConfig({ } }, - app: { - pageTransition: { - name: 'page', - mode: 'out-in', - }, - head: { - htmlAttrs: { lang: 'de' }, - link: [ - { rel: 'preload', as: 'image', href: '/img/propapier.svg', type: 'image/svg+xml' }, - { rel: 'icon', type: 'image/x-icon', href: '/favicon.svg' }, - { rel: 'preload', crossorigin: 'anonymous', as: 'font', href: '/fonts/opensans.woff2', type: 'font/woff2' }, - { rel: 'preload', crossorigin: 'anonymous', as: 'font', href: '/fonts/roboto_con_bold.woff2', type: 'font/woff2' }, - { rel: 'preload', crossorigin: 'anonymous', as: 'font', href: '/fonts/roboto_con_reg.woff2', type: 'font/woff2' }, - ], - } - }, - routeRules: { '/': { prerender: true }, '/imprint': { prerender: true }, @@ -48,9 +31,7 @@ export default defineNuxtConfig({ './app/assets/styles/button.css', './app/assets/styles/buttonGroup.css', './app/assets/styles/priceCard.css', - './app/assets/styles/form/input.css', - './app/assets/styles/form/search.css', + './app/assets/styles/formInput.css', './app/assets/styles/toolbar.css', - './app/assets/styles/page.css', ] }) \ No newline at end of file diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100755 index 0000000..18993ad Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/favicon.svg b/public/favicon.svg deleted file mode 100755 index 1446740..0000000 --- a/public/favicon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/fonts/opensans.woff2 b/public/fonts/opensans.woff2 deleted file mode 100755 index f143cd4..0000000 Binary files a/public/fonts/opensans.woff2 and /dev/null differ diff --git a/public/fonts/roboto_con_bold.woff2 b/public/fonts/roboto_con_bold.woff2 deleted file mode 100755 index a5ab9d8..0000000 Binary files a/public/fonts/roboto_con_bold.woff2 and /dev/null differ diff --git a/public/fonts/roboto_con_reg.woff2 b/public/fonts/roboto_con_reg.woff2 deleted file mode 100755 index e4c259c..0000000 Binary files a/public/fonts/roboto_con_reg.woff2 and /dev/null differ diff --git a/public/img/propapier.svg b/public/img/propapier.svg deleted file mode 100755 index 1446740..0000000 --- a/public/img/propapier.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file
Preisvergleich. Schnell. Unkompliziert.