Add bootswatch theme support 🎉

alchemy/static/css/default.css

@@ -0,0 +1,34 @@
+::selection {
+  background: #0085a1;
+  color: #fff;
+  text-shadow: none;
+}
+
+body {
+  background-color: #f5f5f5;
+}
+
+a {
+  color: #333;
+}
+
+a:focus, a:hover {
+  color: #0085a1;
+}
+
+blockquote {
+  color: #818a91;
+  font-style: italic;
+}
+
+hr {
+  margin: 1.5rem 0;
+}
+
+.main {
+  background-color: #fff;
+}
+
+.pagination .page-link {
+  color: #333;
+}

alchemy/static/css/theme.css

@@ -1,46 +1,11 @@
-::selection {
-  background: #0085a1;
-  color: #fff;
-  text-shadow: none;
-}
-
-body {
-  background-color: #f5f5f5;
-}
-
-a {
-  color: #333;
-}
-
-a:focus,
-a:hover {
-  color: #0085a1;
-}
-
-blockquote {
-  color: #818a91;
-  font-style: italic;
-}
-
-hr {
-  margin: 1.5rem 0;
-}
-
-/* ------------------------------------------------------------------------- */
-
 .container {
   max-width: 960px;
 }
 
-.header,
-.footer {
+.header, .footer {
   padding: 1.5rem 0 .5rem;
 }
 
-.header {
-  border-bottom: 1px solid rgba(0,0,0,.1);
-}
-
 .header img {
   margin-bottom: 1rem;
 }
@@ -50,8 +15,7 @@ hr {
   margin-bottom: 1rem;
 }
 
-.header ul,
-.header li {
+.header ul, .header li {
   margin-bottom: .5rem;
 }
 
@@ -62,23 +26,15 @@ hr {
 }
 
 .main {
-  background-color: #fff;
+  /* background-color: #fff; */
   padding: 1.5rem 0;
 }
 
-.footer {
-  border-top: 1px solid rgba(0,0,0,.1);
-}
-
 .highlight pre {
   border: 1px solid rgba(0,0,0,.1);
   padding: 1rem;
 }
 
-.pagination .page-link {
-  color: #333;
-}
-
 .teaser header ul {
   list-style: none;
   padding-left: 0;
@@ -92,8 +48,7 @@ hr {
   margin-bottom: 0;
 }
 
-.article header ul,
-.article header li {
+.article header ul, .article header li {
   margin-bottom: .5rem;
 }
 
@@ -112,8 +67,7 @@ hr {
 }
 
 @media (max-width: 576px) {
-  .header,
-  .footer {
+  .header, .footer {
     text-align: center;
   }
 

alchemy/templates/base.html

@@ -17,7 +17,12 @@
     <meta name="theme-color" content="#333333">
   {% endif %}
 
-  <link rel="stylesheet" href="{{ SITEURL }}/theme/css/bootstrap.min.css">
+  {% if BOOTSWATCH_THEME %}
+    <link rel="stylesheet" href="{{ SITEURL }}/theme/css/bootswatch/{{ BOOTSWATCH_THEME }}/bootstrap.min.css">
+  {% else %}
+    <link rel="stylesheet" href="{{ SITEURL }}/theme/css/bootstrap.min.css">
+    <link rel="stylesheet" href="{{ SITEURL }}/theme/css/default.css">
+  {% endif %}
   <link rel="stylesheet" href="{{ SITEURL }}/theme/css/font-awesome.min.css">
   <link rel="stylesheet" href="{{ SITEURL }}/theme/css/pygments/{{ PYGMENTS_STYLE|default('default') }}.min.css">
   <link rel="stylesheet" href="{{ SITEURL }}/theme/css/theme.css">
@@ -34,6 +39,8 @@
     </div>
   </header>
 
+  <hr class="my-0">
+
   <div class="main">
     <div class="container">
       <h1>{% block page_header %}{% endblock %}</h1>
@@ -42,6 +49,8 @@
     </div>
   </div>
 
+  <hr class="my-0">
+
   <footer class="footer">
     <div class="container">
       {% include 'include/footer.html' %}