web: refactor css

web/assets/font-ubuntu.css → web/assets/css/font-ubuntu.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: 'Ubuntu';
   font-style: normal;
-  font-weight: 300;
-  src: local('Ubuntu Light'), local('Ubuntu-Light'), url(https://fonts.gstatic.com/s/ubuntu/v11/4iCv6KVjbNBYlgoC1CzjsGyI.ttf) format('truetype');
+  font-weight: 400;
+  src: local('Ubuntu'), local('Ubuntu'), url(https://fonts.gstatic.com/s/ubuntu/v11/4iCv6KVjbNBYlgoC1CzjsGyI.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Ubuntu';

web/assets/css/styles.css

@@ -0,0 +1,292 @@
+@import "normalize.min.css";
+@import "font-ubuntu.css";
+@import "variables.css";
+
+body {
+	font-family: 'Ubuntu', sans-serif;
+	color: var(--fg);
+	background-color: var(--bg);
+}
+
+.container {
+	padding-left: 15px;
+	padding-right: 15px;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+@media screen and (min-width: 768px) {
+	.container {
+		width: 750px;
+	}
+}
+
+@media screen and (min-width: 992px) {
+	.container {
+		width: 970px;
+	}
+}
+
+@media screen and (min-width: 1200px) {
+	.container {
+		width: 1170px;
+	}
+}
+
+@media screen and (min-width: 1400px) {
+	.container {
+		width: 1320px;
+	}
+}
+
+.container:before {
+	display: table;
+	content: " ";
+}
+
+.container:after {
+	clear: both;
+}
+
+footer {
+	display: block;
+	text-align: center;
+}
+
+hr {
+	margin-top: 20px;
+	margin-bottom: 20px;
+	border: 0;
+	border-top: 1px solid var(--hr-color);
+	width: 33%;
+}
+
+h1[id], h2[id], h3[id], h4[id], h5[id], h6[id] {
+	padding-top:0.5em;
+}
+
+a {
+	color: var(--links);
+}
+
+a:hover {
+	text-decoration: none;
+	color: var(--links-hover);
+}
+
+.tablecontainer {
+	overflow-x: auto;
+}
+
+table {
+	border-collapse: collapse;
+	border: 1px var(--table-border-color) solid;
+}
+
+table td {
+	padding: 6px 20px;
+}
+
+table thead {
+	background-color: var(--table-header-bg);
+	color: var(--table-header-fg);
+}
+
+table thead th {
+	font-weight: 700;
+	text-align: center;
+	padding: 6px 20px;
+}
+
+table tbody tr:nth-child(2n) {
+	background: var(--table-alternate-bg);
+}
+
+pre {
+	padding: 0.5em;
+	margin: 1em 0;
+	background-color: var(--inline-code-color);
+	border: 1px solid var(--code-border);
+	border-radius: 4px;
+}
+
+pre code {
+	overflow: auto;
+	word-wrap: normal;
+	white-space: pre;
+}
+
+code {
+	font-family: 'Ubuntu Mono', monospace;
+	background-color: var(--inline-code-color);
+	padding: 2px 4px;
+	border-radius: 4px;
+	white-space: pre-wrap;
+	overflow-wrap: break-word;
+}
+
+.navbar {
+	background-color: var(--nav-bg);
+	color: var(--nav-fg);
+	border: 0;
+	border-radius: 0;
+	z-index: 1;
+	position: sticky;
+	top: 0;
+	min-height: 50px;
+}
+
+.navbar .container {
+	min-height: 50px;
+}
+
+.navbar .menu-spacer {
+	display: none;
+	min-height: 50px;
+}
+
+.menu-wrapper {
+	display: flex;
+	align-items: stretch;
+	justify-content: space-between;
+	min-height: 50px;
+}
+
+nav {
+	display: flex;
+	justify-content: space-between;
+	min-height: 50px;
+}
+
+nav.menu-local {
+	align-self: flex-start;
+}
+
+nav.menu-external {
+	align-self: flex-end;
+}
+
+nav div {
+	display: flex;
+	align-items: center;
+}
+
+nav div a {
+	display: block;
+	text-decoration: none;
+	white-space: nowrap;
+	color: inherit;
+	padding: 0.5em 0.69em;
+	font-size: 1.1em;
+}
+
+nav div a:hover {
+	color: inherit;
+}
+
+nav div:hover {
+	background-color: var(--nav-bg-hover);
+	color: var(--nav-fg-hover);
+}
+
+#menu-toggle-cb {
+	position: absolute;
+	top: -9999px;
+	left: -9999px;
+}
+
+#menu-toggle {
+	cursor: pointer;
+	user-select: none;
+	width: 38px;
+	height: 36px;
+	display: block;
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: none;
+	margin-top: 6px;
+	margin-right: 6px;
+}
+
+#menu-toggle .bar {
+	background-color: var(--nav-fg);
+	display: block;
+	width: 24px;
+	height: 4px;
+	position: absolute;
+	top: 16px;
+	right: 7px;
+}
+
+#menu-toggle .bar:first-child {
+	top: 8px;
+}
+
+#menu-toggle .bar:last-child {
+	top: 24px;
+}
+
+#menu-toggle-cb:checked ~ #menu-toggle .bar:first-child {
+	-webkit-transform: rotate(-45deg);
+	-moz-transform: rotate(-45deg);
+	-ms-transform: rotate(-45deg);
+	transform: rotate(-45deg);
+}
+
+#menu-toggle-cb:checked ~ #menu-toggle .bar:last-child {
+	-webkit-transform: rotate(45deg);
+	-moz-transform: rotate(45deg);
+	-ms-transform: rotate(45deg);
+	transform: rotate(45deg);
+}
+
+#menu-toggle-cb:checked ~ #menu-toggle .bar:nth-child(odd) {
+	top: 16px;
+}
+
+#menu-toggle-cb:checked ~ #menu-toggle .bar:nth-child(even) {
+	display: none;
+}
+
+@media (max-width: 69em) {
+	.menu-spacer {
+		display: block;
+		height: 50px;
+	}
+
+	.menu-wrapper {
+		margin-top: 50px;
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	nav {
+		flex-direction: column;
+		align-self: stretch !important;
+	}
+
+	#menu-toggle {
+		display: block;
+	}
+
+	#menu-toggle-cb ~ .menu-wrapper {
+		max-height: 0;
+		overflow: hidden;
+		display: none;
+	}
+
+	#menu-toggle-cb:checked ~ .menu-wrapper {
+		max-height: 100vh;
+		display: flex;
+	}
+
+	#menu-toggle-cb ~ .menu-wrapper,
+	#menu-toggle-cb:checked ~ .menu-wrapper {
+		-webkit-transition: all 0.5s;
+		-moz-transition: all 0.5s;
+		-ms-transition: all 0.5s;
+		-o-transition: all 0.5s;
+		transition: all 0.5s;
+	}
+}

