mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-14 09:05:17 +01:00
more fixes & grid updates
This commit is contained in:
parent
b099d589c3
commit
a512d3c280
@ -153,8 +153,7 @@
|
||||
|
||||
.masonry
|
||||
@media $breakpoint2
|
||||
width: 125%
|
||||
margin-left: -12.5%
|
||||
width: 100%
|
||||
clearfix()
|
||||
|
||||
.hentry
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
@extend .textcenter
|
||||
border-top: 1px solid rgba(255,255,255,.7)
|
||||
box-shadow: inset 0 1px 4px alpha($brand-dark, .2)
|
||||
padding-top: ($line-height-computed*2)
|
||||
|
||||
.gravatar
|
||||
margin-bottom: ($line-height-computed/2)
|
||||
|
||||
@ -63,10 +63,14 @@
|
||||
//
|
||||
// Columns
|
||||
//
|
||||
.grid
|
||||
.grid--fit
|
||||
> .grid__col
|
||||
flex: 1
|
||||
|
||||
.grid--full
|
||||
> .grid__col
|
||||
flex: 0 0 100%
|
||||
|
||||
.grid--1of6
|
||||
> .grid__col
|
||||
flex: 0 0 16.5%
|
||||
@ -91,6 +95,14 @@
|
||||
|
||||
|
||||
@media $breakpoint1
|
||||
.grid-small--fit
|
||||
> .grid__col
|
||||
flex: 1
|
||||
|
||||
.grid-small--full
|
||||
> .grid__col
|
||||
flex: 0 0 100%
|
||||
|
||||
.grid-small--1of6
|
||||
> .grid__col
|
||||
flex: 0 0 16.5%
|
||||
@ -115,6 +127,14 @@
|
||||
|
||||
|
||||
@media $breakpoint2
|
||||
.grid-medium--fit
|
||||
> .grid__col
|
||||
flex: 1
|
||||
|
||||
.grid-medium--full
|
||||
> .grid__col
|
||||
flex: 0 0 100%
|
||||
|
||||
.grid-medium--1of6
|
||||
> .grid__col
|
||||
flex: 0 0 16.5%
|
||||
@ -138,6 +158,14 @@
|
||||
flex: 0 0 82.5%
|
||||
|
||||
@media $breakpoint3
|
||||
.grid-large--fit
|
||||
> .grid__col
|
||||
flex: 1
|
||||
|
||||
.grid-large--full
|
||||
> .grid__col
|
||||
flex: 0 0 100%
|
||||
|
||||
.grid-large--1of6
|
||||
> .grid__col
|
||||
flex: 0 0 16.5%
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
position: relative
|
||||
z-index: 2
|
||||
margin-top: 80px
|
||||
margin-bottom: 500px
|
||||
margin-bottom: 420px
|
||||
|
||||
.menu-open &
|
||||
margin-top: 220px
|
||||
@ -46,6 +46,7 @@
|
||||
.site__footer
|
||||
position: fixed
|
||||
border: none
|
||||
width: 100%
|
||||
|
||||
.site__header
|
||||
z-index: 1
|
||||
|
||||
@ -77,8 +77,13 @@
|
||||
/////////////////////////////////////
|
||||
|
||||
.paginator
|
||||
padding-top: $line-height-computed
|
||||
padding-bottom: $line-height-computed
|
||||
|
||||
.icon
|
||||
margin-bottom: -3px
|
||||
p
|
||||
margin-bottom: 0;
|
||||
|
||||
.paginator-next
|
||||
text-align: right
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
|
||||
<aside class="featured">
|
||||
<div class="grid grid--gutters">
|
||||
<div class="grid grid--full grid-small--fit grid--gutters">
|
||||
{% for post in site.posts %}
|
||||
{% if post.featured %}
|
||||
<article class="grid__col">
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
<nav class="paginator grid">
|
||||
|
||||
<p class="paginator-previous col2-xs">
|
||||
<p class="paginator-previous grid__col">
|
||||
{% if paginator.previous_page %}
|
||||
<a
|
||||
{% if page.category %}
|
||||
@ -27,11 +27,11 @@
|
||||
{% endif %}
|
||||
</p>
|
||||
|
||||
<p class="paginator-pages col2-xs">
|
||||
<p class="paginator-pages grid__col">
|
||||
<span class="paginator-number">{{ paginator.page }}</span> of <span class="paginator-number">{{ paginator.total_pages }}</span>
|
||||
</p>
|
||||
|
||||
<p class="paginator-next col2-xs">
|
||||
<p class="paginator-next grid__col">
|
||||
{% if paginator.next_page %}
|
||||
<a
|
||||
{% if page.category %}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<aside class="related-photos">
|
||||
|
||||
<div class="grid grid--gutters grid-small--half grid-medium--third">
|
||||
<div class="grid grid--gutters grid--half grid-medium--third">
|
||||
|
||||
{% for post in site.categories['photos'] limit:6 %}
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
<h1 class="related-posts-title">Related</h1>
|
||||
|
||||
<div class="grid grid--gutters grid-small--half grid-medium--third">
|
||||
<div class="grid grid--gutters grid--full grid-small--half grid-medium--third">
|
||||
|
||||
{% for post in site.related_posts limit:6 %}
|
||||
|
||||
|
||||
@ -25,6 +25,6 @@ The wallpaper comes in four versions with two color variations and two text vari
|
||||
You can grab the full zip-package with versions for Desktop, iPad, iPhone & Android included:
|
||||
|
||||
<p class="content-download">
|
||||
<a class="btn-primary icon-download col3" href="/media/momcorp_wall_by_kremalicious.zip">Download</a>
|
||||
<a href="http://krlc.us/givecoffee" class="icon-heart col3">Donate</a>
|
||||
<a class="btn-primary icon-download" href="/media/momcorp_wall_by_kremalicious.zip">Download</a>
|
||||
<a href="http://krlc.us/givecoffee" class="icon-heart">Donate</a>
|
||||
</p>
|
||||
|
||||
@ -28,7 +28,7 @@ The plugin is localized in english, german & spanish (thanks to Andrew Kurtis fr
|
||||
You can just install the plugin via the automatic backend installer under _Plugins > Add New_, activate and enjoy the red badges.
|
||||
|
||||
<p class="content-download">
|
||||
<a href="http://wordpress.org/extend/plugins/badged" class="btn-primary icon-wordpress col2">Plugin Page</a> <a class="btn-primary icon-github col2" href="https://github.com/kremalicious/Badged">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon-heart btn col2">Donate</a>
|
||||
<a href="http://wordpress.org/extend/plugins/badged" class="btn-primary icon-wordpress">Plugin Page</a> <a class="btn-primary icon-github" href="https://github.com/kremalicious/Badged">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon-heart btn">Donate</a>
|
||||
</p>
|
||||
|
||||
The plugin is hosted on GitHub and will always be mirrored in the WordPress plugins directory. But in case you want to install the plugin manually:
|
||||
|
||||
@ -35,7 +35,7 @@ So if you value quality and want pixel perfect icons in your admin area you need
|
||||
I’ve put the template along with the implementation examples from the next section on [github](https://github.com/kremalicious/wp-icons-template). You can just download the whole package right away:
|
||||
|
||||
<p class="content-download">
|
||||
<a href="https://github.com/kremalicious/wp-icons-template/zipball/master" class="btn-primary icon-download col2">Download</a> <a href="https://github.com/kremalicious/wp-icons-template" class="icon-github col2">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon-heart col2">Donate</a>
|
||||
<a href="https://github.com/kremalicious/wp-icons-template/zipball/master" class="btn-primary icon-download">Download</a> <a href="https://github.com/kremalicious/wp-icons-template" class="icon-github">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon-heart">Donate</a>
|
||||
</p>
|
||||
|
||||
### Usage
|
||||
|
||||
@ -23,8 +23,8 @@ The above picture might be blurry depending on the device you're using so here's
|
||||
They are completely styled with CSS3 so they're sharp on all screens no matter how high the dpi. Have a look at the [full demo](http://lab.kremalicious.com/kbdfun/) or grab the project folder with the CSS & LESS files from GitHub. The code is under the MIT license so you're free to use it in any personal or commercial project.
|
||||
|
||||
<p class="content-download">
|
||||
<a class="btn-primary icon-eye col3" href="http://lab.kremalicious.com/kbdfun/">Demo</a>
|
||||
<a class="icon-github col3" href="https://github.com/kremalicious/kbdfun/">Github</a>
|
||||
<a class="btn-primary icon-eye" href="http://lab.kremalicious.com/kbdfun/">Demo</a>
|
||||
<a class="icon-github" href="https://github.com/kremalicious/kbdfun/">Github</a>
|
||||
</p>
|
||||
|
||||
## Usage
|
||||
|
||||
Loading…
Reference in New Issue
Block a user