From d0775305a9ea4d892b4e15b887031a9861ad20b8 Mon Sep 17 00:00:00 2001
From: Daniel Austin <me@imdanielaustin.com>
Date: Thu, 16 May 2024 10:26:15 -0700
Subject: [PATCH] Update main.css

---
 assets/css/main.css | 244 ++++++++++++++++++--------------------------
 1 file changed, 97 insertions(+), 147 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index edc4b12..9ed08a4 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -245,93 +245,56 @@ box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.64);
    width: 320;
   }
 }
-.tile
-{
-    width: 640px;
-    height: 640px;
-    margin: 16px auto;
-    padding: auto;
-    background-color: #1e1e1e;
-    display: flex;
-    background-size: contain;
-    background-repeat: no-repeat;
-    position: relative;
-    cursor: pointer;
-    transition: all 0.168s ease-out;
-    box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.44);
-    overflow: hidden;
-    color: white;
-    font-family: 'Helvetica';
+.tiles {
+  display: ;
+  color: #000000;
+  cursor: pointer;
+  margin: 0 auto;
+  align-content: stretch;
+  text-align: center;
+  position: relative;
+  justify-items: center;
+  align-items: center;
+  justify-content: center;
+  }
 
 }
-.tile .text
-{
-    z-index: 104;
-    position:relative;
-    padding: auto;
-    height:calc(100% - 60px);
-}
 
-.tile img
-{
-  height: inherit;
-  width:100%;
-  position:absolute;
-  top:0; */
-  left:0; */
-  z-index:0; */
-  transition: all 0.168s ease-out;
+.tiles .img {
+  display: block;
+    color: #000000;
+    cursor: pointer;
+    margin: 0 auto;
+    align-content: middle;
+    text-align: center;
+    position: relative;
 }
 
-.tile h1
-{
- 
-  font-weight:300;
-  margin:auto;
-  text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
-}
-.tile h2
-{
-  font-weight:100;
-  margin:20px 0 0 0;
-  font-style:italic;
-   transform: translateX(200px);
-}
-.tile p
-{
-  font-weight:300;
-  margin:20px 0 0 0;
-  line-height: 25px;
-  opacity:0;
-  transform: translateX(-200px);
-  transition-delay: 0.2s;
-}
-.animate-text
-{
-  opacity:0;
-  transition: all 0.168s ease-in-out;
-}
-.tile:hover
-{
-background-color:transparent;
-box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.64);
-  transform:scale(1.05);
-}
-.tile:hover img
-{
-  opacity: 100;
+  .tiles a {
+  display: block;
+    color: #000000;
+    cursor: pointer;
+    margin: 0 auto;
+    align-content: middle;
+    text-align: center;
+    position: relative;
 }
-.tile:hover .animate-text
+.tile pre
 {
-  transform:translateX(0);
-  opacity:1;
-}
+        font-weight: 300;
+        padding: 0;
+        line-height: 24px;
+        transform: translateX(-200px);
+        transition-delay: 0.168s;
+        vertical-align: middle;
+    }
 
-.tile:hover span
-{
-  opacity:1;
-  transform:translateY(0px);
-}
+.youtube-video {
+aspect-ratio: 16 / 9;
+width: 100%;
+align-content: middle;
+
+} 
 
 .video-container { 
 position: relative; 
@@ -351,6 +314,25 @@ height: 100%;
 align-content: middle;
 }
 
+.tiles .img {
+  display: block;
+    color: #000000;
+    cursor: pointer;
+    margin: 0 auto;
+    align-content: middle;
+    text-align: center;
+    position: relative;
+}
+
+  .tiles a {
+  display: block;
+    color: #000000;
+    cursor: pointer;
+    margin: 0 auto;
+    align-content: middle;
+    text-align: center;
+    position: relative;
+}
 
 h1 , h2 , ul, ol, li, head {
     color: #ffffff;
@@ -594,11 +576,12 @@ background-color 0.3s;
     text-align: center;
     position: relative;
 }
+
 .tile
 {
     width: 640px;
     height: 640px;
-    margin: 16px auto;
+    margin: auto;
     padding: auto;
     background-color: #1e1e1e;
     display: flex;
@@ -681,7 +664,6 @@ box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.64);
   opacity:1;
   transform:translateY(0px);
 }
-    
 h1 , h2 , ul, ol, li, head {
     color: #ffffff;
     font-weight: bold;
@@ -940,7 +922,7 @@ background-color 0.3s;
 {
     width: 640px;
     height: 640px;
-    margin: 16px auto;
+    margin: auto;
     padding: auto;
     background-color: #1e1e1e;
     display: flex;
@@ -1278,12 +1260,12 @@ pre {
 }
 .tile
 {
-    width: 480px;
-    height: 480px;
-    margin: auto;
-    padding: auto;
+    width: 320;
+    height: 320;
+    margin: 16px auto;
+    padding:auto;
     background-color: #1e1e1e;
-    display: flex;
+    display: grid;
     background-size: contain;
     background-repeat: no-repeat;
     position: relative;
@@ -1293,76 +1275,44 @@ pre {
     overflow: hidden;
     color: white;
     font-family: 'Helvetica';
-
 }
 .tile .text
 {
     z-index: 104;
-    position:relative;
-    padding: auto;
+    position:absolute;
+    padding: 32px;
     height:calc(100% - 60px);
+    line-height:24px;
 }
 
-.tile img
-{
-  height: inherit;
-  width:100%;
-  position:absolute;
-  top:0; */
-  left:0; */
-  z-index:0; */
-  transition: all 0.168s ease-out;
+.tiles .img {
+  display: block;
+    color: #000000;
+    cursor: pointer;
+    margin: 0 auto;
+    align-content: middle;
+    text-align: center;
+    position: relative;
 }
 
-.tile h1
-{
- 
-  font-weight:300;
-  margin:auto;
-  text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
-}
-.tile h2
-{
-  font-weight:100;
-  margin:20px 0 0 0;
-  font-style:italic;
-   transform: translateX(200px);
-}
-.tile p
-{
-  font-weight:300;
-  margin:20px 0 0 0;
-  line-height: 25px;
-  opacity:0;
-  transform: translateX(-200px);
-  transition-delay: 0.2s;
-}
-.animate-text
-{
-  opacity:0;
-  transition: all 0.168s ease-in-out;
-}
-.tile:hover
-{
-background-color:transparent;
-box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.64);
-  transform:scale(1.05);
-}
-.tile:hover img
-{
-  opacity: 100;
-}
-.tile:hover .animate-text
-{
-  transform:translateX(0);
-  opacity:1;
+  .tiles a {
+  display: block;
+    color: #000000;
+    cursor: pointer;
+    margin: 0 auto;
+    align-content: middle;
+    text-align: center;
+    position: relative;
 }
-
-.tile:hover span
+.tile pre
 {
-  opacity:1;
-  transform:translateY(0px);
-}
+        font-weight: 300;
+        padding: 0;
+        line-height: 24px;
+        transform: translateX(-200px);
+        transition-delay: 0.168s;
+        vertical-align: middle;
+    }
 h1 , h2 , ul, ol, li, head {
     color: #ffffff;
     font-weight: bold;
@@ -1819,7 +1769,7 @@ footer a{
     color: #000000;
     text-align: center;
     padding: 8px;
-    font-weight: bold; */
+    /* font-weight: bold; */
     font-size: 16pt;
 }