From 0ade732357a1992eabe8d60f589ea2ed23076ac6 Mon Sep 17 00:00:00 2001
From: Chris <bsod@zom.bi>
Date: Fri, 30 Oct 2020 01:12:05 +0100
Subject: [PATCH] make images round

---
 collections.php  | 21 ++++++++-------
 css/projects.css | 26 ++++++++++++------
 css/styles.css   | 68 ------------------------------------------------
 3 files changed, 29 insertions(+), 86 deletions(-)

diff --git a/collections.php b/collections.php
index 8f13f69..cfc8483 100644
--- a/collections.php
+++ b/collections.php
@@ -8,18 +8,19 @@
     $html = '
       <div class="collection">
         <h1>' . $c["name"] . '</h1>
-
-        <div class="col-img-container">
-          <img class="col-image" src="projects_data/img/' . $c['preview_image_url'] . '" alt="example image for ' . $c['name'] .'">
-          <div class="col-img-desc">
-            <div>
-              <p>' . $c['name'] . '</p>
-              <a href="show_collection.php?id=' . $index .'" class="button button-accent button-small">Details</a>
+        <div class="flexbox-col-img">
+          <div class="col-img-container">
+            <img class="col-image" src="projects_data/img/' . $c['preview_image_url'] . '" alt="example image for ' . $c['name'] .'">
+            <div class="col-img-desc">
+              <div>
+                <p>' . $c['name'] . '</p>
+                <a href="show_collection.php?id=' . $index .'" class="button button-accent button-small">Details</a>
+              </div>
             </div>
           </div>
-        </div>
-        <div class="col-desc">
-          ' . $c['collection_description'] . '
+          <div class="col-desc">
+            ' . $c['collection_description'] . '
+          </div>
         </div>
       </div>
     ';
diff --git a/css/projects.css b/css/projects.css
index 37818cc..0f99453 100644
--- a/css/projects.css
+++ b/css/projects.css
@@ -54,8 +54,6 @@ div.collection_container {
 }
 
 div.collection {
-    background-color: #1f1f1f;
-    border: #444 2px solid;
     margin: 4px;
 }
 
@@ -82,6 +80,7 @@ div.collection h1 {
 }
 
 div.collection div.col-desc {
+    display: none;
     padding: 10px;
     text-align: justify;
 }
@@ -92,14 +91,23 @@ section.cta h2 {
 
 /* Slide in stuff */
 
+.flexbox-col-img {
+    display: flex;
+    justify-content: center;
+}
+
 .col-img-container {
-    position: relative;
+  position: relative;
+  width: 350px;
+  height: 350px;
 }
 
 .col-image {
     display: block;
-    width: 100%;
-    height: auto;
+    width: 350px;
+    height: 350px;
+    border-radius: 50%;
+    box-shadow: 0px 0px 15px 4px #9c8e8e;
 }
   
 .col-img-desc {
@@ -109,13 +117,15 @@ section.cta h2 {
     right: 0;
     background-color: rgba(51, 51, 51, 0.4);
     overflow: hidden;
-    width: 100%;
-    height: 0;
+    width: 350px;
+    height: 350px;
+    opacity: 0;
+    border-radius: 50%;
     transition: .5s ease;
 }
   
 .col-img-container:hover .col-img-desc {
-    height: 50%;
+    opacity: 1;
 }
   
 .col-img-desc div {
diff --git a/css/styles.css b/css/styles.css
index 46352b8..d0aea5b 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -50,74 +50,6 @@ video {
     height: auto;
   }
 
-/* Column system
-=================== */
-
-[class^="col-"] {
-    width: 100%;
-    margin-top: 1em;
-}
-
-[class^="col-"]:first-child {
-    margin-top: 0;
-}
-
-.col-1 {
-    width: 33.333334%;
-    float: left;
-}
-
-@media (min-width: 40rem) {
-    [class^="col-"] {
-        float: left;
-        padding: 0 0.5em;
-        margin-top: 0;
-    }
-
-    [class^="col-"]:first-child {
-        padding-left: 0;
-    }
-
-    [class^="col-"]:last-child {
-        padding-right: 0;
-    }
-
-    .col-3 {
-        width: 50%;
-        color: #f9f9ed;
-    }
-
-    .col-1 {
-        width: 16.6666%;
-    }
-}
-
-.column {
-    float: left;
-    width: 33.33%;
-    display: none; /* Hide all elements by default */
-  }
-
-.row {
-    margin: 10px -16px;
-  }
-
-
-.row,
-.row > .column {
-  padding: 0.8px;
-}
-
-.row:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-
-.show {
-    display: block;
-  }
-
 /* typography
 =================== */