updated main.css

theme/static/css/main.css

 :root {
 	--site-width: 90ch;
+	--site-lr-margin: 1rem;
 	--site-header-height: 6rem;
 	--sitemenu-nav-height: 3rem;
 	--card-size: 20ch;
-	--card-row-num: 3;
 	--text-color: #333333;
 	--body-bg-color: #FFFFFF;
 	--page-footer-color: #333333;
@@ -16,7 +16,7 @@
 	--link-color: #337AB7;
 	--hline-color: #EEEEEE;
 	--category-contrast-color: #FFFFFF;
-	--header-menu-bg-color: #F0F0F0;
+	--header-menu-bg-color: rgb(240, 240, 240, 0.8);
 	--header-menu-hover-bg-color: #E6E6E6;
 }
 
@@ -52,7 +52,7 @@ body {
 
 body > * {
 	display: grid;
-	grid-template-columns: [complete-start] minmax(1rem, 1fr) [content-start] minmax(0px, var(--site-width)) [content-end] minmax(1rem, 1fr) [complete-end];
+	grid-template-columns: [complete-start] minmax(var(--site-lr-margin), 1fr) [content-start] minmax(0px, var(--site-width)) [content-end] minmax(var(--site-lr-margin), 1fr) [complete-end];
 	/*column-gap: 3rem;
 	padding-left: 3rem;
 	padding-right: 3rem;*/
@@ -65,7 +65,7 @@ body > * > * {
 
 body > header h1 {
 	display: inline-block;
-	height: calc( var(--site-header-height) - 1rem );
+	min-height: calc( var(--site-header-height) - 1rem );
 	margin: 0.5rem;
 	border-bottom: 0 solid transparent;
 	margin-left: auto;
@@ -101,6 +101,7 @@ body > header h1 img {
 	align-items: stretch;
 	flex-wrap: nowrap;
 	/*flex-wrap: wrap;*/
+	flex-direction: row;
 }
 #sitemenu-container nav > ul > li {
 	list-style: none;
@@ -167,6 +168,64 @@ body > header h1 img {
 	display: none;
 }
 
+@media only screen and (max-width: 94ch) {
+	body > header h1{
+		/*width: 100%;*/
+	}
+	body > header h1 a {
+		justify-content: center;
+		flex-wrap: wrap;
+	}
+	#sitemenu-container {
+		margin-bottom: 0.2rem;
+		font-size: 1.2rem;
+	}
+	#sitemenu-container nav {
+		display: none;
+		/*border-top: 0.1rem solid #333;*/
+		position: fixed;
+		top: 3.2rem;
+		left: 0;
+		z-index: 10;
+		width: 100%;
+	}
+	#sitemenu-container nav > ul {
+		flex-direction: column;
+	}
+	#sitemenu-container nav > li {
+		width: 100%;
+		background-color: var(--category-contrast-color);
+	}
+	#sitemenu-container .show-header-menu {
+		display: inline-block;
+		font-style: normal;
+		padding: 1rem;
+	}
+	#sitemenu-container a {
+		width: 100%;
+		/*! margin-top: 0.2rem; */
+		/* padding-bottom: 0.2rem;*/
+		box-sizing: border-box;
+		display: block;
+		line-height: 2rem;
+		/* border-top: 0.1rem solid #333; */
+	}
+	#sitemenu-container a:hover {
+		border-bottom: 0.1rem solid #536;
+	}
+	#sitemenu-container input[type=checkbox]:checked ~ .show-header-menu-bg {
+		display: block;
+	}
+	#sitemenu-container input[type=checkbox]:checked ~ nav {
+		display: block;
+	}
+	:root {
+		--site-header-height: 3rem;
+		/* --sitemenu-nav-height: 3rem; */
+	}
+}
+
+
 
 
 
@@ -255,6 +314,8 @@ a.external[href^="mailto:"]::before {
 
 
 
+
+
 .content iframe {
 	width: 100%;
 	min-height: var(--site-width);
@@ -318,11 +379,15 @@ a.external[href^="mailto:"]::before {
 
 
 .content blockquote {
-	border-left: 0.25em solid #ddd;
+	border-left: 0.25rem solid #ddd;
 	padding: 0 1rem;
 	color: #777;
 }
 
+.content img {
+	width: 100%;
+	max-width: 100%;
+}
 
 
 
@@ -336,23 +401,16 @@ a.external[href^="mailto:"]::before {
 
 
 
-
-
-
-.cards {
-	/*display: grid;
-	grid-template-columns: repeat(var(--card-row-num), var(--card-size));
-	grid-auto-rows: var(--card-size);
-	column-gap: 0.2rem;
-	row-gap: 0.2rem;*/
+ul.cards {
 	display: flex;
 	align-items: stretch;
 	justify-content: space-between;
 	flex-wrap: wrap;
 	flex-direction: row;
+	padding: 0;
 }
 
-.cards li {
+ul.cards li {
 	display: inline-block;
 	list-style: none;
 	width: var(--card-size);
@@ -364,7 +422,7 @@ a.external[href^="mailto:"]::before {
 	/*flex-basis: 30%;*/
 	flex-basis: minmax(var(--card-size), 30%);
 }
-.cards li a {
+ul.cards li a {
 	display: inline-block;
 	width:  calc(100% - 1.3rem );
 	height: calc(100% - 1.3rem );
@@ -378,7 +436,7 @@ a.external[href^="mailto:"]::before {
 	/* text-align: center; */
 	border: 0.2rem solid var(--category-color);
 }
-.cards li a:hover {
+ul.cards li a:hover {
 	background-color: var(--category-contrast-color);
 	color: var(--category-color);
 }