default.html in plainwhite-0.13

- old
+ new

@@ -3,27 +3,48 @@
 
 <head>
   {%- include head.html -%}
 </head>
 
+{%- if site.plainwhite.condensed_mobile contains page.layout -%}
+{% assign condensed_class = "condensed" %}
+{% else %}
+{% assign condensed_class = "" %}
+{%- endif -%}
+
 <body>
   <main class="container">
     <section class="about">
-      <a href="{{ "/" | relative_url}}"><img src="{{site.baseurl }}/{{ site.plainwhite.portfolio_image }}" alt="{{ site.plainwhite.name }}"></a>
+      <div class="about-header {{condensed_class}}">
+      <div class="about-title">
+      <a href="{{ "/" | relative_url}}">
+        {% if site.plainwhite.portfolio_image_dark and site.plainwhite.dark_mode %}
+        <img class="light" src="{{site.baseurl }}/{{ site.plainwhite.portfolio_image }}" alt="{{ site.plainwhite.name }}" />
+        <img class="dark" src="{{site.baseurl }}/{{ site.plainwhite.portfolio_image_dark }}" alt="{{ site.plainwhite.name }}" />
+        {% else %}
+        <img src="{{site.baseurl }}/{{ site.plainwhite.portfolio_image }}" alt="{{ site.plainwhite.name }}" />
+        {% endif %}
+      </a>
       <h2 id="title">
         <a href="{{ "/" | relative_url }}">{{ site.plainwhite.name }}</a>
       </h2>
+      </div>
+      {%- if site.plainwhite.tagline -%}
       <p class="tagline">{{ site.plainwhite.tagline }}</p>
-      <ul class="social">
+      {%- endif -%}
+      </div>
+      {% capture footer %}
+      {%- if site.plainwhite.social_links != '' -%}
+      <ul class="social about-footer {{condensed_class}}">
         {%- if site.plainwhite.social_links.github -%}
         <a href="https://github.com/{{ site.plainwhite.social_links.github }}" target="_blank">
           <li>
             <i class="icon-github-circled"></i>
           </li>
         </a>
         {%- endif -%}
-		{%- if site.plainwhite.social_links.gitlab -%}
+        {%- if site.plainwhite.social_links.gitlab -%}
         <a href="https://gitlab.com/{{ site.plainwhite.social_links.gitlab }}" target="_blank">
           <li>
             <i class="icon-gitlab"></i>
           </li>
         </a>
@@ -97,39 +118,48 @@
             <i class="icon-soundcloud"></i>
           </li>
         </a>
         {%- endif -%}
       </ul>
+      {%- endif -%}
       {%- if site.plainwhite.navigation -%}
-      <nav class="navigation">
+      <nav class="navigation about-footer {{condensed_class}}">
         <ul>
           {% for link in site.plainwhite.navigation %}
           <li>
             <a href="{{ link.url }}">{{ link.title }}</a>
           </li>
           {% endfor %}
         </ul>
       </nav>
       {%- endif -%}
-      <p>&copy;
+      <p class="about-footer {{condensed_class}}">&copy;
         {{ "now" | date: "%Y" }}</p>
       {%- if site.plainwhite.dark_mode -%}
-      <div>
+      <div class="about-footer {{condensed_class}}">
         <p>Dark Mode
           <i class="icon-moon"></i>
           <label class="switch">
-            <input type="checkbox" id="dark-mode-toggle">
+            <input type="checkbox" class="dark-mode-toggle">
             <span class="slider round" onclick="toggleDarkMode()"></span>
           </label>
         </p>
       </div>
-      <script type="text/javascript" src="{{ "/assets/js/darkmode.js" | relative_url }}"></script>
       {%- endif -%}
+      {% endcapture %}
+      {{ footer }}
     </section>
     <section class="content">
       {{ content }}
     </section>
+    <footer class="{{condensed_class}}">
+      {{ footer }}
+    </footer>
   </main>
+  {% if site.plainwhite.dark_mode %}
+  <script type="text/javascript" src="{{ "/assets/js/darkmode.js" | relative_url }}"></script>
+  {% endif %}
+
   {%- if site.plainwhite.analytics_id -%}
   <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.plainwhite.analytics_id }}"></script>
   <script>
     window.dataLayer = window.dataLayer || [];
     function gtag() { dataLayer.push(arguments); }