m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-14 17:15:18 +01:00
Code

new flexbox based grid system

Browse Source
This commit is contained in:
Matthias Kretschmann 2015-08-09 21:50:06 +02:00
parent a79f28f79b
commit 8f27245841
27 changed files with 167 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_src/_assets/js/app.js
View File

@ -36,7 +36,7 @@ var siteNavigation = {
searchInput: document.getElementById('search-input'), searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('search-results'), resultsContainer: document.getElementById('search-results'),
json: '/search.json', json: '/search.json',
searchResultTemplate: '<li><a class="search-link" href="{url}">{title}</a></li>', searchResultTemplate: '<li class="col3"><a class="search-link" href="{url}">{title}</a></li>',
fuzzy: false fuzzy: false
}) })
@ -96,7 +96,7 @@ var siteNavigation = {
siteMenu: function() { siteMenu: function() {
var $thelink = $('.menu-btn'), var $thelink = $('.menu-btn'),
$thepop = $('.nav-main .nav-popover'); $thepop = $('.nav-popover');
$thelink.click(function(e) { $thelink.click(function(e) {
e.preventDefault(); e.preventDefault();

3
_src/_assets/styl/content-featured.styl
View File

@ -10,7 +10,8 @@
padding-bottom: $line-height-computed padding-bottom: $line-height-computed
@media $breakpoint2 @media $breakpoint2
padding-bottom: ($line-height-computed*3) padding-top: ($line-height-computed*2)
padding-bottom: ($line-height-computed*2)
.featured-link .featured-link
display: block display: block

7
_src/_assets/styl/content-related.styl
View File

@ -5,7 +5,7 @@
// //
.related-posts .related-posts
.row .grid
margin-top: 0 margin-top: 0
.related-posts-title .related-posts-title
@ -16,7 +16,7 @@
.post-title .post-title
@extend .h5 @extend .h5
margin-top: $line-height-computed margin: 0
margin-bottom: $line-height-computed margin-bottom: $line-height-computed
.post-title, .post-title,
@ -40,11 +40,10 @@
// //
.related-photos .related-photos
@extend .divider-top @extend .divider-top
margin-top: $line-height-computed*2 margin-top: $line-height-computed
.photo-link .photo-link
display: block display: block
margin-bottom: 15%
border: 2px solid transparent border: 2px solid transparent
&:hover, &:hover,

15
_src/_assets/styl/content.styl
View File

@ -23,17 +23,20 @@
.hash .hash
@extend .h3 @extend .h3
color: darken($page-bg, 15%) color: darken($page-bg, 15%)
margin-right: 5px margin-right: 2px
.hentry .hentry,
.grid > .hentry
@extend .divider-bottom @extend .divider-bottom
padding: ($line-height-computed*2) 0 padding-top: ($line-height-computed*2)
padding-bottom: ($line-height-computed*2)
@media $breakpoint2 @media $breakpoint2
padding: ($line-height-computed*4) 0 padding-top: ($line-height-computed*4)
padding-bottom: ($line-height-computed*4)
&:first-child .page-index &:first-child
padding-top: $line-height-computed padding-top: ($line-height-computed*2)
.page-single & .page-single &
padding-bottom: ($line-height-computed*2) padding-bottom: ($line-height-computed*2)

115
_src/_assets/styl/grid.styl
View File

@ -9,71 +9,70 @@
* *
box-sizing: border-box box-sizing: border-box
// 320px and up
.container .container
padding: 0 7% padding-left: 7%
padding-right: 7%
width: 100% width: 100%
.row @media $breakpoint2
margin-top: $line-height-computed padding-left: 15%
margin-bottom: $line-height-computed padding-right: 15%
.col1, .grid
.col2, margin: auto
.col3, padding: 0
.col4, display: flex
.col5, flex-wrap: wrap
.col6
width: 100%
margin-left: 0
// ensures empty columns won't collapse
min-height: 1px
// clear @media $breakpoint2
.container,
.row
@extend .clearfix
@media $breakpoint2
.container
padding: 0 15%
.row
max-width: 35em max-width: 35em
margin: ($line-height-computed*2) auto
> .col1,
> .col2,
> .col3,
> .col4,
> .col5,
> .col6
flex: 1
flex: 0 0 100%
padding: 1em 0 0 1em
> .col6
padding-left: 0 padding-left: 0
padding-right: 0
.col1, > .col1-xs,
.col2, > .col2-xs,
.col3, > .col3-xs,
.col4, > .col4-xs,
.col5, > .col5-xs,
.col6 > .col6-xs
float: left flex: 1
margin-left: 4% padding: 1em 0 0 1em
.col1:first-child, > .col1-xs
.col2:first-child, flex: 0 0 16.666666667%
.col3:first-child, > .col2-xs
.col4:first-child, flex: 0 0 33.333333333%
.col5:first-child, > .col3-xs
.col6, flex: 0 0 50%
.col3:nth-child(2n+3), > .col4-xs
.col2:nth-child(3n+4), flex: 0 0 66.666666666%
.col1:nth-child(6n+7) > .col5-xs
margin-left: 0 flex: 0 0 83.333333333%
clear: both > .col6-xs
flex: 0 0 100%
padding-left: 0
.col1 @media $breakpoint2
width: 13% > .col1
.col2 flex: 0 0 16.5%
width: 30.6% > .col2
.col3 flex: 0 0 33%
width: 48% > .col3
.col4 flex: 0 0 50%
width: 65% > .col4
.col5 flex: 0 0 66%
width: 82% > .col5
.col6 flex: 0 0 82.5%
width: 100% > .col6
flex: 0 0 100%

23
_src/_assets/styl/header.styl
View File

@ -8,14 +8,21 @@
///////////////////////////////////// /////////////////////////////////////
.topbar .topbar
@extend .clearfix
background: $body-bg background: $body-bg
margin-top: ($line-height-computed/2)
margin-bottom: ($line-height-computed/2)
.row @media $breakpoint2
margin-top: ($line-height-computed/2) margin-top: $line-height-computed
margin-bottom: ($line-height-computed/2) margin-bottom: $line-height-computed
.grid
position: relative position: relative
> .banner,
> .nav-main
padding-top: 0
// Logo // Logo
///////////////////////////////////// /////////////////////////////////////
@ -44,14 +51,10 @@
///////////////////////////////////// /////////////////////////////////////
.banner .banner
@extend .alignleft padding-top: 0
@media $breakpoint2
margin-left: -54px
.banner-title .banner-title
margin-top: .1em margin: 0
margin-bottom: 0
// display toned down logo // display toned down logo
// by default // by default
@extend .logo @extend .logo

2
_src/_assets/styl/kremalicious3.styl
View File

@ -14,9 +14,9 @@
@import 'mixins' @import 'mixins'
// Core CSS // Core CSS
@import 'grid'
@import 'scaffolding' @import 'scaffolding'
@import 'typography' @import 'typography'
@import 'grid'
@import 'forms' @import 'forms'
@import 'buttons' @import 'buttons'
@import 'icons' @import 'icons'

36
_src/_assets/styl/navigation.styl
View File

@ -13,7 +13,7 @@
margin: 0 margin: 0
position: absolute position: absolute
right: 0 right: 0
top: 0 top: -($line-height-computed/4)
&:focus &:focus
outline: 0 outline: 0
@ -30,23 +30,19 @@
&:active .icon &:active .icon
fill: #fff fill: #fff
.menu-btn
margin-right: -.5em
padding: .5em .7em
// Main Navigation // Main Navigation
///////////////////////////////////// /////////////////////////////////////
.nav-main
@extend .clearfix
.menu-btn
margin-right: -.5em
padding: .5em .7em
li
display: inline-block
.nav-popover .nav-popover
@extend .clearfix, .divider-top @extend .divider-top, .list-unstyled
clear: both
padding: $line-height-computed 0 padding: $line-height-computed 0
margin-top: 60px margin-top: 60px
margin-bottom: 0
width: 100% width: 100%
background: $body-bg background: $body-bg
@ -61,13 +57,6 @@
text-transform: uppercase text-transform: uppercase
border-radius: $border-radius-base border-radius: $border-radius-base
@media $breakpoint1
width: 50%
float: left
@media $breakpoint2
width: 33.3%
&:hover, &:hover,
&:focus &:focus
color: $link-color color: $link-color
@ -84,18 +73,9 @@
///////////////////////////////////// /////////////////////////////////////
.paginator .paginator
@extend .clearfix
.icon .icon
margin-bottom: -3px margin-bottom: -3px
.paginator-next,
.paginator-previous,
.paginator-pages
width: 32.7%
display: inline-block
clear: none
.paginator-next .paginator-next
text-align: right text-align: right

2
_src/_assets/styl/print.styl
View File

@ -20,7 +20,7 @@
// hide stuff in article view // hide stuff in article view
.related-posts, .related-posts,
.footer .row:first-child, .footer .grid:first-child,
.hentry:before, .hentry:before,
.topbar .topbar
hide() hide()

14
_src/_assets/styl/scaffolding.styl
View File

@ -32,21 +32,12 @@ textarea
// site background // site background
///////////////////////////////////// /////////////////////////////////////
.topbar
height: 71px
.menu-open &
height: auto
.document .document
background-color: $page-bg background-color: $page-bg
border-top: 1px solid rgba(255,255,255,.7) border-top: 1px solid rgba(255,255,255,.7)
border-bottom: 1px solid rgba(255,255,255,.7) border-bottom: 1px solid rgba(255,255,255,.7)
box-shadow: 0 1px 4px alpha($brand-dark, .1), 0 -1px 4px alpha($brand-dark, .2) box-shadow: 0 1px 4px alpha($brand-dark, .1), 0 -1px 4px alpha($brand-dark, .2)
.content.row
margin-top: 0
@media only screen and (min-width: 40.625em) and (min-height: 650px) @media only screen and (min-width: 40.625em) and (min-height: 650px)
body body
position: relative position: relative
@ -55,8 +46,8 @@ textarea
@extend .transition @extend .transition
position: relative position: relative
z-index: 2 z-index: 2
margin-top: 71px margin-top: 80px
margin-bottom: 580px margin-bottom: 500px
.menu-open & .menu-open &
margin-top: 220px margin-top: 220px
@ -73,7 +64,6 @@ textarea
.footer .footer
z-index: 0 z-index: 0
height: 580px
bottom: 0 bottom: 0
box-shadow: none box-shadow: none

11
_src/_assets/styl/search.styl
View File

@ -29,7 +29,7 @@
position: absolute position: absolute
width: 100% width: 100%
left: 0 left: 0
top: -3px top: 0
z-index: 3 z-index: 3
// hidden by default // hidden by default
@ -40,10 +40,9 @@
.search-results .search-results
@extend .list-unstyled, .textcenter @extend .list-unstyled, .textcenter
display: flex
@media $breakpoint2 @media $breakpoint2
display: flex
flex-wrap: wrap
margin-top: ($line-height-computed/2) margin-top: ($line-height-computed/2)
margin-bottom: ($line-height-computed/2) margin-bottom: ($line-height-computed/2)
@ -51,12 +50,6 @@
padding: 0 padding: 0
margin: 0 margin: 0
@media $breakpoint2
flex: 0 0 49%
display: flex
align-items: center
align-content: stretch
.search-link .search-link
@extend .h6 @extend .h6

7
_src/_assets/styl/typography.styl
View File

@ -214,17 +214,20 @@ blockquote > p
color: lighten($text-color, 15%) color: lighten($text-color, 15%)
blockquote blockquote
padding-left: 40px padding-left: 25px
margin: 0 0 $line-height-computed margin: 0 0 $line-height-computed
position: relative position: relative
@media $breakpoint2
padding-left: 40px
@media $breakpoint3 @media $breakpoint3
padding: 0 ($line-height-computed*1.75) padding: 0 ($line-height-computed*1.75)
// quotation marks // quotation marks
&:before &:before
content: "“" content: "“"
font-size: 400% font-size: 250%
font-family: "Hoefler Text", "Times New Roman", serif font-family: "Hoefler Text", "Times New Roman", serif
color: $text-color-dimmed color: $text-color-dimmed
position: absolute position: absolute

4
_src/_assets/styl/variables.styl
View File

@ -101,8 +101,8 @@ $border-radius-base = 3px
$border-radius-small = $border-radius-base $border-radius-small = $border-radius-base
$border-radius-large = $border-radius-base $border-radius-large = $border-radius-base
$padding-base-vertical = 12px $padding-base-vertical = 8px
$padding-base-horizontal = 32px $padding-base-horizontal = 18px
$padding-small-vertical = ($padding-base-vertical / 2) $padding-small-vertical = ($padding-base-vertical / 2)
$padding-small-horizontal = ($padding-base-horizontal / 2) $padding-small-horizontal = ($padding-base-horizontal / 2)

30
_src/_includes/articles.html
View File

@ -1,9 +1,9 @@
{% if post.layout == "link" %} {% if post.layout == "link" %}
<article class="hentry format-link"> <article class="hentry format-link col6">
<header> <header>
<h1 class="entry-title"> <h1 class="entry-title">
<a href="{{ post.linkurl }}" title="Go to source: {{ post.linkurl | remove:'http://' | remove:'https://' | remove:'www.' }}"> <a href="{{ post.linkurl }}" title="Go to source: {{ post.linkurl | remove:'http://' | remove:'https://' | remove:'www.' }}">
{{ post.title | titlecase }} {{ post.title | titlecase }}
<svg class="icon icon-entypo icon-entypo-forward"> <svg class="icon icon-entypo icon-entypo-forward">
@ -12,12 +12,12 @@
<span class="linkurl">{{ post.linkurl | remove:'http://' | remove:'https://' | remove:'www.' | split:'/' | first }}</span> <span class="linkurl">{{ post.linkurl | remove:'http://' | remove:'https://' | remove:'www.' | split:'/' | first }}</span>
</a> </a>
</h1> </h1>
</header> </header>
<section class="entry-content"> <section class="entry-content">
{{ post.content | markdownify }} {{ post.content | markdownify }}
<p> <p>
<a class="more-link" href="{{ post.linkurl }}">Go to source <a class="more-link" href="{{ post.linkurl }}">Go to source
<svg class="icon icon-entypo icon-entypo-forward"> <svg class="icon icon-entypo icon-entypo-forward">
<use xlink:href="/assets/img/sprite.svg#entypo-forward"></use> <use xlink:href="/assets/img/sprite.svg#entypo-forward"></use>
</svg> </svg>
@ -27,31 +27,31 @@
<use xlink:href="/assets/img/sprite.svg#entypo-infinity"></use> <use xlink:href="/assets/img/sprite.svg#entypo-infinity"></use>
</svg> </svg>
</a> </a>
</p> </p>
</section> </section>
</article> </article>
{% elsif post.layout == "photo" %} {% elsif post.layout == "photo" %}
<article class="hentry format-photo"> <article class="hentry format-photo col6">
<a class="photo-link" href="{{ post.url }}"> <a class="photo-link" href="{{ post.url }}">
<figure class="hmedia"> <figure class="hmedia">
{% picture {{ post.image }} %} {% picture {{ post.image }} %}
<figcaption class="entry-title fn">{{ post.title | titlecase }}</figcaption> <figcaption class="entry-title fn">{{ post.title | titlecase }}</figcaption>
</figure> </figure>
</a> </a>
</article> </article>
{% else %} {% else %}
<article class="hentry format-post"> <article class="hentry format-post col6">
<header> <header>
<h1 class="entry-title"><a href="{{ post.url }}">{{ post.title | titlecase }}</a></h1> <h1 class="entry-title"><a href="{{ post.url }}">{{ post.title | titlecase }}</a></h1>
</header> </header>
<section class="entry-content"> <section class="entry-content">

2
_src/_includes/featured.html
View File

@ -1,5 +1,5 @@
<aside class="row featured"> <aside class="grid featured">
{% for post in site.posts %} {% for post in site.posts %}
{% if post.featured %} {% if post.featured %}
<article class="col2"> <article class="col2">

15
_src/_includes/footer.html
View File

@ -1,13 +1,13 @@
<footer role="contentinfo" class="footer container"> <footer role="contentinfo" class="footer container">
<div class="row"> <div class="grid">
<div class="vcard author"> <div class="vcard author col6">
<img class="avatar photo" src="/assets/img/avatar.jpeg" /> <img class="avatar photo" src="/assets/img/avatar.jpeg" />
<p class="footer-description">Blog of designer &amp; developer <a class="fn" rel="author" href="/about/">{{ site.author.name }}</a> <p class="footer-description">Blog of designer &amp; developer <a class="fn" rel="author" href="/about/">{{ site.author.name }}</a>
</div> </div>
<aside class="subscribe"> <aside class="subscribe col6">
<h1 class="subscribe-title">Subscribe</h1> <h1 class="subscribe-title">Subscribe</h1>
<p> <p>
<a class="btn rss" href="http://kremalicious.com/feed"> <a class="btn rss" href="http://kremalicious.com/feed">
@ -32,9 +32,11 @@
</a> </a>
</p> </p>
</aside> </aside>
</div>
<section class="footer-copyright" class="row">
</div>
<section class="footer-copyright" class="grid">
<div class="col6">
<p>© 2007 &ndash; {{ site.time | date: "%Y" }} <a href="http://matthiaskretschmann.com" rel="me">Matthias Kretschmann</a></p> <p>© 2007 &ndash; {{ site.time | date: "%Y" }} <a href="http://matthiaskretschmann.com" rel="me">Matthias Kretschmann</a></p>
<p> <p>
@ -45,8 +47,9 @@
View source View source
</a> </a>
</p> </p>
</div>
</section> </section>
</footer> </footer>
<script src="/assets/js/kremalicious3.min.js" async></script> <script src="/assets/js/kremalicious3.min.js" async></script>

26
_src/_includes/header.html
View File

@ -1,27 +1,20 @@
<div class="topbar container"> <div class="topbar container">
<div class="row"> <div class="grid">
<header role="banner" class="banner"> <header role="banner" class="banner col3-xs">
<h1 class="banner-title"> <h1 class="banner-title">
<a class="banner-logo" href="/">kremalicious</a> <a class="banner-logo" href="/">kremalicious</a>
</h1> </h1>
</header> </header>
<nav role="navigation" class="nav-main"> <nav role="navigation" class="nav-main col3-xs">
<button type="button" class="menu-btn"> <button type="button" class="menu-btn">
<svg class="icon icon-entypo icon-entypo-menu" role="img" aria-labelledby="title"> <svg class="icon icon-entypo icon-entypo-menu" role="img" aria-labelledby="title">
<title id="title">Menu</title> <title id="title">Menu</title>
<use xlink:href="/assets/img/sprite.svg#entypo-menu"></use> <use xlink:href="/assets/img/sprite.svg#entypo-menu"></use>
</svg> </svg>
</button> </button>
<div class="nav-popover hide">
{% for category in site.categories %}
<a class="nav-link" href="/{{ category | first }}/">
{{ category | first }}
</a>
{% endfor %}
</div>
</nav> </nav>
<section class="site-search"> <section class="site-search">
@ -38,8 +31,19 @@
</section> </section>
</div> </div>
<ul class="nav-popover grid hide">
{% for category in site.categories %}
<li class="col3-xs col2">
<a class="nav-link" href="/{{ category | first }}/">
{{ category | first }}
</a>
</li>
{% endfor %}
</ul>
</div> </div>
<div id="search-popover" class="search-popover container hide"> <div id="search-popover" class="search-popover container hide">
<ul id="search-results" class="search-results row"></ul> <ul id="search-results" class="search-results grid"></ul>
</div> </div>

8
_src/_includes/paginator.html
View File

@ -1,8 +1,8 @@
{% if paginator.total_pages > 1 %} {% if paginator.total_pages > 1 %}
<nav class="row paginator"> <nav class="paginator grid">
<p class="paginator-previous"> <p class="paginator-previous col2-xs">
{% if paginator.previous_page %} {% if paginator.previous_page %}
<a <a
{% if page.category %} {% if page.category %}
@ -27,11 +27,11 @@
{% endif %} {% endif %}
</p> </p>
<p class="paginator-pages"> <p class="paginator-pages col2-xs">
<span class="paginator-number">{{ paginator.page }}</span> of <span class="paginator-number">{{ paginator.total_pages }}</span> <span class="paginator-number">{{ paginator.page }}</span> of <span class="paginator-number">{{ paginator.total_pages }}</span>
</p> </p>
<p class="paginator-next"> <p class="paginator-next col2-xs">
{% if paginator.next_page %} {% if paginator.next_page %}
<a <a
{% if page.category %} {% if page.category %}

4
_src/_includes/relatedphotos.html
View File

@ -1,10 +1,10 @@
<aside class="related-photos"> <aside class="related-photos">
<div class="row"> <div class="grid">
{% for post in site.categories['photos'] limit:6 %} {% for post in site.categories['photos'] limit:6 %}
<article class="related-photo col2"> <article class="related-photo col3-xs col2">
<a class="photo-link" href="{{ post.url }}"> <a class="photo-link" href="{{ post.url }}">
{% picture photothumb {{ post.image }} %} {% picture photothumb {{ post.image }} %}
</a> </a>

2
_src/_includes/relatedposts.html
View File

@ -3,7 +3,7 @@
<h1 class="related-posts-title">Related</h1> <h1 class="related-posts-title">Related</h1>
<div class="row"> <div class="grid">
{% for post in site.related_posts limit:6 %} {% for post in site.related_posts limit:6 %}

2
_src/_layouts/archive.html
View File

@ -2,7 +2,7 @@
layout: base layout: base
--- ---
<section role="main" id="main"> <section role="main" id="main" class="grid">
{% if page.type == 'category' %} {% if page.type == 'category' %}
<h1 class="page-title">{{ page.title }}</h1> <h1 class="page-title">{{ page.title }}</h1>

2
_src/_layouts/base.html
View File

@ -8,7 +8,7 @@
{% include header.html %} {% include header.html %}
<section role="document" class="document container"> <section role="document" class="document container">
<div class="content row"> <div class="content">
{{ content }} {{ content }}
</div> </div>
</section> </section>

4
_src/_layouts/link.html
View File

@ -2,9 +2,9 @@
layout: base layout: base
--- ---
<section role="main" id="main" class="page-single"> <section role="main" id="main" class="page-single grid">
<article class="hentry format-link"> <article class="hentry format-link col6">
<header> <header>
<h1 class="entry-title"> <h1 class="entry-title">
<a href="{{ page.linkurl }}" title="Go to source: {{ page.linkurl | remove:'http://' | remove:'https://' | remove:'www.' }}"> <a href="{{ page.linkurl }}" title="Go to source: {{ page.linkurl | remove:'http://' | remove:'https://' | remove:'www.' }}">

4
_src/_layouts/page.html
View File

@ -2,9 +2,9 @@
layout: base layout: base
--- ---
<section role="main" id="main" class="page-single"> <section role="main" id="main" class="page-single grid">
<article class="hentry format-page"> <article class="hentry format-page col6">
<header> <header>
<h1 class="entry-title">{{ page.title | titlecase }}</h1> <h1 class="entry-title">{{ page.title | titlecase }}</h1>
</header> </header>

4
_src/_layouts/photo.html
View File

@ -2,9 +2,9 @@
layout: base layout: base
--- ---
<section role="main" id="main" class="page-single"> <section role="main" id="main" class="page-single grid">
<article class="hentry format-photo"> <article class="hentry format-photo col6">
<figure class="hmedia"> <figure class="hmedia">

4
_src/_layouts/post.html
View File

@ -2,9 +2,9 @@
layout: base layout: base
--- ---
<section role="main" id="main" class="page-single"> <section role="main" id="main" class="page-single grid">
<article class="hentry format-post"> <article class="hentry format-post col6">
<header> <header>
<h1 class="entry-title">{{ page.title | titlecase }}</h1> <h1 class="entry-title">{{ page.title | titlecase }}</h1>
</header> </header>

2
_src/index.html
View File

@ -13,7 +13,7 @@ redirect_from:
{% include featured.html %} {% include featured.html %}
{% endif %} {% endif %}
<section role="main" id="main" class="row"> <section role="main" id="main" class="grid">
{% if paginator.previous_page %} {% if paginator.previous_page %}
<h1 class="paginator-title">Page {{ paginator.page }}</h1> <h1 class="paginator-title">Page {{ paginator.page }}</h1>