From 4c3fc4ab3f012afc48be15193595c6b945496288 Mon Sep 17 00:00:00 2001
From: Thomas Lange <code@nerdmind.de>
Date: Sat, 12 Jun 2021 00:56:45 +0200
Subject: Use SCSS for stylesheets

---
 theme/admin/rsrc/css/import/_font-awesome.scss | 138 ++++
 theme/admin/rsrc/css/import/_fonts.scss        |  32 +
 theme/admin/rsrc/css/import/_responsive.scss   |  80 +++
 theme/admin/rsrc/css/main.css                  | 904 +++++++++++++++++++++++++
 theme/admin/rsrc/css/main.css.map              |   1 +
 theme/admin/rsrc/css/main.scss                 | 726 ++++++++++++++++++++
 6 files changed, 1881 insertions(+)
 create mode 100644 theme/admin/rsrc/css/import/_font-awesome.scss
 create mode 100644 theme/admin/rsrc/css/import/_fonts.scss
 create mode 100644 theme/admin/rsrc/css/import/_responsive.scss
 create mode 100644 theme/admin/rsrc/css/main.css
 create mode 100644 theme/admin/rsrc/css/main.css.map
 create mode 100644 theme/admin/rsrc/css/main.scss

(limited to 'theme/admin/rsrc/css')

