Created container class for generic page styling

KronemeyerJoshua · Jul 25, 2024 · e798b4b · e798b4b
1 parent 056084b
commit e798b4b
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 38 deletions.
diff --git a/src/assets/main.scss b/src/assets/main.scss
@@ -35,3 +35,17 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+.container {
+  background-color: $primary;
+  border: 1px solid $accent;
+  width: 100%;
+  padding-left: 6rem;
+  padding-right: 6rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  border-radius: 5px;
+  box-shadow:
+    0 4px 8px 0 rgba(0, 0, 0, 0.2),
+    0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
diff --git a/src/components/Contact.vue b/src/components/Contact.vue
@@ -9,7 +9,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="row contact">
+  <div class="row container">
     <div class="col-4">
       <q-avatar size="20rem">
         <img src="@/assets/img/avatar_main.jpg" />
@@ -34,21 +34,3 @@ defineProps<{
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-@import '../quasar-variables.sass';
-
-.contact {
-  background-color: $primary;
-  border: 1px solid $accent;
-  width: 100%;
-  padding-left: 6rem;
-  padding-right: 6rem;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  border-radius: 5px;
-  box-shadow:
-    0 4px 8px 0 rgba(0, 0, 0, 0.2),
-    0 6px 20px 0 rgba(0, 0, 0, 0.19);
-}
-</style>
diff --git a/src/components/ResumeTimeline.vue b/src/components/ResumeTimeline.vue
@@ -39,19 +39,4 @@ function formatDate(date: Date | undefined): string {
 .list ul li {
   color: white;
 }
-
-.timeline-box {
-  color: white;
-  background-color: $primary;
-  border: 1px solid $accent;
-  width: 100%;
-  padding-left: 6rem;
-  padding-right: 6rem;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  border-radius: 5px;
-  box-shadow:
-    0 4px 8px 0 rgba(0, 0, 0, 0.2),
-    0 6px 20px 0 rgba(0, 0, 0, 0.19);
-}
 </style>
diff --git a/src/views/ProjectView.vue b/src/views/ProjectView.vue
@@ -19,7 +19,9 @@ onBeforeMount(() => {
 </script>
 
 <template>
-  <div>{{ projectSelected?.name }}</div>
-  <div>{{ projectSelected?.company }}</div>
-  <div>{{ projectSelected?.description }}</div>
+  <div class="container">
+    <div>{{ projectSelected?.name }}</div>
+    <div>{{ projectSelected?.company }}</div>
+    <div>{{ projectSelected?.description }}</div>
+  </div>
 </template>
diff --git a/src/views/ResumeView.vue b/src/views/ResumeView.vue
@@ -4,7 +4,7 @@ import ResumeTimeline from '@/components/ResumeTimeline.vue'
 </script>
 
 <template>
-  <div class="">
+  <div class="container">
     <ResumeTimeline :resumeEntries="allResumeEntries" />
   </div>
 </template>