adding latest

firebase.md

@@ -919,7 +919,7 @@ If you set a row to use more than 12 columns, it will overfill on to the next li
 
 <!-- TODO Document using align-sm-end for responsive content layouts -->
 
-<!-- ? should this be merged with the previous section on mobile layouts?  -->
+<!-- ? should this be merged with the previous section on mobile layouts  -->
 
 ## CSS Spacing
 
@@ -1007,3 +1007,17 @@ Using the `:class` prop:
   :class="alignOnViewport"
 ></div>
 ```
+
+## SVG
+
+### Viewbox
+
+<https://css-tricks.com/scale-svg/>
+
+Viewbox is an attribute on the `<svg>` element and has 4 components: x, y, height, width.
+
+The x and y set the coordinate system to use for the top left corner of the viewport. Simple scaling can be done by setting these to 0,0, but you could set them to something else (like central) to make drawing circles using radius easier, or for easier transforming/rotating.
+
+Take for example `viewBox="-50 -50 100 100"` - this means the top left corner has coordinates -50,-50, so the bottom right corner has coordinates 50,50. Drawing a circle centered around 0,0 with radius 50 it will fill the screen.
+
+Setting a viewbox allows you to set the box that the svg element should draw in. This will allow you to then control the width and height to scale the element properly.

src/components/Appbar.vue

@@ -3,6 +3,7 @@
     <v-app-bar
       flat
       app
+      hide-on-scroll
       color="#EEEEEE"
       v-if="!this.$store.getters.fullScreen"
     >
@@ -16,7 +17,23 @@
           </router-link>
         </v-col>
         <v-col cols="4" class="d-flex justify-end align-self-center">
-          <router-link :to="{ name: 'Triangle'}" class="routerLink ma-0 pr-2">
+          <router-link
+            :to="{ name: 'Playground' }"
+            class="routerLink ma-0 pr-2"
+          >
+            <p class="mb-0 underline">
+              Playground
+            </p>
+          </router-link>
+          <router-link
+            :to="{ name: 'Backgrounds' }"
+            class="routerLink ma-0 pr-2"
+          >
+            <p class="mb-0 underline">
+              Backgrounds
+            </p>
+          </router-link>
+          <router-link :to="{ name: 'Triangle' }" class="routerLink ma-0 pr-2">
             <p class="mb-0 underline">
               Triangle
             </p>

src/router/index.js

@@ -36,6 +36,18 @@ const routes = [
     name: "Triangle",
     component: () =>
       import(/* webpackChunkName: "triangle" */ "../views/Triangle.vue")
+  },
+  {
+    path: "/backgrounds",
+    name: "Backgrounds",
+    component: () =>
+      import(/* webpackChunkName: "backgrounds" */ "../views/Backgrounds.vue")
+  },
+  {
+    path: "/playground",
+    name: "Playground",
+    component: () =>
+      import(/* webpackChunkName: "playground" */ "../views/Playground.vue")
   }
 ];
 

src/views/Backgrounds.vue

@@ -0,0 +1,162 @@
+<template>
+  <div>
+    <v-container>
+      <v-row>
+        <v-col>
+          <h1>Backgrounds</h1>
+        </v-col>
+      </v-row>
+      <v-row>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 1440 320"
+          style="width: 500px;"
+        >
+          <path
+            fill="#0099ff"
+            fill-opacity="1"
+            d="M0,0L48,42.7C96,85,192,171,288,176C384,181,480,107,576,101.3C672,96,768,160,864,154.7C960,149,1056,75,1152,85.3C1248,96,1344,192,1392,240L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
+          ></path>
+        </svg>
+      </v-row>
+      <v-row class="mt-4">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
+          <path
+            fill="#0099ff"
+            fill-opacity="0.5"
+            d="M0,0L48,42.7C96,85,192,171,288,176C384,181,480,107,576,101.3C672,96,768,160,864,154.7C960,149,1056,75,1152,85.3C1248,96,1344,192,1392,240L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
+            transform="rotate(-10 50 100)"
+          ></path>
+          <path
+            fill="#0099ff"
+            fill-opacity="0.6"
+            d="M0,0L48,42.7C96,85,192,171,288,176C384,181,480,107,576,101.3C672,96,768,160,864,154.7C960,149,1056,75,1152,85.3C1248,96,1344,192,1392,240L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
+            transform="rotate(10 50 100)"
+          ></path>
+        </svg>
+      </v-row>
+    </v-container>
+    <v-container>
+      <v-row>
+        <v-col>
+          <svg
+            width="200"
+            height="200"
+            viewBox="0 0 600 600"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g transform="translate(300,300)">
+              <path
+                d="M154.5,-209.4C196.2,-182.4,223.2,-131.8,227.9,-82.3C232.7,-32.8,215.3,15.8,199.3,64.8C183.4,113.8,169,163.3,136,199.9C103.1,236.5,51.5,260.3,3.5,255.4C-44.5,250.5,-89,217.1,-129.7,183C-170.4,148.9,-207.4,114.2,-226.4,70.2C-245.4,26.2,-246.3,-27.1,-228.4,-71.7C-210.5,-116.4,-173.7,-152.4,-132.5,-179.6C-91.3,-206.7,-45.7,-224.8,5.4,-232.2C56.4,-239.7,112.9,-236.3,154.5,-209.4Z"
+                fill="#FFB4BC"
+              />
+            </g>
+          </svg>
+        </v-col>
+      </v-row>
+    </v-container>
+    <v-container>
+      <v-row>
+        <v-img src="https://cdn.vuetifyjs.com/images/cards/server-room.jpg">
+          <v-col class="fill-height d-flex align-center justify-center">
+            <h1 class="display-4 black--text">Text</h1>
+          </v-col>
+        </v-img>
+      </v-row>
+    </v-container>
+    <v-container fluid class="newtriangle">
+      <v-row class="fill-height d-flex align-center">
+        <v-col class="">
+          <h1 class="display-2 white--text">
+            CSS polygon background with clip-path.
+          </h1>
+        </v-col>
+      </v-row>
+    </v-container>
+    <v-container>
+      <v-row>
+        <v-col class="fill-height d-flex justify-center">
+          <svg
+            width="120"
+            height="120"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <defs>
+              <radialGradient
+                id="Gradient"
+                cx="0.5"
+                cy="0.5"
+                r="0.5"
+                fx="0.25"
+                fy="0.25"
+              >
+                <stop offset="0%" stop-color="red" />
+                <stop offset="100%" stop-color="blue" />
+              </radialGradient>
+            </defs>
+
+            <rect
+              x="10"
+              y="10"
+              rx="15"
+              ry="15"
+              width="100"
+              height="100"
+              fill="url(#Gradient)"
+              stroke="black"
+              stroke-width="2"
+            />
+
+            <circle
+              cx="60"
+              cy="60"
+              r="50"
+              fill="transparent"
+              stroke="white"
+              stroke-width="2"
+            />
+            <circle cx="35" cy="35" r="2" fill="white" stroke="white" />
+            <circle cx="60" cy="60" r="2" fill="white" stroke="white" />
+            <text
+              x="38"
+              y="40"
+              fill="white"
+              font-family="sans-serif"
+              font-size="10pt"
+            >
+              (fx,fy)
+            </text>
+            <text
+              x="63"
+              y="63"
+              fill="white"
+              font-family="sans-serif"
+              font-size="10pt"
+            >
+              (cx,cy)
+            </text>
+          </svg>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.newtriangle {
+  width: 105vw;
+  height: 50vh;
+  background-image: radial-gradient(
+    circle farthest-corner at 7.5% 54.1%,
+    rgba(0, 0, 0, 1) 0%,
+    rgba(39, 0, 89, 1) 74.9%
+  );
+  -webkit-clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
+  clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
+}
+</style>

src/views/Playground.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <v-container fluid fill-height class="mr-0 pr-0 mt-0 pt-0">
+      <v-img
+        src="../assets/images/background.svg"
+        height="100vh"
+        width="auto"
+        contain="false"
+        position="bottom 0px right 0px"
+      ></v-img>
+    </v-container>
+    <v-container>
+      <div style="position: relative; z-index: 1">
+        <v-row>
+          <v-col>
+            <h1 class="display-2">Playground</h1>
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col>
+            <h1 class="display-2">Playground</h1>
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col>
+            <h1 class="display-2">Playground</h1>
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col> </v-col>
+        </v-row>
+      </div>
+    </v-container>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped></style>

src/views/Triangle.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <v-container fluid class="pa-0">
       <v-row class="d-flex newtriangle" style="position: absolute; z-index: 1;">
         <v-col
@@ -19,6 +20,8 @@
           </v-card>
         </v-col>
       </v-row>
+    </v-container>
+    <v-container>
       <v-row class="d-flex" style="position: relative; height: 50vh;"> </v-row>
       <v-row class="d-flex justify-space-around">
         <v-col class="d-flex justify-center" md="6" xs="12">
@@ -87,6 +90,7 @@
         <!-- <v-col md="1" xs="0"></v-col> -->
       </v-row>
     </v-container>
+  </div>
 </template>
 
 <script>

src/views/forms/LoginForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid class="d-flex align-center" style="height: 100vh;">
+  <v-container fluid fill-height class="d-flex align-center justify-center">
     <v-row>
       <v-col
         sm="6"