feat: footer_sidebar auto width

papierkorp · Sep 27, 2023 · 94065b5 · 94065b5
1 parent 9fbec3d
commit 94065b5
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -381,7 +381,7 @@ layouts:
 ### Footer Sidebar
 
 The footer Sidebar is the content directly above the footer.
-Per default there are 4 elements available:
+Per default there are 6 elements available:
 
 **description:** Uses the `description:` of `_config` to display all the data from there. For the best experience you should use an <h1></h1> on the top.  
 **categories:** Shows random categories according to the count.  
@@ -404,6 +404,7 @@ description: >- # this means to ignore newlines until
   </p>
 
 footer_sidebar:
+  auto: false # false = all elements will have the same width, true = each element takes what it needs
   arrangement:  # you can rearrange the positions of the elements
   - description  # will be the first one to be displayed
   - tags  # second in the row ...

diff --git a/_config.yml b/_config.yml
@@ -69,6 +69,7 @@ navigation:
     url: /search.html
 
 footer_sidebar:
+  auto: true
   arrangement:
   - description
   - tags

diff --git a/_includes/footer.html b/_includes/footer.html
@@ -10,7 +10,7 @@
 
 
 {% if site.footer_sidebar.arrangement %}
-  <aside class="footer_sidebar">
+  <aside class="footer_sidebar footer_aside{% if site.footer_sidebar.auto %}_auto{% endif %}">
     {% for section in site.footer_sidebar.arrangement %}
       {% if section == 'description' and site.footer_sidebar.description.enabled %}
         <section class="footer_sitedescription footer_sitedescription{% if site.footer_sidebar.description.columns and site.footer_sidebar.description.columns >= 0 and site.footer_sidebar.description.columns <= 5 %}{{site.footer_sidebar.description.columns}}{% else %}0{% endif %}">

diff --git a/_sass/default/_footer.scss b/_sass/default/_footer.scss
@@ -57,47 +57,60 @@ footer aside {
   max-height: max-content;
 }
 
+footer .footer_aside_auto section {
+  padding: 0 0 0 1em;
+  flex-grow: 1;
+  max-width: fit-content;
+}
 
 /* one item */
-footer aside section:first-child:nth-last-child(1) {
+footer .footer_aside section:first-child:nth-last-child(1) {
   padding: 0 0 0 1em;
   flex-grow: 1;
   max-width: 100%;
 }
 
 /* two items */
-footer aside section:first-child:nth-last-child(2),
-footer aside section:first-child:nth-last-child(2) ~ section {
+footer .footer_aside section:first-child:nth-last-child(2),
+footer .footer_aside section:first-child:nth-last-child(2) ~ section {
   padding: 0 0 0 1em;
   flex-grow: 1;
   max-width: 50%;
 }
 
 /* three items */
-footer aside section:first-child:nth-last-child(3),
-footer aside section:first-child:nth-last-child(3) ~ section {
+footer .footer_aside section:first-child:nth-last-child(3),
+footer .footer_aside section:first-child:nth-last-child(3) ~ section {
   padding: 0 0 0 1em;
   flex-grow: 1;
   max-width: 33%;
 }
 
 /* four items */
-footer aside section:first-child:nth-last-child(4),
-footer aside section:first-child:nth-last-child(4) ~ section {
+footer .footer_aside section:first-child:nth-last-child(4),
+footer .footer_aside section:first-child:nth-last-child(4) ~ section {
   padding: 0 0 0 1em;
   flex-grow: 1;
   max-width: 25%;
 }
 
 /* five items */
-footer aside section:first-child:nth-last-child(5),
-footer aside section:first-child:nth-last-child(5) ~ section {
+footer .footer_aside section:first-child:nth-last-child(5),
+footer .footer_aside section:first-child:nth-last-child(5) ~ section {
   padding: 0 0 0 1em;
   flex-grow: 1;
   max-width: 20%;
 }
 
-footer aside section:first-child {
+/* six items */
+footer .footer_aside section:first-child:nth-last-child(6),
+footer .footer_aside section:first-child:nth-last-child(6) ~ section {
+  padding: 0 0 0 1em;
+  flex-grow: 1;
+  max-width: 16%;
+}
+
+footer .footer_aside section:first-child {
   padding: 0;
 }
 

diff --git a/_sass/layouts/_home.scss b/_sass/layouts/_home.scss
@@ -73,6 +73,12 @@
 		color: $primary-color;
 	}
 
+	span {
+		&:hover {
+			@include hover();
+		}
+	}
+
 
 	.page_count {
 		margin: 0 auto;