web/assets/css/variables.css

@@ -0,0 +1,65 @@
+:root {
+	--void-green: #478061;
+	--void-dark-green: #62b086;
+	--void-light: #fafafa;
+	--void-dark: #252525;
+}
+
+@media (prefers-color-scheme: light) {
+	:root {
+		--bg: #ffffff;
+		--fg: #333;
+
+		--nav-bg: var(--void-green);
+		--nav-fg: var(--bg);
+		--nav-bg-hover: var(--bg);
+		--nav-fg-hover: var(--fg);
+
+		--links: var(--void-green);
+		--links-hover: var(--fg);
+
+		--inline-code-color: #fdf6e3;
+		--code-border: #ccc;
+
+		--quote-bg: #ebf4ef;
+		--quote-border: #d1e6da;
+		--quote-code-bg: var(--inline-code-color);
+
+		--table-border-color: var(--void-green);
+		--table-header-bg: var(--void-green);
+		--table-header-fg: #fff;
+		--table-alternate-bg: var(--void-light);
+
+		--hr-color: #888;
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--bg: #222;
+		--fg: #ddd;
+
+		--nav-bg: #295340;
+		--nav-fg: var(--fg);
+		--nav-bg-hover: var(--bg);
+		--nav-fg-hover: var(--fg);
+
+		--links: var(--void-dark-green);
+		--links-hover: var(--fg);
+
+		--inline-code-color: #353535;
+		--code-border: #111;
+
+		--quote-bg: #293d35;
+		--quote-border: #22362e;
+		--quote-code-bg: #2a2a2a;
+
+		--table-border-color: var(--void-green);
+		--table-header-bg: var(--void-green);
+		--table-header-fg: #fff;
+		--table-alternate-bg: #2c2c2c;
+
+		--hr-color: #888;
+	}
+}
+