Contact page

src/App.vue

@@ -24,6 +24,7 @@ import LogoSvg from './components/icons/IconLogo.vue'
       <nav>
         <RouterLink to="/">Etusivu</RouterLink>
         <RouterLink to="/about">Tietoa</RouterLink>
+        <RouterLink to="/contact">Yhteystiedot</RouterLink>
       </nav>
     </div>
   </header>

src/router/index.ts

@@ -17,6 +17,11 @@ const router = createRouter({
       // which is lazy-loaded when the route is visited.
       component: () => import('../views/AboutView.vue'),
     },
+    {
+      path: '/contact',
+      name: 'contact',
+      component: () => import('../views/ContactView.vue'),
+    },
   ],
 })
 

src/views/ContactView.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="contact">
+    <div class="contact-item">
+      <div class="details">
+        <h3>Yhteystietomme</h3>
+        <p>
+          Voit ottaa meihin yhteyttä sähköpostitse osoitteeseen
+          <a href="mailto:info@tietokonepaja.fi">info@tietokonepaja.fi</a>.
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.contact-item {
+  margin-top: 2rem;
+  display: flex;
+  position: relative;
+}
+
+.contact-item:first-of-type {
+  margin-top: 0;
+}
+
+.details {
+  flex: 1;
+  margin-left: 1rem;
+}
+
+h3 {
+  font-size: 1.2rem;
+  font-weight: 500;
+  margin-bottom: 0.4rem;
+  color: var(--color-heading);
+}
+
+p {
+  color: var(--color-text);
+  line-height: 1.6;
+}
+
+ul {
+  color: var(--color-text);
+  line-height: 1.6;
+  margin: 0.5rem 0;
+  padding-left: 1.2rem;
+}
+
+li {
+  margin-bottom: 0.8rem;
+}
+
+@media (min-width: 1024px) {
+  .contact {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .contact-item {
+    margin-top: 0;
+    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
+  }
+
+  .contact-item:before {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    bottom: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .contact-item:after {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    top: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .contact-item:first-of-type:before {
+    display: none;
+  }
+
+  .contact-item:last-of-type:after {
+    display: none;
+  }
+}
+</style>