mobile friendly

diff --git a/style-colors.css b/style-colors.css
index 9b296a23619c5551bb7d4e0f231c77e7f438fe95..a36243d03dfd9f8592baee031982ca15f58c2f64 100644 (file)
--- a/style-colors.css
+++ b/style-colors.css
@@ -6,6 +6,7 @@ body {
 a {
        color: #31869b;
 }
+
 a:hover { 
        color: white; 
 }
@@ -42,6 +43,12 @@ h3 {
 #jeffrey-m-lubow {
        color:#d87107;
 }
+.about {
+       color:#88a31d;
+}
+.about:hover {
+       color:#fff;
+}
 
 .post-list-date { 
     color:#3a84a0;

diff --git a/style-layout.css b/style-layout.css
index 0551ca3622cbbde875d38b0c12d599ae4aeaa38b..1a26e3f291bc881a17af31f9951a04e438eb7254 100644 (file)
--- a/style-layout.css
+++ b/style-layout.css
@@ -3,7 +3,6 @@ body {
        /*font-family: 'Heebo', sans-serif;*/
        font-size: 0.8em;
        letter-spacing: 0.1px;
-       margin:0 auto;
        margin-left: 10px;
 }
 
@@ -36,22 +35,42 @@ footer {
        order: 2;
 }
 
+.flex-container-img { 
+       display: flex;
+       flex-row: row wrap;
+       gap: 21px;
+       margin-left: 0px;
+}
+.flex-container-img img {
+       display: inline-block;
+       max-width: 100%;
+       height:auto;
+
+       border: 2px;
+       border-style: solid;
+       border-color: #000;
+}
+
+
 /* --------------------------------------------------------------- */
 
 a:link {
        text-decoration: none;
 }
 
-/* look into why this .home selector works */
+/* --------------------------------------------------------------- */
+/* home stuff - useful?------------------------------------------- */
+/* look into whether this .home selector works, maybe rename */
+
 .home h2 { 
-       font-family: 'Poiret One', cursive;
+       /* font-family: 'Poiret One', cursive; */
+       /*font-family: 'Libre Baskerville', serif;*/
+       font-family: 'Newsreader', serif;
        font-size: 2.4em;
 }
 
-h1 { 
-       font-family: 'Poiret One', cursive;
-       font-size: 2.4em;
-       margin-bottom:1em;
+.job h2 {
+       font-size: 0.9em;
 }
 
 .home .post-list-date {
@@ -62,9 +81,28 @@ h1 {
        font-style:italic;      
 }
 
+/* --------------------------------------------------------------- */
+
+.about { 
+       font-size: 0.8em;
+       padding:0px;
+}
+
+h1 { 
+       /*font-family: 'Poiret One', cursive;*/
+       /*font-family: 'Libre Baskerville', serif;*/
+       font-family: 'Newsreader', serif;
+       font-size: 1.6em;
+}
+
+h4 {
+       font-size: 1.2em;
+}
+
 .content ul {
 /*     text-align:right; */
        list-style-type: square;
+       font-size: 0.9em;
 }
 
 /* --------------------------------------------------------------- */
@@ -107,12 +145,18 @@ img[src*="#smaller"] {
 /* --------------------------------------------------------------- */
 /* post list nav ------------------------------------------------- */
 
-#jeffrey-m-lubow, .post-list-heading { 
-       font-family: 'Poiret One', cursive;
+.post-list-heading { 
+/*     font-family: 'Poiret One', cursive; */
 }
 
 .nav-title {
-       font-size:2.0em;
+       /*
+       font-family: 'Noto Sans Mono', monospace;       
+       font-family: 'Poiret One', cursive; 
+       font-family: 'Libre Baskerville', serif;
+        */
+       font-family: 'Newsreader', serif;
+       font-size:2.2em;
 }
 
 .nav-cat {
@@ -128,6 +172,10 @@ img[src*="#smaller"] {
        list-style-type:square;
 }
 
+.nav-list-heading {
+       margin: 0px;
+}
+
 /* --------------------------------------------------------------- */
 /* projects -> post list ----------------------------------------- */
 
@@ -144,3 +192,132 @@ ul.post-list li h4 {
        margin :0;  
 }
 
+/* --------------------------------------------------------------- */
+/* mobile styling ------------------------------------------------ */
+
+@media only screen and (orientation: portrait) and (max-width: 428px) {
+       .flex-container {
+               flex-row: none;
+               flex-direction: column;
+               gap: 30px;
+       }
+       .flex-topbar {
+               display: flex;
+               justify-content: space-between;
+               flex-row: row nowrap;
+               gap: 20px;
+               width: 96%;
+       }
+       
+       .nav { 
+               max-width: 100%;
+
+       }
+       .nav-title {
+               display: inline-block;
+               font-size: 2.0em;
+               margin: 0px;
+               margin-right: 5px;
+               margin-top: 5px;
+       }
+       .about { 
+               display: inline-block;
+               font-size: 1.3em;
+       }
+       .nav-list-heading {
+               float:right;
+               margin-right: 30px;
+       }
+       .nav-cat {
+               width: 100%;
+               font-size: 1.4em;
+       }
+       .nav-list {
+               width: 84%;
+               margin-right: 30px;
+               font-size: 1.2em;
+       }
+       .content { 
+               max-width: 95%;
+       }
+       .content p {
+               font-size: 1.4em;
+       }
+       .project ul li {
+               font-size: 1.2em;
+       }
+       img { 
+               padding: 7px;
+               width: 97%;
+               align:center;
+       }
+}
+
+@media screen and (orientation: landscape) and (max-width: 926px) {
+
+       .flex-container {
+               margin-left:0px;
+               gap: 12px;
+       }
+       .flex-topbar {
+               justify-content: space-between;
+               display: flex;
+               flex-row: row nowrap;
+               gap: 10px;
+       }
+
+       /* flex container child */
+       .content { 
+               width: 70%;
+               max-width:75%;
+               margin-left: 20px;
+               margin-right: 20px;
+       }
+       .content ul { 
+               font-size: 0.8em;
+               max-width:75%;
+               width: 480px;
+               margin: 20px;
+       }
+       .content p {
+               font-size: 0.8em;
+       }
+       .content h3 {
+               font-size: 1.0em;
+       }
+
+       /* flex container child */
+       .nav { 
+               display: inline-block;
+               /* 
+               overflow: auto;
+               height: 375px;
+               width: 100%; 
+               */
+       }
+       /* flex topbar child */
+       .nav-title {
+               display: inline-block;
+               font-size: 0.9em;
+               margin: 0px;
+               margin-top: 5px;
+       }
+       /* flex topbar child */
+       .about { 
+               font-size: 0.6em;
+       }
+       .nav-list {
+               width: 90%;
+               font-size: 0.8em;
+       }
+       .nav-cat {
+               font-size: 0.8em;
+       }
+       .nav-list-heading {
+               float:right;
+       }
+       .project img { 
+               margin: 10px;
+               width: 100%;
+       }
+}