From c69fe74067e7d466791643282ef61234a77a2ba9 Mon Sep 17 00:00:00 2001
From: Chris <bsod@zom.bi>
Date: Fri, 30 Oct 2020 21:12:15 +0100
Subject: [PATCH 1/2] move clear:both to collection_container

---
 css/projects.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/css/projects.css b/css/projects.css
index cfbf850..d253339 100644
--- a/css/projects.css
+++ b/css/projects.css
@@ -120,7 +120,6 @@ header {
 @media only screen and (min-width: 1000px) {
     div#project_margin {
         margin-top: 250px;
-        clear: both;
     }
     video {
         margin-top: 230px;
@@ -172,6 +171,7 @@ header {
 ================*/
 
 div.collection_container {
+    clear: both;
     display: flex;
     flex-wrap: wrap;
 }

From 0f3d3db46ed128fc23ddaf22cc75fcf095883d24 Mon Sep 17 00:00:00 2001
From: Chris <bsod@zom.bi>
Date: Fri, 30 Oct 2020 22:27:38 +0100
Subject: [PATCH 2/2] update collection page design

---
 about.php        |  4 ++--
 collections.php  | 10 +++-------
 css/projects.css | 37 +++++++++++++++++++++----------------
 3 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/about.php b/about.php
index 02dbc73..8b0b6ad 100644
--- a/about.php
+++ b/about.php
@@ -1,5 +1,5 @@
 <?php include('header.tpl'); ?>
-
+<div id="content_margin">
     <video autoplay playsinline nofullscreen nodownload autoplay loop mute style="pointer-events: none" src="video/Heart.m4v" width="80%" height="auto" ></video>
 
     <div class="home-about-textbox parallax--box">
@@ -16,5 +16,5 @@
             <a href="contacts" class="button button-dark">Order</a>
         </div>
     </section> -->
-
+</div>
 <?php include('footer.tpl'); ?>
\ No newline at end of file
diff --git a/collections.php b/collections.php
index f423a57..414ccf8 100644
--- a/collections.php
+++ b/collections.php
@@ -1,5 +1,5 @@
 <?php include('header.tpl'); ?>
-<div id="project_margin">
+<div id="content_padding">
 <?php include('projects_data/project_items.php'); ?>
 <div class="collection_container">
 <?php
@@ -10,12 +10,8 @@
         <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>
+            <a class="col-img-desc" href="#">
+            </a>
           </div>
           <div class="col-desc">
             ' . $c['collection_description'] . '
diff --git a/css/projects.css b/css/projects.css
index d253339..4ce69e4 100644
--- a/css/projects.css
+++ b/css/projects.css
@@ -114,15 +114,13 @@ h1, h2, h3, h4, h5 {
 header {
     background: rgba(0,0,0,0.4);
     font-family: 'IM Fell English SC';
-	margin: 0px;
+    margin: 0px;
+    border-bottom: 2px solid #f9f9ed;
 }
 
 @media only screen and (min-width: 1000px) {
-    div#project_margin {
-        margin-top: 250px;
-    }
-    video {
-        margin-top: 230px;
+    div#content_padding {
+        padding-top: 120px;
     }
 }
 
@@ -178,12 +176,18 @@ div.collection_container {
 
 div.collection {
     margin: 4px;
-    margin-bottom: 30px;
+    margin-bottom: 50px;
 }
 
 div.collection h1 {
-    margin: 10px;
+    margin-top: 40px;
+    margin-bottom: 30px;
+    margin-left: auto;
+    margin-right: auto;
     text-align: center;
+    display: block;
+    width: 350px;
+    font-size: 36pt;
 }
 
 div.collection div.col-desc {
@@ -202,27 +206,28 @@ div.collection div.col-desc {
 
 .col-img-container {
   position: relative;
-  width: 350px;
-  height: 350px;
+  width: 220px;
+  height: 220px;
 }
 
 .col-image {
     display: block;
-    width: 350px;
-    height: 350px;
+    width: 220px;
+    height: 220px;
     border-radius: 50%;
-    border: 3px solid #f9f9ed;
+    /*border: 2px solid #f9f9ed; */
 }
-  
+
 .col-img-desc {
+    display: block;
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     background-color: rgba(51, 51, 51, 0.4);
     overflow: hidden;
-    width: 350px;
-    height: 350px;
+    width: 220px;
+    height: 220px;
     opacity: 0;
     border-radius: 50%;
     transition: .5s ease;