Final adjustments

marcelbrode · marcelbrode · commit d74107d8afda · 2024-05-07T20:09:15.000+02:00
diff --git a/src/app.vue b/src/app.vue
@@ -134,7 +134,7 @@ p:last-child {
 
     &__content {
         display: flex;
-        min-height: 75vh;
+        padding: 24px 0;
 
         overflow: hidden;
     }
diff --git a/src/assets/_variables.scss b/src/assets/_variables.scss
@@ -2,7 +2,7 @@ $color-primary: rgba(0, 0, 0, 0.8);
 $color-secondary: #eee;
 $color-tertiary: #333;
 
-$color-background: #f7f7f7;
+$color-background: #fff;
 $color-accent: #314152;
 $color-highlight: #42b983;
 
@@ -19,5 +19,9 @@ $drop-shadow:   0 1px 1px rgba(0,0,0,.08),
                 0 2px 1px rgba(0,0,0,.06),
                 0 1px 3px rgba(0,0,0,.4);
 
+$box-shadow:    0 11px 15px -7px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)),
+                0 24px 38px 3px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)),
+                0 9px 46px 8px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
+
 $navigator-font-color: $color-secondary;
 $navigator-font-color-active: $color-highlight;
diff --git a/src/components/card.vue b/src/components/card.vue
@@ -44,16 +44,12 @@ export default {
     position: relative;
     height: 750px;
     width: 550px;
-
     overflow: hidden;
+
     &.is--wide {
         width: 1100px;
     }
 
-    &.is--secondary {
-        // background-color: green;
-    }
-
     &__decoration {
         position: absolute;
         width: 50px;
diff --git a/src/components/cookie-consent.vue b/src/components/cookie-consent.vue
@@ -5,20 +5,24 @@
             class="cookie-consent"
         >
             <div class="cookie-consent__content">
-                <div class="cookie-consent__legal d-flex flex-column justify-center flex-grow-3 flex-shrink-3">
-                    <p class="cookie-consent__legal-text font-weight-bold">
-                        {{ $t('cookie-consent.content') }}
-                    </p>
+                <div class="cookie-consent__content-legal">
+                    <div class="cookie-consent__content-legal-content">
+                        <v-icon size="x-large">mdi-cookie</v-icon>
+                        
+                        <p class="cookie-consent__content-legal-content-text">
+                            {{ $t('cookie-consent.content') }}
+                        </p>
+                    </div>
                     <router-link
-                        class="cookie-consent__legal-link"
+                        class="cookie-consent__content-legal-link"
                         to="/copyright"
                     >
                         {{ $t('cookie-consent.moreInformationLink') }}
                     </router-link>
                 </div>
-                <div class="cookie-consent__actions d-flex justify-center flex-column flex-md-row">
+                <div class="cookie-consent__content-actions">
                     <v-btn
-                        class="cookie-consent_actions-accept ma-2"
+                        class="cookie-consent__actions-accept ma-2"
                         @click="onConfirm"
                     >
                         {{ $t('general.accept') }}
@@ -60,23 +64,56 @@ export default {
 .cookie-consent {
     display: flex;
     position: fixed;
-    bottom: 0;
-    left: 0;
     width: 100%;
+    bottom: 0;
+    justify-content: center;
 
     flex-direction: row;
 
     &__content {
         display: flex;
-        width: 100%;
+        height: fit-content;
+        width: $content-max-width;
         margin: 24px;
         padding: 36px 24px;
 
         background-color: $color-background;
         justify-content: space-between;
+        align-items: center;
 
         border-radius: 12px;
-        filter: $drop-shadow;
+        box-shadow: $box-shadow;
+
+        &-legal {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            flex-grow: 3;
+            gap: 12px;
+
+            &-icon {
+                display: flex;
+                height: 100%;
+            }
+
+            &-content {
+                display: flex;
+                flex-direction: row;
+                gap: 12px;
+
+                &-text {
+                    font-weight: bolder;
+                }
+            }
+
+            &-link {
+                margin-left: 44px;
+            }
+        }
+
+        &-actions {
+            color: $color-white;
+        }
     }
 }
 
diff --git a/src/components/header.vue b/src/components/header.vue
@@ -80,7 +80,6 @@ $logo-sizes: 250px 60px;
 
   background-color: $color-accent;
   color: $color-secondary;
-  filter: $drop-shadow;
 
   &__container {
     display: flex;
diff --git a/src/components/modal.vue b/src/components/modal.vue
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
@@ -1,18 +1,12 @@
-// Styles
 import '@mdi/font/css/materialdesignicons.css';
 import 'vuetify/styles';
-
-// Vuetify
 import { createVuetify } from 'vuetify';
 
 const huCustomTheme = {
   dark: false,
   colors: {
     background: '#FFFFFF',
     surface: '#314152',
-    // surface: '#FFFFFF',
-    // primary: '#6200EE',
-    primary: '#ff00ff',
     'primary-darken-1': '#3700B3',
     secondary: '#FFFFFF',
     'secondary-darken-1': '#018786',
diff --git a/src/views/aboutRoute.vue b/src/views/aboutRoute.vue
@@ -75,7 +75,6 @@ export default {
     &-card {
       max-width: 60%;
       padding: $spacer-md $spacer-xl;
-      text-align: justify;
 
       &-entry {
         color: $color-accent;
diff --git a/src/views/copyrightRoute.vue b/src/views/copyrightRoute.vue
@@ -3,6 +3,8 @@
     <v-card
       title="Datenschutz"
       class="copyright-route__content"
+      color="secondary"
+      variant="text"
     >
       <div class="copyright-route__content-head">
         <v-card-text class="copyright-route__content-head-text">
diff --git a/src/views/homeRoute.vue b/src/views/homeRoute.vue
@@ -34,7 +34,6 @@ export default {
     &-card {
       max-width: 60%;
       padding: 12px 24px;
-      text-align: justify;
     }
   }
 
diff --git a/src/views/legalNoticeRoute.vue b/src/views/legalNoticeRoute.vue
@@ -3,6 +3,8 @@
     <v-card
       title="Impressum"
       class="legal-notice-route__content"
+      color="secondary"
+      variant="text"
     >
       <div class="legal-notice-route__content-main">
         <v-card-subtitle class="legal-notice-route__content-main-subtitle">
@@ -96,6 +98,8 @@
     <v-card
       title="Hinweise"
       class="legal-notice-route__notices"
+      color="secondary"
+      variant="text"
     >
       <div class="legal-notice-route__notices-content">
         <v-card-subtitle class="legal-notice-route__notices-content-subtitle">
diff --git a/src/views/servicesRoute.vue b/src/views/servicesRoute.vue
@@ -122,7 +122,6 @@ export default {
     flex-wrap: wrap;
 
     &-card {
-      text-align: justify;
       width: 60%;
 
       &-text {

Original file line number	Diff line number	Diff line change
`@@ -134,7 +134,7 @@ p:last-child {`
`134`	`134`
`135`	`135`	`&__content {`
`136`	`136`	`display: flex;`
`137`		`- min-height: 75vh;`
	`137`	`+ padding: 24px 0;`
`138`	`138`
`139`	`139`	`overflow: hidden;`
`140`	`140`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,8 @@`
`3`	`3`	`<v-card`
`4`	`4`	`title="Datenschutz"`
`5`	`5`	`class="copyright-route__content"`
	`6`	`+ color="secondary"`
	`7`	`+ variant="text"`
`6`	`8`	`>`
`7`	`9`	`<div class="copyright-route__content-head">`
`8`	`10`	`<v-card-text class="copyright-route__content-head-text">`
Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,6 @@ export default {`
`34`	`34`	`&-card {`
`35`	`35`	`max-width: 60%;`
`36`	`36`	`padding: 12px 24px;`
`37`		`- text-align: justify;`
`38`	`37`	`}`
`39`	`38`	`}`
`40`	`39`