nicwands · nicwands · Aug 23, 2021 · Aug 23, 2021 · Aug 23, 2021 · Aug 24, 2021
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# Rumfoords
+# Code Study Boilerplate
 
 **Local Development**
 

diff --git a/app.html b/app.html
@@ -1,10 +1,3 @@
-<!--
-    /* WEBSITE CREDITS */
-
-    Website Design / Development: CTHDRL
-    Contact: build@cthdrl.co
-    Site: https://cthdrl.co
--->
 <!DOCTYPE html>
 <html {{ HTML_ATTRS }}>
     <head {{ HEAD_ATTRS }}>

diff --git a/assets/scss/_base.scss b/assets/scss/_base.scss
@@ -1,5 +1,5 @@
 @import 'vars';
-@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,700;1,400;1,700&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
 
 html {
     font-size: 16px;
@@ -12,7 +12,7 @@ body {
     --black: #000000;
     --white: #ffffff;
 
-    --font-sans: 'Poppins', sans-serif;
+    --font-sans: 'IBM Plex Sans', sans-serif;
     --font-serif: 'EB Garamond', serif;
 
     @include fontSize(16px);
@@ -107,20 +107,15 @@ a {
     path {
         transition: fill 0.3s;
     }
-
-    @include hover {
-        color: var(--white);
-
-        path {
-            fill: var(--white);
-        }
+    &:hover {
+        text-decoration: underline;
     }
 }
 
 .contained {
     padding-right: var(--margin);
     padding-left: var(--margin);
-    // max-width: 1380px;
+    max-width: 1200px;
     margin-right: auto;
     margin-left: auto;
 }

diff --git a/components/StudyBody.vue b/components/StudyBody.vue
@@ -0,0 +1,17 @@
+<template>
+    <section class="study-body"></section>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss">
+.study-body {
+    border: 1px solid var(--black);
+    padding: 20px;
+    box-sizing: border-box;
+    margin-top: 20px;
+    position: relative;
+}
+</style>
diff --git a/components/svg/facebook-clipped.vue b/components/svg/facebook-clipped.vue
@@ -0,0 +1,47 @@
+<template>
+    <svg
+        ref="svgEl"
+        width="28"
+        height="29"
+        viewBox="0 0 28 29"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <defs>
+            <clipPath
+                id="facebookClip"
+                clipPathUnits="objectBoundingBox"
+                :transform="clipTransform"
+            >
+                <path
+                    d="M27.7134 14.5664C27.7134 6.91357 21.5096 0.709717 13.8567 0.709717C6.20386 0.709717 0 6.91357 0 14.5664C0 21.4826 5.06717 27.2153 11.6916 28.2548V18.5719H8.17329V14.5664H11.6916V11.5136C11.6916 8.04078 13.7604 6.12249 16.9255 6.12249C18.4411 6.12249 20.0273 6.39313 20.0273 6.39313V9.80318H18.28C16.5588 9.80318 16.0218 10.8714 16.0218 11.9683V14.5664H19.8649L19.2505 18.5719H16.0218V28.2548C22.6462 27.2153 27.7134 21.4826 27.7134 14.5664Z"
+                />
+            </clipPath>
+        </defs>
+    </svg>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            svg: {},
+        }
+    },
+    mounted() {
+        this.svg = this.$refs.svgEl
+    },
+    computed: {
+        xScale() {
+            return 1 / parseInt(this.svg.getAttribute('width'))
+        },
+        yScale() {
+            return 1 / parseInt(this.svg.getAttribute('height'))
+        },
+        clipTransform() {
+            if (!this.svg.getAttribute) return ''
+            return `scale(${this.xScale}, ${this.yScale})`
+        },
+    },
+}
+</script>
diff --git a/components/svg/social/social-facebook.vue b/components/svg/social/social-facebook.vue
@@ -1,5 +1,6 @@
 <template>
     <svg
+        id="facebook"
         width="28"
         height="29"
         viewBox="0 0 28 29"
@@ -11,4 +12,4 @@
             fill="white"
         />
     </svg>
-</template>
+</template>
diff --git a/components/svg/social/social-instagram.vue b/components/svg/social/social-instagram.vue
@@ -1,5 +1,6 @@
 <template functional>
     <svg
