mirror of
https://github.com/kremalicious/blog.git
synced 2024-09-24 01:58:50 +02:00
another grid rewrite, now exercise it
This commit is contained in:
parent
8f27245841
commit
227b0a5ecc
@ -15,9 +15,9 @@ var siteNavigation = {
|
||||
|
||||
siteSearch: function() {
|
||||
|
||||
var $content = $('.content'),
|
||||
var $content = $('.site__content'),
|
||||
$searchlink = $('.search-btn'),
|
||||
$searcharea = $('.topbar .search-area'),
|
||||
$searcharea = $('.search-area'),
|
||||
$searchfield = $('#search-input'),
|
||||
$searchresults = $('#search-results'),
|
||||
$searchpop = $('#search-popover');
|
||||
@ -36,7 +36,7 @@ var siteNavigation = {
|
||||
searchInput: document.getElementById('search-input'),
|
||||
resultsContainer: document.getElementById('search-results'),
|
||||
json: '/search.json',
|
||||
searchResultTemplate: '<li class="col3"><a class="search-link" href="{url}">{title}</a></li>',
|
||||
searchResultTemplate: '<li class="grid__col"><a class="search-link" href="{url}">{title}</a></li>',
|
||||
fuzzy: false
|
||||
})
|
||||
|
||||
|
||||
@ -7,11 +7,10 @@
|
||||
.featured
|
||||
@extend .divider-bottom
|
||||
padding-top: $line-height-computed
|
||||
padding-bottom: $line-height-computed
|
||||
|
||||
@media $breakpoint2
|
||||
padding-top: ($line-height-computed*2)
|
||||
padding-bottom: ($line-height-computed*2)
|
||||
padding-bottom: $line-height-computed
|
||||
|
||||
.featured-link
|
||||
display: block
|
||||
|
||||
@ -25,11 +25,11 @@
|
||||
color: darken($page-bg, 15%)
|
||||
margin-right: 2px
|
||||
|
||||
.hentry,
|
||||
.grid > .hentry
|
||||
.hentry
|
||||
@extend .divider-bottom
|
||||
padding-top: ($line-height-computed*2)
|
||||
padding-bottom: ($line-height-computed*2)
|
||||
width: 100%
|
||||
|
||||
@media $breakpoint2
|
||||
padding-top: ($line-height-computed*4)
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
// Footer
|
||||
//
|
||||
|
||||
.footer
|
||||
.footer__content
|
||||
@extend .textcenter
|
||||
border-top: 1px solid rgba(255,255,255,.7)
|
||||
box-shadow: inset 0 1px 4px alpha($brand-dark, .2)
|
||||
|
||||
@ -5,74 +5,129 @@
|
||||
//
|
||||
|
||||
|
||||
// Prevents padding to be added
|
||||
*
|
||||
*,
|
||||
*:before,
|
||||
*:after
|
||||
box-sizing: border-box
|
||||
|
||||
.container
|
||||
padding-left: 7%
|
||||
padding-right: 7%
|
||||
width: 100%
|
||||
|
||||
@media $breakpoint2
|
||||
padding-left: 15%
|
||||
padding-right: 15%
|
||||
|
||||
//
|
||||
// Base
|
||||
//
|
||||
.grid
|
||||
margin: auto
|
||||
padding: 0
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
list-style: none
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
@media $breakpoint2
|
||||
max-width: 35em
|
||||
|
||||
> .col1,
|
||||
> .col2,
|
||||
> .col3,
|
||||
> .col4,
|
||||
> .col5,
|
||||
> .col6
|
||||
.grid__col
|
||||
flex: 1
|
||||
flex: 0 0 100%
|
||||
padding: 1em 0 0 1em
|
||||
|
||||
> .col6
|
||||
padding-left: 0
|
||||
|
||||
> .col1-xs,
|
||||
> .col2-xs,
|
||||
> .col3-xs,
|
||||
> .col4-xs,
|
||||
> .col5-xs,
|
||||
> .col6-xs
|
||||
//
|
||||
// Alignment per row
|
||||
//
|
||||
.grid--top
|
||||
align-items: flex-start
|
||||
|
||||
.grid--bottom
|
||||
align-items: flex-end
|
||||
|
||||
.grid--center
|
||||
align-items: center
|
||||
|
||||
|
||||
//
|
||||
// Alignment per cell
|
||||
//
|
||||
.grid_col--top
|
||||
align-self: flex-start
|
||||
|
||||
.grid_col--bottom
|
||||
align-self: flex-end
|
||||
|
||||
.grid_col--center
|
||||
align-self: center
|
||||
|
||||
|
||||
//
|
||||
// Gutters
|
||||
//
|
||||
.grid--gutters
|
||||
margin: -($gutter-space) 0 $gutter-space (-($gutter-space))
|
||||
|
||||
> .grid__col
|
||||
padding: $gutter-space 0 0 $gutter-space
|
||||
|
||||
|
||||
//
|
||||
// Columns
|
||||
//
|
||||
.grid
|
||||
> .grid__col
|
||||
flex: 1
|
||||
padding: 1em 0 0 1em
|
||||
|
||||
> .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
|
||||
|
||||
@media $breakpoint2
|
||||
> .col1
|
||||
.grid--1of6
|
||||
> .grid__col
|
||||
flex: 0 0 16.5%
|
||||
> .col2
|
||||
|
||||
.grid--2of6
|
||||
> .grid__col
|
||||
flex: 0 0 33%
|
||||
> .col3
|
||||
|
||||
.grid--3of6,
|
||||
.grid--half
|
||||
> .grid__col
|
||||
flex: 0 0 50%
|
||||
> .col4
|
||||
|
||||
.grid--4of6
|
||||
> .grid__col
|
||||
flex: 0 0 66%
|
||||
> .col5
|
||||
|
||||
.grid--5of6
|
||||
> .grid__col
|
||||
flex: 0 0 82.5%
|
||||
|
||||
@media $breakpoint2
|
||||
.grid-medium--1of6
|
||||
> .grid__col
|
||||
flex: 0 0 16.5%
|
||||
|
||||
.grid-medium--2of6
|
||||
> .grid__col
|
||||
flex: 0 0 33%
|
||||
|
||||
.grid-medium--3of6,
|
||||
.grid-medium--half
|
||||
> .grid__col
|
||||
flex: 0 0 50%
|
||||
|
||||
.grid-medium--4of6
|
||||
> .grid__col
|
||||
flex: 0 0 66%
|
||||
|
||||
.grid-medium--5of6
|
||||
> .grid__col
|
||||
flex: 0 0 82.5%
|
||||
|
||||
@media $breakpoint3
|
||||
.grid-large--1of6
|
||||
> .grid__col
|
||||
flex: 0 0 16.5%
|
||||
|
||||
.grid-large--2of6
|
||||
> .grid__col
|
||||
flex: 0 0 33%
|
||||
|
||||
.grid-large--3of6,
|
||||
.grid-large--half
|
||||
> .grid__col
|
||||
flex: 0 0 50%
|
||||
|
||||
.grid-large--4of6
|
||||
> .grid__col
|
||||
flex: 0 0 66%
|
||||
|
||||
.grid-large--5of6
|
||||
> .grid__col
|
||||
flex: 0 0 82.5%
|
||||
> .col6
|
||||
flex: 0 0 100%
|
||||
|
||||
@ -4,10 +4,8 @@
|
||||
// Header
|
||||
//
|
||||
|
||||
// Topbar
|
||||
/////////////////////////////////////
|
||||
|
||||
.topbar
|
||||
.header
|
||||
width: 100%
|
||||
background: $body-bg
|
||||
margin-top: ($line-height-computed/2)
|
||||
margin-bottom: ($line-height-computed/2)
|
||||
@ -46,20 +44,13 @@
|
||||
background-image: url('../img/logo@3x.png')
|
||||
background-size: 183px 62px
|
||||
|
||||
|
||||
// Banner
|
||||
/////////////////////////////////////
|
||||
|
||||
.banner
|
||||
padding-top: 0
|
||||
|
||||
.banner-title
|
||||
.header__title
|
||||
margin: 0
|
||||
// display toned down logo
|
||||
// by default
|
||||
@extend .logo
|
||||
|
||||
.banner-logo
|
||||
.header__logo
|
||||
@extend .ir
|
||||
// repeat logo
|
||||
// but display hover version
|
||||
|
||||
@ -14,8 +14,9 @@
|
||||
@import 'mixins'
|
||||
|
||||
// Core CSS
|
||||
@import 'grid'
|
||||
@import 'scaffolding'
|
||||
@import 'grid'
|
||||
@import 'layout'
|
||||
@import 'typography'
|
||||
@import 'forms'
|
||||
@import 'buttons'
|
||||
|
||||
61
_src/_assets/styl/layout.styl
Normal file
61
_src/_assets/styl/layout.styl
Normal file
@ -0,0 +1,61 @@
|
||||
//
|
||||
// kremalicious3
|
||||
// --------------
|
||||
// Layout
|
||||
//
|
||||
|
||||
.site__content,
|
||||
.header__content
|
||||
.footer__content
|
||||
padding: 0 7%
|
||||
width: 100%
|
||||
|
||||
@media $breakpoint2
|
||||
padding: 0 15%
|
||||
|
||||
.container
|
||||
max-width: 35em
|
||||
margin: 0 auto
|
||||
|
||||
|
||||
// topbar and footer as fixed
|
||||
// site background
|
||||
/////////////////////////////////////
|
||||
|
||||
.site__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)
|
||||
|
||||
@media only screen and (min-width: 40.625em) and (min-height: 650px)
|
||||
body
|
||||
position: relative
|
||||
|
||||
.site__document
|
||||
@extend .transition
|
||||
position: relative
|
||||
z-index: 2
|
||||
margin-top: 80px
|
||||
margin-bottom: 500px
|
||||
|
||||
.menu-open &
|
||||
margin-top: 220px
|
||||
|
||||
.header,
|
||||
.footer
|
||||
position: fixed
|
||||
border: none
|
||||
|
||||
.header
|
||||
z-index: 1
|
||||
top: 0
|
||||
border: none
|
||||
|
||||
.footer
|
||||
z-index: 0
|
||||
bottom: 0
|
||||
box-shadow: none
|
||||
|
||||
.menu-open &
|
||||
hide()
|
||||
@ -26,46 +26,3 @@ textarea
|
||||
font-family: inherit
|
||||
font-size: inherit
|
||||
line-height: inherit
|
||||
|
||||
|
||||
// topbar and footer as fixed
|
||||
// site background
|
||||
/////////////////////////////////////
|
||||
|
||||
.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)
|
||||
|
||||
@media only screen and (min-width: 40.625em) and (min-height: 650px)
|
||||
body
|
||||
position: relative
|
||||
|
||||
.document
|
||||
@extend .transition
|
||||
position: relative
|
||||
z-index: 2
|
||||
margin-top: 80px
|
||||
margin-bottom: 500px
|
||||
|
||||
.menu-open &
|
||||
margin-top: 220px
|
||||
|
||||
.topbar,
|
||||
.footer
|
||||
position: fixed
|
||||
border: none
|
||||
|
||||
.topbar
|
||||
z-index: 1
|
||||
top: 0
|
||||
border: none
|
||||
|
||||
.footer
|
||||
z-index: 0
|
||||
bottom: 0
|
||||
box-shadow: none
|
||||
|
||||
.menu-open &
|
||||
hide()
|
||||
|
||||
@ -94,6 +94,11 @@ $link-color = lighten($brand-cyan, 5%)
|
||||
$link-color-hover = lighten($link-color, 10%)
|
||||
|
||||
|
||||
// Grid
|
||||
/////////////////////////////////////
|
||||
|
||||
$gutter-space = $line-height-computed
|
||||
|
||||
// Components spacing
|
||||
/////////////////////////////////////
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
|
||||
{% if post.layout == "link" %}
|
||||
|
||||
<article class="hentry format-link col6">
|
||||
<article class="hentry format-link">
|
||||
<header>
|
||||
<h1 class="entry-title">
|
||||
<a href="{{ post.linkurl }}" title="Go to source: {{ post.linkurl | remove:'http://' | remove:'https://' | remove:'www.' }}">
|
||||
@ -33,7 +33,7 @@
|
||||
|
||||
{% elsif post.layout == "photo" %}
|
||||
|
||||
<article class="hentry format-photo col6">
|
||||
<article class="hentry format-photo">
|
||||
|
||||
<a class="photo-link" href="{{ post.url }}">
|
||||
<figure class="hmedia">
|
||||
@ -48,7 +48,7 @@
|
||||
|
||||
{% else %}
|
||||
|
||||
<article class="hentry format-post col6">
|
||||
<article class="hentry format-post">
|
||||
<header>
|
||||
<h1 class="entry-title"><a href="{{ post.url }}">{{ post.title | titlecase }}</a></h1>
|
||||
</header>
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
|
||||
<aside class="grid featured">
|
||||
<aside class="featured">
|
||||
<div class="grid grid--gutters">
|
||||
{% for post in site.posts %}
|
||||
{% if post.featured %}
|
||||
<article class="col2">
|
||||
<article class="grid__col">
|
||||
<a class="featured-link" href="{{ post.url }}" title="{{ post.title }}">
|
||||
{% picture featured {{ post.image }} %}
|
||||
<h1 class="featured-title">{{ post.title | titlecase }}</h1>
|
||||
@ -10,4 +11,5 @@
|
||||
</article>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</aside>
|
||||
@ -1,13 +1,13 @@
|
||||
<footer role="contentinfo" class="footer container">
|
||||
<footer role="contentinfo" class="footer__content">
|
||||
|
||||
<div class="grid">
|
||||
<div class="container">
|
||||
|
||||
<div class="vcard author col6">
|
||||
<div class="vcard author">
|
||||
<img class="avatar photo" src="/assets/img/avatar.jpeg" />
|
||||
<p class="footer-description">Blog of designer & developer <a class="fn" rel="author" href="/about/">{{ site.author.name }}</a>
|
||||
</div>
|
||||
|
||||
<aside class="subscribe col6">
|
||||
<aside class="subscribe">
|
||||
<h1 class="subscribe-title">Subscribe</h1>
|
||||
<p>
|
||||
<a class="btn rss" href="http://kremalicious.com/feed">
|
||||
@ -33,10 +33,7 @@
|
||||
</p>
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="footer-copyright" class="grid">
|
||||
<div class="col6">
|
||||
<section class="footer-copyright">
|
||||
<p>© 2007 – {{ site.time | date: "%Y" }} <a href="http://matthiaskretschmann.com" rel="me">Matthias Kretschmann</a></p>
|
||||
|
||||
<p>
|
||||
@ -47,9 +44,10 @@
|
||||
View source
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
|
||||
<script src="/assets/js/kremalicious3.min.js" async></script>
|
||||
|
||||
@ -1,14 +1,17 @@
|
||||
|
||||
<div class="topbar container">
|
||||
<div class="grid">
|
||||
<header role="banner" class="header">
|
||||
<div class="header__content">
|
||||
<div class="container">
|
||||
|
||||
<header role="banner" class="banner col3-xs">
|
||||
<h1 class="banner-title">
|
||||
<a class="banner-logo" href="/">kremalicious</a>
|
||||
<div class="grid grid--half">
|
||||
|
||||
<div class="grid__col">
|
||||
<h1 class="header__title">
|
||||
<a class="header__logo" href="/">kremalicious</a>
|
||||
</h1>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<nav role="navigation" class="nav-main col3-xs">
|
||||
<nav role="navigation" class="nav-main grid__col">
|
||||
<button type="button" class="menu-btn">
|
||||
<svg class="icon icon-entypo icon-entypo-menu" role="img" aria-labelledby="title">
|
||||
<title id="title">Menu</title>
|
||||
@ -28,13 +31,16 @@
|
||||
<input type="search" id="search-input" class="form-control input-search search-field" placeholder="Search everything">
|
||||
<button class="close search-close">×</button>
|
||||
</div>
|
||||
<div id="search-popover" class="search-popover hide">
|
||||
<ul id="search-results" class="search-results grid"></ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<ul class="nav-popover grid hide">
|
||||
{% for category in site.categories %}
|
||||
<li class="col3-xs col2">
|
||||
<li class="grid__col grid--gutters grid-medium--half">
|
||||
<a class="nav-link" href="/{{ category | first }}/">
|
||||
{{ category | first }}
|
||||
</a>
|
||||
@ -43,7 +49,5 @@
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="search-popover" class="search-popover container hide">
|
||||
<ul id="search-results" class="search-results grid"></ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@ -3,14 +3,16 @@
|
||||
|
||||
{% capture id %}{{ page.url | replace:'/','-' | replace_first:'-','' | replace:'.html','' | replace:'-index','' }}{% endcapture %}
|
||||
|
||||
<body class="page-{{ id | remove:'-' }}">
|
||||
<body class="page-{{ id | remove:'-' }} site">
|
||||
|
||||
{% include header.html %}
|
||||
|
||||
<section role="document" class="document container">
|
||||
<div class="content">
|
||||
<section role="document" class="site__document">
|
||||
<div class="site__content">
|
||||
<div class="container">
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user