Added more icons and more text, now changing how image widths work to make it all more responsive

css/footer.css

@@ -0,0 +1,68 @@
+@import url("https://fonts.googleapis.com/css2?family=Fira+Code&family=Montserrat:wght@400;600;700&display=swap");
+[class*="col-"] {
+  float: left;
+  padding: 15px 15px 0px;
+  position: relative; }
+
+/* For desktop: */
+.col-1 {
+  width: 8.33%; }
+
+.col-2 {
+  width: 16.66%; }
+
+.col-3 {
+  width: 25%; }
+
+.col-4 {
+  width: 33.33%; }
+
+.col-5 {
+  width: 41.66%; }
+
+.col-6 {
+  width: 50%; }
+
+.col-7 {
+  width: 58.33%; }
+
+.col-8 {
+  width: 66.66%; }
+
+.col-9 {
+  width: 75%; }
+
+.col-10 {
+  width: 83.33%; }
+
+.col-11 {
+  width: 91.66%; }
+
+.col-12 {
+  width: 100%; }
+
+@media (max-width: 767px) {
+  [class*="col-"] {
+    width: 95%; } }
+.site-footer {
+  overflow: hidden;
+  background-color: #f1f1f1;
+  padding: 15px 10px;
+  font-family: "Fira Code", monospace;
+  border-radius: 3px;
+  font-size: small; }
+  .site-footer h6 {
+    font-size: medium;
+    margin-top: 0px;
+    margin-bottom: 0px; }
+
+.footer-grid {
+  box-sizing: border-box;
+  position: relative; }
+
+.footer-grid::after {
+  content: "";
+  clear: both;
+  display: table; }
+
+/*# sourceMappingURL=footer.css.map */

css/main.css

@@ -44,12 +44,13 @@
   height: fit-content;
   padding: 10px;
   margin-top: 10px;
+  margin-bottom: 10px;
   font-family: "Montserrat", sans-serif;
   border-radius: 3px; }
 
 @media (min-width: 992px) {
   .page {
     width: 80%;
-    margin: 10px auto auto; } }
+    margin: 10px auto 10px; } }
 
 /*# sourceMappingURL=main.css.map */

