diff --git a/_config.yml b/_config.yml index f2f17cf..a6413d8 100644 --- a/_config.yml +++ b/_config.yml @@ -12,7 +12,7 @@ exclude: - Gemfile - Gemfile.lock - package.json -paginate: 5 +paginate: 12 paginate_path: "/blog/page:num/" name: Dash url: https://www.dash.org @@ -53,5 +53,4 @@ srcset: source: assets/img output: assets/img/resized -keep_files: - - 'assets/img/resized' +keep_files: ['assets/img/resized'] diff --git a/_includes/hero/post.html b/_includes/hero/post.html index aea66af..2a88da6 100644 --- a/_includes/hero/post.html +++ b/_includes/hero/post.html @@ -10,7 +10,7 @@
- Blog — General + {% t nav.blog %}{% if page.categories | size == 1 %} – {{ page.categories | first }}{% if page.categories | size > 1 %}{% for category in page.categories offset: 1 %} / {{ category }} {% endfor %} {% endif %}{% endif %}

{% if page.title %}{{ page.title }}{% endif %}

{{ page.date | date: "%b %d, %Y" }}

diff --git a/_includes/pagination_navigation_all.html b/_includes/pagination_navigation_all.html index 4603173..d2c5335 100644 --- a/_includes/pagination_navigation_all.html +++ b/_includes/pagination_navigation_all.html @@ -1,21 +1,21 @@ {% if paginator.total_pages > 1 %} -{% endif %} \ No newline at end of file +{% endif %} diff --git a/blog/index.html b/blog/index.html index fe655ef..dc2e00e 100644 --- a/blog/index.html +++ b/blog/index.html @@ -6,31 +6,32 @@ description: pages.blog.description {% include hero/blog.html %} -
-
+
- {% include pagination_navigation_all.html %} +
+
+
+ {% for post in paginator.posts %} + +
+
+ {% if post.image %} + + {% endif %} +
- {% for post in paginator.posts %} - -
- {% if post.image %} - - {% endif %} +

{{ post.title }}

-

{{ post.title }}

- -

{{ post.date | date: "%b %d, %Y" }}
{{ post.excerpt | strip_html | truncatewords: 50 }}

+ {{ post.date | date: "%b %d, %Y" }} +

{{ post.excerpt | strip_html | truncatewords: 50 }}

+
+
+ {% endfor %}
- -
+ {% include pagination_navigation_all.html %} +
+
-
- {% endfor %} - - {% include pagination_navigation_all.html %} - -
diff --git a/src/scss/_ctabox.scss b/src/scss/_ctabox.scss index cc3fb5f..fe7ac3f 100644 --- a/src/scss/_ctabox.scss +++ b/src/scss/_ctabox.scss @@ -65,22 +65,11 @@ &__imagewrapper { background: rgba($color-blue-light, 0.1); - width: 100%; - height: 0; - padding-bottom: 56.25%; // 16:9 - position: relative; - overflow: hidden; + @include overflow-image-wrapper(); } &__image { - position: absolute; - top: 50%; - transform: translateY(-50%); - left: 0; - right: 0; - bottom: 0; - width: 100%; - height: auto; + @include overflow-image(); } &__title { diff --git a/src/scss/_featurepost.scss b/src/scss/_featurepost.scss new file mode 100644 index 0000000..ec9d6d3 --- /dev/null +++ b/src/scss/_featurepost.scss @@ -0,0 +1,61 @@ +$m: 'featurepost'; + +.#{$m} { + display: inline-block; + vertical-align: top; + padding: 0 pxToRem(20px); + margin-bottom: pxToRem(40px); + max-width: 500px; + margin-left: auto; + margin-right: auto; + overflow-wrap: break-word; + + &__title { + @include font-title-medium(); + margin-bottom: pxToRem(10px); + a { + color: $color-blue; + } + } + &__date { + display: inline-block; + margin-bottom: pxToRem(10px); + color: transparentize($color-black, 0.5); + } + + &__divider { + + } + + &__preview { + @include overflow-image-wrapper(); + background: rgba($color-blue, 0.1); + margin-bottom: pxToRem(40px); + + &--no-image { + // Hide images until we actually have htem + padding-bottom: 1px; + } + } + &__image { + @include overflow-image(); + } +} + +// TODO: Move into separate module +.featurepost-grid { + margin: 0 pxToRem(-20px); + .featurepost { + + display: block; + width: 100%; + + @include mq($from: small) { + display: inline-block; + width: 49%; + } + @include mq($from: medium) { + width: 33%; + } + } +} diff --git a/src/scss/_page.scss b/src/scss/_page.scss index 98c531e..c5fe154 100644 --- a/src/scss/_page.scss +++ b/src/scss/_page.scss @@ -19,4 +19,8 @@ $m: 'page'; } &--participate { } + + &--blog { + + } } diff --git a/src/scss/_pagination.scss b/src/scss/_pagination.scss new file mode 100644 index 0000000..cd1f4e2 --- /dev/null +++ b/src/scss/_pagination.scss @@ -0,0 +1,8 @@ +$m: 'pagination'; + +.#{$m} { + display: inline-block; + width: 100%; + text-align: center; + padding: pxToRem(40px) 0; +} diff --git a/src/scss/_post.scss b/src/scss/_post.scss index 6a98da7..ae8f8c8 100644 --- a/src/scss/_post.scss +++ b/src/scss/_post.scss @@ -18,11 +18,6 @@ } } - .pagination{ - width:100%; - text-align: right; - } - .author{ width:100%; text-align: center; @@ -41,4 +36,4 @@ padding-left: 10px; } -} \ No newline at end of file +} diff --git a/src/scss/global/_mixins.scss b/src/scss/global/_mixins.scss index 95a3f32..bd02989 100644 --- a/src/scss/global/_mixins.scss +++ b/src/scss/global/_mixins.scss @@ -1,3 +1,26 @@ +/** + * Overflow Image (Content: Fit) 16/9 + * + */ +@mixin overflow-image-wrapper { + width: 100%; + height: 0; + padding-bottom: 56.25%; // 16:9 + position: relative; + overflow: hidden; +} + +@mixin overflow-image { + position: absolute; + top: 50%; + transform: translateY(-50%); + left: 0; + right: 0; + bottom: 0; + width: 100%; + height: auto; +} + /** * Hide visually * diff --git a/src/scss/main.scss b/src/scss/main.scss index e950099..4115f90 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -20,7 +20,10 @@ @import "forms"; @import "footer"; @import "page"; +@import "pagination"; @import "section"; +@import "featurepost"; + //stuff most pages need @import "overlay-menu";