m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-11 23:55:16 +01:00
Code

grid fixes

Browse Source
This commit is contained in:
Matthias Kretschmann 2015-08-18 20:55:30 +02:00
parent 5b6b4e4fbe
commit b099d589c3
13 changed files with 148 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
_src/_assets/styl/buttons.styl
View File

@ -154,24 +154,25 @@ a.btn-primary
.icon .icon
width: 15px width: 15px
height: 15px height: 15px
margin: 1px 0 0 0 margin: 1px 3px 0 0
fill: #0089cb fill: #0089cb
float: left
// Close button // Close button
///////////////////////////////////// /////////////////////////////////////
.close .close
@extend .textcenter @extend .textcenter, .transition
width: 16px width: 14px
height: 16px height: 14px
line-height: 12px
font-size: $font-size-small
padding: 0 padding: 0
border-radius: 16px border-radius: 50%
display: block display: block
background: $brand-grey-light background: lighten($brand-grey-light, 50%)
color: #fff color: #fff
line-height: 1
font-size: $font-size-mini
&:hover, &:hover,
&:focus &:focus
@ -185,12 +186,18 @@ a.btn-primary
///////////////////////////////////// /////////////////////////////////////
.content-download .content-download
@extend .clearfix @extend .grid, .grid--gutters
display: block
margin-top: 0
@media $breakpoint1
display: flex
margin-top: -($gutter-space)
a a
@extend .btn @extend .btn, .grid__col
padding-left: 15px margin: $gutter-space 0 0 $gutter-space
padding-right: 15px
display: block display: block
span span

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

@ -6,7 +6,8 @@
.featured .featured
@extend .divider-bottom @extend .divider-bottom
padding-top: $line-height-computed padding-top: ($line-height-computed*2)
padding-bottom: ($line-height-computed*2)
@media $breakpoint2 @media $breakpoint2
padding-top: ($line-height-computed*3) padding-top: ($line-height-computed*3)
@ -17,10 +18,8 @@
.featured-link .featured-link
display: block display: block
margin-bottom: $line-height-computed
@media $breakpoint2 @media $breakpoint2
margin-bottom: 0
&:hover &:hover
transform: scale(1.03) transform: scale(1.03)

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

@ -17,7 +17,6 @@
.post-title .post-title
@extend .h5 @extend .h5
margin: 0 margin: 0
margin-bottom: $line-height-computed
.post-title, .post-title,
.post-title-link .post-title-link

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

@ -4,7 +4,7 @@
// Footer // Footer
// //
.footer__content .site__footer
@extend .textcenter @extend .textcenter
border-top: 1px solid rgba(255,255,255,.7) border-top: 1px solid rgba(255,255,255,.7)
box-shadow: inset 0 1px 4px alpha($brand-dark, .2) box-shadow: inset 0 1px 4px alpha($brand-dark, .2)

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

@ -71,7 +71,8 @@
> .grid__col > .grid__col
flex: 0 0 16.5% flex: 0 0 16.5%
.grid--2of6 .grid--2of6,
.grid--third
> .grid__col > .grid__col
flex: 0 0 33% flex: 0 0 33%
@ -88,12 +89,38 @@
> .grid__col > .grid__col
flex: 0 0 82.5% flex: 0 0 82.5%
@media $breakpoint1
.grid-small--1of6
> .grid__col
flex: 0 0 16.5%
.grid-small--2of6,
.grid-small--third
> .grid__col
flex: 0 0 33%
.grid-small--3of6,
.grid-small--half
> .grid__col
flex: 0 0 50%
.grid-small--4of6
> .grid__col
flex: 0 0 66%
.grid-small--5of6
> .grid__col
flex: 0 0 82.5%
@media $breakpoint2 @media $breakpoint2
.grid-medium--1of6 .grid-medium--1of6
> .grid__col > .grid__col
flex: 0 0 16.5% flex: 0 0 16.5%
.grid-medium--2of6 .grid-medium--2of6,
.grid-medium--third
> .grid__col > .grid__col
flex: 0 0 33% flex: 0 0 33%
@ -115,7 +142,8 @@
> .grid__col > .grid__col
flex: 0 0 16.5% flex: 0 0 16.5%
.grid-large--2of6 .grid-large--2of6,
.grid-large--third
> .grid__col > .grid__col
flex: 0 0 33% flex: 0 0 33%

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

