Add new style

1 files changed, 46 insertions, 23 deletions

diff --git a/static/style.css b/static/style.css
index 1f27ceb..ad1b569 100644
--- a/static/style.css
+++ b/static/style.css
@@ -68,6 +68,7 @@ header {
 

 .logo-w-name {

     display: flex;

+    flex-direction: column;

 }

 

 .logo {

@@ -84,7 +85,6 @@ header {
 }

 

 h1 {

-  display: none;

   font-size: 2.5rem;

   color: rgb(143, 143, 143);

   /* padding-left: 1rem; */

@@ -98,10 +98,8 @@ b {
 

 .main-nav-position {

     display: flex;

-    justify-content: right;

+    justify-content: left;

     flex-grow: 1;

-    padding-right: 2rem;

-    border-right: .5rem solid rgb(196, 196, 196);

 }

 

 .main-nav {

@@ -112,6 +110,14 @@ b {
     font-size: .8rem;

 }

 

+.main-nav ul {

+  display: inline;

+}

+

+.main-nav li {

+  display: inline;

+}

+

 .toggler, .hamburger {

     display: none;

 }

@@ -132,6 +138,20 @@ b {
   grid-template-columns: 25rem 1fr;

 }

 

+.home-grid {

+  --min-column-size: 20rem;

+  display: grid;

+  gap: 1.5rem;

+  grid-template-columns:

+      repeat(auto-fit, minmax(min(var(--min-column-size), 100%), 1fr));

+}

+

+.project-grid {

+  display: flex;

+  flex-wrap: wrap;

+  gap: 1rem;

+}

+

 .side-info {

 	min-width: 20rem;

 	max-width: 30%;

@@ -163,9 +183,8 @@ iframe {
 

 .thumbnail img {

   width: fit-content;

-  aspect-ratio: 4/3;

+  aspect-ratio: 1/1;

   object-fit: cover;

-  display: block;

   position: relative;

   z-index: -1;

 }

@@ -175,23 +194,27 @@ iframe {
 }

 

 .title {

-  z-index: -1;

-  opacity: 0;

-  display: block;

-	position: absolute;

-	top: 0;

-	left: 0;

-	padding: 8rem 1rem;

-	text-align: center;

+	align-self: center;

+  min-width: 100%;

+  text-align: center;

 	font-weight: bold;

 	color: white;

+}

+

+.title-bg {

+  opacity: 0;

+  z-index: -1;

+  display: flex;

+  position: absolute;

+  top: 0;

+  left: 0;

 	background-color: rgba(27, 27, 27, 0.726);

-	min-width: 100%;

-	min-height: 100%;

+  min-width: 100%;

+  min-height: 100%;

   transition: all 0.3s ease-in-out;

 }

 

-.thumbnail:hover .title {

+.thumbnail:hover .title-bg {

 	opacity: 100%;

 }

 

@@ -259,10 +282,10 @@ blockquote {
 }

 

 @media screen and (max-width: 82rem) {

-  main {

+/*   main {

     margin-left: 5rem;

     margin-right: 5rem;

-  }

+  } */

 	.uneven-column {

 		flex-direction: column-reverse;

 	}

@@ -276,10 +299,10 @@ blockquote {
 }

 

 @media screen and (max-width: 70rem) {

-  main {

+/*   main {

     margin-left: 1rem;

     margin-right: 1rem;

-  }

+  } */

 }

 

 @media screen and (min-width: 45rem) {

@@ -289,10 +312,10 @@ blockquote {
 }

 

 @media screen and (max-width: 45rem) {

-    main {

+/*     main {

       margin-left: 0.5rem;

       margin-right: 0.5rem;

-    }

+    } */

     nav {

       display: none;

     }