images/distest.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 3371.4 3853.02"><defs><style>.cls-1{fill:none;}.cls-2{clip-path:url(#clip-path);}.cls-3{clip-path:url(#clip-path-2);}</style><clipPath id="clip-path" transform="translate(-484.32 -164.33)"><rect id="SVGID" class="cls-1" x="182.67" y="121.07" width="1999.33" height="3484.89"/></clipPath><clipPath id="clip-path-2" transform="translate(-484.32 -164.33)"><rect id="SVGID-2" data-name="SVGID" class="cls-1" x="2181.58" y="164.33" width="1685.7" height="3858.67"/></clipPath></defs><g class="cls-2"><path d="M3147.2,3468.08V825.27a93.39,93.39,0,0,0-1.89-18.69,91.51,91.51,0,0,0-3.47-11.44c-.68-2-1.1-4.19-1.93-6.19a89.93,89.93,0,0,0-6.38-11.93c-.83-1.4-1.4-2.91-2.34-4.27a95.53,95.53,0,0,0-11.78-14.34L2553.32,192.32A95.53,95.53,0,0,0,2539,180.54c-1.36-.91-2.87-1.48-4.27-2.34a96,96,0,0,0-11.93-6.38c-2-.83-4.12-1.21-6.19-1.93a91.51,91.51,0,0,0-11.44-3.47,95.74,95.74,0,0,0-18.65-1.85H598.78A94.37,94.37,0,0,0,504.39,259V3468.08a94.38,94.38,0,0,0,94.39,94.38h2454A94.38,94.38,0,0,0,3147.2,3468.08ZM2580.88,486.84l244,244h-244Zm377.55,2886.85H693.16V353.34h1699V825.27a94.37,94.37,0,0,0,94.39,94.38h471.93Z" transform="translate(-484.32 -164.33)"/><path d="M1475.89,1136.06l-310.8,310.8-122-122A94.37,94.37,0,0,0,909.61,1458.3l188.77,188.77a94.35,94.35,0,0,0,133.46,0l377.55-377.55a94.4,94.4,0,0,0-133.5-133.5Z" transform="translate(-484.32 -164.33)"/><path d="M1475.89,1891.15l-310.8,310.79-122-122a94.37,94.37,0,1,0-133.46,133.46l188.77,188.78a94.34,94.34,0,0,0,133.46,0l377.55-377.54a94.4,94.4,0,0,0-133.5-133.5Z" transform="translate(-484.32 -164.33)"/><path d="M1475.89,2646.24,1165.09,2957l-122-122a94.37,94.37,0,1,0-133.46,133.46l188.77,188.77a94.32,94.32,0,0,0,133.46,0l377.55-377.54a94.4,94.4,0,0,0-133.5-133.5Z" transform="translate(-484.32 -164.33)"/><path d="M1825.8,1202.81a94.37,94.37,0,0,0,94.38,94.39h755.09a94.39,94.39,0,1,0,0-188.77H1920.18A94.36,94.36,0,0,0,1825.8,1202.81Z" transform="translate(-484.32 -164.33)"/><path d="M1920.18,1674.74h377.55a94.39,94.39,0,0,0,0-188.77H1920.18a94.39,94.39,0,0,0,0,188.77Z" transform="translate(-484.32 -164.33)"/><path d="M2675.27,1863.51H1920.18a94.39,94.39,0,0,0,0,188.78h755.09a94.39,94.39,0,0,0,0-188.78Z" transform="translate(-484.32 -164.33)"/><path d="M1920.18,2429.83h377.55a94.39,94.39,0,0,0,0-188.77H1920.18a94.39,94.39,0,0,0,0,188.77Z" transform="translate(-484.32 -164.33)"/><path d="M2675.27,2618.6H1920.18a94.39,94.39,0,0,0,0,188.77h755.09a94.39,94.39,0,1,0,0-188.77Z" transform="translate(-484.32 -164.33)"/><path d="M2297.73,2996.15H1920.18a94.39,94.39,0,0,0,0,188.77h377.55a94.39,94.39,0,0,0,0-188.77Z" transform="translate(-484.32 -164.33)"/></g><g class="cls-3"><path d="M3460.79,164.33H879.26c-217.7,0-394.94,177.24-394.94,396.86V3165.84c0,219.62,177.24,396.86,394.94,396.86H3063.92l-102.1-356.41,246.59,229.26,233.11,215.77,414.2,366V561.19C3855.72,341.57,3678.48,164.33,3460.79,164.33Zm-743.64,2516s-69.35-82.84-127.15-156.05c252.38-71.28,348.7-229.26,348.7-229.26-79,52-154.12,88.62-221.55,113.67-96.32,40.45-188.8,67.43-279.34,82.84-184.95,34.68-354.48,25-499-1.93-109.81-21.19-204.21-52-283.2-82.84-44.31-17.34-92.47-38.53-140.63-65.5-5.78-3.85-11.56-5.78-17.34-9.63a26.89,26.89,0,0,1-7.71-5.78c-34.67-19.27-53.94-32.75-53.94-32.75s92.47,154.12,337.14,227.33c-57.79,73.2-129.08,159.9-129.08,159.9-425.75-13.49-587.58-292.83-587.58-292.83,0-620.34,277.42-1123.16,277.42-1123.16,277.41-208.06,541.35-202.28,541.35-202.28l19.26,23.11c-346.77,100.18-506.67,252.38-506.67,252.38s42.38-23.12,113.66-55.87c206.14-90.55,369.89-115.59,437.32-121.37,11.56-1.93,21.19-3.85,32.75-3.85a1629.78,1629.78,0,0,1,389.16-3.86c183,21.19,379.52,75.14,579.88,184.95,0,0-152.2-144.49-479.7-244.67l27-30.82s263.93-5.78,541.35,202.28c0,0,277.41,502.82,277.41,1123.16C3306.66,2387.53,3142.91,2666.87,2717.15,2680.36Zm-895.83-899.68c-109.81,0-196.5,96.32-196.5,213.84s88.62,213.84,196.5,213.84c109.81,0,196.51-96.32,196.51-213.84,1.92-117.52-86.7-213.84-196.51-213.84m703.18,0c-109.81,0-196.5,96.32-196.5,213.84s88.62,213.84,196.5,213.84c109.81,0,196.5-96.32,196.5-213.84s-86.69-213.84-196.5-213.84" transform="translate(-484.32 -164.33)"/></g></svg>

images/scoresaver.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 4096 4096"><defs><style>.cls-1{fill:url(#linear-gradient);}.cls-2,.cls-3{fill:#fff;fill-rule:evenodd;}.cls-3{stroke:#fff;}</style><linearGradient id="linear-gradient" y1="2048" x2="4096" y2="2048" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#137bf6"/><stop offset="0.07" stop-color="#1c78f3"/><stop offset="0.19" stop-color="#366eea"/><stop offset="0.35" stop-color="#5f5fdc"/><stop offset="0.53" stop-color="#984ac8"/><stop offset="0.54" stop-color="#9c49c7"/><stop offset="1" stop-color="#fa152d"/></linearGradient></defs><rect class="cls-1" width="4096" height="4096"/><g id="Version-2"><g id="Home---SR"><g id="Group-Copy-2"><g id="Group-3-Copy-4"><g id="bt-4"><g id="ico-cloud-download"><path id="Path" class="cls-2" d="M3170.51,1141.41c395.66,0,721.49,328.25,721.49,726.84,0,410.31-325.83,726.84-721.49,726.84H866.4c-360.75,0-663.31-246.19-663.31-621.34,0-363.42,302.56-656.5,663.31-656.5H971.13C982.77,989,1250.42,731.09,1576.25,731.09c151.28,0,290.92,58.62,395.66,152.4,104.73-222.74,314.19-363.42,570.21-363.42,337.47,0,616.75,281.36,628.39,621.34Z"/><polygon id="Path-3" class="cls-3" points="1701.55 2191.14 2430.28 2191.14 2430.28 2857.31 2739.22 2857.31 2047.55 3574.48 1355.88 2857.31 1701.55 2857.31 1701.55 2191.14"/></g></g></g></g></g></g></svg>

