aa50023c67
Added CSS styles for tags, color scheme for code highlighting, social links and icons, and improvements in the archive page.
589 lines
11 KiB
Plaintext
589 lines
11 KiB
Plaintext
@import "base.less";
|
|
@import "mixins.less";
|
|
@import "var.less";
|
|
|
|
// Credits: [Golden Grid System](http://goldengridsystem.com/) by [Joni Korpi](http://jonikorpi.com/) licensed under [MIT](http://www.opensource.org/licenses/mit-license.php)
|
|
|
|
// Important numbers
|
|
|
|
@column: 100% / 18;
|
|
@em: @font-size*1em;
|
|
@font-size: 16;
|
|
@line: 24;
|
|
|
|
// Mobile first
|
|
|
|
body {
|
|
background: @white;
|
|
color: lighten(@black, 25%);
|
|
line-height: @line * 1px;
|
|
.normal;
|
|
.sans;
|
|
}
|
|
|
|
a{
|
|
color: @link;
|
|
text-decoration: none;
|
|
|
|
&:hover{
|
|
color: darken(@link, 40%);
|
|
text-decoration:underline;
|
|
}
|
|
}
|
|
|
|
h1{
|
|
.huge;
|
|
margin: 0 0 (@line * 1.5px) 0;
|
|
.title;
|
|
}
|
|
|
|
h2{
|
|
.large;
|
|
margin: (@line * 2px) 0 (@line * 1px);
|
|
.title;
|
|
}
|
|
|
|
h3{
|
|
color: lighten(@black, 60%);
|
|
margin: (@line * 1.5px) 0 (@line * 1px);
|
|
.normal;
|
|
text-transform: uppercase;
|
|
.title;
|
|
}
|
|
|
|
h4, h5, h6{
|
|
font-weight: 400;
|
|
margin: (@line * 1px) 0;
|
|
.normal;
|
|
.title;
|
|
}
|
|
|
|
b, strong{
|
|
font-weight: 700;
|
|
}
|
|
|
|
blockquote{
|
|
border-left: (@line / 4px) solid @link;
|
|
margin-left: -(@line / 2px);
|
|
padding-left: (@line / 4px);
|
|
}
|
|
|
|
code, .codehilite{
|
|
background: lighten(@black, 15%); // If you don't a dark scheme for code, we can't be friends
|
|
.box-shadow(inset 0 0 10px @black);
|
|
color: @white;
|
|
display: block;
|
|
margin-left: -(@line * 1px);
|
|
.mono();
|
|
padding: (@line * 1px);
|
|
.rounded();
|
|
}
|
|
|
|
time{
|
|
.small;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.post ul li{
|
|
list-style-image: url('../images/bullet.png'); // or use something less colorful, like list-style-type: square
|
|
}
|
|
|
|
// Archive
|
|
|
|
.archive li{
|
|
list-style: none;
|
|
}
|
|
|
|
.archive a{
|
|
border-bottom: 1px dotted lighten(@black, 80%);
|
|
display: block;
|
|
padding: (@line / 2px) 0;
|
|
.transition();
|
|
|
|
&:hover{
|
|
background-color: lighten(@black, 95%);
|
|
text-decoration:none;
|
|
}
|
|
}
|
|
|
|
.archive time{
|
|
color: lighten(@black, 40%);
|
|
display: inline;
|
|
padding-left: @line / 2px;
|
|
}
|
|
|
|
// jQuery UI tabs (in the archive)
|
|
|
|
.tabmenu li{
|
|
list-style-type: none;
|
|
|
|
a{
|
|
border: 1px solid @link;
|
|
.border-box;
|
|
display: block;
|
|
float: left;
|
|
padding: (@line / 2px) 0;
|
|
text-align: center;
|
|
width: 50%;
|
|
|
|
&:hover{
|
|
text-decoration:none
|
|
}
|
|
}
|
|
|
|
&:last-child a{
|
|
border-left: none;
|
|
}
|
|
}
|
|
|
|
// Make jQuery tabs work (because I don't use the themes's CSS)
|
|
|
|
.ui-tabs-hide{
|
|
display: none;
|
|
}
|
|
|
|
.tabmenu li a:hover, .ui-tabs-selected a, .ui-tabs-selected a{
|
|
background-color: lighten(@black, 95%);
|
|
}
|
|
|
|
// Push the button
|
|
|
|
.btn {
|
|
color: @white;
|
|
background-color: @color;
|
|
border: none;
|
|
|
|
-webkit-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
|
|
-moz-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
|
|
box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
|
|
|
|
padding: 8px 14px 10px;
|
|
position: relative;
|
|
.rounded(3px);
|
|
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
|
|
-webkit-user-select: none;
|
|
|
|
&:hover{
|
|
color: @white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
&:active {
|
|
-webkit-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
|
|
-moz-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
|
|
box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
|
|
|
|
position: relative;
|
|
top: 3px;
|
|
}
|
|
|
|
&:active:after {
|
|
content: "";
|
|
background: @white;
|
|
bottom: -1px;
|
|
height: 3px;
|
|
left: 0;
|
|
position: absolute;
|
|
width: 100%;
|
|
}
|
|
|
|
}
|
|
|
|
// CSS tags
|
|
|
|
.tag li{
|
|
list-style: none;
|
|
margin-bottom: @line / 8px;
|
|
}
|
|
|
|
.tag a{
|
|
.border-box;
|
|
|
|
-moz-border-radius-bottomright: 4px;
|
|
-webkit-border-bottom-right-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
-moz-border-radius-topright: 4px;
|
|
-webkit-border-top-right-radius: 4px;
|
|
border-top-right-radius: 4px;
|
|
|
|
color: @black;
|
|
background-color: lighten(@link, 50%);
|
|
display: block;
|
|
margin-left: 20px;
|
|
padding: 0 10px 0 12px;
|
|
position: relative;
|
|
.small;
|
|
|
|
&:hover{
|
|
background-color: lighten(@link, 30%);
|
|
text-decoration:none;
|
|
}
|
|
|
|
&:before{
|
|
content: "";
|
|
border-color: transparent lighten(@link, 50%) transparent transparent;
|
|
border-style: solid;
|
|
border-width: 12px 12px 12px 0;
|
|
float: left;
|
|
height: 0;
|
|
left: -12px;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 0;
|
|
}
|
|
|
|
&:after{
|
|
content: "";
|
|
background: @white;
|
|
.box-shadow(-1px -1px 2px darken(@link, 50%));
|
|
float: left;
|
|
height: 4px;
|
|
left: 0;
|
|
position: absolute;
|
|
.rounded(2px);
|
|
top: 10px;
|
|
width: 4px;
|
|
}
|
|
|
|
&:hover:before {
|
|
border-color: transparent lighten(@link, 30%) transparent transparent;
|
|
}
|
|
}
|
|
|
|
// Tagcloud
|
|
.tag-1 a{width: 100%;}
|
|
.tag-2 a{width: 90%;}
|
|
.tag-3 a{width: 80%;}
|
|
.tag-4 a{width: 70%;}
|
|
.tag-5 a{width: 60%;}
|
|
.tag-6 a{width: 50%;}
|
|
.tag-7 a{width: 40%;}
|
|
.tag-8 a{width: 30%;}
|
|
|
|
// Header
|
|
|
|
header{
|
|
.border-image(0 0 2px, 0 0 2, '../images/2px.png', repeat); // It's a very small detail, delete this line if you want different colors and don't want to edit the image file
|
|
.gradient(@color, darken(@color, 6%));
|
|
margin-bottom: (@line * 2px);
|
|
padding: (@line * 1px) @column;
|
|
|
|
h1{
|
|
margin: 0;
|
|
}
|
|
|
|
a{
|
|
color: fade(@white, 80%);
|
|
text-decoration: none;
|
|
// The 3d effect is kind of silly, so go ahead and delete the following lines xD
|
|
text-shadow:
|
|
0 1px 0 lighten(@black, 70%),
|
|
0 2px 0 lighten(@black, 60%),
|
|
0 3px 0 lighten(@black, 50%),
|
|
0 4px 0 lighten(@black, 40%),
|
|
0 5px 0 lighten(@black, 30%),
|
|
0 6px 0 lighten(@black, 20%),
|
|
0px 7px 0 lighten(@black, 10%),
|
|
0 8px 7px lighten(@black, 5%);
|
|
|
|
&:hover{
|
|
color: @white;
|
|
text-decoration:none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Footer
|
|
|
|
footer{
|
|
.border-image(20px 0 0, 20 0 0, '../images/pages.png', repeat); // Again, it's a detail. I used border-image to be able to use a gradient or background color for the footer, but now it's white
|
|
color: fade(@black, 60%);
|
|
margin-top: (@line * 4px);
|
|
padding: (@line * 2px) @column (@line * 1px);
|
|
}
|
|
|
|
.nav{
|
|
margin-bottom: (@line * 1px);
|
|
|
|
li{
|
|
list-style: none;
|
|
display: inline;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
a{
|
|
.transition();
|
|
}
|
|
}
|
|
|
|
p[role="contentinfo"]{
|
|
.small;
|
|
}
|
|
|
|
.social{
|
|
margin-bottom: @line * 1px;
|
|
|
|
li{
|
|
list-style: none;
|
|
display: inline;
|
|
padding-right: @line / 2px;
|
|
}
|
|
}
|
|
|
|
.icon{
|
|
margin-right: 2px;
|
|
vertical-align: -3px;
|
|
}
|
|
|
|
.social a[href*='behance.net']:before {content: url('../images/icons/behance.png'); .icon;}
|
|
.social a[href*='delicious.com']:before {content: url('../images/icons/delicious.png'); .icon;}
|
|
.social a[href*='facebook.com']:before {content: url('../images/icons/facebook.png'); .icon;}
|
|
.social a[href*='flickr.com']:before {content: url('../images/icons/flickr.png'); .icon;}
|
|
.social a[href*='forrst.com']:before {content: url('../images/icons/forrst.png'); .icon;}
|
|
.social a[href*='github.com']:before {content: url('../images/icons/github.png'); .icon;}
|
|
.social a[href*='plus.google.com']:before {content: url('../images/icons/google_plus.png'); .icon;}
|
|
.social a[href*='last.fm']:before {content: url('../images/icons/lastfm.png'); .icon;}
|
|
.social a[href*='linkedin.com']:before {content: url('../images/icons/linkedin.png'); .icon;}
|
|
.social a[href*='quora.com']:before {content: url('../images/icons/quora.png'); .icon;}
|
|
.social a[href*='rss.xml']:before {content: url('../images/icons/rss.png'); .icon;}
|
|
.social a[href*='stackoverflow.com']:before {content: url('../images/icons/stackoverflow.png'); .icon;}
|
|
.social a[href*='twitter.com']:before {content: url('../images/icons/twitter.png'); .icon;}
|
|
.social a[href*='youtube.com']:before {content: url('../images/icons/youtube.png'); .icon;}
|
|
|
|
|
|
|
|
// Four-column grid active
|
|
// ----------------------------------------
|
|
// Margin | # 1 2 3 4 | Margin
|
|
// 5.55555% | % 25 50 75 100 | 5.55555%
|
|
|
|
.wrapper {
|
|
.border-box;
|
|
padding: 0 (@line/2)/@em;
|
|
}
|
|
|
|
.content{
|
|
margin:0 @column;
|
|
}
|
|
|
|
.meta{
|
|
background: lighten(@black, 98%);
|
|
margin-top: @line * 2px;
|
|
padding-bottom: (@line * 1px);
|
|
padding-top: (@line * 1px);
|
|
.rounded();
|
|
|
|
time{
|
|
font-weight: 700;
|
|
margin-left: 20px;
|
|
margin-bottom: @line * 1px;
|
|
}
|
|
}
|
|
|
|
.tag li{
|
|
display: block;
|
|
float: left;
|
|
width: 50%;
|
|
}
|
|
|
|
blockquote, code, .codehilite, .post ul, .post ol, p, .archive{
|
|
margin: 0 0 (@line * 1px) 0;
|
|
}
|
|
|
|
.main + .main{
|
|
margin-top: (@line * 4px);
|
|
}
|
|
|
|
|
|
// Eight-column grid active
|
|
// ----------------------------------------------------------------------
|
|
// Margin | # 1 2 3 4 5 6 7 8 | Margin
|
|
// 5.55555% | % 12.5 25.0 37.5 50.0 62.5 75.0 87.5 100 | 5.55555%
|
|
|
|
|
|
// @media screen and (min-width: 720px)
|
|
@media screen and (min-width: 45em) {
|
|
|
|
|
|
header .wrapper{
|
|
float: right;
|
|
width: 75%;
|
|
}
|
|
|
|
.meta, .pages{
|
|
float: left;
|
|
text-align: right;
|
|
width: 25%;
|
|
}
|
|
|
|
.meta{
|
|
background: @white;
|
|
margin-top: 0;
|
|
padding-top: 24px + (@line * 1.5px); // h1 font-size + margin-bottom
|
|
|
|
time{
|
|
margin-bottom: (@line * 1px);
|
|
margin-left: 0;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
.post, .copy, .main{
|
|
float: right;
|
|
width: 75%;
|
|
}
|
|
|
|
.tag li{
|
|
float: none;
|
|
width: 100%;
|
|
}
|
|
|
|
.nav a:hover{
|
|
padding-right: (@line / 4px); // If prefer your links to remain still, delete this nonsense
|
|
}
|
|
|
|
.nav a:hover:after{
|
|
content: "\2192 ";
|
|
}
|
|
|
|
.nav li{
|
|
display: block;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.archive time{
|
|
.border-box;
|
|
display: block;
|
|
float: left;
|
|
width: 100/4%; // target 1 columns, context 4 columns
|
|
}
|
|
}
|
|
|
|
|
|
// @media screen and (min-width: 888px)
|
|
@media screen and (min-width: 55.5em) {
|
|
|
|
.post > p, .post blockquote, .post ul, .post ol{
|
|
width: 400/6%; // target 4 columns, context 6 columns
|
|
}
|
|
|
|
.main{
|
|
float: none;
|
|
margin-left: 25%;
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
|
|
// @media screen and (min-width: 984px)
|
|
@media screen and (min-width: 61.5em) {
|
|
|
|
.meta, .pages{
|
|
width: 12.5%;
|
|
}
|
|
|
|
.pages{
|
|
padding-top: 0;
|
|
}
|
|
|
|
.meta{
|
|
padding-top: 24px + (@line * 1.5px);
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
// Sixteen-column grid active
|
|
// ----------------------------------------------------------------------------------------------------------------------
|
|
// Margin | # 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | Margin
|
|
// 5.55555% | % 6.25 12.5 18.75 25.0 31.25 37.5 43.75 50.0 56.25 62.5 68.75 75.0 81.25 87.5 93.75 100 | 5.55555%
|
|
|
|
|
|
// @media screen and (min-width: 1872px)
|
|
@media screen and (min-width: 117em) {
|
|
|
|
body{
|
|
.large;
|
|
}
|
|
|
|
header{
|
|
margin-bottom: (@line * 4px);
|
|
}
|
|
|
|
footer{
|
|
margin-top: (@line * 6px);
|
|
}
|
|
|
|
h1{
|
|
.gigantic;
|
|
margin-bottom: (@line * 2px);
|
|
}
|
|
|
|
h2, header .huge{
|
|
.massive;
|
|
}
|
|
|
|
h2{
|
|
margin-top: (@line * 3px);
|
|
}
|
|
|
|
h3{
|
|
.huge;
|
|
margin-top: (@line * 3px);
|
|
}
|
|
|
|
h4, h5, h6{
|
|
.large;
|
|
margin-top: (@line * 2px);
|
|
}
|
|
|
|
.meta, .pages{
|
|
padding-left: 6.25%;
|
|
width: 18.75%;
|
|
}
|
|
|
|
.meta{
|
|
padding-top: 48 * 2px;
|
|
}
|
|
|
|
.post, .copy{
|
|
width: 75%;
|
|
}
|
|
|
|
.post{
|
|
padding-right: 12.5%;
|
|
}
|
|
|
|
.post ul{
|
|
margin-bottom: 0;
|
|
}
|
|
.post li{
|
|
margin-bottom: (@line * 1px);
|
|
}
|
|
|
|
code, .codehilite{
|
|
line-height: 1.5;
|
|
.massive;
|
|
}
|
|
|
|
.post > p, .post blockquote, .post ul, .post ol{
|
|
width: 600/10%; // target 4 columns, context 6 columns
|
|
}
|
|
|
|
}
|
|
|
|
// @media screen and (min-width: 2080px)
|
|
@media screen and (min-width: 130em) {
|
|
|
|
body {
|
|
max-width: 2560/@em;
|
|
}
|
|
|
|
}
|
|
|
|
@media print{
|
|
@import "print.less";
|
|
}
|
|
|
|
@import "codehilite.less"; |