diff --git a/theme/admin/rsrc/css/import/_font-awesome.scss b/theme/admin/rsrc/css/import/_font-awesome.scss
new file mode 100644
index 0000000..448491f
--- /dev/null
+++ b/theme/admin/rsrc/css/import/_font-awesome.scss
@@ -0,0 +1,138 @@
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# FontAwesome Main
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+.fa {
+	font: normal normal normal 14px/1 "FontAwesome";
+	font-size: inherit;
+	speak: none;
+	display: inline-block;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# FontAwesome Icons
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+.fa-bug:before {
+	content: "\f188";
+}
+
+.fa-key:before {
+	content: "\f084";
+}
+
+.fa-link:before {
+	content: "\f0c1";
+}
+
+.fa-bold:before {
+	content: "\f032";
+}
+
+.fa-code:before {
+	content: "\f121";
+}
+
+.fa-user:before {
+	content: "\f007";
+}
+
+.fa-book:before {
+	content: "\f02d";
+}
+
+.fa-italic:before {
+	content: "\f033";
+}
+
+.fa-header:before {
+	content: "\f1dc";
+}
+
+.fa-search:before {
+	content: "\f002";
+}
+
+.fa-trash-o:before {
+	content: "\f014";
+}
+
+.fa-sign-in:before {
+	content: "\f090";
+}
+
+.fa-clock-o:before {
+	content: "\f017";
+}
+
+.fa-list-ul:before {
+	content: "\f0ca";
+}
+
+.fa-list-ol:before {
+	content: "\f0cb";
+}
+
+.fa-database:before {
+	content: "\f1c0";
+}
+
+.fa-language:before {
+	content: "\f1ab";
+}
+
+.fa-sign-out:before {
+	content: "\f08b";
+}
+
+.fa-dashboard:before {
+	content: "\f0e4";
+}
+
+.fa-picture-o:before {
+	content: "\f03e";
+}
+
+.fa-envelope-o:before {
+	content: "\f003";
+}
+
+.fa-arrow-left:before {
+	content: "\f060";
+}
+
+.fa-quote-right:before {
+	content: "\f10e";
+}
+
+.fa-user-secret:before {
+	content: "\f21b";
+}
+
+.fa-file-text-o:before {
+	content: "\f0f6";
+}
+
+.fa-newspaper-o:before {
+	content: "\f1ea";
+}
+
+.fa-arrow-right:before {
+	content: "\f061";
+}
+
+.fa-external-link:before {
+	content: "\f08e";
+}
+
+.fa-github-square:before {
+	content: "\f092";
+}
+
+.fa-pencil-square-o:before {
+	content: "\f044";
+}
+
+.fa-exclamation-triangle:before {
+	content: "\f071";
+}
diff --git a/theme/admin/rsrc/css/import/_fonts.scss b/theme/admin/rsrc/css/import/_fonts.scss
new file mode 100644
index 0000000..2145065
--- /dev/null
+++ b/theme/admin/rsrc/css/import/_fonts.scss
@@ -0,0 +1,32 @@
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Font "Font Awesome" [4.7.0] (by Fontello): SIL Open Font License (OFL)
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+@font-face {
+	font-family: "FontAwesome";
+	font-weight: 400;
+	src: url("../font/font-awesome-fontello.woff2") format("woff2");
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Font "Kadwa": SIL Open Font License (OFL)
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+@font-face {
+	font-family: "Kadwa";
+	font-weight: 400;
+	src: url("../font/kadwa-n-400.woff2") format("woff2");
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Font "Ruda": SIL Open Font License (OFL)
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+@font-face {
+	font-family: "Ruda";
+	font-weight: 400;
+	src: url("../font/ruda-n-400.woff2") format("woff2");
+}
+
+@font-face {
+	font-family: "Ruda";
+	font-weight: 700;
+	src: url("../font/ruda-n-700.woff2") format("woff2");
+}
diff --git a/theme/admin/rsrc/css/import/_responsive.scss b/theme/admin/rsrc/css/import/_responsive.scss
new file mode 100644
index 0000000..a8275bf
--- /dev/null
+++ b/theme/admin/rsrc/css/import/_responsive.scss
@@ -0,0 +1,80 @@
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Responsive Level #1
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+@media only screen and (max-width: 50em) {
+	html {
+		font-size: 1.125rem; /*18px*/
+		background-image: none !important;
+	}
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Responsive Level #2
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+@media only screen and (max-width: 37.5em) {
+	.flex.flex-responsive {
+		display: block;
+		width: auto;
+
+		> .flex-item {
+			width: 100%;
+
+			+ .flex-item {
+				border-top: 0.05rem solid #AAA;
+			}
+		}
+	}
+
+	#main-navi {
+		font-size: 1rem;
+
+		li {
+			span {
+				display: none;
+			}
+
+			.fa {
+				margin-right: 0;
+			}
+		}
+
+		a {
+			padding: 0.5rem;
+		}
+	}
+
+	.flex-emoticons {
+		display: none;
+	}
+
+	.actions {
+		float: none;
+		display: flex;
+		width: 100%;
+		flex-grow: 1;
+		justify-content: center;
+		overflow: hidden;
+		box-sizing: border-box;
+
+		li {
+			flex-grow: 1;
+
+			+ li {
+				border-left: none;
+			}
+		}
+	}
+
+	.actions-before {
+		float: none;
+	}
+
+	.arguments {
+		font-size: 0.5rem;
+		line-height: 0.75rem;
+	}
+
+	main {
+		padding: 0.5rem;
+	}
+}
diff --git a/theme/admin/rsrc/css/main.css b/theme/admin/rsrc/css/main.css
new file mode 100644
index 0000000..6f87bf1
--- /dev/null
+++ b/theme/admin/rsrc/css/main.css
@@ -0,0 +1,904 @@
+@charset "UTF-8";
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Selection
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+::-moz-selection {
+  background: #BBB;
+  color: #000;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Hyperlinks
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+a {
+  color: #0060A0;
+  text-decoration: none;
+}
+a:focus {
+  background: #CCC;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Headings
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  text-transform: uppercase;
+}
+h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
+  margin-top: 0;
+}
+h1 .fa, h2 .fa, h3 .fa, h4 .fa, h5 .fa, h6 .fa {
+  margin-right: 0.25rem;
+}
+
+h1 {
+  font-size: 0.8rem;
+}
+
+h2 {
+  font-size: 0.7rem;
+}
+
+h3 {
+  font-size: 0.65rem;
+}
+
+h4 {
+  font-size: 0.6rem;
+}
+
+h5 {
+  font-size: 0.55rem;
+}
+
+h6 {
+  font-size: 0.5rem;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Document
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 1.25rem;
+  color: #333;
+  background: #DDD;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+}
+
+body {
+  font-family: "Ruda", "sans-serif";
+  font-size: 0.7rem;
+  line-height: 1.2rem;
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+main {
+  padding: 0.75rem;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Main content
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+#main-content {
+  flex: 1;
+  width: 100%;
+  background: #FFF;
+  box-sizing: border-box;
+  border: 0.05rem solid #AAA;
+  border-top: none;
+  border-bottom: none;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Width
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+#main-content, .header-content {
+  max-width: 50rem;
+  margin: 0 auto;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Header
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+#main-header {
+  font-size: 0.6rem;
+}
+
+#header-text, #header-desc {
+  text-shadow: 0 -1px #4E718F, 1px 0 #4E718F, 0 1px #4E718F, -1px 0 #4E718F;
+}
+
+#header-text {
+  font-size: 0.8rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+#header-desc {
+  font-size: 0.6rem;
+  font-weight: 700;
+  line-height: 1rem;
+}
+#header-desc span {
+  color: #CCC;
+}
+
+#header-logo {
+  display: block;
+  max-height: 5rem;
+  float: left;
+  margin-right: 0.5rem;
+}
+
+.header-line {
+  padding: 0.5rem 0.75rem;
+  overflow: hidden;
+}
+.header-line:first-child {
+  background: #5E819F;
+  position: sticky;
+  top: 0;
+}
+.header-line:last-child {
+  background: #EEE;
+  border: 0.05rem solid #AAA;
+  border-left: none;
+  border-right: none;
+  padding: 0.25rem 0.75rem;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Footer
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+#main-footer {
+  font-size: 0.6rem;
+  background: #EEE;
+  border-top: 0.05rem solid #AAA;
+  padding: 0.5rem 0.75rem;
+  text-align: center;
+}
+#main-footer ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+#main-footer ul li {
+  display: inline;
+}
+#main-footer ul li .fa {
+  margin-right: 0.125rem;
+}
+#main-footer ul li:after {
+  content: " · ";
+  font-weight: bold;
+}
+#main-footer ul li:last-child:after {
+  content: none;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Main Navigation
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+#main-navi ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+#main-navi ul li {
+  display: inline;
+}
+#main-navi ul li .fa {
+  margin-right: 0.25rem;
+}
+#main-navi ul li:last-child {
+  float: right;
+}
+#main-navi ul li:first-child {
+  float: none;
+}
+#main-navi a {
+  padding: 0.1rem 0.3rem;
+  background: #DDD;
+  border: 0.05rem solid #AAA;
+  color: inherit;
+  text-decoration: none;
+  text-align: center;
+  display: inline-block;
+}
+#main-navi a:hover, #main-navi a:focus {
+  text-decoration: none;
+  background: #CCC;
+}
+#main-navi a:focus {
+  background: #CCC;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Site Navigation
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+#site-navi {
+  clear: both;
+  display: flex;
+  box-sizing: border-box;
+  justify-content: space-between;
+}
+#site-navi > div {
+  display: flex;
+  align-items: center;
+  border: 0.05rem solid #AAA;
+  background: #EEE;
+}
+#site-navi > div > a {
+  display: block;
+}
+#site-navi .disabled {
+  pointer-events: none;
+  color: #AAA;
+}
+#site-navi .active a {
+  background: #CCC !important;
+  font-weight: 600;
+  pointer-events: none;
+}
+#site-navi ol {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+#site-navi ol li {
+  float: left;
+  display: inline-block;
+}
+#site-navi ol li + li {
+  border-left: 0.05rem solid #AAA;
+}
+#site-navi a {
+  padding: 0 0.5rem;
+  text-decoration: none;
+  color: inherit;
+  display: inline-block;
+}
+#site-navi a:hover, #site-navi a:focus {
+  background: #CCC;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Actions
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+.actions {
+  margin: 0 0 0.5rem 0;
+  padding: 0;
+  list-style: none;
+  font-size: 0.6rem;
+  float: right;
+  text-align: center;
+}
+.actions .fa {
+  margin-right: 0.1rem;
+}
+.actions li {
+  display: inline-block;
+  font-weight: bold;
+  background: #EEE;
+  border: 0.05rem solid #AAA;
+}
+.actions a {
+  color: inherit;
+  display: block;
+  padding: 0 0.25rem;
+}
+
+.actions-before {
+  float: left;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Elements
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+pre {
+  margin-bottom: 1rem;
+  overflow: auto;
+  -moz-tab-size: 4;
+  tab-size: 4;
+}
+
+code, pre {
+  font-family: "monospace";
+  color: #B03060;
+}
+
+p {
+  margin-top: 0;
+}
+
+img {
+  border: none;
+  max-width: 100%;
+}
+
+.red {
+  color: #B03060;
+}
+
+.blue {
+  color: #40779A;
+}
+
+.green {
+  color: #008B45;
+}
+
+.right {
+  float: right;
+}
+
+.hidden {
+  display: none;
+}
+
+#database-result {
+  color: inherit;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Tables
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+table {
+  width: 100%;
+  margin-bottom: 1rem;
+}
+
+td {
+  vertical-align: middle;
+}
+
+table, td {
+  padding: 0.5rem;
+  border: 0.05rem solid #AAA;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Brackets
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+.brackets:after, .brackets:before {
+  color: #222;
+}
+.brackets:before {
+  content: "[";
+}
+.brackets:after {
+  content: "]";
+}
+
+.brackets a, a.brackets {
+  text-decoration: none;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Item Element
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+.item {
+  display: block;
+  border: 0.05rem solid #AAA;
+  margin-bottom: 1rem;
+  clear: both;
+}
+.item header {
+  padding: 0.5rem 0.75rem;
+  border-bottom: 0.05rem solid #AAA;
+  position: sticky;
+  top: 0;
+}
+.item footer {
+  border-top: 0.05rem solid #AAA;
+}
+.item footer ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.item footer ul li {
+  display: inline-block;
+  float: left;
+}
+.item footer ul li:last-child {
+  float: right;
+}
+.item footer a {
+  color: inherit;
+  display: inline-block;
+  padding: 0.25rem 2rem;
+}
+.item footer a:hover, .item footer a:active {
+  background: #DDD;
+}
+.item header, .item footer {
+  background: #EEE;
+  overflow: hidden;
+}
+.item blockquote {
+  margin: 0;
+  padding: 0.75rem;
+  font-family: inherit;
+}
+.item blockquote p {
+  margin-bottom: 0;
+}
+
+.item-id {
+  float: right;
+  color: #666;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Argument list
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+.arguments {
+  list-style: none;
+  margin: 0;
+  padding: 0.25rem 0.75rem;
+  background: #EEE;
+  font-size: 0.6rem;
+  text-align: center;
+  border-top: 0.05rem solid #AAA;
+}
+.arguments li {
+  display: inline;
+}
+.arguments li > span {
+  color: #40779A;
+}
+.arguments li:after {
+  content: " · ";
+  font-weight: bold;
+}
+.arguments li:last-child:after {
+  content: none;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Form flex-box
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+form {
+  border: 0.05rem solid #AAA;
+}
+
+.flex {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.flex + .flex {
+  border-top: 0.05rem solid #AAA;
+}
+
+.flex > .flex-item {
+  border-right: 0.05rem solid #AAA;
+  display: flex;
+  width: 100%;
+}
+.flex > .flex-item:last-child {
+  border-right: none;
+}
+.flex > .flex-item > div {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem;
+  box-sizing: border-box;
+}
+.flex > .flex-item > div + div {
+  border-left: 0.05rem solid #AAA;
+}
+
+.flex.flex-responsive > .flex-item {
+  width: 50%;
+}
+
+.form-icon-flex {
+  background: #DDD;
+  width: 10%;
+  justify-content: center;
+}
+
+.form-label-flex {
+  background: #DDD;
+  width: 30%;
+  border-left: none !important;
+}
+
+.form-field-flex {
+  width: 60%;
+}
+
+.background {
+  background: #DDD;
+}
+
+.flex-padding {
+  padding: 0.5rem;
+}
+
+.flex-direction-column {
+  flex-direction: column;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Form buttons
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+#button-list-wrapper {
+  border-bottom: 0.05rem solid #AAA;
+  background: #EEE;
+}
+
+.button-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.button-list.emoticons > li {
+  font-size: 1.25rem;
+  display: inline-block;
+  padding: 0.2rem;
+  border-bottom: 0.2rem solid transparent;
+  border-radius: 0.1rem;
+  cursor: pointer;
+}
+.button-list.emoticons > li:hover, .button-list.emoticons > li:active {
+  border-bottom: 0.2rem solid #AAA;
+}
+
+.button-list.markdown > li {
+  float: left;
+  padding: 0.5rem;
+  cursor: pointer;
+  width: 1.75rem;
+  box-sizing: border-box;
+  text-align: center;
+}
+.button-list.markdown > li:hover, .button-list.markdown > li:active {
+  color: #40779A;
+}
+
+#content-editor {
+  border: none;
+  margin: 0;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Form elements
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+input, select, textarea {
+  width: 100%;
+  background: #EEE;
+  color: #404040;
+  font-family: inherit;
+  font-size: 0.7rem;
+  padding: 0.25rem;
+  border: 0.05rem solid #AAA;
+  box-sizing: border-box;
+}
+
+textarea {
+  font-family: "Kadwa", "sans-serif";
+  box-sizing: border-box;
+  display: inline-block;
+  resize: vertical;
+  min-height: 15rem;
+  line-height: 1.2rem;
+  padding: 0.5rem;
+  -webkit-hyphens: none;
+  hyphens: none;
+}
+
+input[type=submit] {
+  text-transform: uppercase;
+  border-radius: 0.1rem;
+}
+input:disabled {
+  background: #DDD;
+  color: #888;
+}
+input:disabled:hover {
+  cursor: not-allowed;
+}
+
+label {
+  text-transform: uppercase;
+  font-weight: normal;
+}
+label:after {
+  content: ":";
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Form buttons
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+#insert-button, #update-button, #delete-button {
+  color: #EEE;
+  border: 0.05rem solid #404040;
+}
+
+#insert-button {
+  background: #4D8D5D;
+}
+
+#update-button {
+  background: #6A8AA5;
+}
+
+#delete-button {
+  background: #C45C66;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Form message list
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+#message-list {
+  margin: 0;
+  padding: 0.5rem;
+  list-style: none;
+  background: #C45C66;
+  color: #EEE;
+  font-size: 0.6rem;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Search form
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+#search-form {
+  margin-bottom: 1rem;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Responsive Level #1
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+@media only screen and (max-width: 50em) {
+  html {
+    font-size: 1.125rem;
+    /*18px*/
+    background-image: none !important;
+  }
+}
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Responsive Level #2
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+@media only screen and (max-width: 37.5em) {
+  .flex.flex-responsive {
+    display: block;
+    width: auto;
+  }
+  .flex.flex-responsive > .flex-item {
+    width: 100%;
+  }
+  .flex.flex-responsive > .flex-item + .flex-item {
+    border-top: 0.05rem solid #AAA;
+  }
+
+  #main-navi {
+    font-size: 1rem;
+  }
+  #main-navi li span {
+    display: none;
+  }
+  #main-navi li .fa {
+    margin-right: 0;
+  }
+  #main-navi a {
+    padding: 0.5rem;
+  }
+
+  .flex-emoticons {
+    display: none;
+  }
+
+  .actions {
+    float: none;
+    display: flex;
+    width: 100%;
+    flex-grow: 1;
+    justify-content: center;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+  .actions li {
+    flex-grow: 1;
+  }
+  .actions li + li {
+    border-left: none;
+  }
+
+  .actions-before {
+    float: none;
+  }
+
+  .arguments {
+    font-size: 0.5rem;
+    line-height: 0.75rem;
+  }
+
+  main {
+    padding: 0.5rem;
+  }
+}
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# FontAwesome Main
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+.fa {
+  font: normal normal normal 14px/1 "FontAwesome";
+  font-size: inherit;
+  speak: none;
+  display: inline-block;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# FontAwesome Icons
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+.fa-bug:before {
+  content: "";
+}
+
+.fa-key:before {
+  content: "";
+}
+
+.fa-link:before {
+  content: "";
+}
+
+.fa-bold:before {
+  content: "";
+}
+
+.fa-code:before {
+  content: "";
+}
+
+.fa-user:before {
+  content: "";
+}
+
+.fa-book:before {
+  content: "";
+}
+
+.fa-italic:before {
+  content: "";
+}
+
+.fa-header:before {
+  content: "";
+}
+
+.fa-search:before {
+  content: "";
+}
+
+.fa-trash-o:before {
+  content: "";
+}
+
+.fa-sign-in:before {
+  content: "";
+}
+
+.fa-clock-o:before {
+  content: "";
+}
+
+.fa-list-ul:before {
+  content: "";
+}
+
+.fa-list-ol:before {
+  content: "";
+}
+
+.fa-database:before {
+  content: "";
+}
+
+.fa-language:before {
+  content: "";
+}
+
+.fa-sign-out:before {
+  content: "";
+}
+
+.fa-dashboard:before {
+  content: "";
+}
+
+.fa-picture-o:before {
+  content: "";
+}
+
+.fa-envelope-o:before {
+  content: "";
+}
+
+.fa-arrow-left:before {
+  content: "";
+}
+
+.fa-quote-right:before {
+  content: "";
+}
+
+.fa-user-secret:before {
+  content: "";
+}
+
+.fa-file-text-o:before {
+  content: "";
+}
+
+.fa-newspaper-o:before {
+  content: "";
+}
+
+.fa-arrow-right:before {
+  content: "";
+}
+
+.fa-external-link:before {
+  content: "";
+}
+
+.fa-github-square:before {
+  content: "";
+}
+
+.fa-pencil-square-o:before {
+  content: "";
+}
+
+.fa-exclamation-triangle:before {
+  content: "";
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Font "Font Awesome" [4.7.0] (by Fontello): SIL Open Font License (OFL)
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+@font-face {
+  font-family: "FontAwesome";
+  font-weight: 400;
+  src: url("../font/font-awesome-fontello.woff2") format("woff2");
+}
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Font "Kadwa": SIL Open Font License (OFL)
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+@font-face {
+  font-family: "Kadwa";
+  font-weight: 400;
+  src: url("../font/kadwa-n-400.woff2") format("woff2");
+}
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Font "Ruda": SIL Open Font License (OFL)
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+@font-face {
+  font-family: "Ruda";
+  font-weight: 400;
+  src: url("../font/ruda-n-400.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Ruda";
+  font-weight: 700;
+  src: url("../font/ruda-n-700.woff2") format("woff2");
+}
+
+/*# sourceMappingURL=main.css.map */
diff --git a/theme/admin/rsrc/css/main.css.map b/theme/admin/rsrc/css/main.css.map
new file mode 100644
index 0000000..ea7e511
--- /dev/null
+++ b/theme/admin/rsrc/css/main.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["main.scss","import/_responsive.scss","import/_font-awesome.scss","import/_fonts.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;;AAEA;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;AAEA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAIC;EACC;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAIF;EACC;;AAGD;EACC;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;AAKH;EACC;EACA;EACA;EACA;;AAEA;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAGD;EACG;EACA;EACA;;;AAIJ;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAIC;EACC;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;;AAEA;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;AAKH;EACC;EACA;EACA;;AAEA;EACC;;AAKH;EACC;EACA;;AAGD;EACC;EACA;EACA;;AAEA;EACC;;;AAKH;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;;AAKH;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EACC;EACA;;AAGD;EACC;EACA;;AAEA;EACC;;;AAKH;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AChtBD;AAAA;AAAA;AAGA;EACC;IACC;AAAqB;IACrB;;;AAIF;AAAA;AAAA;AAGA;EACC;IACC;IACA;;EAEA;IACC;;EAEA;IACC;;;EAKH;IACC;;EAGC;IACC;;EAGD;IACC;;EAIF;IACC;;;EAIF;IACC;;;EAGD;IACC;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACC;;EAEA;IACC;;;EAKH;IACC;;;EAGD;IACC;IACA;;;EAGD;IACC;;;AC7EF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;ACxID;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA","file":"main.css"}
\ No newline at end of file
diff --git a/theme/admin/rsrc/css/main.scss b/theme/admin/rsrc/css/main.scss
new file mode 100644
index 0000000..e5fdf5a
--- /dev/null
+++ b/theme/admin/rsrc/css/main.scss
@@ -0,0 +1,726 @@
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Selection
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+::-moz-selection {
+	background: #BBB;
+	color: #000;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Hyperlinks
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+a {
+	color: #0060A0;
+	text-decoration: none;
+
+	&:focus {
+		background: #CCC;
+	}
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Headings
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+h1, h2, h3, h4, h5, h6 {
+	margin: 0;
+	text-transform: uppercase;
+
+	+p {
+		margin-top: 0;
+	}
+
+	.fa {
+		margin-right: 0.25rem;
+	}
+}
+
+h1 {
+	font-size: 0.80rem;
+}
+
+h2 {
+	font-size: 0.70rem;
+}
+
+h3 {
+	font-size: 0.65rem;
+}
+
+h4 {
+	font-size: 0.60rem;
+}
+
+h5 {
+	font-size: 0.55rem;
+}
+
+h6 {
+	font-size: 0.50rem;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Document
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+html, body {
+	margin: 0;
+	padding: 0;
+}
+
+html {
+	font-size: 1.25rem;
+	color: #333;
+	background: #DDD;
+	-webkit-hyphens: auto;
+	hyphens: auto;
+}
+
+body {
+	font-family: "Ruda", "sans-serif";
+	font-size: 0.7rem;
+	line-height: 1.2rem;
+	display: flex;
+	min-height: 100vh;
+	flex-direction: column;
+}
+
+main {
+	padding: 0.75rem;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Main content
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+#main-content {
+	flex: 1;
+	width: 100%;
+	background: #FFF;
+	box-sizing: border-box;
+	border: 0.05rem solid #AAA;
+	border-top: none;
+	border-bottom: none;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Width
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+#main-content, .header-content {
+	max-width: 50rem;
+	margin: 0 auto;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Header
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+#main-header {
+	font-size: 0.6rem;
+}
+
+#header-text, #header-desc {
+	text-shadow: 0 -1px #4E718F, 1px 0 #4E718F, 0 1px #4E718F, -1px 0 #4E718F;
+}
+
+#header-text {
+	font-size: 0.8rem;
+	font-weight: 700;
+	text-transform: uppercase;
+}
+
+#header-desc {
+	font-size: 0.6rem;
+	font-weight: 700;
+	line-height: 1rem;
+
+	span {
+		color: #CCC;
+	}
+}
+
+#header-logo {
+	display: block;
+	max-height: 5rem;
+	float: left;
+	margin-right: 0.5rem;
+}
+
+.header-line {
+	padding: 0.5rem 0.75rem;
+	overflow: hidden;
+
+	&:first-child {
+		background: #5E819F;
+		position: sticky;
+		top: 0;
+	}
+
+	&:last-child {
+		background: #EEE;
+		border: 0.05rem solid #AAA;
+		border-left: none;
+		border-right: none;
+		padding: 0.25rem 0.75rem;
+	}
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Footer
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+#main-footer {
+	font-size: 0.6rem;
+	background: #EEE;
+	border-top: 0.05rem solid #AAA;
+	padding: 0.5rem 0.75rem;
+	text-align: center;
+
+	ul {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+
+		li {
+			display: inline;
+
+			.fa {
+				margin-right: 0.125rem;
+			}
+		}
+
+		li:after {
+			content: " · ";
+			font-weight: bold;
+		}
+
+		li:last-child:after {
+			content: none;
+		}
+	}
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Main Navigation
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+#main-navi {
+	ul {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+
+		li {
+			display: inline;
+
+			.fa {
+				margin-right: 0.25rem;
+			}
+		}
+
+		li:last-child {
+			float: right;
+		}
+
+		li:first-child {
+			float: none;
+		}
+	}
+
+	a {
+		padding: 0.1rem 0.3rem;
+		background: #DDD;
+		border: 0.05rem solid #AAA;
+		color: inherit;
+		text-decoration: none;
+		text-align: center;
+		display: inline-block;
+
+		&:hover, &:focus {
+			text-decoration: none;
+			background: #CCC;
+		}
+
+		&:focus {
+			background: #CCC;
+		}
+	}
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Site Navigation
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+#site-navi {
+	clear: both;
+	display: flex;
+	box-sizing: border-box;
+	justify-content: space-between;
+
+	> div {
+		display: flex;
+		align-items: center;
+		border: 0.05rem solid #AAA;
+		background: #EEE;
+
+		> a {
+			display: block;
+		}
+	}
+
+	.disabled {
+		pointer-events: none;
+		color: #AAA;
+	}
+
+	.active a {
+		background: #CCC !important;
+		font-weight: 600;
+		pointer-events: none;
+	}
+
+	ol {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+
+		li {
+			float: left;
+			display: inline-block;
+
+			+ li {
+				border-left: 0.05rem solid #AAA;
+			}
+		}
+	}
+
+	a {
+		padding: 0 0.5rem;
+		text-decoration: none;
+		color: inherit;
+		display: inline-block;
+
+		&:hover, &:focus {
+			background: #CCC;
+		}
+	}
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Actions
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+.actions {
+	margin: 0 0 0.5rem 0;
+	padding: 0;
+	list-style: none;
+	font-size: 0.6rem;
+	float: right;
+	text-align: center;
+
+	.fa {
+		margin-right: 0.1rem;
+	}
+
+	li {
+		display: inline-block;
+		font-weight: bold;
+		background: #EEE;
+		border: 0.05rem solid #AAA;
+	}
+
+	a {
+	   color: inherit;
+	   display: block;
+	   padding: 0 0.25rem;
+   }
+}
+
+.actions-before {
+	float: left;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Elements
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+pre {
+	margin-bottom: 1rem;
+	overflow: auto;
+	-moz-tab-size: 4;
+	tab-size: 4;
+}
+
+code, pre {
+	font-family: "monospace";
+	color: #B03060;
+}
+
+p {
+	margin-top: 0;
+}
+
+img {
+	border: none;
+	max-width: 100%;
+}
+
+.red {
+	color: #B03060;
+}
+
+.blue {
+	color: #40779A;
+}
+
+.green {
+	color: #008B45;
+}
+
+.right {
+	float: right;
+}
+
+.hidden {
+	display: none;
+}
+
+#database-result {
+	color: inherit;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Tables
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+table {
+	width: 100%;
+	margin-bottom: 1rem;
+}
+
+td {
+	vertical-align: middle;
+}
+
+table, td {
+	padding: 0.5rem;
+	border: 0.05rem solid #AAA;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Brackets
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+.brackets {
+	&:after, &:before {
+		color: #222;
+	}
+
+	&:before {
+		content: "[";
+	}
+
+	&:after {
+		content: "]";
+	}
+}
+
+.brackets a, a.brackets {
+	text-decoration: none;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Item Element
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+.item {
+	display: block;
+	border: 0.05rem solid #AAA;
+	margin-bottom: 1rem;
+	clear: both;
+
+	header {
+		padding: 0.5rem 0.75rem;
+		border-bottom: 0.05rem solid #AAA;
+		position: sticky;
+		top: 0;
+	}
+
+	footer {
+		border-top: 0.05rem solid #AAA;
+
+		ul {
+			margin: 0;
+			padding: 0;
+			list-style: none;
+
+			li {
+				display: inline-block;
+				float: left;
+
+				&:last-child {
+					float: right;
+				}
+			}
+		}
+
+		a {
+			color: inherit;
+			display: inline-block;
+			padding: 0.25rem 2rem;
+
+			&:hover, &:active {
+				background: #DDD;
+			}
+		}
+	}
+
+	header, footer {
+		background: #EEE;
+		overflow: hidden;
+	}
+
+	blockquote {
+		margin: 0;
+		padding: 0.75rem;
+		font-family: inherit;
+
+		p {
+			margin-bottom: 0;
+		}
+	}
+}
+
+.item-id {
+	float: right;
+	color: #666;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Argument list
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+.arguments {
+	list-style: none;
+	margin: 0;
+	padding: 0.25rem 0.75rem;
+	background: #EEE;
+	font-size: 0.6rem;
+	text-align: center;
+	border-top: 0.05rem solid #AAA;
+
+	li {
+		display: inline;
+
+		> span {
+			color: #40779A;
+		}
+
+		&:after {
+			content: " · ";
+			font-weight: bold;
+		}
+
+		&:last-child:after {
+			content: none;
+		}
+	}
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Form flex-box
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+form {
+	border: 0.05rem solid #AAA;
+}
+
+.flex {
+	display: flex;
+	width: 100%;
+	justify-content: center;
+	overflow: hidden;
+	box-sizing: border-box;
+
+	+ .flex {
+		border-top: 0.05rem solid #AAA;
+	}
+}
+
+.flex > .flex-item {
+	border-right: 0.05rem solid #AAA;
+	display: flex;
+	width: 100%;
+
+	&:last-child {
+		border-right: none;
+	}
+
+	> div {
+		display: flex;
+		align-items: center;
+		padding: 0.5rem;
+		box-sizing: border-box;
+
+		+ div {
+			border-left: 0.05rem solid #AAA;
+		}
+	}
+}
+
+.flex.flex-responsive > .flex-item {
+	width: 50%;
+}
+
+.form-icon-flex {
+	background: #DDD;
+	width: 10%;
+	justify-content: center;
+}
+
+.form-label-flex {
+	background: #DDD;
+	width: 30%;
+	border-left: none !important;
+}
+
+.form-field-flex {
+	width: 60%;
+}
+
+.background {
+	background: #DDD;
+}
+
+.flex-padding {
+	padding: 0.5rem;
+}
+
+.flex-direction-column {
+	flex-direction: column;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Form buttons
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+#button-list-wrapper {
+	border-bottom: 0.05rem solid #AAA;
+	background: #EEE;
+}
+
+.button-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.button-list.emoticons > li {
+	font-size: 1.25rem;
+	display: inline-block;
+	padding: 0.2rem;
+	border-bottom: 0.2rem solid transparent;
+	border-radius: 0.1rem;
+	cursor: pointer;
+
+	&:hover, &:active {
+		border-bottom: 0.2rem solid #AAA;
+	}
+}
+
+.button-list.markdown > li {
+	float: left;
+	padding: 0.5rem;
+	cursor: pointer;
+	width: 1.75rem;
+	box-sizing: border-box;
+	text-align: center;
+
+	&:hover, &:active {
+		color: #40779A;
+	}
+}
+
+#content-editor {
+	border: none;
+	margin: 0;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Form elements
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+input, select, textarea {
+	width: 100%;
+	background: #EEE;
+	color: #404040;
+	font-family: inherit;
+	font-size: 0.7rem;
+	padding: 0.25rem;
+	border: 0.05rem solid #AAA;
+	box-sizing: border-box;
+}
+
+textarea {
+	font-family: "Kadwa", "sans-serif";
+	box-sizing: border-box;
+	display: inline-block;
+	resize: vertical;
+	min-height: 15rem;
+	line-height: 1.2rem;
+	padding: 0.5rem;
+	-webkit-hyphens: none;
+	hyphens: none;
+}
+
+input {
+	&[type="submit"] {
+		text-transform: uppercase;
+		border-radius: 0.1rem;
+	}
+
+	&:disabled {
+		background: #DDD;
+		color: #888;
+
+		&:hover {
+			cursor: not-allowed;
+		}
+	}
+}
+
+label {
+	text-transform: uppercase;
+	font-weight: normal;
+
+	&:after {
+		content: ":";
+	}
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Form buttons
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+#insert-button, #update-button, #delete-button {
+	color: #EEE;
+	border: 0.05rem solid #404040;
+}
+
+#insert-button {
+	background: #4D8D5D;
+}
+
+#update-button {
+	background: #6A8AA5;
+}
+
+#delete-button {
+	background: #C45C66;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Form message list
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+#message-list {
+	margin: 0;
+	padding: 0.5rem;
+	list-style: none;
+	background: #C45C66;
+	color: #EEE;
+	font-size: 0.6rem;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Search form
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+#search-form {
+	margin-bottom: 1rem;
+}
+
+@import "import/responsive";
+@import "import/font-awesome";
+@import "import/fonts";
-- 
cgit v1.2.3


From f5ce181aa89d295e108bd25cb7c6914cf020d565 Mon Sep 17 00:00:00 2001
From: Thomas Lange <code@nerdmind.de>
Date: Sat, 12 Jun 2021 01:37:18 +0200
Subject: Show first image from items content

If a item has at least one Markdown image embedded in its content, show
this image within the <blockquote> tag in the item.php template files.
---
 theme/admin/html/page/item.php    |  5 ++++-
 theme/admin/html/post/item.php    |  5 ++++-
 theme/admin/html/user/item.php    |  5 ++++-
 theme/admin/rsrc/css/main.css     | 12 +++++++++++-
 theme/admin/rsrc/css/main.css.map |  2 +-
 theme/admin/rsrc/css/main.scss    | 20 ++++++++++++++++----
 6 files changed, 40 insertions(+), 9 deletions(-)

(limited to 'theme/admin/rsrc/css')

diff --git a/theme/admin/html/page/item.php b/theme/admin/html/page/item.php
index a92b2fd..c61984c 100644
--- a/theme/admin/html/page/item.php
+++ b/theme/admin/html/page/item.php
@@ -8,6 +8,9 @@
 		</div>
 	</header>
 	<blockquote cite="<?=$PAGE['URL']?>">
+		<?php if(isset($PAGE['FILE']['LIST'][0])): ?>
+			<img class="item-image" src="<?=$PAGE['FILE']['LIST'][0]?>" alt="" />
+		<?php endif; ?>
 		<p><?=excerpt($PAGE['BODY']['HTML']())?></p>
 	</blockquote>
 
@@ -26,4 +29,4 @@
 			<li><a href="<?=Application::getAdminURL("page/delete.php?id={$PAGE['ATTR']['ID']}")?>" title="<?=$Language->text('delete_page')?>"><i class="fa fa-trash-o"></i><span class="hidden"><?=$Language->text('delete_page')?></span></a></li>
 		</ul>
 	</footer>
-</article>
\ No newline at end of file
+</article>
diff --git a/theme/admin/html/post/item.php b/theme/admin/html/post/item.php
index 8258d30..ae06752 100644
--- a/theme/admin/html/post/item.php
+++ b/theme/admin/html/post/item.php
@@ -8,6 +8,9 @@
 		</div>
 	</header>
 	<blockquote cite="<?=$POST['URL']?>">
+		<?php if(isset($POST['FILE']['LIST'][0])): ?>
+			<img class="item-image" src="<?=$POST['FILE']['LIST'][0]?>" alt="" />
+		<?php endif; ?>
 		<p><?=excerpt($POST['BODY']['HTML']())?></p>
 	</blockquote>
 
@@ -26,4 +29,4 @@
 			<li><a href="<?=Application::getAdminURL("post/delete.php?id={$POST['ATTR']['ID']}")?>" title="<?=$Language->text('delete_post')?>"><i class="fa fa-trash-o"></i><span class="hidden"><?=$Language->text('delete_post')?></span></a></li>
 		</ul>
 	</footer>
-</article>
\ No newline at end of file
+</article>
diff --git a/theme/admin/html/user/item.php b/theme/admin/html/user/item.php
index d8e43cf..ae16637 100644
--- a/theme/admin/html/user/item.php
+++ b/theme/admin/html/user/item.php
@@ -7,6 +7,9 @@
 		</div>
 	</header>
 	<blockquote cite="<?=$USER['URL']?>">
+		<?php if(isset($USER['FILE']['LIST'][0])): ?>
+			<img class="item-image" src="<?=$USER['FILE']['LIST'][0]?>" alt="" />
+		<?php endif; ?>
 		<p><?=excerpt($USER['BODY']['HTML']())?></p>
 	</blockquote>
 
@@ -25,4 +28,4 @@
 			<li><a href="<?=Application::getAdminURL("user/delete.php?id={$USER['ATTR']['ID']}")?>" title="<?=$Language->text('delete_user')?>"><i class="fa fa-trash-o"></i><span class="hidden"><?=$Language->text('delete_user')?></span></a></li>
 		</ul>
 	</footer>
-</article>
\ No newline at end of file
+</article>
diff --git a/theme/admin/rsrc/css/main.css b/theme/admin/rsrc/css/main.css
index 6f87bf1..fb88a04 100644
--- a/theme/admin/rsrc/css/main.css
+++ b/theme/admin/rsrc/css/main.css
@@ -428,16 +428,26 @@ table, td {
 .item blockquote {
   margin: 0;
   padding: 0.75rem;
+  overflow: hidden;
   font-family: inherit;
 }
 .item blockquote p {
   margin-bottom: 0;
 }
-
 .item-id {
   float: right;
   color: #666;
 }
+.item-image {
+  float: left;
+  display: block;
+  margin-right: 0.75rem;
+  width: 10rem;
+  height: 7rem;
+  object-fit: cover;
+  background: #EEE;
+  border: 0.05rem solid #AAA;
+}
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 # Argument list
diff --git a/theme/admin/rsrc/css/main.css.map b/theme/admin/rsrc/css/main.css.map
index ea7e511..4f2ac93 100644
--- a/theme/admin/rsrc/css/main.css.map
+++ b/theme/admin/rsrc/css/main.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["main.scss","import/_responsive.scss","import/_font-awesome.scss","import/_fonts.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;;AAEA;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;AAEA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAIC;EACC;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAIF;EACC;;AAGD;EACC;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;AAKH;EACC;EACA;EACA;EACA;;AAEA;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAGD;EACG;EACA;EACA;;;AAIJ;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAIC;EACC;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;;AAEA;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;AAKH;EACC;EACA;EACA;;AAEA;EACC;;AAKH;EACC;EACA;;AAGD;EACC;EACA;EACA;;AAEA;EACC;;;AAKH;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;;AAKH;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EACC;EACA;;AAGD;EACC;EACA;;AAEA;EACC;;;AAKH;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AChtBD;AAAA;AAAA;AAGA;EACC;IACC;AAAqB;IACrB;;;AAIF;AAAA;AAAA;AAGA;EACC;IACC;IACA;;EAEA;IACC;;EAEA;IACC;;;EAKH;IACC;;EAGC;IACC;;EAGD;IACC;;EAIF;IACC;;;EAIF;IACC;;;EAGD;IACC;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACC;;EAEA;IACC;;;EAKH;IACC;;;EAGD;IACC;IACA;;;EAGD;IACC;;;AC7EF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;ACxID;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA","file":"main.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["main.scss","import/_responsive.scss","import/_font-awesome.scss","import/_fonts.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;;AAEA;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;AAEA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAIC;EACC;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAIF;EACC;;AAGD;EACC;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;AAKH;EACC;EACA;EACA;EACA;;AAEA;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAGD;EACG;EACA;EACA;;;AAIJ;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAIC;EACC;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;;AAEA;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;AAKH;EACC;EACA;EACA;;AAEA;EACC;;AAKH;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;;AAKH;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EACC;EACA;;AAGD;EACC;EACA;;AAEA;EACC;;;AAKH;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AC5tBD;AAAA;AAAA;AAGA;EACC;IACC;AAAqB;IACrB;;;AAIF;AAAA;AAAA;AAGA;EACC;IACC;IACA;;EAEA;IACC;;EAEA;IACC;;;EAKH;IACC;;EAGC;IACC;;EAGD;IACC;;EAIF;IACC;;;EAIF;IACC;;;EAGD;IACC;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACC;;EAEA;IACC;;;EAKH;IACC;;;EAGD;IACC;IACA;;;EAGD;IACC;;;AC7EF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;ACxID;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA","file":"main.css"}
\ No newline at end of file
diff --git a/theme/admin/rsrc/css/main.scss b/theme/admin/rsrc/css/main.scss
index e5fdf5a..275013b 100644
--- a/theme/admin/rsrc/css/main.scss
+++ b/theme/admin/rsrc/css/main.scss
@@ -471,17 +471,29 @@ table, td {
 	blockquote {
 		margin: 0;
 		padding: 0.75rem;
+		overflow: hidden;
 		font-family: inherit;
 
 		p {
 			margin-bottom: 0;
 		}
 	}
-}
 
-.item-id {
-	float: right;
-	color: #666;
+	&-id {
+		float: right;
+		color: #666;
+	}
+
+	&-image {
+		float: left;
+		display: block;
+		margin-right: 0.75rem;
+		width: 10rem;
+		height: 7rem;
+		object-fit: cover;
+		background: #EEE;
+		border: 0.05rem solid #AAA;
+	}
 }
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-- 
cgit v1.2.3


From 5a5e04a43b3beba53e2c773f3dc55f9acc0a7460 Mon Sep 17 00:00:00 2001
From: Thomas Lange <code@nerdmind.de>
Date: Sat, 12 Jun 2021 22:29:17 +0200
Subject: Place message boxes outside the <form> elements

---
 theme/admin/html/auth.php      | 20 ++++++++++----------
 theme/admin/html/database.php  | 20 ++++++++++----------
 theme/admin/html/page/form.php | 22 +++++++++++-----------
 theme/admin/html/post/form.php | 22 +++++++++++-----------
 theme/admin/html/user/form.php | 22 +++++++++++-----------
 theme/admin/rsrc/css/main.css  |  4 ++++
 theme/admin/rsrc/css/main.scss |  5 +++++
 7 files changed, 62 insertions(+), 53 deletions(-)

(limited to 'theme/admin/rsrc/css')

diff --git a/theme/admin/html/auth.php b/theme/admin/html/auth.php
index ebb7a2a..c1dedda 100644
--- a/theme/admin/html/auth.php
+++ b/theme/admin/html/auth.php
@@ -1,19 +1,19 @@
 <h1><i class="fa fa-sign-in"></i><?=$Language->text('authentication_text')?></h1>
 <p><?=$Language->text('authentication_desc')?></p>
 
+<?php if($FORM['INFO']): ?>
+	<div id="message-list-wrapper">
+		<ul id="message-list">
+			<?php foreach($FORM['INFO'] as $message): ?>
+				<li><?=$message?></li>
+			<?php endforeach ?>
+		</ul>
+	</div>
+<?php endif ?>
+
 <form action="" method="POST">
 	<input type="hidden" name="token" value="<?=$FORM['TOKEN']?>" />
 
-	<?php if($FORM['INFO']): ?>
-		<div class="flex flex-direction-column">
-			<ul id="message-list">
-				<?php foreach($FORM['INFO'] as $message): ?>
-					<li><?=$message?></li>
-				<?php endforeach; ?>
-			</ul>
-		</div>
-	<?php endif; ?>
-
 	<div class="flex">
 		<div class="flex-item">
 			<div class="form-icon-flex"><i class="fa fa-user-secret"></i></div>
diff --git a/theme/admin/html/database.php b/theme/admin/html/database.php
index 21701bd..5062ae1 100644
--- a/theme/admin/html/database.php
+++ b/theme/admin/html/database.php
@@ -1,19 +1,19 @@
 <h1><i class="fa fa-database"></i><?=$Language->text('overview_database_text')?></h1>
 <p><?=$Language->text('overview_database_desc')?></p>
 
+<?php if($FORM['INFO']): ?>
+	<div id="message-list-wrapper">
+		<ul id="message-list">
+			<?php foreach($FORM['INFO'] as $message): ?>
+				<li><?=$message?></li>
+			<?php endforeach ?>
+		</ul>
+	</div>
+<?php endif ?>
+
 <form action="" method="POST">
 	<input type="hidden" name="token" value="<?=$FORM['TOKEN']?>" />
 
-	<?php if($FORM['INFO']): ?>
-		<div class="flex flex-direction-column">
-			<ul id="message-list">
-				<?php foreach($FORM['INFO'] as $message): ?>
-					<li><?=$message?></li>
-				<?php endforeach; ?>
-			</ul>
-		</div>
-	<?php endif; ?>
-
 	<div class="flex">
 		<textarea id="content-editor" placeholder="<?=$Language->text('database_warning')?>" name="command"><?=escapeHTML($FORM['COMMAND'])?></textarea>
 	</div>
diff --git a/theme/admin/html/page/form.php b/theme/admin/html/page/form.php
index 6a4be33..d26b207 100644
--- a/theme/admin/html/page/form.php
+++ b/theme/admin/html/page/form.php
@@ -1,16 +1,16 @@
+<?php if($FORM['INFO']): ?>
+	<div id="message-list-wrapper">
+		<ul id="message-list">
+			<?php foreach($FORM['INFO'] as $message): ?>
+				<li><?=$message?></li>
+			<?php endforeach ?>
+		</ul>
+	</div>
+<?php endif ?>
+
 <form action="" method="POST">
 	<input type="hidden" name="token" value="<?=$FORM['TOKEN']?>" />
 
-	<?php if($FORM['INFO']): ?>
-		<div class="flex flex-direction-column">
-			<ul id="message-list">
-				<?php foreach($FORM['INFO'] as $message): ?>
-					<li><?=$message?></li>
-				<?php endforeach; ?>
-			</ul>
-		</div>
-	<?php endif; ?>
-
 <?php if($FORM['TYPE'] !== 'DELETE'): ?>
 	<div class="flex flex-responsive">
 		<div class="flex-item">
@@ -95,4 +95,4 @@
 			<input id="delete-button" type="submit" name="delete" value="<?=$Language->text('delete')?>" data-text="<?=$Language->text('sure')?>" />
 		<?php endif; ?>
 	</div>
-</form>
\ No newline at end of file
+</form>
diff --git a/theme/admin/html/post/form.php b/theme/admin/html/post/form.php
index 50f8fa6..e6966ea 100644
--- a/theme/admin/html/post/form.php
+++ b/theme/admin/html/post/form.php
@@ -1,16 +1,16 @@
+<?php if($FORM['INFO']): ?>
+	<div id="message-list-wrapper">
+		<ul id="message-list">
+			<?php foreach($FORM['INFO'] as $message): ?>
+				<li><?=$message?></li>
+			<?php endforeach ?>
+		</ul>
+	</div>
+<?php endif ?>
+
 <form action="" method="POST">
 	<input type="hidden" name="token" value="<?=$FORM['TOKEN']?>" />
 
-	<?php if($FORM['INFO']): ?>
-		<div class="flex flex-direction-column">
-			<ul id="message-list">
-				<?php foreach($FORM['INFO'] as $message): ?>
-					<li><?=$message?></li>
-				<?php endforeach; ?>
-			</ul>
-		</div>
-	<?php endif; ?>
-
 <?php if($FORM['TYPE'] !== 'DELETE'): ?>
 	<div class="flex flex-responsive">
 		<div class="flex-item">
@@ -95,4 +95,4 @@
 			<input id="delete-button" type="submit" name="delete" value="<?=$Language->text('delete')?>" data-text="<?=$Language->text('sure')?>" />
 		<?php endif; ?>
 	</div>
-</form>
\ No newline at end of file
+</form>
diff --git a/theme/admin/html/user/form.php b/theme/admin/html/user/form.php
index 9f17cac..970a6d9 100644
--- a/theme/admin/html/user/form.php
+++ b/theme/admin/html/user/form.php
@@ -1,16 +1,16 @@
+<?php if($FORM['INFO']): ?>
+	<div id="message-list-wrapper">
+		<ul id="message-list">
+			<?php foreach($FORM['INFO'] as $message): ?>
+				<li><?=$message?></li>
+			<?php endforeach ?>
+		</ul>
+	</div>
+<?php endif ?>
+
 <form action="" method="POST">
 	<input type="hidden" name="token" value="<?=$FORM['TOKEN']?>" />
 
-	<?php if($FORM['INFO']): ?>
-		<div class="flex flex-direction-column">
-			<ul id="message-list">
-				<?php foreach($FORM['INFO'] as $message): ?>
-					<li><?=$message?></li>
-				<?php endforeach; ?>
-			</ul>
-		</div>
-	<?php endif; ?>
-
 <?php if($FORM['TYPE'] !== 'DELETE'): ?>
 	<div class="flex flex-responsive">
 		<div class="flex-item">
@@ -101,4 +101,4 @@
 			<input id="delete-button" type="submit" name="delete" value="<?=$Language->text('delete')?>" data-text="<?=$Language->text('sure')?>" />
 		<?php endif; ?>
 	</div>
-</form>
\ No newline at end of file
+</form>
diff --git a/theme/admin/rsrc/css/main.css b/theme/admin/rsrc/css/main.css
index fb88a04..ba299a2 100644
--- a/theme/admin/rsrc/css/main.css
+++ b/theme/admin/rsrc/css/main.css
@@ -663,6 +663,10 @@ label:after {
   color: #EEE;
   font-size: 0.6rem;
 }
+#message-list-wrapper {
+  margin-bottom: 0.5rem;
+  border: 0.1rem solid #ae3f4a;
+}
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 # Search form
diff --git a/theme/admin/rsrc/css/main.scss b/theme/admin/rsrc/css/main.scss
index 275013b..90a938a 100644
--- a/theme/admin/rsrc/css/main.scss
+++ b/theme/admin/rsrc/css/main.scss
@@ -724,6 +724,11 @@ label {
 	background: #C45C66;
 	color: #EEE;
 	font-size: 0.6rem;
+
+	&-wrapper {
+		margin-bottom: 0.5rem;
+		border: 0.1rem solid darken(#C45C66, 10%);
+	}
 }
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-- 
cgit v1.2.3


From 78621a37ee08ecf4c9aa8faa42ddf2907a6ee406 Mon Sep 17 00:00:00 2001
From: Thomas Lange <code@nerdmind.de>
Date: Sat, 12 Jun 2021 23:42:59 +0200
Subject: Remove outline from focused form elements

---
 theme/admin/rsrc/css/main.css  | 3 +++
 theme/admin/rsrc/css/main.scss | 4 ++++
 2 files changed, 7 insertions(+)

(limited to 'theme/admin/rsrc/css')

diff --git a/theme/admin/rsrc/css/main.css b/theme/admin/rsrc/css/main.css
index ba299a2..d440684 100644
--- a/theme/admin/rsrc/css/main.css
+++ b/theme/admin/rsrc/css/main.css
@@ -599,6 +599,9 @@ input, select, textarea {
   border: 0.05rem solid #AAA;
   box-sizing: border-box;
 }
+input:focus, select:focus, textarea:focus {
+  outline: none;
+}
 
 textarea {
   font-family: "Kadwa", "sans-serif";
diff --git a/theme/admin/rsrc/css/main.scss b/theme/admin/rsrc/css/main.scss
index 90a938a..c60f354 100644
--- a/theme/admin/rsrc/css/main.scss
+++ b/theme/admin/rsrc/css/main.scss
@@ -655,6 +655,10 @@ input, select, textarea {
 	padding: 0.25rem;
 	border: 0.05rem solid #AAA;
 	box-sizing: border-box;
+
+	&:focus {
+		outline: none;
+	}
 }
 
 textarea {
-- 
cgit v1.2.3


From e5da1f532334a265e1b1c88d2a942e92654370d6 Mon Sep 17 00:00:00 2001
From: Thomas Lange <code@nerdmind.de>
Date: Sun, 13 Jun 2021 00:14:38 +0200
Subject: Replace the flex layout in favor of a grid layout

This commit replaces the initial CSS flexbox layout for forms of the
admin theme with a more elegant approach called "grid layout". :)

Some interesting information:
https://www.w3schools.com/css/css_grid.asp
https://blog.logrocket.com/flexbox-vs-css-grid/
---
 theme/admin/html/auth.php                    |  26 ++++---
 theme/admin/html/database.php                |   6 +-
 theme/admin/html/page/form.php               |  86 +++++++++++----------
 theme/admin/html/page/search.php             |   6 +-
 theme/admin/html/post/form.php               |  86 +++++++++++----------
 theme/admin/html/post/search.php             |   6 +-
 theme/admin/html/user/form.php               |  98 +++++++++++++-----------
 theme/admin/rsrc/css/import/_responsive.scss |  19 ++---
 theme/admin/rsrc/css/main.css                | 108 +++++++++++----------------
 theme/admin/rsrc/css/main.css.map            |   2 +-
 theme/admin/rsrc/css/main.scss               |  99 ++++++++++++------------
 11 files changed, 265 insertions(+), 277 deletions(-)

(limited to 'theme/admin/rsrc/css')

diff --git a/theme/admin/html/auth.php b/theme/admin/html/auth.php
index c1dedda..a7b8b74 100644
--- a/theme/admin/html/auth.php
+++ b/theme/admin/html/auth.php
@@ -14,21 +14,23 @@
 <form action="" method="POST">
 	<input type="hidden" name="token" value="<?=$FORM['TOKEN']?>" />
 
-	<div class="flex">
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-user-secret"></i></div>
-			<div class="form-label-flex"><label for="form_username"><?=$Language->text('label_username')?></label></div>
-			<div class="form-field-flex"><input id="form_username" name="username" value="<?=escapeHTML($FORM['DATA']['USERNAME'])?>" /></div>
+	<div class="form-grid two-columns">
+		<label for="form_username">
+			<i class="fa fa-user-secret"></i><?=$Language->text('label_username')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_username" name="username" value="<?=escapeHTML($FORM['DATA']['USERNAME'])?>" />
 		</div>
-	</div>
-	<div class="flex">
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-key"></i></div>
-			<div class="form-label-flex"><label for="form_password"><?=$Language->text('label_password')?></label></div>
-			<div class="form-field-flex"><input type="password" id="form_password" name="password" /></div>
+
+		<label for="form_password">
+			<i class="fa fa-key"></i><?=$Language->text('label_password')?></label>
+
+		<div class="form-grid-item">
+			<input type="password" id="form_password" name="password" />
 		</div>
 	</div>
-	<div class="flex flex-padding background">
+
+	<div class="form-border-box background padding nobordertop">
 		<input type="submit" name="auth" value="<?=$Language->text('login')?>" />
 	</div>
 </form>
diff --git a/theme/admin/html/database.php b/theme/admin/html/database.php
index 5062ae1..b661a28 100644
--- a/theme/admin/html/database.php
+++ b/theme/admin/html/database.php
@@ -14,17 +14,17 @@
 <form action="" method="POST">
 	<input type="hidden" name="token" value="<?=$FORM['TOKEN']?>" />
 
-	<div class="flex">
+	<div class="form-border-box">
 		<textarea id="content-editor" placeholder="<?=$Language->text('database_warning')?>" name="command"><?=escapeHTML($FORM['COMMAND'])?></textarea>
 	</div>
 
 <?php if($FORM['RESULT']): ?>
-	<div class="flex flex-padding background flex-direction-column">
+	<div class="form-border-box background padding">
 		<pre id="database-result"><?=escapeHTML($FORM['RESULT'])?></pre>
 	</div>
 <?php endif; ?>
 
-	<div class="flex flex-padding background">
+	<div class="form-border-box background padding">
 		<input id="insert-button" type="submit" name="execute" value="Execute" />
 	</div>
 </form>
diff --git a/theme/admin/html/page/form.php b/theme/admin/html/page/form.php
index d26b207..eee61bf 100644
--- a/theme/admin/html/page/form.php
+++ b/theme/admin/html/page/form.php
@@ -12,49 +12,55 @@
 	<input type="hidden" name="token" value="<?=$FORM['TOKEN']?>" />
 
 <?php if($FORM['TYPE'] !== 'DELETE'): ?>
-	<div class="flex flex-responsive">
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-database"></i></div>
-			<div class="form-label-flex"><label for="form_id">ID</label></div>
-			<div class="form-field-flex"><input<?=($FORM['TYPE'] === 'UPDATE') ? ' disabled="disabled"' : '';?> id="form_id" name="id" type="number" placeholder="AUTO_INCREMENT" value="<?=escapeHTML($FORM['DATA']['ID'])?>" /></div>
+	<div class="form-grid">
+		<label for="form_id">
+			<i class="fa fa-database"></i>ID</label>
+
+		<div class="form-grid-item">
+			<input<?=($FORM['TYPE'] === 'UPDATE') ? ' disabled="disabled"' : '';?> id="form_id" name="id" type="number" placeholder="AUTO_INCREMENT" value="<?=escapeHTML($FORM['DATA']['ID'])?>" />
 		</div>
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-user"></i></div>
-			<div class="form-label-flex"><label for="form_user"><?=$Language->text('label_user')?></label></div>
-			<div class="form-field-flex">
-				<select id="form_user" name="user">
-					<?php foreach($FORM['USER_LIST'] as $user): ?>
-						<option value="<?=$user['ID']?>"<?=($FORM['DATA']['USER'] === $user['ID']) ? ' selected' : '' ?>><?=escapeHTML($user['FULLNAME'])?> [<?=$user['USERNAME']?>]</option>
-					<?php endforeach; ?>
-				</select>
-			</div>
+
+		<label for="form_user">
+			<i class="fa fa-user"></i><?=$Language->text('label_user')?></label>
+
+		<div class="form-grid-item">
+			<select id="form_user" name="user">
+				<?php foreach($FORM['USER_LIST'] as $user): ?>
+					<option value="<?=$user['ID']?>"<?=($FORM['DATA']['USER'] === $user['ID']) ? ' selected' : '' ?>><?=escapeHTML($user['FULLNAME'])?> [<?=$user['USERNAME']?>]</option>
+				<?php endforeach; ?>
+			</select>
 		</div>
-	</div>
-	<div class="flex flex-responsive">
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-file-text-o"></i></div>
-			<div class="form-label-flex"><label for="form_name"><?=$Language->text('label_name')?></label></div>
-			<div class="form-field-flex"><input id="form_name" name="name" value="<?=escapeHTML($FORM['DATA']['NAME'])?>" /></div>
+
+		<label for="form_name">
+			<i class="fa fa-file-text-o"></i><?=$Language->text('label_name')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_name" name="name" value="<?=escapeHTML($FORM['DATA']['NAME'])?>" />
 		</div>
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-link"></i></div>
-			<div class="form-label-flex"><label for="form_slug"><?=$Language->text('label_slug')?></label></div>
-			<div class="form-field-flex"><input id="form_slug" name="slug" value="<?=escapeHTML($FORM['DATA']['SLUG'])?>" /></div>
+
+		<label for="form_slug">
+			<i class="fa fa-link"></i><?=$Language->text('label_slug')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_slug" name="slug" value="<?=escapeHTML($FORM['DATA']['SLUG'])?>" />
 		</div>
-	</div>
-	<div class="flex flex-responsive">
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-clock-o"></i></div>
-			<div class="form-label-flex"><label for="form_time_insert"><?=$Language->text('label_insert')?></label></div>
-			<div class="form-field-flex"><input id="form_time_insert" name="time_insert" placeholder="YYYY-MM-DD HH:II:SS" value="<?=escapeHTML($FORM['DATA']['TIME_INSERT'])?>" /></div>
+
+		<label for="form_time_insert">
+			<i class="fa fa-clock-o"></i><?=$Language->text('label_insert')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_time_insert" name="time_insert" placeholder="YYYY-MM-DD HH:II:SS" value="<?=escapeHTML($FORM['DATA']['TIME_INSERT'])?>" />
 		</div>
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-clock-o"></i></div>
-			<div class="form-label-flex"><label for="form_time_update"><?=$Language->text('label_update')?></label></div>
-			<div class="form-field-flex"><input id="form_time_update" name="time_update" placeholder="<?=escapeHTML($FORM['DATA']['TIME_UPDATE'] ? $FORM['DATA']['TIME_UPDATE'] : 'CURRENT_TIMESTAMP')?>" value="" /></div>
+
+		<label for="form_time_update">
+			<i class="fa fa-clock-o"></i><?=$Language->text('label_update')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_time_update" name="time_update" placeholder="<?=escapeHTML($FORM['DATA']['TIME_UPDATE'] ? $FORM['DATA']['TIME_UPDATE'] : 'CURRENT_TIMESTAMP')?>" value="" />
 		</div>
 	</div>
-	<div class="flex flex-direction-column">
+
+	<div id="content-editor-wrapper" class="form-border-box">
 		<div id="button-list-wrapper">
 			<ul id="markdown-list" class="button-list markdown">
 				<li data-markdown="bold" class="fa fa-bold" title="<?=$Language->text('markdown_bold')?>"></li>
@@ -70,23 +76,23 @@
 		</div>
 		<textarea id="content-editor" name="body" placeholder="[…]"><?=escapeHTML($FORM['DATA']['BODY'])?></textarea>
 	</div>
-	<div class="flex flex-padding background flex-emoticons">
+	<div id="emoticon-list-wrapper" class="form-border-box background padding">
 		<ul id="emoticon-list" class="button-list emoticons">
 			<?php foreach(getUnicodeEmoticons() as $emoticon => $explanation):?>
 				<li data-emoticon="<?=$emoticon?>" title="<?=$explanation?>"><?=$emoticon?></li>
 			<?php endforeach; ?>
 		</ul>
 	</div>
-	<div class="flex flex-padding background">
+	<div class="form-border-box background padding">
 		<input id="form_argv" name="argv" maxlength="250" placeholder="[ARGUMENT_ONE=foo|ARGUMENT_TWO=bar …]" value="<?=escapeHTML($FORM['DATA']['ARGV'])?>" />
 	</div>
 <?php else: ?>
-	<div class="flex flex-padding background flex-direction-column">
+	<div class="form-border-box background padding">
 		<?=$HTML?>
 	</div>
 <?php endif; ?>
 
-	<div class="flex flex-padding background">
+	<div class="form-border-box background padding">
 		<?php if($FORM['TYPE'] === 'INSERT'): ?>
 			<input id="insert-button" type="submit" name="insert" value="<?=$Language->text('insert')?>" />
 		<?php elseif($FORM['TYPE'] === 'UPDATE'): ?>
diff --git a/theme/admin/html/page/search.php b/theme/admin/html/page/search.php
index a48f604..6506d34 100644
--- a/theme/admin/html/page/search.php
+++ b/theme/admin/html/page/search.php
@@ -2,10 +2,10 @@
 <p><?=$Language->text('search_page_desc')?></p>
 
 <form id="search-form" method="GET">
-	<div class="flex flex-padding background">
+	<div class="form-border-box background padding">
 		<input id="search-text" type="search" name="q" placeholder="<?=$Language->text('placeholder_search')?>" value="<?=escapeHTML($QUERY)?>" />
 	</div>
-	<div class="flex flex-padding background">
+	<div class="form-border-box background padding">
 		<input id="update-button" type="submit" value="<?=$Language->text('search')?>" />
 	</div>
 </form>
@@ -14,4 +14,4 @@
 	<?php foreach($PAGES as $page): ?>
 		<?php echo $page; ?>
 	<?php endforeach; ?>
-</div>
\ No newline at end of file
+</div>
diff --git a/theme/admin/html/post/form.php b/theme/admin/html/post/form.php
index e6966ea..58ac122 100644
--- a/theme/admin/html/post/form.php
+++ b/theme/admin/html/post/form.php
@@ -12,49 +12,55 @@
 	<input type="hidden" name="token" value="<?=$FORM['TOKEN']?>" />
 
 <?php if($FORM['TYPE'] !== 'DELETE'): ?>
-	<div class="flex flex-responsive">
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-database"></i></div>
-			<div class="form-label-flex"><label for="form_id">ID</label></div>
-			<div class="form-field-flex"><input<?=($FORM['TYPE'] === 'UPDATE') ? ' disabled="disabled"' : '';?> id="form_id" name="id" type="number" placeholder="AUTO_INCREMENT" value="<?=escapeHTML($FORM['DATA']['ID'])?>" /></div>
+	<div class="form-grid">
+		<label for="form_id">
+			<i class="fa fa-database"></i>ID</label>
+
+		<div class="form-grid-item">
+			<input<?=($FORM['TYPE'] === 'UPDATE') ? ' disabled="disabled"' : '';?> id="form_id" name="id" type="number" placeholder="AUTO_INCREMENT" value="<?=escapeHTML($FORM['DATA']['ID'])?>" />
 		</div>
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-user"></i></div>
-			<div class="form-label-flex"><label for="form_user"><?=$Language->text('label_user')?></label></div>
-			<div class="form-field-flex">
-				<select id="form_user" name="user">
-					<?php foreach($FORM['USER_LIST'] as $user): ?>
-						<option value="<?=$user['ID']?>"<?=($FORM['DATA']['USER'] === $user['ID']) ? ' selected' : '' ?>><?=escapeHTML($user['FULLNAME'])?> [<?=$user['USERNAME']?>]</option>
-					<?php endforeach; ?>
-				</select>
-			</div>
+
+		<label for="form_user">
+			<i class="fa fa-user"></i><?=$Language->text('label_user')?></label>
+
+		<div class="form-grid-item">
+			<select id="form_user" name="user">
+				<?php foreach($FORM['USER_LIST'] as $user): ?>
+					<option value="<?=$user['ID']?>"<?=($FORM['DATA']['USER'] === $user['ID']) ? ' selected' : '' ?>><?=escapeHTML($user['FULLNAME'])?> [<?=$user['USERNAME']?>]</option>
+				<?php endforeach; ?>
+			</select>
 		</div>
-	</div>
-	<div class="flex flex-responsive">
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-newspaper-o"></i></div>
-			<div class="form-label-flex"><label for="form_name"><?=$Language->text('label_name')?></label></div>
-			<div class="form-field-flex"><input id="form_name" name="name" value="<?=escapeHTML($FORM['DATA']['NAME'])?>" /></div>
+
+		<label for="form_name">
+			<i class="fa fa-newspaper-o"></i><?=$Language->text('label_name')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_name" name="name" value="<?=escapeHTML($FORM['DATA']['NAME'])?>" />
 		</div>
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-link"></i></div>
-			<div class="form-label-flex"><label for="form_slug"><?=$Language->text('label_slug')?></label></div>
-			<div class="form-field-flex"><input id="form_slug" name="slug" value="<?=escapeHTML($FORM['DATA']['SLUG'])?>" /></div>
+
+		<label for="form_slug">
+			<i class="fa fa-link"></i><?=$Language->text('label_slug')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_slug" name="slug" value="<?=escapeHTML($FORM['DATA']['SLUG'])?>" />
 		</div>
-	</div>
-	<div class="flex flex-responsive">
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-clock-o"></i></div>
-			<div class="form-label-flex"><label for="form_time_insert"><?=$Language->text('label_insert')?></label></div>
-			<div class="form-field-flex"><input id="form_time_insert" name="time_insert" placeholder="YYYY-MM-DD HH:II:SS" value="<?=escapeHTML($FORM['DATA']['TIME_INSERT'])?>" /></div>
+
+		<label for="form_time_insert">
+			<i class="fa fa-clock-o"></i><?=$Language->text('label_insert')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_time_insert" name="time_insert" placeholder="YYYY-MM-DD HH:II:SS" value="<?=escapeHTML($FORM['DATA']['TIME_INSERT'])?>" />
 		</div>
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-clock-o"></i></div>
-			<div class="form-label-flex"><label for="form_time_update"><?=$Language->text('label_update')?></label></div>
-			<div class="form-field-flex"><input id="form_time_update" name="time_update" placeholder="<?=escapeHTML($FORM['DATA']['TIME_UPDATE'] ? $FORM['DATA']['TIME_UPDATE'] : 'CURRENT_TIMESTAMP')?>" value="" /></div>
+
+		<label for="form_time_update">
+			<i class="fa fa-clock-o"></i><?=$Language->text('label_update')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_time_update" name="time_update" placeholder="<?=escapeHTML($FORM['DATA']['TIME_UPDATE'] ? $FORM['DATA']['TIME_UPDATE'] : 'CURRENT_TIMESTAMP')?>" value="" />
 		</div>
 	</div>
-	<div class="flex flex-direction-column">
+
+	<div id="content-editor-wrapper" class="form-border-box">
 		<div id="button-list-wrapper">
 			<ul id="markdown-list" class="button-list markdown">
 				<li data-markdown="bold" class="fa fa-bold" title="<?=$Language->text('markdown_bold')?>"></li>
@@ -70,23 +76,23 @@
 		</div>
 		<textarea id="content-editor" name="body" placeholder="[…]"><?=escapeHTML($FORM['DATA']['BODY'])?></textarea>
 	</div>
-	<div class="flex flex-padding background flex-emoticons">
+	<div id="emoticon-list-wrapper" class="form-border-box background padding">
 		<ul id="emoticon-list" class="button-list emoticons">
 			<?php foreach(getUnicodeEmoticons() as $emoticon => $explanation):?>
 				<li data-emoticon="<?=$emoticon?>" title="<?=$explanation?>"><?=$emoticon?></li>
 			<?php endforeach; ?>
 		</ul>
 	</div>
-	<div class="flex flex-padding background">
+	<div class="form-border-box background padding">
 		<input id="form_argv" name="argv" maxlength="250" placeholder="[ARGUMENT_ONE=foo|ARGUMENT_TWO=bar …]" value="<?=escapeHTML($FORM['DATA']['ARGV'])?>" />
 	</div>
 <?php else: ?>
-	<div class="flex flex-padding background flex-direction-column">
+	<div class="form-border-box background padding">
 		<?=$HTML?>
 	</div>
 <?php endif; ?>
 
-	<div class="flex flex-padding background">
+	<div class="form-border-box background padding">
 		<?php if($FORM['TYPE'] === 'INSERT'): ?>
 			<input id="insert-button" type="submit" name="insert" value="<?=$Language->text('insert')?>" />
 		<?php elseif($FORM['TYPE'] === 'UPDATE'): ?>
diff --git a/theme/admin/html/post/search.php b/theme/admin/html/post/search.php
index 4476786..1289879 100644
--- a/theme/admin/html/post/search.php
+++ b/theme/admin/html/post/search.php
@@ -2,10 +2,10 @@
 <p><?=$Language->text('search_post_desc')?></p>
 
 <form id="search-form" method="GET">
-	<div class="flex flex-padding background">
+	<div class="form-border-box background padding">
 		<input id="search-text" type="search" name="q" placeholder="<?=$Language->text('placeholder_search')?>" value="<?=escapeHTML($QUERY)?>" />
 	</div>
-	<div class="flex flex-padding background">
+	<div class="form-border-box background padding">
 		<input id="update-button" type="submit" value="<?=$Language->text('search')?>" />
 	</div>
 </form>
@@ -14,4 +14,4 @@
 	<?php foreach($POSTS as $post): ?>
 		<?php echo $post; ?>
 	<?php endforeach; ?>
-</div>
\ No newline at end of file
+</div>
diff --git a/theme/admin/html/user/form.php b/theme/admin/html/user/form.php
index 970a6d9..7e370e5 100644
--- a/theme/admin/html/user/form.php
+++ b/theme/admin/html/user/form.php
@@ -12,55 +12,65 @@
 	<input type="hidden" name="token" value="<?=$FORM['TOKEN']?>" />
 
 <?php if($FORM['TYPE'] !== 'DELETE'): ?>
-	<div class="flex flex-responsive">
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-database"></i></div>
-			<div class="form-label-flex"><label for="form_id">ID</label></div>
-			<div class="form-field-flex"><input<?=($FORM['TYPE'] === 'UPDATE') ? ' disabled="disabled"' : '';?> id="form_id" name="id" type="number" placeholder="AUTO_INCREMENT" value="<?=escapeHTML($FORM['DATA']['ID'])?>" /></div>
+	<div class="form-grid">
+		<label for="form_id">
+			<i class="fa fa-database"></i>ID</label>
+
+		<div class="form-grid-item">
+			<input<?=($FORM['TYPE'] === 'UPDATE') ? ' disabled="disabled"' : '';?> id="form_id" name="id" type="number" placeholder="AUTO_INCREMENT" value="<?=escapeHTML($FORM['DATA']['ID'])?>" />
 		</div>
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-key"></i></div>
-			<div class="form-label-flex"><label for="form_password"><?=$Language->text('label_password')?></label></div>
-			<div class="form-field-flex"><input id="form_password" name="password" placeholder="NO CHANGE" type="password" /></div>
+
+		<label for="form_password">
+			<i class="fa fa-key"></i><?=$Language->text('label_password')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_password" name="password" placeholder="NO CHANGE" type="password" />
 		</div>
-	</div>
-	<div class="flex flex-responsive">
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-user"></i></div>
-			<div class="form-label-flex"><label for="form_fullname"><?=$Language->text('label_fullname')?></label></div>
-			<div class="form-field-flex"><input id="form_fullname" name="fullname" value="<?=escapeHTML($FORM['DATA']['FULLNAME'])?>" /></div>
+
+		<label for="form_fullname">
+			<i class="fa fa-user"></i><?=$Language->text('label_fullname')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_fullname" name="fullname" value="<?=escapeHTML($FORM['DATA']['FULLNAME'])?>" />
 		</div>
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-envelope-o"></i></div>
-			<div class="form-label-flex"><label for="form_mailaddr"><?=$Language->text('label_mailaddr')?></label></div>
-			<div class="form-field-flex"><input id="form_mailaddr" name="mailaddr" value="<?=escapeHTML($FORM['DATA']['MAILADDR'])?>" /></div>
+
+		<label for="form_mailaddr">
+			<i class="fa fa-envelope-o"></i><?=$Language->text('label_mailaddr')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_mailaddr" name="mailaddr" value="<?=escapeHTML($FORM['DATA']['MAILADDR'])?>" />
 		</div>
-	</div>
-	<div class="flex flex-responsive">
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-user-secret"></i></div>
-			<div class="form-label-flex"><label for="form_username"><?=$Language->text('label_username')?></label></div>
-			<div class="form-field-flex"><input id="form_username" name="username" value="<?=escapeHTML($FORM['DATA']['USERNAME'])?>" /></div>
+
+		<label for="form_username">
+			<i class="fa fa-user-secret"></i><?=$Language->text('label_username')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_username" name="username" value="<?=escapeHTML($FORM['DATA']['USERNAME'])?>" />
 		</div>
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-link"></i></div>
-			<div class="form-label-flex"><label for="form_slug"><?=$Language->text('label_slug')?></label></div>
-			<div class="form-field-flex"><input id="form_slug" name="slug" value="<?=escapeHTML($FORM['DATA']['SLUG'])?>" /></div>
+
+		<label for="form_slug">
+			<i class="fa fa-link"></i><?=$Language->text('label_slug')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_slug" name="slug" value="<?=escapeHTML($FORM['DATA']['SLUG'])?>" />
 		</div>
-	</div>
-	<div class="flex flex-responsive">
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-clock-o"></i></div>
-			<div class="form-label-flex"><label for="form_time_insert"><?=$Language->text('label_insert')?></label></div>
-			<div class="form-field-flex"><input id="form_time_insert" name="time_insert" placeholder="YYYY-MM-DD HH:II:SS" value="<?=escapeHTML($FORM['DATA']['TIME_INSERT'])?>" /></div>
+
+		<label for="form_time_insert">
+			<i class="fa fa-clock-o"></i><?=$Language->text('label_insert')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_time_insert" name="time_insert" placeholder="YYYY-MM-DD HH:II:SS" value="<?=escapeHTML($FORM['DATA']['TIME_INSERT'])?>" />
 		</div>
-		<div class="flex-item">
-			<div class="form-icon-flex"><i class="fa fa-clock-o"></i></div>
-			<div class="form-label-flex"><label for="form_time_update"><?=$Language->text('label_update')?></label></div>
-			<div class="form-field-flex"><input id="form_time_update" name="time_update" placeholder="<?=escapeHTML($FORM['DATA']['TIME_UPDATE'] ? $FORM['DATA']['TIME_UPDATE'] : 'CURRENT_TIMESTAMP')?>" value="" /></div>
+
+		<label for="form_time_update">
+			<i class="fa fa-clock-o"></i><?=$Language->text('label_update')?></label>
+
+		<div class="form-grid-item">
+			<input id="form_time_update" name="time_update" placeholder="<?=escapeHTML($FORM['DATA']['TIME_UPDATE'] ? $FORM['DATA']['TIME_UPDATE'] : 'CURRENT_TIMESTAMP')?>" value="" />
 		</div>
 	</div>
-	<div class="flex flex-direction-column">
+
+	<div id="content-editor-wrapper" class="form-border-box">
 		<div id="button-list-wrapper">
 			<ul id="markdown-list" class="button-list markdown">
 				<li data-markdown="bold" class="fa fa-bold" title="<?=$Language->text('markdown_bold')?>"></li>
@@ -76,23 +86,23 @@
 		</div>
 		<textarea id="content-editor" name="body" placeholder="[…]"><?=escapeHTML($FORM['DATA']['BODY'])?></textarea>
 	</div>
-	<div class="flex flex-padding background flex-emoticons">
+	<div id="emoticon-list-wrapper" class="form-border-box background padding">
 		<ul id="emoticon-list" class="button-list emoticons">
 			<?php foreach(getUnicodeEmoticons() as $emoticon => $explanation):?>
 				<li data-emoticon="<?=$emoticon?>" title="<?=$explanation?>"><?=$emoticon?></li>
 			<?php endforeach; ?>
 		</ul>
 	</div>
-	<div class="flex flex-padding background">
+	<div class="form-border-box background padding">
 		<input id="form_argv" name="argv" maxlength="250" placeholder="[ARGUMENT_ONE=foo|ARGUMENT_TWO=bar …]" value="<?=escapeHTML($FORM['DATA']['ARGV'])?>" />
 	</div>
 <?php else: ?>
-	<div class="flex flex-padding background flex-direction-column">
+	<div class="form-border-box background padding">
 		<?=$HTML?>
 	</div>
 <?php endif; ?>
 
-	<div class="flex flex-padding background">
+	<div class="form-border-box background padding">
 		<?php if($FORM['TYPE'] === 'INSERT'): ?>
 			<input id="insert-button" type="submit" name="insert" value="<?=$Language->text('insert')?>" />
 		<?php elseif($FORM['TYPE'] === 'UPDATE'): ?>
diff --git a/theme/admin/rsrc/css/import/_responsive.scss b/theme/admin/rsrc/css/import/_responsive.scss
index a8275bf..2d3d62a 100644
--- a/theme/admin/rsrc/css/import/_responsive.scss
+++ b/theme/admin/rsrc/css/import/_responsive.scss
@@ -12,19 +12,6 @@
 # Responsive Level #2
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 @media only screen and (max-width: 37.5em) {
-	.flex.flex-responsive {
-		display: block;
-		width: auto;
-
-		> .flex-item {
-			width: 100%;
-
-			+ .flex-item {
-				border-top: 0.05rem solid #AAA;
-			}
-		}
-	}
-
 	#main-navi {
 		font-size: 1rem;
 
@@ -43,10 +30,14 @@
 		}
 	}
 
-	.flex-emoticons {
+	#emoticon-list-wrapper {
 		display: none;
 	}
 
+	.form-grid {
+		grid-template-columns: auto auto;
+	}
+
 	.actions {
 		float: none;
 		display: flex;
diff --git a/theme/admin/rsrc/css/main.css b/theme/admin/rsrc/css/main.css
index d440684..2677f19 100644
--- a/theme/admin/rsrc/css/main.css
+++ b/theme/admin/rsrc/css/main.css
@@ -476,79 +476,63 @@ table, td {
 }
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-# Form flex-box
+# Grids
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
-form {
-  border: 0.05rem solid #AAA;
-}
-
-.flex {
-  display: flex;
-  width: 100%;
-  justify-content: center;
-  overflow: hidden;
-  box-sizing: border-box;
-}
-.flex + .flex {
-  border-top: 0.05rem solid #AAA;
-}
-
-.flex > .flex-item {
-  border-right: 0.05rem solid #AAA;
-  display: flex;
-  width: 100%;
+.form-grid {
+  display: grid;
+  grid-template-columns: 8rem auto 8rem auto;
+  border-left: 0.05rem solid #AAA;
+  border-bottom: 0.05rem solid #AAA;
 }
-.flex > .flex-item:last-child {
-  border-right: none;
+.form-grid.two-columns {
+  grid-template-columns: auto auto;
 }
-.flex > .flex-item > div {
+.form-grid > label {
   display: flex;
   align-items: center;
-  padding: 0.5rem;
-  box-sizing: border-box;
+  background: #DDD;
 }
-.flex > .flex-item > div + div {
-  border-left: 0.05rem solid #AAA;
+.form-grid > label .fa {
+  margin-left: 0.5rem;
+  margin-right: 1rem;
 }
-
-.flex.flex-responsive > .flex-item {
-  width: 50%;
-}
-
-.form-icon-flex {
-  background: #DDD;
-  width: 10%;
-  justify-content: center;
+.form-grid-item,
+.form-grid > label {
+  padding: 0.5rem;
+  border-top: 0.05rem solid #AAA;
+  border-right: 0.05rem solid #AAA;
 }
 
-.form-label-flex {
-  background: #DDD;
-  width: 30%;
-  border-left: none !important;
+.form-border-box {
+  border: 0.05rem solid #AAA;
 }
-
-.form-field-flex {
-  width: 60%;
+.form-border-box.padding {
+  padding: 0.5rem;
 }
-
-.background {
+.form-border-box.background {
   background: #DDD;
 }
-
-.flex-padding {
-  padding: 0.5rem;
+.form-border-box.nobordertop {
+  border-top: none;
 }
-
-.flex-direction-column {
-  flex-direction: column;
+.form-border-box + .form-border-box {
+  border-top: none;
 }
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 # Form buttons
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+#emoticon-list-wrapper {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
 #button-list-wrapper {
   border-bottom: 0.05rem solid #AAA;
   background: #EEE;
+  overflow: hidden;
 }
 
 .button-list {
@@ -585,6 +569,9 @@ form {
   border: none;
   margin: 0;
 }
+#content-editor-wrapper {
+  border-top: none;
+}
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 # Form elements
@@ -606,7 +593,7 @@ input:focus, select:focus, textarea:focus {
 textarea {
   font-family: "Kadwa", "sans-serif";
   box-sizing: border-box;
-  display: inline-block;
+  display: block;
   resize: vertical;
   min-height: 15rem;
   line-height: 1.2rem;
@@ -692,17 +679,6 @@ label:after {
 # Responsive Level #2
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 @media only screen and (max-width: 37.5em) {
-  .flex.flex-responsive {
-    display: block;
-    width: auto;
-  }
-  .flex.flex-responsive > .flex-item {
-    width: 100%;
-  }
-  .flex.flex-responsive > .flex-item + .flex-item {
-    border-top: 0.05rem solid #AAA;
-  }
-
   #main-navi {
     font-size: 1rem;
   }
@@ -716,10 +692,14 @@ label:after {
     padding: 0.5rem;
   }
 
-  .flex-emoticons {
+  #emoticon-list-wrapper {
     display: none;
   }
 
+  .form-grid {
+    grid-template-columns: auto auto;
+  }
+
   .actions {
     float: none;
     display: flex;
diff --git a/theme/admin/rsrc/css/main.css.map b/theme/admin/rsrc/css/main.css.map
index 4f2ac93..3c7b8ab 100644
--- a/theme/admin/rsrc/css/main.css.map
+++ b/theme/admin/rsrc/css/main.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["main.scss","import/_responsive.scss","import/_font-awesome.scss","import/_fonts.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;;AAEA;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;AAEA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAIC;EACC;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAIF;EACC;;AAGD;EACC;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;AAKH;EACC;EACA;EACA;EACA;;AAEA;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAGD;EACG;EACA;EACA;;;AAIJ;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAIC;EACC;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;;AAEA;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;AAKH;EACC;EACA;EACA;;AAEA;EACC;;AAKH;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;;AAKH;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EACC;EACA;;AAGD;EACC;EACA;;AAEA;EACC;;;AAKH;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AC5tBD;AAAA;AAAA;AAGA;EACC;IACC;AAAqB;IACrB;;;AAIF;AAAA;AAAA;AAGA;EACC;IACC;IACA;;EAEA;IACC;;EAEA;IACC;;;EAKH;IACC;;EAGC;IACC;;EAGD;IACC;;EAIF;IACC;;;EAIF;IACC;;;EAGD;IACC;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACC;;EAEA;IACC;;;EAKH;IACC;;;EAGD;IACC;IACA;;;EAGD;IACC;;;AC7EF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;ACxID;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA","file":"main.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["main.scss","import/_responsive.scss","import/_font-awesome.scss","import/_fonts.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;;AAEA;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;AAEA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAIC;EACC;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAIF;EACC;;AAGD;EACC;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;AAKH;EACC;EACA;EACA;EACA;;AAEA;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAGD;EACG;EACA;EACA;;;AAIJ;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAIC;EACC;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;;AAEA;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;AAKH;EACC;EACA;EACA;;AAEA;EACC;;AAKH;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EAEA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAIF;AAAA;EAEC;EACA;EACA;;;AAIF;EACC;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EACC;EACA;;AAGD;EACC;EACA;;AAEA;EACC;;;AAKH;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;;AAIF;AAAA;AAAA;AAGA;EACC;;;AC9tBD;AAAA;AAAA;AAGA;EACC;IACC;AAAqB;IACrB;;;AAIF;AAAA;AAAA;AAGA;EACC;IACC;;EAGC;IACC;;EAGD;IACC;;EAIF;IACC;;;EAIF;IACC;;;EAGD;IACC;;;EAGD;IACC;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACC;;EAEA;IACC;;;EAKH;IACC;;;EAGD;IACC;IACA;;;EAGD;IACC;;;ACpEF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;ACxID;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA","file":"main.css"}
\ No newline at end of file
diff --git a/theme/admin/rsrc/css/main.scss b/theme/admin/rsrc/css/main.scss
index c60f354..e00c60a 100644
--- a/theme/admin/rsrc/css/main.scss
+++ b/theme/admin/rsrc/css/main.scss
@@ -527,83 +527,72 @@ table, td {
 }
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-# Form flex-box
+# Grids
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
-form {
-	border: 0.05rem solid #AAA;
-}
-
-.flex {
-	display: flex;
-	width: 100%;
-	justify-content: center;
-	overflow: hidden;
-	box-sizing: border-box;
+.form-grid {
+	display: grid;
+	grid-template-columns: 8rem auto 8rem auto;
 
-	+ .flex {
-		border-top: 0.05rem solid #AAA;
-	}
-}
-
-.flex > .flex-item {
-	border-right: 0.05rem solid #AAA;
-	display: flex;
-	width: 100%;
+	border-left: 0.05rem solid #AAA;
+	border-bottom: 0.05rem solid #AAA;
 
-	&:last-child {
-		border-right: none;
+	&.two-columns {
+		grid-template-columns: auto auto;
 	}
 
-	> div {
+	> label {
 		display: flex;
 		align-items: center;
-		padding: 0.5rem;
-		box-sizing: border-box;
+		background: #DDD;
 
-		+ div {
-			border-left: 0.05rem solid #AAA;
+		.fa {
+			margin-left: 0.5rem;
+			margin-right: 1rem;
 		}
 	}
-}
 
-.flex.flex-responsive > .flex-item {
-	width: 50%;
-}
-
-.form-icon-flex {
-	background: #DDD;
-	width: 10%;
-	justify-content: center;
+	&-item,
+	> label {
+		padding: 0.5rem;
+		border-top: 0.05rem solid #AAA;
+		border-right: 0.05rem solid #AAA;
+	}
 }
 
-.form-label-flex {
-	background: #DDD;
-	width: 30%;
-	border-left: none !important;
-}
+.form-border-box {
+	border: 0.05rem solid #AAA;
 
-.form-field-flex {
-	width: 60%;
-}
+	&.padding {
+		padding: 0.5rem;
+	}
 
-.background {
-	background: #DDD;
-}
+	&.background {
+		background: #DDD;
+	}
 
-.flex-padding {
-	padding: 0.5rem;
-}
+	&.nobordertop {
+		border-top: none;
+	}
 
-.flex-direction-column {
-	flex-direction: column;
+	+.form-border-box {
+		border-top: none;
+	}
 }
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 # Form buttons
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+#emoticon-list-wrapper {
+	display: flex;
+	width: 100%;
+	justify-content: center;
+	box-sizing: border-box;
+}
+
 #button-list-wrapper {
 	border-bottom: 0.05rem solid #AAA;
 	background: #EEE;
+	overflow: hidden;
 }
 
 .button-list {
@@ -641,6 +630,10 @@ form {
 #content-editor {
 	border: none;
 	margin: 0;
+
+	&-wrapper {
+		border-top: none;
+	}
 }
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
@@ -664,7 +657,7 @@ input, select, textarea {
 textarea {
 	font-family: "Kadwa", "sans-serif";
 	box-sizing: border-box;
-	display: inline-block;
+	display: block;
 	resize: vertical;
 	min-height: 15rem;
 	line-height: 1.2rem;
-- 
cgit v1.2.3


From b3fea3b92240a0ce51437ff84d933dd7a942a1b8 Mon Sep 17 00:00:00 2001
From: Thomas Lange <code@nerdmind.de>
Date: Sun, 13 Jun 2021 18:56:31 +0200
Subject: Ignore source maps for Javascript and CSS

---
 .gitignore                          | 2 ++
 theme/admin/rsrc/css/main.css.map   | 1 -
 theme/default/rsrc/css/main.css.map | 1 -
 3 files changed, 2 insertions(+), 2 deletions(-)
 delete mode 100644 theme/admin/rsrc/css/main.css.map
 delete mode 100644 theme/default/rsrc/css/main.css.map

(limited to 'theme/admin/rsrc/css')

diff --git a/.gitignore b/.gitignore
index ce3523a..5ebc515 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,4 @@
 .idea/
+*.js.map
+*.css.map
 core/configuration.php
diff --git a/theme/admin/rsrc/css/main.css.map b/theme/admin/rsrc/css/main.css.map
deleted file mode 100644
index 3c7b8ab..0000000
--- a/theme/admin/rsrc/css/main.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["main.scss","import/_responsive.scss","import/_font-awesome.scss","import/_fonts.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;;AAEA;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;AAEA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAIC;EACC;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAIF;EACC;;AAGD;EACC;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;AAKH;EACC;EACA;EACA;EACA;;AAEA;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAGD;EACG;EACA;EACA;;;AAIJ;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAIC;EACC;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;;AAEA;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;AAKH;EACC;EACA;EACA;;AAEA;EACC;;AAKH;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EAEA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAIF;AAAA;EAEC;EACA;EACA;;;AAIF;EACC;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EACC;EACA;;AAGD;EACC;EACA;;AAEA;EACC;;;AAKH;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;;AAIF;AAAA;AAAA;AAGA;EACC;;;AC9tBD;AAAA;AAAA;AAGA;EACC;IACC;AAAqB;IACrB;;;AAIF;AAAA;AAAA;AAGA;EACC;IACC;;EAGC;IACC;;EAGD;IACC;;EAIF;IACC;;;EAIF;IACC;;;EAGD;IACC;;;EAGD;IACC;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACC;;EAEA;IACC;;;EAKH;IACC;;;EAGD;IACC;IACA;;;EAGD;IACC;;;ACpEF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;ACxID;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA","file":"main.css"}
\ No newline at end of file
diff --git a/theme/default/rsrc/css/main.css.map b/theme/default/rsrc/css/main.css.map
deleted file mode 100644
index 8e8cbbf..0000000
--- a/theme/default/rsrc/css/main.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["main.scss","import/_responsive.scss","import/_font-awesome.scss","import/_fonts.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAGA;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;;AAEA;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAKH;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;;;AAKH;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;AAKH;EACC;EACA;EACA;EACA;;AAEA;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAIC;EACC;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;;;ACtZD;AAAA;AAAA;AAGA;EACC;IACC;AAAqB;IACrB;;;EAGD;IACC;;;EAGD;IACC;IACA;IACA;;;AAIF;AAAA;AAAA;AAGA;EACC;IACC;;;EAGD;IACC;;;EAGD;IACC;;;EAGD;IACC;;;EAGD;IACC;IACA;;;EAGD;IACC;IACA;IACA;;;EAGD;IACC;;;EAGD;IACC;;;EAGD;IACC;;;EAGD;IACC;;;EAGD;IACC;;;EAGD;AAAA;IAEC;IACA;;;AC1EF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AC/DD;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA","file":"main.css"}
\ No newline at end of file
-- 
cgit v1.2.3


From d3b109fae0e246d01b0c73afd828347bcf5d2e86 Mon Sep 17 00:00:00 2001
From: Thomas Lange <code@nerdmind.de>
Date: Sun, 13 Jun 2021 19:46:34 +0200
Subject: Use grid layout for items in administration area

Introduce a new 1/2/3-column CSS grid layout in the administration area
for items on overview pages and in the search results. The column count
of the grid depends on the users viewport width.

In addition, the default value of the following configuration settings
has been changed to 12 because 12 can also be divided by 2 and 3 which
is useful for the 1/2/3-column grid layout.

ADMIN.PAGE.LIST_SIZE = 12
ADMIN.POST.LIST_SIZE = 12
---
 core/application.php                         |  4 +-
 theme/admin/html/403.php                     |  2 +
 theme/admin/html/404.php                     |  2 +
 theme/admin/html/auth.php                    |  2 +
 theme/admin/html/database.php                |  2 +
 theme/admin/html/home.php                    |  3 +-
 theme/admin/html/main.php                    |  8 ++--
 theme/admin/html/page/delete.php             |  4 +-
 theme/admin/html/page/index.php              |  6 ++-
 theme/admin/html/page/insert.php             |  4 +-
 theme/admin/html/page/search.php             |  4 +-
 theme/admin/html/page/update.php             |  4 +-
 theme/admin/html/post/delete.php             |  4 +-
 theme/admin/html/post/index.php              |  6 ++-
 theme/admin/html/post/insert.php             |  4 +-
 theme/admin/html/post/search.php             |  4 +-
 theme/admin/html/post/update.php             |  4 +-
 theme/admin/html/user/delete.php             |  4 +-
 theme/admin/html/user/index.php              |  4 +-
 theme/admin/html/user/insert.php             |  4 +-
 theme/admin/html/user/update.php             |  4 +-
 theme/admin/rsrc/css/import/_responsive.scss | 46 +++++++++++++-----
 theme/admin/rsrc/css/main.css                | 71 ++++++++++++++++++++--------
 theme/admin/rsrc/css/main.scss               | 36 ++++++++++----
 24 files changed, 168 insertions(+), 68 deletions(-)

(limited to 'theme/admin/rsrc/css')

diff --git a/core/application.php b/core/application.php
index be70f92..3c431f8 100644
--- a/core/application.php
+++ b/core/application.php
@@ -95,8 +95,8 @@ foreach($configuration as $name => $value) {
 # Set default configuration (for admin prefixes)
 #===============================================================================
 foreach([
-	'ADMIN.PAGE.LIST_SIZE' => Application::get('PAGE.LIST_SIZE'),
-	'ADMIN.POST.LIST_SIZE' => Application::get('POST.LIST_SIZE'),
+	'ADMIN.PAGE.LIST_SIZE' => 12, # for 1/2/3-column grid layout
+	'ADMIN.POST.LIST_SIZE' => 12, # for 1/2/3-column grid layout
 	'ADMIN.USER.LIST_SIZE' => Application::get('USER.LIST_SIZE'),
 	'ADMIN.PAGE.LIST_SORT' => Application::get('PAGE.LIST_SORT'),
 	'ADMIN.POST.LIST_SORT' => Application::get('POST.LIST_SORT'),
diff --git a/theme/admin/html/403.php b/theme/admin/html/403.php
index f9a0afd..7f23212 100644
--- a/theme/admin/html/403.php
+++ b/theme/admin/html/403.php
@@ -1,2 +1,4 @@
+<main id="main-content">
 <h1><i class="fa fa-exclamation-triangle"></i><?=$Language->text('403_heading_text')?></h1>
 <p><?=$Language->text('403_heading_desc')?></p>
+</main>
diff --git a/theme/admin/html/404.php b/theme/admin/html/404.php
index d53d1bc..7fb06d8 100644
--- a/theme/admin/html/404.php
+++ b/theme/admin/html/404.php
@@ -1,2 +1,4 @@
+<main id="main-content">
 <h1><i class="fa fa-exclamation-triangle"></i><?=$Language->text('404_heading_text')?></h1>
 <p><?=$Language->text('404_heading_desc')?></p>
+</main>
diff --git a/theme/admin/html/auth.php b/theme/admin/html/auth.php
index a7b8b74..45b7e14 100644
--- a/theme/admin/html/auth.php
+++ b/theme/admin/html/auth.php
@@ -1,3 +1,4 @@
+<main id="main-content">
 <h1><i class="fa fa-sign-in"></i><?=$Language->text('authentication_text')?></h1>
 <p><?=$Language->text('authentication_desc')?></p>
 
@@ -34,3 +35,4 @@
 		<input type="submit" name="auth" value="<?=$Language->text('login')?>" />
 	</div>
 </form>
+</main>
diff --git a/theme/admin/html/database.php b/theme/admin/html/database.php
index b661a28..da41e68 100644
--- a/theme/admin/html/database.php
+++ b/theme/admin/html/database.php
@@ -1,3 +1,4 @@
+<main id="main-content">
 <h1><i class="fa fa-database"></i><?=$Language->text('overview_database_text')?></h1>
 <p><?=$Language->text('overview_database_desc')?></p>
 
@@ -28,3 +29,4 @@
 		<input id="insert-button" type="submit" name="execute" value="Execute" />
 	</div>
 </form>
+</main>
diff --git a/theme/admin/html/home.php b/theme/admin/html/home.php
index 083ae30..5331fa8 100644
--- a/theme/admin/html/home.php
+++ b/theme/admin/html/home.php
@@ -1,3 +1,4 @@
+<main id="main-content">
 <h1><i class="fa fa-dashboard"></i><?=$Language->text('overview_dashboard_text')?></h1>
 <p><?=$Language->text('overview_dashboard_desc')?></p>
 
@@ -43,4 +44,4 @@
 <?php else: ?>
 	<p><em><?=$Language->text('home_no_users')?></em></p>
 <?php endif; ?>
-
+</main>
diff --git a/theme/admin/html/main.php b/theme/admin/html/main.php
index 874ae81..699a742 100644
--- a/theme/admin/html/main.php
+++ b/theme/admin/html/main.php
@@ -38,11 +38,9 @@
 			</div>
 		</div>
 	</header>
-	<div id="main-content">
-		<main>
-			<?=$HTML?>
-		</main>
-	</div>
+
+	<?=$HTML?>
+
 	<footer id="main-footer">
 		<ul>
 			<li><i class="fa fa-github-square"></i><a href="https://github.com/Nerdmind/Blog/releases" target="_blank">Releases</a></li>
diff --git a/theme/admin/html/page/delete.php b/theme/admin/html/page/delete.php
index ccc569f..006090e 100644
--- a/theme/admin/html/page/delete.php
+++ b/theme/admin/html/page/delete.php
@@ -1,4 +1,6 @@
+<main id="main-content">
 <h1><i class="fa fa-trash-o"></i><?=$Language->text('delete_page')?></h1>
 <p><?=$Language->text('delete_page_desc')?></p>
 
-<?=$HTML?>
\ No newline at end of file
+<?=$HTML?>
+</main>
diff --git a/theme/admin/html/page/index.php b/theme/admin/html/page/index.php
index 7067c40..bdc7f94 100644
--- a/theme/admin/html/page/index.php
+++ b/theme/admin/html/page/index.php
@@ -1,3 +1,4 @@
+<main id="main-content" class="wide">
 <h1><i class="fa fa-file-text-o"></i><?=$Language->text('page_overview')?></h1>
 <p class="actions-before"><?=$Language->text('overview_page_desc')?></p>
 <ul class="actions">
@@ -5,10 +6,11 @@
 	<li><a href="<?=Application::getAdminURL('page/search.php')?>" title="<?=$Language->text('search_page')?>"><i class="fa fa-search"></i><?=$Language->text('search')?></a></li>
 </ul>
 
-<div class="item-container page">
+<div class="item-container page grid">
 	<?php foreach($LIST['PAGES'] as $page): ?>
 		<?php echo $page; ?>
 	<?php endforeach; ?>
 </div>
 
-<?=$PAGINATION['HTML']?>
\ No newline at end of file
+<?=$PAGINATION['HTML']?>
+</main>
diff --git a/theme/admin/html/page/insert.php b/theme/admin/html/page/insert.php
index 7442200..a77e47f 100644
--- a/theme/admin/html/page/insert.php
+++ b/theme/admin/html/page/insert.php
@@ -1,4 +1,6 @@
+<main id="main-content">
 <h1><i class="fa fa-pencil-square-o"></i><?=$Language->text('insert_page')?></h1>
 <p><?=$Language->text('insert_page_desc')?></p>
 
-<?=$HTML?>
\ No newline at end of file
+<?=$HTML?>
+</main>
diff --git a/theme/admin/html/page/search.php b/theme/admin/html/page/search.php
index 6506d34..145b0f9 100644
--- a/theme/admin/html/page/search.php
+++ b/theme/admin/html/page/search.php
@@ -1,3 +1,4 @@
+<main id="main-content" <?=!$PAGES ?: 'class="wide"'?>>
 <h1><i class="fa fa-search"></i><?=$Language->text('title_page_search')?></h1>
 <p><?=$Language->text('search_page_desc')?></p>
 
@@ -10,8 +11,9 @@
 	</div>
 </form>
 
-<div class="item-container post">
+<div class="item-container post grid">
 	<?php foreach($PAGES as $page): ?>
 		<?php echo $page; ?>
 	<?php endforeach; ?>
 </div>
+</main>
diff --git a/theme/admin/html/page/update.php b/theme/admin/html/page/update.php
index 77a7eb2..ce51d2a 100644
--- a/theme/admin/html/page/update.php
+++ b/theme/admin/html/page/update.php
@@ -1,4 +1,6 @@
+<main id="main-content">
 <h1><i class="fa fa-pencil-square-o"></i><?=$Language->text('update_page')?></h1>
 <p><?=$Language->text('update_page_desc')?></p>
 
-<?=$HTML?>
\ No newline at end of file
+<?=$HTML?>
+</main>
diff --git a/theme/admin/html/post/delete.php b/theme/admin/html/post/delete.php
index 6654377..ed82197 100644
--- a/theme/admin/html/post/delete.php
+++ b/theme/admin/html/post/delete.php
@@ -1,4 +1,6 @@
+<main id="main-content">
 <h1><i class="fa fa-trash-o"></i><?=$Language->text('delete_post')?></h1>
 <p><?=$Language->text('delete_post_desc')?></p>
 
-<?=$HTML?>
\ No newline at end of file
+<?=$HTML?>
+</main>
diff --git a/theme/admin/html/post/index.php b/theme/admin/html/post/index.php
index f884b05..83dd5dc 100644
--- a/theme/admin/html/post/index.php
+++ b/theme/admin/html/post/index.php
@@ -1,3 +1,4 @@
+<main id="main-content" class="wide">
 <h1><i class="fa fa-newspaper-o"></i><?=$Language->text('post_overview')?></h1>
 <p class="actions-before"><?=$Language->text('overview_post_desc')?></p>
 <ul class="actions">
@@ -5,10 +6,11 @@
 	<li><a href="<?=Application::getAdminURL('post/search.php')?>" title="<?=$Language->text('search_post')?>"><i class="fa fa-search"></i><?=$Language->text('search')?></a></li>
 </ul>
 
-<div class="item-container post">
+<div class="item-container post grid">
 	<?php foreach($LIST['POSTS'] as $post): ?>
 		<?php echo $post; ?>
 	<?php endforeach; ?>
 </div>
 
-<?=$PAGINATION['HTML']?>
\ No newline at end of file
+<?=$PAGINATION['HTML']?>
+</main>
diff --git a/theme/admin/html/post/insert.php b/theme/admin/html/post/insert.php
index dc32c24..9b7c588 100644
--- a/theme/admin/html/post/insert.php
+++ b/theme/admin/html/post/insert.php
@@ -1,4 +1,6 @@
+<main id="main-content">
 <h1><i class="fa fa-pencil-square-o"></i><?=$Language->text('insert_post')?></h1>
 <p><?=$Language->text('insert_post_desc')?></p>
 
-<?=$HTML?>
\ No newline at end of file
+<?=$HTML?>
+</main>
diff --git a/theme/admin/html/post/search.php b/theme/admin/html/post/search.php
index 1289879..00bd016 100644
--- a/theme/admin/html/post/search.php
+++ b/theme/admin/html/post/search.php
@@ -1,3 +1,4 @@
+<main id="main-content" <?=!$POSTS ?: 'class="wide"'?>>
 <h1><i class="fa fa-search"></i><?=$Language->text('title_post_search')?></h1>
 <p><?=$Language->text('search_post_desc')?></p>
 
@@ -10,8 +11,9 @@
 	</div>
 </form>
 
-<div class="item-container post">
+<div class="item-container post grid">
 	<?php foreach($POSTS as $post): ?>
 		<?php echo $post; ?>
 	<?php endforeach; ?>
 </div>
+</main>
diff --git a/theme/admin/html/post/update.php b/theme/admin/html/post/update.php
index a577bec..aa3835d 100644
--- a/theme/admin/html/post/update.php
+++ b/theme/admin/html/post/update.php
@@ -1,4 +1,6 @@
+<main id="main-content">
 <h1><i class="fa fa-pencil-square-o"></i><?=$Language->text('update_post')?></h1>
 <p><?=$Language->text('update_post_desc')?></p>
 
-<?=$HTML?>
\ No newline at end of file
+<?=$HTML?>
+</main>
diff --git a/theme/admin/html/user/delete.php b/theme/admin/html/user/delete.php
index 01927b2..b500a12 100644
--- a/theme/admin/html/user/delete.php
+++ b/theme/admin/html/user/delete.php
@@ -1,6 +1,8 @@
+<main id="main-content">
 <h1><i class="fa fa-trash-o"></i><?=$Language->text('delete_user')?></h1>
 <p><?=$Language->text('delete_user_desc')?></p>
 
 <p class="red"><?=$Language->text('delete_user_warning')?></p>
 
-<?=$HTML?>
\ No newline at end of file
+<?=$HTML?>
+</main>
diff --git a/theme/admin/html/user/index.php b/theme/admin/html/user/index.php
index aae8ee8..7e1d794 100644
--- a/theme/admin/html/user/index.php
+++ b/theme/admin/html/user/index.php
@@ -1,3 +1,4 @@
+<main id="main-content">
 <h1><i class="fa fa-user"></i><?=$Language->text('user_overview')?></h1>
 <p class="actions-before"><?=$Language->text('overview_user_desc')?></p>
 <ul class="actions">
@@ -10,4 +11,5 @@
 	<?php endforeach; ?>
 </div>
 
-<?=$PAGINATION['HTML']?>
\ No newline at end of file
+<?=$PAGINATION['HTML']?>
+</main>
diff --git a/theme/admin/html/user/insert.php b/theme/admin/html/user/insert.php
index 5cbdd06..7c7aba2 100644
--- a/theme/admin/html/user/insert.php
+++ b/theme/admin/html/user/insert.php
@@ -1,4 +1,6 @@
+<main id="main-content">
 <h1><i class="fa fa-pencil-square-o"></i><?=$Language->text('insert_user')?></h1>
 <p><?=$Language->text('insert_user_desc')?></p>
 
-<?=$HTML?>
\ No newline at end of file
+<?=$HTML?>
+</main>
diff --git a/theme/admin/html/user/update.php b/theme/admin/html/user/update.php
index e023925..ad12677 100644
--- a/theme/admin/html/user/update.php
+++ b/theme/admin/html/user/update.php
@@ -1,4 +1,6 @@
+<main id="main-content">
 <h1><i class="fa fa-pencil-square-o"></i><?=$Language->text('update_user')?></h1>
 <p><?=$Language->text('update_user_desc')?></p>
 
-<?=$HTML?>
\ No newline at end of file
+<?=$HTML?>
+</main>
diff --git a/theme/admin/rsrc/css/import/_responsive.scss b/theme/admin/rsrc/css/import/_responsive.scss
index 2d3d62a..e387c98 100644
--- a/theme/admin/rsrc/css/import/_responsive.scss
+++ b/theme/admin/rsrc/css/import/_responsive.scss
@@ -1,17 +1,34 @@
-/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-# Responsive Level #1
-++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
-@media only screen and (max-width: 50em) {
+@media only screen and (max-width: 90em /*1440px*/) {
+	.item-container.grid {
+		grid-template-columns: auto auto;
+	}
+}
+
+@media only screen and (min-width: 62.5em /*1000px*/) {
+	#main-content {
+		border: 0.05rem solid #AAA;
+		border-top: none;
+		border-bottom: none;
+	}
+}
+
+@media only screen and (max-width: 62.5em /*1000px*/) {
+	.item-container.grid {
+		grid-template-columns: auto;
+	}
+}
+
+@media only screen and (max-width: 50em /*800px*/) {
 	html {
 		font-size: 1.125rem; /*18px*/
-		background-image: none !important;
 	}
 }
 
-/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-# Responsive Level #2
-++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
-@media only screen and (max-width: 37.5em) {
+@media only screen and (max-width: 37.5em /*600px*/) {
+	#main-content {
+		padding: 0.5rem;
+	}
+
 	#main-navi {
 		font-size: 1rem;
 
@@ -34,6 +51,13 @@
 		display: none;
 	}
 
+	.item-container.grid {
+		grid-column-gap: 0.75rem;
+		grid-row-gap: 0.75rem;
+		column-gap: 0.75rem;
+		row-gap: 0.75rem;
+	}
+
 	.form-grid {
 		grid-template-columns: auto auto;
 	}
@@ -64,8 +88,4 @@
 		font-size: 0.5rem;
 		line-height: 0.75rem;
 	}
-
-	main {
-		padding: 0.5rem;
-	}
 }
diff --git a/theme/admin/rsrc/css/main.css b/theme/admin/rsrc/css/main.css
index 2677f19..f3a39c1 100644
--- a/theme/admin/rsrc/css/main.css
+++ b/theme/admin/rsrc/css/main.css
@@ -22,7 +22,7 @@ a:focus {
 # Headings
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 h1, h2, h3, h4, h5, h6 {
-  margin: 0;
+  margin-bottom: 0;
   text-transform: uppercase;
 }
 h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
@@ -33,6 +33,7 @@ h1 .fa, h2 .fa, h3 .fa, h4 .fa, h5 .fa, h6 .fa {
 }
 
 h1 {
+  margin-top: 0;
   font-size: 0.8rem;
 }
 
@@ -81,10 +82,6 @@ body {
   flex-direction: column;
 }
 
-main {
-  padding: 0.75rem;
-}
-
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 # Main content
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@@ -93,9 +90,10 @@ main {
   width: 100%;
   background: #FFF;
   box-sizing: border-box;
-  border: 0.05rem solid #AAA;
-  border-top: none;
-  border-bottom: none;
+  padding: 0.75rem;
+}
+#main-content.wide {
+  max-width: 90rem;
 }
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
@@ -230,6 +228,7 @@ main {
   display: flex;
   box-sizing: border-box;
   justify-content: space-between;
+  margin-top: 0.75rem;
 }
 #site-navi > div {
   display: flex;
@@ -387,9 +386,9 @@ table, td {
 # Item Element
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 .item {
-  display: block;
+  display: flex;
+  flex-direction: column;
   border: 0.05rem solid #AAA;
-  margin-bottom: 1rem;
   clear: both;
 }
 .item header {
@@ -398,6 +397,9 @@ table, td {
   position: sticky;
   top: 0;
 }
+.item header h2 {
+  margin-top: 0;
+}
 .item footer {
   border-top: 0.05rem solid #AAA;
 }
@@ -430,6 +432,7 @@ table, td {
   padding: 0.75rem;
   overflow: hidden;
   font-family: inherit;
+  flex-grow: 1;
 }
 .item blockquote p {
   margin-bottom: 0;
@@ -448,6 +451,15 @@ table, td {
   background: #EEE;
   border: 0.05rem solid #AAA;
 }
+.item-container.grid {
+  width: 100%;
+  display: grid;
+  grid-template-columns: auto auto auto;
+  grid-column-gap: 1rem;
+  grid-row-gap: 1rem;
+  column-gap: 1rem;
+  row-gap: 1rem;
+}
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 # Argument list
@@ -665,20 +677,34 @@ label:after {
   margin-bottom: 1rem;
 }
 
-/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-# Responsive Level #1
-++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+@media only screen and (max-width: 90em) {
+  .item-container.grid {
+    grid-template-columns: auto auto;
+  }
+}
+@media only screen and (min-width: 62.5em) {
+  #main-content {
+    border: 0.05rem solid #AAA;
+    border-top: none;
+    border-bottom: none;
+  }
+}
+@media only screen and (max-width: 62.5em) {
+  .item-container.grid {
+    grid-template-columns: auto;
+  }
+}
 @media only screen and (max-width: 50em) {
   html {
     font-size: 1.125rem;
     /*18px*/
-    background-image: none !important;
   }
 }
-/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-# Responsive Level #2
-++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 @media only screen and (max-width: 37.5em) {
+  #main-content {
+    padding: 0.5rem;
+  }
+
   #main-navi {
     font-size: 1rem;
   }
@@ -696,6 +722,13 @@ label:after {
     display: none;
   }
 
+  .item-container.grid {
+    grid-column-gap: 0.75rem;
+    grid-row-gap: 0.75rem;
+    column-gap: 0.75rem;
+    row-gap: 0.75rem;
+  }
+
   .form-grid {
     grid-template-columns: auto auto;
   }
@@ -724,10 +757,6 @@ label:after {
     font-size: 0.5rem;
     line-height: 0.75rem;
   }
-
-  main {
-    padding: 0.5rem;
-  }
 }
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 # FontAwesome Main
diff --git a/theme/admin/rsrc/css/main.scss b/theme/admin/rsrc/css/main.scss
index e00c60a..0397754 100644
--- a/theme/admin/rsrc/css/main.scss
+++ b/theme/admin/rsrc/css/main.scss
@@ -22,7 +22,7 @@ a {
 # Headings
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 h1, h2, h3, h4, h5, h6 {
-	margin: 0;
+	margin-bottom: 0;
 	text-transform: uppercase;
 
 	+p {
@@ -35,6 +35,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 {
+	margin-top: 0;
 	font-size: 0.80rem;
 }
 
@@ -83,10 +84,6 @@ body {
 	flex-direction: column;
 }
 
-main {
-	padding: 0.75rem;
-}
-
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 # Main content
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@@ -95,9 +92,12 @@ main {
 	width: 100%;
 	background: #FFF;
 	box-sizing: border-box;
-	border: 0.05rem solid #AAA;
-	border-top: none;
-	border-bottom: none;
+	padding: 0.75rem;
+	// border definition in _responsive.scss
+
+	&.wide {
+		max-width: 90rem;
+	}
 }
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
@@ -249,6 +249,7 @@ main {
 	display: flex;
 	box-sizing: border-box;
 	justify-content: space-between;
+	margin-top: 0.75rem;
 
 	> div {
 		display: flex;
@@ -422,9 +423,9 @@ table, td {
 # Item Element
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 .item {
-	display: block;
+	display: flex;
+	flex-direction: column;
 	border: 0.05rem solid #AAA;
-	margin-bottom: 1rem;
 	clear: both;
 
 	header {
@@ -432,6 +433,10 @@ table, td {
 		border-bottom: 0.05rem solid #AAA;
 		position: sticky;
 		top: 0;
+
+		h2 {
+			margin-top: 0;
+		}
 	}
 
 	footer {
@@ -473,6 +478,7 @@ table, td {
 		padding: 0.75rem;
 		overflow: hidden;
 		font-family: inherit;
+		flex-grow: 1;
 
 		p {
 			margin-bottom: 0;
@@ -494,6 +500,16 @@ table, td {
 		background: #EEE;
 		border: 0.05rem solid #AAA;
 	}
+
+	&-container.grid {
+		width: 100%;
+		display: grid;
+		grid-template-columns: auto auto auto;
+		grid-column-gap: 1rem;
+		grid-row-gap: 1rem;
+		column-gap: 1rem;
+		row-gap: 1rem;
+	}
 }
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-- 
cgit v1.2.3


From fb704693dcb7591e0224a82280deb62601c8c17e Mon Sep 17 00:00:00 2001
From: Thomas Lange <code@nerdmind.de>
Date: Mon, 14 Jun 2021 16:22:47 +0200
Subject: Darken background on focused/active buttons

---
 theme/admin/rsrc/css/main.css  | 11 +++++++++--
 theme/admin/rsrc/css/main.scss | 12 ++++++++++++
 2 files changed, 21 insertions(+), 2 deletions(-)

(limited to 'theme/admin/rsrc/css')

diff --git a/theme/admin/rsrc/css/main.css b/theme/admin/rsrc/css/main.css
index f3a39c1..f482179 100644
--- a/theme/admin/rsrc/css/main.css
+++ b/theme/admin/rsrc/css/main.css
@@ -645,14 +645,23 @@ label:after {
 #insert-button {
   background: #4D8D5D;
 }
+#insert-button:active, #insert-button:focus {
+  background: #3b6c47;
+}
 
 #update-button {
   background: #6A8AA5;
 }
+#update-button:active, #update-button:focus {
+  background: #537089;
+}
 
 #delete-button {
   background: #C45C66;
 }
+#delete-button:active, #delete-button:focus {
+  background: #ae3f4a;
+}
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 # Form message list
@@ -926,5 +935,3 @@ label:after {
   font-weight: 700;
   src: url("../font/ruda-n-700.woff2") format("woff2");
 }
-
-/*# sourceMappingURL=main.css.map */
diff --git a/theme/admin/rsrc/css/main.scss b/theme/admin/rsrc/css/main.scss
index 0397754..571bafa 100644
--- a/theme/admin/rsrc/css/main.scss
+++ b/theme/admin/rsrc/css/main.scss
@@ -717,14 +717,26 @@ label {
 
 #insert-button {
 	background: #4D8D5D;
+
+	&:active, &:focus {
+		background: darken(#4D8D5D, 10%)
+	}
 }
 
 #update-button {
 	background: #6A8AA5;
+
+	&:active, &:focus {
+		background: darken(#6A8AA5, 10%)
+	}
 }
 
 #delete-button {
 	background: #C45C66;
+
+	&:active, &:focus {
+		background: darken(#C45C66, 10%)
+	}
 }
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-- 
cgit v1.2.3