alternating alignments

themes/stellar/assets/css/main.css

@@ -2129,6 +2129,12 @@ ul.icons li:last-child {
 section.special, article.special {
   text-align: center;
 }
+section p.secondary, article p.secondary {
+  text-align: right;
+}
+section li.secondary, article li.secondary {
+  margin-left: auto;
+}
 
 header.major {
   margin-bottom: 3em;
@@ -2190,8 +2196,7 @@ header.major.secondary h2 {
   text-align: right;
 }
 header.major.secondary h2:after {
-  position: relative;
-  left: 88%;
+  margin-left: auto;
 }
 
 /* Table */
@@ -2882,8 +2887,7 @@ body.is-preload #header.alt .logo {
   text-align: right;
 }
 #main header.major.secondary h2:after {
-  position: relative;
-  left: 88%;
+  margin-left: auto;
 }
 #main table tbody tr {
   border-color: #dddddd;

themes/stellar/assets/sass/components/_section.scss

@@ -10,6 +10,12 @@
 		&.special {
 			text-align: center;
 		}
+		p.secondary {
+			text-align: right;
+		}
+		li.secondary {
+			margin-left: auto;
+		}
 	}
 
 	header {
@@ -101,8 +107,7 @@
 					h2 {
 						text-align: right;
 						&:after {
-							position:relative;
-							left: 88%;
+							margin-left:auto;
 						}
 					}
 				}

themes/stellar/generic.twig

@@ -44,18 +44,32 @@
 									<p>{{current_page.content}}</p>
 								</header>
 							</section>
-							
+							{% set ralign = false %}
 							{% if current_page.tree_node.children %}
 							{% set childPages = current_page.tree_node.children|map("page") %}
 							{% for child in childPages|sort_by(['meta','ReleaseIndex'])|reverse if child %}
 								{% if child.title %}
 								<section id="content" class="main">
+									{% if ralign == true %}
+									<header class="major secondary">
+									{% else %}
 									<header class="major">
+									{% endif %}
 										<h2>{{child.title}}</h2>
 									</header>
+									{% if ralign == true %}
+									<p class="secondary">{{child.description}}</p>
+									{% else %}
 									<p>{{child.description}}</p>
+									{% endif %}
 									<ul class="actions">
+										{% if ralign == true %}
+										<li class="secondary"><a href="{{child.url}}" class="button">Weiterlesen</a></li>
+										{% set ralign = false %}
+										{% else %}
 										<li><a href="{{child.url}}" class="button">Weiterlesen</a></li>
+										{% set ralign = true %}
+										{% endif %}
 									</ul>
 								</section>
 							{% endif %}