+        id="instagram"
         width="29"
         height="29"
         viewBox="0 0 29 29"

diff --git a/components/svg/social/social-linkedin.vue b/components/svg/social/social-linkedin.vue
@@ -1,5 +1,6 @@
 <template functional>
     <svg
+        id="linkedIn"
         class="svg-social-linkedin"
         xmlns="http://www.w3.org/2000/svg"
         width="21.639"

diff --git a/components/svg/social/social-mail.vue b/components/svg/social/social-mail.vue
@@ -1,5 +1,6 @@
 <template functional>
     <svg
+        id="mail"
         class="svg-social-mail"
         xmlns="http://www.w3.org/2000/svg"
         width="22.475"

diff --git a/components/svg/social/social-spotify.vue b/components/svg/social/social-spotify.vue
@@ -1,5 +1,6 @@
 <template functional>
     <svg
+        id="spotify"
         class="svg-social-spotify"
         xmlns="http://www.w3.org/2000/svg"
         width="21.622"

diff --git a/components/svg/social/social-twitter.vue b/components/svg/social/social-twitter.vue
@@ -1,5 +1,6 @@
 <template functional>
     <svg
+        id="twitter"
         width="29"
         height="23"
         viewBox="0 0 29 23"

diff --git a/pages/index.vue b/pages/index.vue
@@ -1,8 +1,23 @@
 <template>
     <main class="front-page">
         <div class="contained">
-            <h1>CODE STUDY X.0</h1>
-            <p>This is some paragraph text.</p>
+            <section class="info">
+                <!-- STUDY TITLE -->
+                <h1>CODE STUDY 1.0 - VHS IMAGE</h1>
+                <!-- DESCRIPTION -->
+                <p>
+                    A reusable component for adding a VHS effect to images and
+                    video
+                </p>
+                <!-- LINK -->
+                <a
+                    href="https://github.com/nicwands/code-study-boilerplate/blob/clipped-video/components/Clippy.vue"
+                    target="_blank"
+                    >SOURCE</a
+                >
+            </section>
+
+            <study-body />
         </div>
     </main>
 </template>
@@ -13,5 +28,18 @@ export default {}
 
 <style lang="scss">
 .front-page {
+    > .contained {
+        height: 100%;
+        padding-top: var(--margin);
+        padding-bottom: var(--margin);
+        box-sizing: border-box;
+        grid-template-rows: auto 1fr;
+        display: grid;
+
+        h1 {
+            margin: 0;
+            font-size: 20px;
+        }
+    }
 }
 </style>
diff --git a/static/fonts/fonts.css b/static/fonts/fonts.css
@@ -10,25 +10,3 @@
         800 - Extra Bold (Ultra Bold)
         900 - Black (Heavy)
 */
-
-@font-face {
-    font-family: 'SweetSans';
-    font-style: normal;
-    font-weight: 400;
-    src: url('SweetSans-Regular.woff2') format('woff2'),
-        url('SweetSans-Regular.woff') format('woff');
-}
-@font-face {
-    font-family: 'SweetSans';
-    font-style: normal;
-    font-weight: 700;
-    src: url('SweetSans-Medium.woff2') format('woff2'),
-        url('SweetSans-Medium.woff') format('woff');
-}
-@font-face {
-    font-family: 'WT-Monarch';
-    font-style: normal;
-    font-weight: 400;
-    src: url('WT-Monarch.woff2') format('woff2'),
-        url('WT-Monarch.woff') format('woff');
-}
diff --git a/static/videos/shovel.mp4 b/static/videos/shovel.mp4
diff --git a/store/browser.js b/store/browser.js
@@ -60,12 +60,12 @@ export const actions = {
             context.commit('FONTS_LOADING')
             await loadFonts([
                 {
-                    name: 'SweetSans',
+                    name: 'EB Garamund',
                     weights: [400, 700],
                 },
                 {
-                    name: 'WT-Monarch',
-                    weights: [400],
+                    name: 'Poppins',
+                    weights: [300, 400, 700],
                 },
             ])
             context.commit('FONTS_LOADED')