Merge branch 'mobile-improvements' into 'master'

Improvements for Smartphones

Closes #48

See merge request GAUMI-fginfo/fg-website!14

theme/static/css/main.css

@@ -19,6 +19,8 @@
 	--category-contrast-color: #FFFFFF;
 	--header-menu-bg-color: rgb(240, 240, 240, 0.8);
 	--header-menu-hover-bg-color: #E6E6E6;
+	--header-menu-button-size: 3rem;
+	--outline-color: #337AB7;
 }
 
 * {
@@ -135,6 +137,9 @@ body > header img {
 
 #sitemenu-container .show-header-menu {
 	display: none;
+	font-size: 1rem;
+	font-style: normal;
+	/*padding: 1rem;*/
 	background-color: var(--header-menu-bg-color);
 	-webkit-user-select: none; /* Safari */
 	-moz-user-select: none; /* Firefox */
@@ -145,6 +150,10 @@ body > header img {
 	top: 0;
 	left: 0;
 	z-index: 11;
+	width: var(--header-menu-button-size);
+	height: var(--header-menu-button-size);
+	padding-top: calc(var(--header-menu-button-size) / 2 - 0.75rem);
+	text-align: center;
 }
 #sitemenu-container .show-header-menu:hover {
 	background-color: var(--header-menu-hover-bg-color);
@@ -170,62 +179,6 @@ body > header img {
 	display: none;
 }
 
-@media only screen and (max-width: 94ch) {
-	body > header 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;
-		position: fixed;
-		top: 3.2rem;
-		left: 0;
-		z-index: 10;
-		width: 100%;
-	}
-	#sitemenu-container nav > ul {
-		flex-direction: column;
-		max-height: calc(100vh - 3.2rem);
-		overflow: scroll;
-	}
-	#sitemenu-container nav > ul > 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; */
-	}
-}
-
 
 
 
@@ -402,6 +355,7 @@ sup {
 .content iframe {
 	width: 100%;
 	min-height: var(--site-width);
+	overflow: scroll;
 }
 
 .content p,
@@ -415,7 +369,7 @@ sup {
 }
 
 .content dt {
-    font-weight: bold;
+	font-weight: bold;
 }
 .content dt::after {
 	content: ': '
@@ -457,10 +411,12 @@ sup {
 
 .content .codeinline,
 .content .codeblock {
-	white-space: pre-wrap;
+	/*white-space: pre-wrap;
 	overflow-wrap: break-word;
-	word-break: keep-all;
+	word-break: keep-all;*/
+	overflow: scroll;
 }
+
 .content .codeinline {
 	background-color: rgba(0, 0, 0, 0.04);
 	color: inherit;
@@ -482,13 +438,16 @@ sup {
 .content img {
 	width: 100%;
 	max-width: 100%;
+	overflow: scroll;
 }
 
+
 .content table {
 	width: 100%;
 	display: block;
 	border-collapse: collapse;
 	border-spacing: 0;
+	overflow: scroll;
 }
 
 .content table tr {
@@ -697,3 +656,118 @@ ul.cards li a:hover {
 	color:#843534;
 }
 
+
+
+
+[tabindex]:not([tabindex="-1"]):focus, a:focus, button:focus, input:focus, select:focus:focus, textarea:focus {
+	outline-color: var(--outline-color);
+	outline-offset: 0.125em;
+}
+
+
+[tabindex]:not([tabindex="-1"]), a, button, input, select, textarea {
+	outline: transparent solid 2px;
+	outline-offset: 0.25em;
+	transition: outline-offset 0.2s linear 0s;
+}
+
+
+
+
+
+
+
+
+
+@keyframes makeopaque {
+	from {
+		opacity: 0%;
+	}
+
+	to {
+		opacity: 100%;
+	}
+}
+@keyframes slidein-lr {
+	from {
+		left: -100%;
+	}
+
+	to {
+		left: 0%;
+	}
+}
+
+
+
+@media only screen and (max-width: 94ch) {
+	body > header {
+		margin-left: var(--header-menu-button-size);
+	}
+	body > header 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;
+		position: fixed;
+		top: var(--header-menu-button-size);
+		left: 0;
+		z-index: 10;
+		width: 100%;
+		animation-duration: 0.2s;
+		animation-name: slidein-lr;
+	}
+	#sitemenu-container nav > ul {
+		flex-direction: column;
+		max-height: calc(100vh - var(--header-menu-button-size));
+		overflow: scroll;
+	}
+	#sitemenu-container nav > ul > li {
+		width: 100%;
+		background-color: var(--category-contrast-color);
+	}
+	#sitemenu-container .show-header-menu {
+		display: inline-block;
+	}
+	#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;
+		animation-duration: 0.2s;
+		animation-name: makeopaque;
+	}
+	#sitemenu-container input[type=checkbox]:checked ~ nav {
+		display: block;
+	}
+	:root {
+		--site-header-height: 3rem;
+		/* --sitemenu-nav-height: 3rem; */
+	}
+
+
+	.content h1,
+	.content h2,
+	.content h3,
+	.content h4,
+	.content h5,
+	.content h6 {
+		margin-top: 0.2em;
+		margin-bottom: 0.2em;
+	}
+}