@ -4,7 +4,7 @@
// Header // Header
// //
.header .site__header
width: 100% width: 100%
background: $body-bg background: $body-bg
margin-top: ($line-height-computed/2) margin-top: ($line-height-computed/2)

10
_src/_assets/styl/layout.styl
View File

@ -29,7 +29,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)
@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 .site
position: relative position: relative
.site__document .site__document
@ -42,17 +42,17 @@
.menu-open & .menu-open &
margin-top: 220px margin-top: 220px
.header, .site__header,
.footer .site__footer
position: fixed position: fixed
border: none border: none
.header .site__header
z-index: 1 z-index: 1
top: 0 top: 0
border: none border: none
.footer .site__footer
z-index: 0 z-index: 0
bottom: 0 bottom: 0
box-shadow: none box-shadow: none

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

@ -41,10 +41,14 @@
.nav-popover .nav-popover
@extend .divider-top, .list-unstyled @extend .divider-top, .list-unstyled
padding: $line-height-computed 0 padding: $line-height-computed 0
margin-top: 60px margin-top: 30px
margin-bottom: 0 margin-bottom: 0
width: 100% width: 100%
background: $body-bg background: $body-bg
display: flex
.grid__col
padding-top: 0
.nav-link .nav-link
@extend .h6, .textcenter @extend .h6, .textcenter

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

@ -5,8 +5,9 @@
// //
&.search-open-blur &.search-open-blur
@extend .transition
filter: blur(10px) filter: blur(10px)
user-select: none
pointer-events: none
.search-btn .search-btn
right: 50px right: 50px
@ -17,12 +18,12 @@
.search-close .search-close
position: absolute position: absolute
right: 32px right: 16px
&, &,
&:active &:active
top: 50% top: 50%
margin-top: -8px margin-top: -7px
.search-area .search-area
@extend .transition @extend .transition
@ -38,10 +39,29 @@
&.ready &.ready
display: block display: block
.search-popover
position: absolute
left: 0
top: 71px
z-index: 6
width: 100%
padding-top: ($line-height-computed/2)
background: lighten($page-bg, 3%)
border-bottom: 1px solid rgba(255,255,255,.7)
box-shadow: 0 1px 4px alpha($brand-dark, .1)
@media $breakpoint2
top: 0
.search-results .search-results
@extend .list-unstyled, .textcenter @extend .list-unstyled
display: flex display: flex
.grid__col
padding-top: 0
@media $breakpoint2 @media $breakpoint2
margin-top: ($line-height-computed/2) margin-top: ($line-height-computed/2)
margin-bottom: ($line-height-computed/2) margin-bottom: ($line-height-computed/2)
@ -63,17 +83,3 @@
border: none border: none
&:before &:before
display: none display: none
.search-popover
position: absolute
left: 0
top: 71px
z-index: 6
width: 100%
padding-top: ($line-height-computed/2)
background: lighten($page-bg, 3%)
border-bottom: 1px solid rgba(255,255,255,.7)
box-shadow: 0 1px 4px alpha($brand-dark, .1)
@media $breakpoint2
top: 0

92
_src/_includes/footer.html
View File

