Flexbox cards

src/components/App.vue

@@ -1,20 +1,20 @@
 <template>
   <Header :dark-mode="darkMode" />
-  <GoogleForm/>
+  <CardContainer/>
   <Footer :darkMode="darkMode" @update:darkMode="toggleDarkMode" />
 </template>
 
 <script>
 import Header from './Header'
 import Footer from './Footer'
-import GoogleForm from './GoogleForm'
+import CardContainer from './CardContainer'
 
 export default {
   name: 'App',
   components: {
     Header,
     Footer,
-    GoogleForm
+    CardContainer
   },
   data() {
     return {

src/components/Card.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="main">
+
+    <img :src="require(`@/assets/${image_name}`)"/>
+
+    <div class="body">
+      <h2 class="title"> {{ title }} </h2>
+      <slot></slot>
+      <br/>
+    </div>
+    <br/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Card",
+  props: ["title", "image_name", "website"]
+}
+</script>
+
+<style scoped>
+.main {
+  background-color: white;
+  text-align: left;
+}
+
+.body {
+  margin: 0 2em;
+}
+
+@media screen and (orientation: landscape) {
+  .main {
+    min-height: 40vh;
+  }
+
+  .body {
+    float: left;
+    max-width: 60vw;
+  }
+
+  img {
+    float: right;
+    height: 40vh;
+    max-width: 30vw;
+  }
+}
+
+@media screen and (orientation: portrait) {
+  img {
+    max-height: 50vh;
+    max-width: 80vw;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+</style>

src/components/CardContainer.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="flex-container">
+    <hr/>
+
+    <Card class="flex-item" title="Mini Joker" image_name="mini_joker.png" website="https://github.com/codi-hacks/space-race">
+      It's the mini joker!!!!!!!
+    </Card>
+
+    <Card class="flex-item" title="Space Race" image_name="space_race.png" website="https://github.com/codi-hacks/space-race">
+      Spaceship racer! A spaceship racing game created with the Lua framework <a href="https://love2d.org/">Love2D</a>.
+      It is mostly complete, yet it lacks levels!
+      If you are interested in helping, please open an issue on our GitHub.
+    </Card>
+
+    <Card class="flex-item" title="Weather Station" image_name="weather_station.png" website="https://weather.codihacks.org/">
+      A <a href="https://github.com/codi-hacks/weather-station">weather station web app</a>.
+      It features a physical weather station, an API server written in Rust, and a web app frontend written in Vue.
+    </Card>
+  </div>
+</template>
+
+<script>
+import Card from '@/components/Card.vue'
+export default {
+  name: "Card Container",
+  components: {
+    Card
+  }
+}
+</script>
+
+<style scoped>
+.flex-container {
+  display: flex;
+  flex-flow: column wrap;
+  gap: 1em;
+  margin: 0 2em;
+  justify-content: center;
+}
+
+.flex-item {
+  border-top: solid black 2px;
+  flex-basis: 100%;
+  flex-grow: 1;
+  flex-shrink: 0;
+  min-height: 20em;
+}
+
+.flex-item:last-child {
+  padding-bottom: 30px;
+}
+</style>

src/stylesheets/main.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css?family=Comfortaa|Patua+One');
+
 :root {
   --link-color: #27a1f0;
 }
@@ -8,13 +10,18 @@ body {
 }
 
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  font-family: 'Comfortaa', Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  margin-top: 60px;
+  font-size: 1.2em;
+  margin-top: 40px;
   text-align: center;
 }
 
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Patua One';
+}
+
 a {
   color: var(--link-color);
 }