cleaned up layout with flex containers, colorization, etc.

diff --git a/style-colors.css b/style-colors.css
index dd7cd4589ac418465d4c29ffc3c6a6ebfdde5b3e..63caebae417599fcae79550f282cf26223543b87 100644 (file)
--- 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 2c6003f44fcc84b183c03a0f66846cb8d83ccec0..f197f1ec0d17f6b6dd7cd10c8484210dc64073b7 100644 (file)
--- 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;
-}
-
-
-
-