From 081ad72e4ed7fee290a1cfb19bfddfc5e3e27584 Mon Sep 17 00:00:00 2001
From: equilet <2237372+equilet@users.noreply.github.com>
Date: Fri, 9 Dec 2022 14:44:46 -0800
Subject: [PATCH] cleaned up layout with flex containers, colorization, etc.

---
 style-colors.css |  40 +++++++++------
 style-layout.css | 126 ++++++++++++++++++++++++++++++++---------------
 2 files changed, 111 insertions(+), 55 deletions(-)

diff --git a/style-colors.css b/style-colors.css
index dd7cd45..63caeba 100644
--- a/style-colors.css
+++ b/style-colors.css
@@ -2,42 +2,54 @@ body {
 	color:#555;
 	background:#163345;
 }
+
 a {
 	color: #ccccff;
 }
+
 header a {
 	color:#999;
 }
+
+header.nav a {
+	color:#000;
+	
+}
+
 div p {
 	color:#bef5eb;
 }
+
+ul li { 
+	color:#2fa;
+}
+
 h1 { 
 	color:#36b1d9;
 }
+
 h2 { 
 	color:#d871d7;
 }
-footer.post-footer a {
-	color:#666;
+
+h3 {
+	color:#1e6b5c;
 }
-.post-list-date { 
-    	color:#3a84a0;
- }
 
 #jeffrey-m-lubow {
 	color:#d87107;
 }
-header.nav a {
-	color:#fff;
-	float:right;
-	padding-right:40px;
-	padding-bottom:40px;
-	padding-left:40px;
+
+.post-list-date { 
+    color:#3a84a0;
 }
- .post-list-heading { 
+
+.post-list-heading { 
 	color:#d871d7;
 	/*color:#fff;*/
 }
-ul li { 
-	color:#2fa;
+
+footer.post-footer a {
+	color:#666;
 }
+
diff --git a/style-layout.css b/style-layout.css
index 2c6003f..f197f1e 100644
--- a/style-layout.css
+++ b/style-layout.css
@@ -4,47 +4,79 @@ body {
 	font-size: 0.8em;
 	letter-spacing: 0.1px;
 	margin:0 auto;
-	max-width:700px;
+	margin-left: 10px;
 }
 
 header {
 	margin:2em 0;
 }
 
-
-
 footer {
 	margin:2em 0;
-	text-align:center;
+	text-align:left;
 }
 
-header a {
-	text-decoration:none;
+/* --------------------------------------------------------------- */
+/* flex containers ----------------------------------------------- */
+
+/* this is the main container that holds the children */
+.flex-container {
+	display: flex;
+	flex-row: row wrap;
+	gap: 12px;
 }
 
-.home p {
+.nav {
+	display: inline-block;
+	order: 1;
 }
 
-a {
+.content {
+	max-width: 700px;
+	display: inline-block;
+	margin-left: 0px;
+	order: 2;
+}
+
+/* --------------------------------------------------------------- */
+
+p a {
+	text-decoration:none;
 	font-weight:bold;
 }
-img {
-   	max-width: 700px;
+
+a:hover { 
+	color: white; 
+}
+
+/* look into why this .home selector works */
+.home h2 { 
+	font-family: 'Poiret One', cursive;
+	font-size: 2.4em;
 }
 
 h1 { 
 	font-family: 'Poiret One', cursive;
-	margin-top:2em;
+	font-size: 2.4em;
 	margin-bottom:1em;
 }
-h1 {
-	font-size: 2.4em;
+
+.home .post-list-date {
+	font-weight:normal;
+	font-size: 1.5em;
+	margin-top:1.0em;
+	margin-bottom:0.3em;
+	font-style:italic;	
 }
-#jeffrey-m-lubow, .post-list-heading { 
-	font-family: 'Poiret One', cursive;
+
+
+/* --------------------------------------------------------------- */
+/* images--------------------------------------------------------- */
+
+img {
+   	max-width: 700px;
 }
 
-/* images */
 img[src*="#right"] {
 	border: 1px solid pink;
    	float:right;
@@ -52,54 +84,66 @@ img[src*="#right"] {
    	padding-top: 1.5em;
    	padding-bottom: 1.5em;
 }
+
 img[src*="#smaller"] {
     	padding-top:3em;
     	padding-bottom:3em;
 }
 
-.content {
-    	margin-top:2em;
-}
 
-/* post list */
+/* --------------------------------------------------------------- */
+/* post list normal ---------------------------------------------- */
+
 .post-list {
     	list-style-type: none;
     	margin:0
 }
-.post-list-date {
-    	font-weight:normal;
-    	margin-top:1.0em;
-	margin-bottom:0.3em;
-    	font-style:italic;
-    	font-size:1.1em;
-}
+
+
 .post-link {
 	margin:0.4em;
 }
+
 .post-meta { 
 	font-size:0.8em;
 }
+
+/* --------------------------------------------------------------- */
+/* post list nav ------------===---------------------------------- */
+
+#jeffrey-m-lubow, .post-list-heading { 
+	font-family: 'Poiret One', cursive;
+}
+
+.nav-title {
+	font-size:2.0em;
+}
+
+.nav-cat {
+	font-size:0.9em;
+}
+.nav-list {
+	width:200px;
+	font-size:0.7em;
+}
+
+.nav-post-title {
+	list-style-type:lower-roman;
+}
+
+/* --------------------------------------------------------------- */
+/* projects -> post list ----------------------------------------- */
+
 ul.post-list {
-    	margin:0;
-    	padding:0;
+
 }
+
 ul.post-list li {
     	margin-bottom:2em;
     	margin-left:1.5em;
 }
+
 ul.post-list li h4 {
     	margin :0;  
 }
 
-/* post page */
-footer.post-footer {
-    	text-align:left;
-}
-footer.post-footer a {
-    	text-decoration:none;
-    	font-style: italic;
-}
-
-
-
-
-- 
2.34.1