m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-13 16:45:14 +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'),
resultsContainer: document.getElementById('search-results'),
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
})
@ -96,7 +96,7 @@ var siteNavigation = {
siteMenu: function() {
var $thelink = $('.menu-btn'),
$thepop = $('.nav-main .nav-popover');
$thepop = $('.nav-popover');
$thelink.click(function(e) {
e.preventDefault();

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -214,17 +214,20 @@ blockquote > p
color: lighten($text-color, 15%)
blockquote
padding-left: 40px
padding-left: 25px
margin: 0 0 $line-height-computed
position: relative
@media $breakpoint2
padding-left: 40px
@media $breakpoint3
padding: 0 ($line-height-computed*1.75)
// quotation marks
&:before
content: "“"
font-size: 400%
font-size: 250%
font-family: "Hoefler Text", "Times New Roman", serif
color: $text-color-dimmed
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-large = $border-radius-base
$padding-base-vertical = 12px
$padding-base-horizontal = 32px
$padding-base-vertical = 8px
$padding-base-horizontal = 18px
$padding-small-vertical = ($padding-base-vertical / 2)
$padding-small-horizontal = ($padding-base-horizontal / 2)

30
_src/_includes/articles.html
View File

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

15
_src/_includes/footer.html
View File

@ -1,13 +1,13 @@
<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" />
<p class="footer-description">Blog of designer &amp; developer <a class="fn" rel="author" href="/about/">{{ site.author.name }}</a>
</div>
<aside class="subscribe">
<aside class="subscribe col6">
<h1 class="subscribe-title">Subscribe</h1>
<p>
<a class="btn rss" href="http://kremalicious.com/feed">
@ -32,9 +32,11 @@
</a>
</p>
</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>
@ -45,8 +47,9 @@
View source
</a>
</p>
</div>
</section>
</footer>
<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="row">
<div class="grid">
<header role="banner" class="banner">
<header role="banner" class="banner col3-xs">
<h1 class="banner-title">
<a class="banner-logo" href="/">kremalicious</a>
</h1>
</header>
<nav role="navigation" class="nav-main">
<nav role="navigation" class="nav-main col3-xs">
<button type="button" class="menu-btn">
<svg class="icon icon-entypo icon-entypo-menu" role="img" aria-labelledby="title">
<title id="title">Menu</title>
<use xlink:href="/assets/img/sprite.svg#entypo-menu"></use>
</svg>
</button>
<div class="nav-popover hide">
{% for category in site.categories %}
<a class="nav-link" href="/{{ category | first }}/">
{{ category | first }}
</a>
{% endfor %}
</div>
</nav>
<section class="site-search">
@ -38,8 +31,19 @@
</section>
</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 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>

8
_src/_includes/paginator.html
View File

@ -1,8 +1,8 @@
{% 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 %}
<a
{% if page.category %}
@ -27,11 +27,11 @@
{% endif %}
</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>
</p>
<p class="paginator-next">
<p class="paginator-next col2-xs">
{% if paginator.next_page %}
<a
{% if page.category %}

4
_src/_includes/relatedphotos.html
View File

@ -1,10 +1,10 @@
<aside class="related-photos">
<div class="row">
<div class="grid">
{% 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 }}">
{% picture photothumb {{ post.image }} %}
</a>

4
_src/_includes/relatedposts.html
View File

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

4
_src/_layouts/archive.html
View File

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

2
_src/_layouts/base.html
View File

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

4
_src/_layouts/link.html
View File

@ -2,9 +2,9 @@
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>
<h1 class="entry-title">
<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
---
<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>
<h1 class="entry-title">{{ page.title | titlecase }}</h1>
</header>

4
_src/_layouts/photo.html
View File

@ -2,9 +2,9 @@
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">

4
_src/_layouts/post.html
View File

@ -2,9 +2,9 @@
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>
<h1 class="entry-title">{{ page.title | titlecase }}</h1>
</header>

2
_src/index.html
View File

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