feat: Mitglieder-Seite gestylt und Zahlen als Hintergrundbilder hinzugefügt.

assets/css/style.css

@@ -41,7 +41,8 @@
 body {
     font-family: 'Lato', sans-serif;
     font-weight: normal;
-    line-height: 1.5rem;
+    font-size: 1.25rem;
+    line-height: 1.5em;
     color: var(--wtf-nearly-black);
     background-color: var(--wtf-light-grey)
 }
@@ -421,10 +422,12 @@ header {
 
 .header__claim h2 {
     margin-left: 7rem;
+    color: var(--wtf-nearly-black);
 }
 
 .header__claim h2 em {
     color: var(--wtf-orange);
+    font-style: normal;
 }
 
 .header__claim h2 span {
@@ -439,6 +442,13 @@ header {
     font-size: 2rem;
 }
 
+/*
+ * TODO: Bullets positionieren
+ *
+ * list-style: none; dann Bullets als Grafiken vom text in <li> einfügen.
+ * Für das Icon dann position: relative; und ausrichten.
+ * Quelle: https://codepen.io/team/css-tricks/pen/MyxBrQ
+ */
 .header__claim ul li {
     margin: 0;
     list-style: none;
@@ -498,6 +508,7 @@ header {
 .header__sub_claim h2 {
     font-family: 'Noto Serif', serif;
     font-weight: 700;
+    color: var(--wtf-nearly-black);
     font-weight: normal;
     font-size: 1.75rem;
     line-height: 1.3em;
@@ -563,6 +574,7 @@ h1.big_heading {
 
 h2 {
     font-family: 'Noto Serif';
+    color: var(--wtf-orange);
     font-size: 2rem;
     line-height: 1.1em;
     margin: 1em 0 0.25em 0;
@@ -646,6 +658,10 @@ strong{
     font-weight: bold;
 }
 
+em {
+    font-style: italic;
+}
+
 hr {
     color: var(--wtf-nearly-black);
     margin: 0.25rem 0;
@@ -722,6 +738,10 @@ hr.-even {
     min-width: 300px;
 }
 
+.indented_box {
+    padding-left: 1rem;
+}
+
 .flex_heading {
     margin-top: 0.5rem;
     z-index: 5;
@@ -1058,6 +1078,27 @@ hr.-even {
     margin: -0.5rem 1.5rem 0 1.5rem;
 }
 
+.content__box.-membership {
+    background-image: url("../images/numbers_one.svg");
+    background-repeat: no-repeat;
+    background-position: top 20% left;
+    background-size: 20% auto;
+}
+
+.content__inner_box.-membership {
+    background-image: url("../images/numbers_two.svg");
+    background-repeat: no-repeat;
+    background-position: center right;
+    background-size: 28% auto;
+}
+
+.content__body.-membership {
+    background-image: url("../images/numbers_three.svg");
+    background-repeat: no-repeat;
+    background-position: bottom 12% left;
+    background-size: 22% auto;
+}
+
 .content__rss_logo {
     display: inline;
     height: 1rem;

assets/images/numbers_one.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 392 600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="_1" serif:id="1" transform="matrix(2.15901,0,0,2.15901,-2755.45,-695.404)">
+        <path d="M1297.62,600L1297.62,579.393L1329.38,579.393C1332.66,579.393 1335.5,578.984 1337.89,578.165C1340.28,577.345 1342.3,575.99 1343.94,574.1C1345.58,572.209 1346.78,569.657 1347.53,566.443C1348.29,563.229 1348.66,559.165 1348.66,554.25L1348.66,360.283C1343.75,366.332 1339.12,371.815 1334.77,376.73C1330.42,381.646 1326.23,385.868 1322.2,389.397C1318.16,392.926 1314.23,395.667 1310.38,397.62C1306.54,399.574 1302.66,400.551 1298.76,400.551C1295.61,400.551 1292.67,399.889 1289.96,398.566C1287.26,397.242 1284.89,395.32 1282.88,392.8C1280.86,390.279 1279.25,387.254 1278.05,383.725C1276.86,380.196 1276.26,376.289 1276.26,372.004C1280.16,370.996 1284.26,369.767 1288.55,368.317C1292.83,366.868 1297.4,364.978 1302.25,362.646C1307.11,360.314 1312.3,357.479 1317.85,354.139C1323.39,350.799 1329.38,346.797 1335.81,342.134L1363.03,322.094L1406.33,322.094L1406.33,554.25C1406.33,558.283 1406.61,561.875 1407.18,565.025C1407.74,568.176 1408.75,570.823 1410.2,572.966C1411.65,575.108 1413.67,576.715 1416.25,577.786C1418.84,578.858 1422.14,579.393 1426.18,579.393L1457.37,579.393L1457.37,600L1297.62,600Z" style="fill:white;fill-opacity:0.5;fill-rule:nonzero;"/>
+    </g>
+</svg>

assets/images/numbers_three.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 422 638" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="_3" serif:id="3" transform="matrix(4.25048,0,0,4.25048,-5379.79,-1920.85)">
+        <path d="M1309.73,601.997C1302.01,601.997 1295.37,601.331 1289.81,600C1284.25,598.669 1279.69,596.871 1276.13,594.608C1272.57,592.344 1269.94,589.732 1268.24,586.769C1266.54,583.807 1265.69,580.728 1265.69,577.533C1265.69,574.936 1266.16,572.64 1267.09,570.642C1268.02,568.645 1269.29,566.964 1270.88,565.6C1272.48,564.235 1274.33,563.22 1276.43,562.554C1278.52,561.888 1280.74,561.556 1283.07,561.556C1283.07,565.883 1283.68,569.677 1284.91,572.939C1286.14,576.201 1287.86,578.93 1290.06,581.127C1292.25,583.324 1294.9,584.972 1298,586.07C1301.09,587.169 1304.5,587.718 1308.23,587.718C1311.56,587.718 1314.74,587.252 1317.77,586.32C1320.8,585.388 1323.48,583.79 1325.81,581.527C1328.13,579.263 1329.98,576.184 1331.35,572.29C1332.71,568.396 1333.39,563.519 1333.39,557.661C1333.39,553.734 1332.71,550.139 1331.35,546.877C1329.98,543.615 1327.95,540.802 1325.26,538.439C1322.56,536.076 1319.25,534.229 1315.32,532.897C1311.39,531.566 1306.87,530.9 1301.74,530.9L1289.06,530.9L1289.06,518.218L1302.54,518.218C1306.93,518.218 1310.76,517.503 1314.02,516.071C1317.28,514.64 1319.98,512.593 1322.11,509.93C1324.24,507.268 1325.84,504.089 1326.9,500.394C1327.97,496.7 1328.5,492.622 1328.5,488.162C1328.5,480.706 1327.07,474.881 1324.21,470.687C1321.35,466.493 1317.12,464.396 1311.53,464.396C1307.86,464.396 1304.88,465.295 1302.59,467.092C1300.29,468.89 1298.51,471.286 1297.25,474.282C1295.98,477.278 1295.12,480.673 1294.65,484.467C1294.18,488.262 1293.95,492.156 1293.95,496.15C1285.43,496.15 1278.87,494.669 1274.28,491.707C1269.69,488.744 1267.39,484.134 1267.39,477.877C1267.39,474.282 1268.34,470.904 1270.24,467.741C1272.13,464.579 1274.98,461.817 1278.77,459.453C1282.57,457.09 1287.28,455.243 1292.9,453.911C1298.53,452.58 1305.07,451.914 1312.52,451.914C1319.78,451.914 1326.32,452.647 1332.15,454.111C1337.97,455.576 1342.93,457.739 1347.02,460.602C1351.12,463.464 1354.26,466.959 1356.46,471.087C1358.66,475.214 1359.76,479.94 1359.76,485.266C1359.76,489.859 1358.96,494.087 1357.36,497.948C1355.76,501.809 1353.57,505.27 1350.77,508.333C1347.97,511.395 1344.68,514.074 1340.88,516.371C1337.09,518.668 1332.96,520.582 1328.5,522.113C1332.63,522.845 1336.84,524.027 1341.13,525.658C1345.43,527.289 1349.34,529.502 1352.87,532.298C1356.39,535.094 1359.29,538.589 1361.55,542.783C1363.82,546.977 1364.95,552.003 1364.95,557.861C1364.95,566.182 1363.4,573.172 1360.31,578.831C1357.21,584.489 1353.08,589.033 1347.92,592.461C1342.76,595.889 1336.87,598.336 1330.25,599.8C1323.62,601.265 1316.78,601.997 1309.73,601.997Z" style="fill:white;fill-opacity:0.5;fill-rule:nonzero;"/>
+    </g>
+</svg>

assets/images/numbers_two.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 423 640" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="_2" serif:id="2" transform="matrix(3.15485,0,0,3.15485,-4006.18,-1252.91)">
+        <path d="M1396.65,443.647C1396.65,448.024 1396.18,452.265 1395.22,456.369C1394.26,460.472 1392.66,464.713 1390.43,469.09C1388.2,473.468 1385.26,478.096 1381.61,482.975C1377.96,487.854 1373.45,493.234 1368.07,499.116C1362.68,504.998 1356.41,511.496 1349.26,518.609C1342.1,525.722 1333.82,533.702 1324.43,542.547L1296.39,569.222L1361.64,569.222C1367.38,569.222 1372.28,567.558 1376.34,564.229C1380.4,560.9 1383.25,556.09 1384.89,549.797L1387.22,541.18L1403.77,541.18L1402.26,600L1269.85,600L1269.85,571.137L1311.3,528.868C1319.96,520.022 1327.07,512.043 1332.64,504.93C1338.2,497.817 1342.58,491.023 1345.77,484.548C1348.96,478.073 1351.19,471.667 1352.47,465.329C1353.75,458.99 1354.39,452.219 1354.39,445.015C1354.39,434.345 1352.45,426.548 1348.57,421.624C1344.7,416.699 1339.34,414.237 1332.5,414.237C1323.02,414.237 1316.36,418.318 1312.53,426.48C1308.7,434.642 1306.78,446.702 1306.78,462.661C1301.49,462.661 1296.64,462.159 1292.21,461.156C1287.79,460.153 1284.01,458.557 1280.86,456.369C1277.71,454.18 1275.28,451.33 1273.54,447.819C1271.81,444.308 1270.94,440.045 1270.94,435.029C1270.94,429.922 1272.24,425.089 1274.84,420.529C1277.44,415.969 1281.29,411.957 1286.4,408.492C1291.51,405.026 1297.91,402.267 1305.62,400.216C1313.33,398.164 1322.29,397.138 1332.5,397.138C1342.99,397.138 1352.22,398.209 1360.2,400.352C1368.18,402.495 1374.88,405.573 1380.31,409.586C1385.73,413.598 1389.82,418.477 1392.55,424.223C1395.29,429.968 1396.65,436.443 1396.65,443.647Z" style="fill:white;fill-opacity:0.5;fill-rule:nonzero;"/>
+    </g>
+</svg>

templates/flow_block_page.html

@@ -12,15 +12,12 @@
     <section class="content">
         <div class="content__box -heading">
             <div class="content__inner_box">
-                <h2>{{ this.title }}</h2>
+                <h1>{{ this.title }}</h1>
             </div>
         </div>
-        <div class="content__half_box">
+        <div class="content__box -membership">
-            <div class="content__inner_half_box">
+            <div class="content__inner_box -membership">
-                <div class="content__teaser">
+                <div class="content__body -membership">
-                    {{ this.teaser }}
-                </div>
-                <div class="content__body">
                     {{ this.body }}
                 </div>
             </div>