Merge branch 'howto-services' of Disroot/Howto into master

pages/02.tutorials/03.Email/docsparent.de.md

@@ -11,3 +11,5 @@ taxonomy:
 page-toc:
     active: false
 ---
+
+# Email

pages/02.tutorials/03.Email/docsparent.en.md

@@ -11,3 +11,5 @@ taxonomy:
 page-toc:
     active: false
 ---
+
+# Email

pages/02.tutorials/03.Email/docsparent.es.md

@@ -11,3 +11,5 @@ taxonomy:
 page-toc:
     active: false
 ---
+
+# Email

pages/02.tutorials/03.Email/docsparent.fr.md

@@ -11,3 +11,5 @@ taxonomy:
 page-toc:
     active: false
 ---
+
+# Email

pages/02.tutorials/03.Email/docsparent.pt.md

@@ -11,3 +11,5 @@ taxonomy:
 page-toc:
     active: false
 ---
+
+# Email

pages/02.tutorials/index.en.md

@@ -1,5 +1,6 @@
 ---
 title: "Howto: Services"
+section_id: flex
 content:
     items:
       - '@taxonomy': {category: [topic]}

themes/grav-theme-howto/css/media-queries.css

@@ -10,6 +10,11 @@
      #sidebar {
        display: none;
     }
+
+
+     #flex .columns {
+      width: 50%;
+    }
 }
 
 /* mobile wide/smaller tablets
@@ -100,7 +105,21 @@
       clear: both;
    }
 
-   /* Language menu*/
+   #flex {
+     width: 100vw;
+     left: auto;
+
+
+   #flex .columns {
+     height: auto;
+   }
+
+   #flex .three {
+  padding-right: 60px;
+  margin-bottom: 20px;
+  }
+
+}
 
    .language-selector {
        position: fixed;

themes/grav-theme-howto/css/style.css

@@ -73,6 +73,47 @@ a:hover {
     margin: 0 3rem;
 }
 
+#flex {
+  margin-top: -50px;
+  width: 80vw;
+  position: relative;
+  left: calc(-40vw + 55%);
+/*  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-evenly;*/
+}
+
+#flex .columns {
+  height: 600px;
+  /*border: none;
+  border-radius: 0px;
+  box-shadow: 10px 10px 38px 0px rgba(0, 0, 0, 0.25);
+  width: 23%;
+  margin: 1%;*/
+}
+
+#flex .three {
+  padding-right: 60px;
+  margin-bottom: 80px;
+}
+
+#flex hr {
+  border: 1px solid var(--primary-color);
+  border-radius: 5px;
+}
+
+#flex img {
+  width: 50px;
+  height: 50px;
+  position:relative;
+  top: 45px;
+  left: 25%;
+  filter: none;
+  background-color: none;
+  box-shadow: none;
+}
+
 .padding {
     padding: 3rem 1rem;
 }
@@ -175,7 +216,7 @@ a:hover {
     display: block;
     line-height: 30px;
     color: #fff;
-    padding: 0 30px;
+    padding: 0 10px;
     white-space: nowrap;
 }
 
@@ -377,7 +418,7 @@ ul#nav li a:hover { color: #FFFFFF; opacity: 1;}
     margin-left: 0;
     margin-right: 0;
     margin-bottom: 1rem;
-    margin-top: 17rem;
+    margin-top: 5rem;
     font-size: 0.7rem;
     overflow: hidden;
     border: none;

themes/grav-theme-howto/templates/index.html.twig

@@ -12,6 +12,8 @@
 <section id="{{ page.header.section_id }}" class="wrapper row columns">
 {% for p in page.collection %}
 <div class="topic-list three columns">
+  <img src="{{ theme_url }}/images/logos/logo-{{ p.title|lower }}.png">
+  <hr>
   <h2><a href="{{ p.url }}">{{ p.title }}</a></h2>
   {% for q in p.children.visible %}
       <h5><a href="{{ q.url }}">{{ q.title }}</a></h5>

themes/grav-theme-howto/templates/partials/sidebar.html.twig

@@ -15,3 +15,8 @@
     {% endif %}
   </div>
 {% endif %}
+
+{% if config.plugins.relatedpages.enabled and related_pages|length > 0 %}
+    <h4>Related Pages</h4>
+    {% include 'partials/relatedpages.html.twig' %}
+{% endif %}