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

more fixes & grid updates

Browse Source
This commit is contained in:
Matthias Kretschmann 2015-08-18 22:45:30 +02:00
parent b099d589c3
commit a512d3c280
13 changed files with 85 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -153,8 +153,7 @@
.masonry
@media $breakpoint2
width: 125%
margin-left: -12.5%
width: 100%
clearfix()
.hentry

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

@ -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)

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

@ -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%

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

@ -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

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

@ -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

2
_src/_includes/featured.html
View File

@ -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">

6
_src/_includes/paginator.html
View File

@ -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 %}

2
_src/_includes/relatedphotos.html
View File

@ -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 %}

2
_src/_includes/relatedposts.html
View File

@ -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 %}

4
_src/_posts/2010-07-03-momcorp.md
View File

@ -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>

2
_src/_posts/2011-12-15-badged.md
View File

@ -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:

72
_src/_posts/2012-05-15-wp-icons-template.md
View File

@ -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
@ -80,12 +80,12 @@ function custom_post_type_icon() {
#menu-posts-YOUR_POSTTYPE_NAME .wp-menu-image {
background: url(<?php bloginfo('template_url') ?>/images/icon-adminmenu16-sprite.png) no-repeat 6px 6px !important;
}
#menu-posts-YOUR_POSTTYPE_NAME:hover .wp-menu-image, #menu-posts-YOUR_POSTTYPE_NAME.wp-has-current-submenu .wp-menu-image {
#menu-posts-YOUR_POSTTYPE_NAME:hover .wp-menu-image, #menu-posts-YOUR_POSTTYPE_NAME.wp-has-current-submenu .wp-menu-image {
background-position: 6px -26px !important;
}
/* Post Screen - 32px */
.icon32-posts-YOUR_POSTTYPE_NAME {
background: url(<?php bloginfo('template_url') ?>/images/icon-adminpage32.png) no-repeat left top !important;
background: url(<?php bloginfo('template_url') ?>/images/icon-adminpage32.png) no-repeat left top !important;
}
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
@ -94,20 +94,20 @@ function custom_post_type_icon() {
only screen and ( min-device-pixel-ratio: 1.5),
only screen and ( min-resolution: 1.5dppx) {
/* Admin Menu - 16px @2x */
#menu-posts-YOUR_POSTTYPE_NAME .wp-menu-image {
background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminmenu16-sprite_2x.png') !important;
-webkit-background-size: 16px 48px;
-moz-background-size: 16px 48px;
background-size: 16px 48px;
}
/* Post Screen - 32px @2x */
.icon32-posts-YOUR_POSTTYPE_NAME {
background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminpage32_2x.png') !important;
-webkit-background-size: 32px 32px;
-moz-background-size: 32px 32px;
background-size: 32px 32px;
}
/* Admin Menu - 16px @2x */
#menu-posts-YOUR_POSTTYPE_NAME .wp-menu-image {
background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminmenu16-sprite_2x.png') !important;
-webkit-background-size: 16px 48px;
-moz-background-size: 16px 48px;
background-size: 16px 48px;
}
/* Post Screen - 32px @2x */
.icon32-posts-YOUR_POSTTYPE_NAME {
background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminpage32_2x.png') !important;
-webkit-background-size: 32px 32px;
-moz-background-size: 32px 32px;
background-size: 32px 32px;
}
}
</style>
<?php }
@ -148,11 +148,11 @@ function option_page_icon() {
Use only if you put your plugin or option page in the top level via add_menu_page()
*/
#toplevel_page_PLUGINNAME-FILENAME .wp-menu-image {
background: url(<?php bloginfo('template_url') ?>/images/icon-adminmenu16-sprite.png) no-repeat 6px 6px !important;
background: url(<?php bloginfo('template_url') ?>/images/icon-adminmenu16-sprite.png) no-repeat 6px 6px !important;
}
/* We need to hide the generic.png img element inserted by default */
#toplevel_page_PLUGINNAME-FILENAME .wp-menu-image img {
display: none;
display: none;
}
#toplevel_page_PLUGINNAME-FILENAME:hover .wp-menu-image, #toplevel_page_PLUGINNAME-FILENAME.wp-has-current-submenu .wp-menu-image {
background-position: 6px -26px !important;
@ -160,7 +160,7 @@ function option_page_icon() {
/* Option Screen - 32px */
#PLUGINNAME.icon32 {
background: url(<?php bloginfo('template_url') ?>/images/icon-adminpage32.png) no-repeat left top !important;
background: url(<?php bloginfo('template_url') ?>/images/icon-adminpage32.png) no-repeat left top !important;
}
@media
@ -169,23 +169,23 @@ function option_page_icon() {
only screen and ( -o-min-device-pixel-ratio: 3/2),
only screen and ( min-device-pixel-ratio: 1.5),
only screen and ( min-resolution: 1.5dppx) {
/* Admin Menu - 16px @2x
Use only if you put your plugin or option page in the top level via add_menu_page()
*/
#toplevel_page_PLUGINNAME-FILENAME .wp-menu-image {
background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminmenu16-sprite_2x.png') !important;
-webkit-background-size: 16px 48px;
-moz-background-size: 16px 48px;
background-size: 16px 48px;
}
/* Admin Menu - 16px @2x
Use only if you put your plugin or option page in the top level via add_menu_page()
*/
#toplevel_page_PLUGINNAME-FILENAME .wp-menu-image {
background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminmenu16-sprite_2x.png') !important;
-webkit-background-size: 16px 48px;
-moz-background-size: 16px 48px;
background-size: 16px 48px;
}
/* Option Screen - 32px @2x */
#PLUGINNAME.icon32 {
background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminpage32_2x.png') !important;
-webkit-background-size: 32px 32px;
-moz-background-size: 32px 32px;
background-size: 32px 32px;
}
/* Option Screen - 32px @2x */
#PLUGINNAME.icon32 {
background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminpage32_2x.png') !important;
-webkit-background-size: 32px 32px;
-moz-background-size: 32px 32px;
background-size: 32px 32px;
}
}
</style>
<?php }

4
_src/_posts/2012-07-16-using-kbd-for-fun-and-profit.md
View File

@ -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