made .box look better on newer themes; updated readme.md to add new themes; modularized blog sass some

README.md

@@ -1,6 +1,6 @@
 # Zulma
 
-A Bulma theme for Zola.
+A Bulma theme for Zola. See a live preview [here](https://festive-morse-47d46c.netlify.com/)
 
 ![Zulma Screenshot](/screenshot.png)
 
@@ -187,6 +187,10 @@ In extra, setting `zulma_theme` to a valid value will change the current colour
 - flatly
 - pulse
 - simplex
+- lux
+- slate
+- solar
+- superhero
 
 All valid themes can also be found under the `extra.zulma_themes` variable in the `theme.toml`. Choosing no theme will set default as the theme. Setting an invalid theme value will cause the site to render improperly.
 

content/_index.md

@@ -0,0 +1,3 @@
++++
+paginate_by=1
++++

sass/_blog.scss

@@ -1,3 +1,6 @@
+@import "./_blog/article";
+@import "./_blog/search-results";
+
 html,
 body {
   font-family: "Open Sans", sans-serif;
@@ -11,9 +14,13 @@ main {
   flex: 1;
 }
 
-.navbar-brand .brand-text {
-  font-size: 1.11rem;
-  font-weight: bold;
+.footer {
+  margin-top: 4rem;
+  padding: 2rem;
+
+  .theme-select-container {
+    margin-left: auto;
+  }
 }
 
 .hero .title {
@@ -28,54 +35,6 @@ main {
   }
 }
 
-.media-center {
-  display: block;
-  margin-bottom: 1rem;
-}
-
-.media-content {
-  margin-top: 1rem;
-}
-
-.article {
-  margin-top: 1rem;
-}
-
-.article-title {
-  font-size: 2rem;
-  font-weight: lighter;
-  line-height: 2;
-  margin-bottom: 0.5rem;
-}
-
-.article-subtitle {
-  margin-bottom: 3rem;
-}
-
-.article-footer,
-.article-body {
-  margin: 2rem 0;
-
-  @include desktop {
-    margin: 2rem 6rem;
-  }
-}
-
-.article-body {
-  line-height: 1.4;
-}
-
-.article-footer {
-  font-style: italic;
-  padding: 1.5rem;
-  width: 100%;
-
-  .button,
-  .tag {
-    font-style: normal;
-  }
-}
-
 .list.box {
   margin-top: 1rem;
   display: flex;
@@ -86,52 +45,3 @@ main {
     margin: 0.2rem;
   }
 }
-
-.paginator-container {
-  padding: 2rem 0;
-}
-
-.search-results {
-  display: none;
-  max-height: 35rem;
-  overflow: auto;
-
-  @include desktop {
-    position: absolute;
-    top: 100%;
-    width: 50rem;
-    right: 0;
-    margin-right: 0.75rem;
-  }
-}
-
-.search-results__items > li {
-  list-style: none;
-  margin-top: 1rem;
-
-  &:first-child {
-    margin-top: 0;
-  }
-}
-
-.navbar-end {
-  height: 100%;
-}
-
-input#search::placeholder {
-  color: $grey-darker;
-}
-
-.footer {
-  margin-top: 4rem;
-  padding: 2rem;
-}
-
-.pagination-previous,
-.pagination-next {
-  flex-grow: 0;
-}
-
-.theme-select-container {
-  margin-left: auto;
-}

sass/_blog/_article.scss

@@ -0,0 +1,39 @@
+.article {
+    margin-top: 1rem;
+
+
+    .article-title {
+        font-size: 2rem;
+        font-weight: lighter;
+        line-height: 2;
+        margin-bottom: 0.5rem;
+    }
+
+    .article-subtitle {
+        margin-bottom: 3rem;
+    }
+
+    .article-footer,
+    .article-body {
+        margin: 2rem 0;
+
+        @include desktop {
+            margin: 2rem 6rem;
+        }
+    }
+
+    .article-body {
+        line-height: 1.4;
+    }
+
+    .article-footer {
+        font-style: italic;
+        padding: 1.5rem;
+        width: 100%;
+
+        .button,
+        .tag {
+            font-style: normal;
+        }
+    }
+}

sass/_blog/_nav.scss

@@ -0,0 +1,10 @@
+nav {
+    .navbar-end {
+        height: 100%;
+    }
+
+    .navbar-brand .brand-text {
+        font-size: 1.11rem;
+        font-weight: bold;
+    }
+}

sass/_blog/_pagination.scss

@@ -0,0 +1,8 @@
+.paginator-container {
+    padding: 2rem 0;
+
+    .pagination-previous,
+    .pagination-next {
+        flex-grow: 0;
+    }
+}

sass/_blog/_search-results.scss

@@ -0,0 +1,26 @@
+.search-results {
+    display: none;
+    max-height: 35rem;
+    overflow: auto;
+
+    @include desktop {
+        position: absolute;
+        top: 100%;
+        width: 50rem;
+        right: 0;
+        margin-right: 0.75rem;
+    }
+
+    .search-results__items>li {
+        list-style: none;
+        margin-top: 1rem;
+
+        &:first-child {
+            margin-top: 0;
+        }
+    }
+}
+
+input#search::placeholder {
+    color: $grey-darker;
+}

sass/lux.scss

@@ -3,3 +3,12 @@
 @import "./_vendor/lux/overrides";
 
 @import "./blog";
+
+.box {
+    $card-border-color: $grey-darker;
+    $border-width: 2px default;
+    box-shadow: none;
+    border: $border-width solid $card-border-color;
+    background-color: $grey-darker;
+    border-radius: $radius;
+}

sass/pulse.scss

@@ -3,11 +3,3 @@
 @import './_vendor/pulse/overrides';
 
 @import './blog';
-
-// .box {
-//     $card-border-color: lighten($grey-darker, 5);
-//     box-shadow: none;
-//     border: $border-width solid $card-border-color;
-//     background-color: $grey-darker;
-//     border-radius: $radius;
-// }

sass/simplex.scss

@@ -3,11 +3,3 @@
 @import './_vendor/simplex/overrides';
 
 @import './blog';
-
-// .box {
-//     $card-border-color: lighten($grey-darker, 5);
-//     box-shadow: none;
-//     border: $border-width solid $card-border-color;
-//     background-color: $grey-darker;
-//     border-radius: $radius;
-// }

sass/slate.scss

@@ -3,3 +3,12 @@
 @import "./_vendor/slate/overrides";
 
 @import "./blog";
+
+.box {
+    $card-border-color: lighten($grey-darker, 5);
+    $border-width: 2px default;
+    box-shadow: none;
+    border: $border-width solid $card-border-color;
+    background-color: $grey-darker;
+    border-radius: $radius;
+}

sass/solar.scss

@@ -3,3 +3,12 @@
 @import "./_vendor/solar/overrides";
 
 @import "./blog";
+
+.box {
+    $card-border-color: lighten($grey-darker, 5);
+    $border-width: 2px default;
+    box-shadow: none;
+    border: $border-width solid $card-border-color;
+    background-color: $grey-darker;
+    border-radius: $radius;
+}

sass/superhero.scss

@@ -3,3 +3,12 @@
 @import "./_vendor/superhero/overrides";
 
 @import "./blog";
+
+.box {
+    $card-border-color: lighten($grey-darker, 5);
+    $border-width: 2px default;
+    box-shadow: none;
+    border: $border-width solid $card-border-color;
+    background-color: $grey-darker;
+    border-radius: $radius;
+}