index.html

@@ -8,6 +8,7 @@
 
     <link rel="stylesheet" href="css/main.css">
     <link rel="stylesheet" href="css/masonry.css">
+    <link rel="stylesheet" href="css/footer.css">
 </head>
 <body>
 <header class="header">
@@ -24,9 +25,17 @@
 <div class="page">
     <div class="grid">
         <!--Distest-->
-        <div class="grid-item grid-item--tall4">
+        <div class="grid-item grid-item--image">
-            Distest <br>
+            <img class="grid-img" src="images/distest.svg" alt="CodeDay SD Logo" width="230" height="230">
-            One of my favorite Python projects, my attempt at implementing a test suite for discord bots.
+            <div class="service-wrapper-inner title">
+                <h2>Distest</h2>
+                <div class="description">
+                    <p>
+                        One of my favorite Python projects, a tool to write automated integration tests for discord bots.
+                    </p>
+                </div>
+            </div>
+            <div class="service-overlay title"></div>
         </div>
         <!--CodeDay-->
         <div class="grid-item grid-item--image">
@@ -55,8 +64,15 @@
             <div class="service-overlay title"></div>
         </div>
         <!--ScoreSaver Installer-->
-        <div class="grid-item">
+        <div class="grid-item grid-item--image">
-            ScoreSaber Installer
+            <img src="images/scoresaver.svg" alt="Red to Blue Gradient w/ White Download Icon" width="230" height="230">
+            <div class="service-wrapper-inner title">
+                <h2>ScoreSaver</h2>
+                <div class="description">
+                    <p>SRND is an educational nonprofit that works to provide CS education to high school and college students and to increase diversity in tech.</p>
+                </div>
+            </div>
+            <div class="service-overlay title"></div>
         </div>
         <!--Foresight-->
         <div class="grid-item grid-item--image">
@@ -73,6 +89,33 @@
     </div>
 </div>
 
+<!-- Site footer -->
+<footer class="site-footer">
+    <div class="footer-grid">
+        <div class="col-8">
+            <h6>Jake Cover</h6>
+            <p class="text-justify">
+                Made by Jake Cover, a CS student who really needs to find something witty and interesting to put here soon.
+                <br>
+                Checklist by Arthur Shlain from the Noun Project
+            </p>
+        </div>
+        <div class="col-3">
+            <h6>Links and Stuff</h6>
+            <ul class="footer-links">
+                <li><a href="index.html">Home</a></li>
+                <li><a href="contact.html">Contact</a></li>
+                <li><a href="about.html">About</a></li>
+                <li><a href="resume.html">Resume</a></li>
+                <li><a href="https://github.com/JakeCover">GitHub</a></li>
+            </ul>
+        </div>
+    </div>
+    <hr>
+    <div class="copyright-text">Copyright &copy; 2020 All Rights Reserved by Jake Cover</div>
+</footer>
+
+
 <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
 <script src="scripts/masonry_conf.js"></script>
 <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>

sass/footer.sass

@@ -0,0 +1,27 @@
+@import "breakpoint-helpers"
+@import "colors"
+@import "grid-helpers"
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Montserrat:wght@400;600;700&display=swap')
+
+.site-footer
+  overflow: hidden
+  background-color: $colorblind-fg
+  padding: 15px 10px
+  font-family: "Fira Code", monospace
+  border-radius: 3px
+  font-size: small
+
+  h6
+    font-size: medium
+    margin-top: 0px
+    margin-bottom: 0px
+
+
+.footer-grid
+  box-sizing: border-box
+  position: relative
+
+.footer-grid::after
+  content: ""
+  clear: both
+  display: table

sass/grid-helpers.sass

@@ -0,0 +1,48 @@
+@import "breakpoint-helpers"
+
+[class*="col-"]
+  float: left
+  padding: 15px 15px 0px
+  position: relative
+
+/* For desktop: */
+.col-1
+  width: 8.33%
+
+.col-2
+  width: 16.66%
+
+.col-3
+  width: 25%
+
+.col-4
+  width: 33.33%
+
+.col-5
+  width: 41.66%
+
+.col-6
+  width: 50%
+
+.col-7
+  width: 58.33%
+
+.col-8
+  width: 66.66%
+
+.col-9
+  width: 75%
+
+.col-10
+  width: 83.33%
+
+.col-11
+  width: 91.66%
+
+.col-12
+  width: 100%
+
+
+@include respond-below(sm)
+  [class*="col-"]
+    width: 95%

sass/main.sass

@@ -49,6 +49,7 @@
   height: fit-content
   padding: 10px
   margin-top: 10px
+  margin-bottom: 10px
   font-family: 'Montserrat', sans-serif
   border-radius: 3px
 
@@ -56,6 +57,6 @@
 @include respond-above(md)
   .page
     width: 80%
-    margin: 10px auto auto
+    margin: 10px auto 10px
 
 

sass/masonry.sass

@@ -81,7 +81,6 @@
 .grid-item--tall4
   height: 400px
 
-
 .grid-item--width2
   background-color: #81d4fa
   width: 490px