Create new Kontakt Page

_sass/main.scss

@@ -187,19 +187,47 @@ article.post:first-child header.post-header:before {
 
 footer.site-footer {
   position: relative;
+  margin-top: 1.5rem;
   padding-bottom: 1.5rem;
   font-size: 1.2rem;
   line-height: 1.75em;
   text-align: center;
 }
 
-footer div#social-media-2,
-footer div#social-media-2 a {
-  color: #cccccc!important;
-}
-
 #contact ul {
   list-style-type: none;
   padding: 0;
   margin: 0;
 }
+
+.smbtn {
+  position: relative;
+  margin: 0px auto;
+  width: 250px;
+}
+
+.smbtn:first-child {
+  margin-top: 50px;
+}
+
+.smbtn a {
+  display: block;
+  margin: 0px auto;
+  margin-bottom: 12px;
+  padding: 5px 15px;
+  width: 250px;
+  border-radius: 50rem !important;
+  border: 1px solid #FFC0CB;
+  background: none !important;
+}
+
+.smbtn a:hover {
+  border-color: #99ddff;
+}
+
+.smbtn img {
+  position: absolute;
+  top: 8px;
+  right: -10px;
+  height: 25px;
+}

kontakt.html

@@ -6,20 +6,23 @@ title: Kontakt
     <article class="post" id="contact">
         <header class="post-header wrapper">
             <h2 class="post-title">Kontakt</h2>
+            <p>Wenn Du Anregungen und / oder Kritiken zu mir oder meinen Betr&auml;gen hast oder einfach nur etwas Lob loswerden willst, kannst Du dies am besten auf eins meiner Social-Media Accounts machen:</p>
         </header>
         <div class="post-content wrapper">
-            <p>Wenn Du Anregungen und / oder Kritiken zu mir oder meinen Beträgen hast oder einfach nur etwas Lob loswerden willst, kannst Du dies hier tun:</p>
-            <blockquote>
-                <a href="mailto:mail&commat;njensen&period;org">mail&commat;njensen&period;org</a><br>
-                PGP-Key: 04EE0F98<br>
-                Fingerprint: 0FEC E173 375E 3DD2 5386 B023 923C 288E 04EE 0F98</p>
-                <ul>
-                    <li><a href="https://wikipedia.org/wiki/Mastodon_(Software)" title="Wikipedia Artikel zu Mastodon" target="_blank" rel="noopener noreferrer">Mastodon</a>: @nyansen@elbmatsch.de</li>
-                    <li><a href="https://wikipedia.org/wiki/Matrix_(protocol)" title="Wikipedia Artikel zu Jabber." target="_blank" rel="noopener noreferrer">Matrix</a>: @nyansen:elbmatsch.de<br></li>
-                    <li><a href="https://wikipedia.org/wiki/Discord_(Software)" title="Wikipedia Artikel zu Discord" target="_blank" rel="noopener noreferrer">Discord</a>: <a href="https://discord.gg/rEZtXTqyHe" title="Discord Einladungslink" target="_blank" rel="noopener noreferrer">nyancord</a></li>
-                    <li><a href="https://wikipedia.org/wiki/Twitter" title="Wikipedia Artikel zu Twitter" target="_blank" rel="noopener noreferrer">Twitter</a>: <a href="https://www.twitter.com/_nyansen" title="Mein Twitter Account." target="_blank" rel="noopener noreferrer">@_nyansen</a></li>
-                </ul>
-            </blockquote>
+            {% if site.data.social-media %}
+                <div id="social-media">
+                    {% assign sm = site.data.social-media %}
+                    {% for entry in sm%}
+                        {% assign key = entry | first %}         
+                        {% if sm[key].id %}
+                            <div id="social-media-block" class="smbtn">
+                                <a href="{{sm[key].href}}" title="{{sm[key].title}}" target="_blank" rel="noopener {{sm[key].rel}}">{{sm[key].link}}</a>
+                                {% if sm[key].logo != "" %}<img src="/assets/images/sm_logos/{{sm[key].logo}}" alt="{{sm[key].title}} Logo">{% endif %}
+                            </div>
+                        {% endif %}
+                    {% endfor %}
+                </div>
+            {% endif %}
         </div>
     </article>
 </main>