From: equilet <2237372+equilet@users.noreply.github.com>
Date: Sat, 31 Dec 2022 04:00:39 +0000 (-0800)
Subject: mobile friendly
X-Git-Url: https://git.dabkitsch.com/?a=commitdiff_plain;h=707517fc527cec57408fe9baee52a78a7440e72e;p=jekyll-site.git

mobile friendly
---

diff --git a/style-colors.css b/style-colors.css
index 9b296a2..a36243d 100644
--- 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 0551ca3..1a26e3f 100644
--- 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%;
+	}
+}