aboutsummaryrefslogtreecommitdiffstats
path: root/theme/default/rsrc/css
diff options
context:
space:
mode:
authorThomas Lange <code@nerdmind.de>2021-07-01 20:11:34 +0200
committerThomas Lange <code@nerdmind.de>2021-07-01 20:11:34 +0200
commite6cef37e0c782fe770db20888d99c17d10e2c479 (patch)
treeaed0790a0fa8eb7cceef7bb32aef4f69b724d619 /theme/default/rsrc/css
parentf0ea19767d502ec7b5afff7c66c2681292175a3b (diff)
downloadblog-e6cef37e0c782fe770db20888d99c17d10e2c479.tar.gz
blog-e6cef37e0c782fe770db20888d99c17d10e2c479.tar.xz
blog-e6cef37e0c782fe770db20888d99c17d10e2c479.zip
Add category system to categorize posts (readme)
This commit implements a new category system to categorize posts. Each category can have an unlimited number of nested children categories. A single post don't necessarily need to be in a category, but it can. Each category can have a full content body like posts or pages, so you have enough space to describe the content of your categories. Please note that you need to have at least the following MySQL/MariaDB versions to use the category system, because it uses "WITH RECURSIVE" database queries, the so-called "Common-Table-Expressions (CTE)". MariaDB: 10.2.2 MySQL: 8.0 See: https://mariadb.com/kb/en/with/ See: https://dev.mysql.com/doc/refman/8.0/en/with.html
Diffstat (limited to 'theme/default/rsrc/css')
-rw-r--r--theme/default/rsrc/css/main.css48
-rw-r--r--theme/default/rsrc/css/main.scss50
2 files changed, 96 insertions, 2 deletions
diff --git a/theme/default/rsrc/css/main.css b/theme/default/rsrc/css/main.css
index 11cae12..e49412b 100644
--- a/theme/default/rsrc/css/main.css
+++ b/theme/default/rsrc/css/main.css
@@ -281,9 +281,11 @@ a.brackets:before, a.brackets:after {
overflow: hidden;
margin: 0.5rem 0;
}
+.item-container {
+ clear: both;
+}
.item header {
padding: 0.25rem 1rem;
- border-bottom: 0.05rem solid #AAA;
overflow: hidden;
text-transform: uppercase;
}
@@ -303,6 +305,7 @@ a.brackets:before, a.brackets:after {
margin: 0;
padding: 0 1rem;
font-family: inherit;
+ border-top: 0.05rem solid #AAA;
}
.item blockquote img {
display: block;
@@ -322,6 +325,49 @@ a.brackets:before, a.brackets:after {
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Category list
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+#category-heading,
+#category-posts-heading {
+ float: left;
+}
+
+#category-posts-page {
+ float: right;
+ font-size: 0.6rem;
+}
+
+#category-body {
+ clear: both;
+}
+
+.category-list,
+.category-heading-list {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ font-size: 0.6rem;
+ text-align: center;
+}
+.category-list li,
+.category-heading-list li {
+ display: inline-block;
+}
+.category-list li + li:before,
+.category-heading-list li + li:before {
+ content: " ➜ ";
+}
+.category-list a,
+.category-heading-list a {
+ text-decoration: underline;
+}
+
+.category-heading-list {
+ text-align: left;
+ float: right;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# Responsive
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#toogle-nav {
diff --git a/theme/default/rsrc/css/main.scss b/theme/default/rsrc/css/main.scss
index ba6e823..4ea6a2b 100644
--- a/theme/default/rsrc/css/main.scss
+++ b/theme/default/rsrc/css/main.scss
@@ -303,9 +303,12 @@ a.brackets:before, a.brackets:after {
overflow: hidden;
margin: 0.5rem 0;
+ &-container {
+ clear: both;
+ }
+
header {
padding: 0.25rem 1rem;
- border-bottom: 0.05rem solid #AAA;
overflow: hidden;
text-transform: uppercase;
@@ -329,6 +332,7 @@ a.brackets:before, a.brackets:after {
margin: 0;
padding: 0 1rem;
font-family: inherit;
+ border-top: 0.05rem solid #AAA;
img {
display: block;
@@ -351,6 +355,50 @@ a.brackets:before, a.brackets:after {
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+# Categories
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+#category-heading,
+#category-posts-heading {
+ float: left;
+}
+
+#category-posts-page {
+ float: right;
+ font-size: 0.6rem;
+}
+
+#category-body {
+ clear: both;
+}
+
+.category-list,
+.category-heading-list {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ font-size: 0.6rem;
+ text-align: center;
+
+ li {
+ display: inline-block;
+
+ + li:before {
+ content: ' ➜ ';
+ }
+ }
+
+ a {
+ text-decoration: underline;
+ }
+}
+
+.category-heading-list {
+
+ text-align: left;
+ float: right;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# Responsive
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#toogle-nav {