@ -1,53 +1,55 @@
<footer role="contentinfo" class="footer__content"> <footer role="contentinfo" class="site__footer">
<div class="footer__content">
<div class="container"> <div class="container">
<div class="vcard author">
<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">
<h1 class="subscribe-title">Subscribe</h1>
<p>
<a class="btn rss" href="http://kremalicious.com/feed">
<svg class="icon icon-entypo icon-entypo-rss">
<use xlink:href="/assets/img/sprite.svg#entypo-rss"></use>
</svg>
</a>
<a class="btn twitter" href="https://twitter.com/kremaliciouscom">
<svg class="icon icon-entypo icon-entypo-twitter">
<use xlink:href="/assets/img/sprite.svg#entypo-twitter"></use>
</svg>
</a>
<a class="btn google" href="https://plus.google.com/100015950464424503954" rel="publisher">
<svg class="icon icon-entypo icon-entypo-google+">
<use xlink:href="/assets/img/sprite.svg#entypo-google+"></use>
</svg>
</a>
<a class="btn facebook" href="https://www.facebook.com/pages/kremalicious/154539134564052">
<svg class="icon icon-entypo icon-entypo-facebook">
<use xlink:href="/assets/img/sprite.svg#entypo-facebook"></use>
</svg>
</a>
</p>
</aside>
<section class="footer-copyright">
<p>© 2007 &ndash; {{ site.time | date: "%Y" }} <a href="http://matthiaskretschmann.com" rel="me">Matthias Kretschmann</a></p>
<p>
<a href="https://github.com/kremalicious/kremalicious3">
<svg class="icon icon-entypo icon-entypo-github">
<use xlink:href="/assets/img/sprite.svg#entypo-github"></use>
</svg>
View source
</a>
</p>
</section>
<div class="vcard author">
<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> </div>
<aside class="subscribe">
<h1 class="subscribe-title">Subscribe</h1>
<p>
<a class="btn rss" href="http://kremalicious.com/feed">
<svg class="icon icon-entypo icon-entypo-rss">
<use xlink:href="/assets/img/sprite.svg#entypo-rss"></use>
</svg>
</a>
<a class="btn twitter" href="https://twitter.com/kremaliciouscom">
<svg class="icon icon-entypo icon-entypo-twitter">
<use xlink:href="/assets/img/sprite.svg#entypo-twitter"></use>
</svg>
</a>
<a class="btn google" href="https://plus.google.com/100015950464424503954" rel="publisher">
<svg class="icon icon-entypo icon-entypo-google+">
<use xlink:href="/assets/img/sprite.svg#entypo-google+"></use>
</svg>
</a>
<a class="btn facebook" href="https://www.facebook.com/pages/kremalicious/154539134564052">
<svg class="icon icon-entypo icon-entypo-facebook">
<use xlink:href="/assets/img/sprite.svg#entypo-facebook"></use>
</svg>
</a>
</p>
</aside>
<section class="footer-copyright">
<p>© 2007 &ndash; {{ site.time | date: "%Y" }} <a href="http://matthiaskretschmann.com" rel="me">Matthias Kretschmann</a></p>
<p>
<a href="https://github.com/kremalicious/kremalicious3">
<svg class="icon icon-entypo icon-entypo-github">
<use xlink:href="/assets/img/sprite.svg#entypo-github"></use>
</svg>
View source
</a>
</p>
</section>
</div> </div>
</footer> </footer>
<script src="/assets/js/kremalicious3.min.js" async></script> <script src="/assets/js/kremalicious3.min.js" async></script>

15
_src/_includes/header.html
View File

@ -1,5 +1,5 @@
<header role="banner" class="header"> <header role="banner" class="site__header">
<div class="header__content"> <div class="header__content">
<div class="container"> <div class="container">
@ -31,16 +31,13 @@
<input type="search" id="search-input" class="form-control input-search search-field" placeholder="Search everything"> <input type="search" id="search-input" class="form-control input-search search-field" placeholder="Search everything">
<button class="close search-close">&times;</button> <button class="close search-close">&times;</button>
</div> </div>
<div id="search-popover" class="search-popover hide">
<ul id="search-results" class="search-results grid"></ul>
</div>
</section> </section>
</div> </div>
<ul class="nav-popover grid hide"> <ul class="nav-popover grid grid--gutters grid--half grid-medium--third hide">
{% for category in site.categories %} {% for category in site.categories %}
<li class="grid__col grid--gutters grid-medium--half"> <li class="grid__col">
<a class="nav-link" href="/{{ category | first }}/"> <a class="nav-link" href="/{{ category | first }}/">
{{ category | first }} {{ category | first }}
</a> </a>
@ -51,3 +48,9 @@
</div> </div>
</div> </div>
</header> </header>
<div id="search-popover" class="search-popover hide">
<div class="container">
<ul id="search-results" class="search-results grid grid--gutters grid-medium--half"></ul>
</div>
</div>

4
_src/_includes/relatedphotos.html
View File

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

4
_src/_includes/relatedposts.html
View File

@ -3,11 +3,11 @@
<h1 class="related-posts-title">Related</h1> <h1 class="related-posts-title">Related</h1>
<div class="grid"> <div class="grid grid--gutters grid-small--half grid-medium--third">
{% for post in site.related_posts limit:6 %} {% for post in site.related_posts limit:6 %}
<article class="related-post col2"> <article class="related-post grid__col">
<a class="post-title-link" href="{{ post.url }}"> <a class="post-title-link" href="{{ post.url }}">
<h1 class="post-title">{{ post.title }}</h1> <h1 class="post-title">{{ post.title }}</h1>
</a> </a>