-
-
-
+
+
+
-
+
diff --git a/frontend/src/assets/_general.scss b/frontend/src/assets/_general.scss
new file mode 100644
index 0000000..8b0e03b
--- /dev/null
+++ b/frontend/src/assets/_general.scss
@@ -0,0 +1,49 @@
+* {
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: OpenSans Roboto sans-serif;
+ background-color: var(--blue-space);
+}
+
+a {
+ text-decoration: none;
+}
+
+.flex {
+ display: flex;
+}
+
+.f-row {
+ display: flex;
+ flex-direction: row;
+}
+
+.f-col {
+ display: flex;
+ flex-direction: column;
+}
+
+.f-center {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.main-wrapper {
+ padding: 0 0.5rem;
+}
+
+.hidden {
+ display: none;
+}
+
+.abs-center {
+ position: absolute;
+ transform: translateX(-50%) translateY(-50%);
+ left: 50%;
+ top: 50%;
+}
diff --git a/frontend/src/assets/_vars.scss b/frontend/src/assets/_vars.scss
new file mode 100644
index 0000000..432e652
--- /dev/null
+++ b/frontend/src/assets/_vars.scss
@@ -0,0 +1,8 @@
+:root {
+ --black-midnight: #040506;
+ --blue-space: #0a0d10;
+ --blue-shadow: #162129;
+ --blue-oceanic: #23455b;
+ --gray-steel: #223440;
+ --red-rustic: #591b12;
+}
\ No newline at end of file
diff --git a/frontend/src/assets/base.css b/frontend/src/assets/base.css
deleted file mode 100644
index 8816868..0000000
--- a/frontend/src/assets/base.css
+++ /dev/null
@@ -1,86 +0,0 @@
-/* color palette from */
-:root {
- --vt-c-white: #ffffff;
- --vt-c-white-soft: #f8f8f8;
- --vt-c-white-mute: #f2f2f2;
-
- --vt-c-black: #181818;
- --vt-c-black-soft: #222222;
- --vt-c-black-mute: #282828;
-
- --vt-c-indigo: #2c3e50;
-
- --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
- --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
- --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
- --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
- --vt-c-text-light-1: var(--vt-c-indigo);
- --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
- --vt-c-text-dark-1: var(--vt-c-white);
- --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
- --color-background: var(--vt-c-white);
- --color-background-soft: var(--vt-c-white-soft);
- --color-background-mute: var(--vt-c-white-mute);
-
- --color-border: var(--vt-c-divider-light-2);
- --color-border-hover: var(--vt-c-divider-light-1);
-
- --color-heading: var(--vt-c-text-light-1);
- --color-text: var(--vt-c-text-light-1);
-
- --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --color-background: var(--vt-c-black);
- --color-background-soft: var(--vt-c-black-soft);
- --color-background-mute: var(--vt-c-black-mute);
-
- --color-border: var(--vt-c-divider-dark-2);
- --color-border-hover: var(--vt-c-divider-dark-1);
-
- --color-heading: var(--vt-c-text-dark-1);
- --color-text: var(--vt-c-text-dark-2);
- }
-}
-
-*,
-*::before,
-*::after {
- box-sizing: border-box;
- margin: 0;
- font-weight: normal;
-}
-
-body {
- min-height: 100vh;
- color: var(--color-text);
- background: var(--color-background);
- transition:
- color 0.5s,
- background-color 0.5s;
- line-height: 1.6;
- font-family:
- Inter,
- -apple-system,
- BlinkMacSystemFont,
- 'Segoe UI',
- Roboto,
- Oxygen,
- Ubuntu,
- Cantarell,
- 'Fira Sans',
- 'Droid Sans',
- 'Helvetica Neue',
- sans-serif;
- font-size: 15px;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
deleted file mode 100644
index 36fb845..0000000
--- a/frontend/src/assets/main.css
+++ /dev/null
@@ -1,35 +0,0 @@
-@import './base.css';
-
-#app {
- max-width: 1280px;
- margin: 0 auto;
- padding: 2rem;
- font-weight: normal;
-}
-
-a,
-.green {
- text-decoration: none;
- color: hsla(160, 100%, 37%, 1);
- transition: 0.4s;
- padding: 3px;
-}
-
-@media (hover: hover) {
- a:hover {
- background-color: hsla(160, 100%, 37%, 0.2);
- }
-}
-
-@media (min-width: 1024px) {
- body {
- display: flex;
- place-items: center;
- }
-
- #app {
- display: grid;
- grid-template-columns: 1fr 1fr;
- padding: 0 2rem;
- }
-}
diff --git a/frontend/src/assets/nav.scss b/frontend/src/assets/nav.scss
new file mode 100644
index 0000000..d7f31c1
--- /dev/null
+++ b/frontend/src/assets/nav.scss
@@ -0,0 +1,11 @@
+header {
+ width: 100vw;
+ padding: 2rem 1rem;
+ background-color: var(--blue-shadow);
+}
+
+header,
+header > * {
+ display: flex;
+ justify-content: space-between;
+}
diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue
new file mode 100644
index 0000000..c304478
--- /dev/null
+++ b/frontend/src/components/AppHeader.vue
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 5a5dbdb..670e5df 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -1,5 +1,6 @@
-import './assets/main.css'
-
+import './assets/_general.scss'
+import './assets/_vars.scss'
+import './assets/nav.scss'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index a49ae50..3bd35c8 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -1,13 +1,13 @@
import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import BeerView from '../views/BeerView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
- name: 'home',
- component: HomeView
+ name: 'beer',
+ component: BeerView
},
{
path: '/about',
@@ -16,6 +16,11 @@ const router = createRouter({
// this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import('../views/AboutView.vue')
+ },
+ {
+ path: '/beer',
+ name: 'beer',
+ component: BeerView
}
]
})
diff --git a/frontend/src/views/BeerView.vue b/frontend/src/views/BeerView.vue
new file mode 100644
index 0000000..7ec5f96
--- /dev/null
+++ b/frontend/src/views/BeerView.vue
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/DefaultView.vue
similarity index 100%
rename from frontend/src/views/HomeView.vue
rename to frontend/src/views/DefaultView.vue
diff --git a/frontend/src/views/TestView.vue b/frontend/src/views/TestView.vue
new file mode 100644
index 0000000..0bcba44
--- /dev/null
+++ b/frontend/src/views/TestView.vue
@@ -0,0 +1,5 @@
+
+
+ Test Page
+
+
+ 
+
+
+
+ Beer Name
+12 Degree
+
+
+
+
+
+ Beer Name
+12 Degree
+