mirror of
https://github.com/kremalicious/blog.git
synced 2024-06-28 16:48:00 +02:00
use more LESS extends, split up content styles
This commit is contained in:
parent
eed4e14296
commit
ac0dbe9edd
27
_src/assets/less/content-link.less
Normal file
27
_src/assets/less/content-link.less
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
// LINK POST
|
||||
/////////////////////////////////////
|
||||
|
||||
.hentry.format-link {
|
||||
|
||||
}
|
||||
|
||||
.linkurl {
|
||||
display: block;
|
||||
font-family: @font-family-base;
|
||||
font-size: @font-size-mini;
|
||||
color: @text-color-dimmed;
|
||||
padding: @line-height-computed/3 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
&:extend(.ellipsis);
|
||||
|
||||
max-width: 70%;
|
||||
@media @breakpoint2 {
|
||||
max-width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.permalink-link {
|
||||
float: right;
|
||||
font-size: 1.1em
|
||||
}
|
||||
84
_src/assets/less/content-photo.less
Normal file
84
_src/assets/less/content-photo.less
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
// PHOTO POST
|
||||
/////////////////////////////////////
|
||||
|
||||
.hentry.format-photo {
|
||||
|
||||
figure {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
img,
|
||||
figcaption {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
img { max-height: 540px }
|
||||
|
||||
figcaption {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 25%;
|
||||
max-width: 55%;
|
||||
min-width: 45%;
|
||||
text-align: right;
|
||||
font-family: @headings-font-family;
|
||||
font-weight: @headings-font-weight;
|
||||
font-style: normal;
|
||||
font-size: .9em;
|
||||
padding: @line-height-computed/3;
|
||||
background: @link-color;
|
||||
background: fade(@link-color, 70%);
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 0 #000;
|
||||
|
||||
opacity: 0;
|
||||
.translate(0,-20px);
|
||||
.transition;
|
||||
}
|
||||
|
||||
&:hover figcaption {
|
||||
opacity: 1;
|
||||
.translate(0,0);
|
||||
}
|
||||
}
|
||||
|
||||
.page-single & {
|
||||
|
||||
padding-top: @line-height-computed*2;
|
||||
padding-bottom: @line-height-computed*3;
|
||||
|
||||
@media @breakpoint2 {
|
||||
padding-top: @line-height-computed*4;
|
||||
padding-bottom: @line-height-computed*6;
|
||||
}
|
||||
|
||||
figure img { max-height: none }
|
||||
|
||||
figcaption {
|
||||
opacity: 1;
|
||||
.translate(0,0);
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
background: #000;
|
||||
background: fade(#000, 40%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.photo-link {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#exif {
|
||||
font-size: @font-size-small;
|
||||
color: #b9c3c9;
|
||||
text-align: center;
|
||||
margin-bottom: .5em;
|
||||
|
||||
span {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,17 +1,16 @@
|
|||
.page-title {
|
||||
.h2;
|
||||
.heading-band;
|
||||
&:extend(.h2, .heading-band);
|
||||
color: @brand-grey-light;
|
||||
margin-top: @line-height-computed/2;
|
||||
margin-bottom: @line-height-computed/2;
|
||||
|
||||
|
||||
// icons
|
||||
&:before {
|
||||
font-size: 32px;
|
||||
color: fade(@text-color-dimmed, 70%);
|
||||
margin-right: .5em
|
||||
}
|
||||
|
||||
|
||||
@media @breakpoint2 {
|
||||
margin-left: -108%;
|
||||
.page-photos & { margin-bottom: @line-height-computed*4; }
|
||||
|
|
@ -19,17 +18,17 @@
|
|||
}
|
||||
|
||||
.hentry {
|
||||
.divider-bottom;
|
||||
&:extend(.divider-bottom);
|
||||
padding: @line-height-computed*2 0;
|
||||
|
||||
|
||||
@media @breakpoint2 {
|
||||
padding: @line-height-computed*4 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
|
||||
&:first-child {
|
||||
padding-top: @line-height-computed;
|
||||
}
|
||||
|
||||
|
||||
.page-single & {
|
||||
padding-bottom: @line-height-computed*2;
|
||||
border: none;
|
||||
|
|
@ -39,22 +38,21 @@
|
|||
|
||||
// post title
|
||||
.entry-title {
|
||||
.h1;
|
||||
text-align: center;
|
||||
&:extend(.h1, .textcenter);
|
||||
color: @headings-color;
|
||||
margin-top: 0;
|
||||
margin-bottom: @line-height-computed;
|
||||
|
||||
.format-link & { .h3; }
|
||||
|
||||
.format-link & { &:extend(.h3); }
|
||||
}
|
||||
|
||||
// post content
|
||||
.entry-content {
|
||||
h1, h2 {
|
||||
.heading-band;
|
||||
&:extend(.heading-band);
|
||||
}
|
||||
h1 { font-size: ceil(@font-size-base * 2.5) }
|
||||
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
@ -71,142 +69,23 @@
|
|||
margin-right: auto;
|
||||
margin-bottom: @line-height-computed/2;
|
||||
margin-top: -@line-height-computed;
|
||||
|
||||
|
||||
// icon adjustments
|
||||
&:before {
|
||||
font-size: 20px;
|
||||
color: @text-color-light
|
||||
}
|
||||
|
||||
|
||||
&:hover:before {
|
||||
color: @link-color
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// LINK POST
|
||||
/////////////////////////////////////
|
||||
|
||||
.hentry.format-link {
|
||||
|
||||
}
|
||||
|
||||
.linkurl {
|
||||
display: block;
|
||||
font-family: @font-family-base;
|
||||
font-size: @font-size-mini;
|
||||
color: @text-color-dimmed;
|
||||
padding: @line-height-computed/3 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
.ellipsis;
|
||||
|
||||
max-width: 70%;
|
||||
@media @breakpoint2 {
|
||||
max-width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.permalink-link {
|
||||
float: right;
|
||||
font-size: 1.1em
|
||||
}
|
||||
|
||||
// PHOTO POST
|
||||
/////////////////////////////////////
|
||||
|
||||
.hentry.format-photo {
|
||||
text-align: center;
|
||||
|
||||
figure {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
img,
|
||||
figcaption {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
img { max-height: 540px }
|
||||
|
||||
figcaption {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 25%;
|
||||
max-width: 55%;
|
||||
min-width: 45%;
|
||||
text-align: right;
|
||||
font-family: @headings-font-family;
|
||||
font-weight: @headings-font-weight;
|
||||
font-style: normal;
|
||||
font-size: .9em;
|
||||
padding: @line-height-computed/3;
|
||||
background: @link-color;
|
||||
background: fade(@link-color, 70%);
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 0 #000;
|
||||
|
||||
opacity: 0;
|
||||
.translate(0,-20px);
|
||||
.transition;
|
||||
}
|
||||
|
||||
&:hover figcaption {
|
||||
opacity: 1;
|
||||
.translate(0,0);
|
||||
}
|
||||
}
|
||||
|
||||
.page-single & {
|
||||
|
||||
padding-top: @line-height-computed*2;
|
||||
padding-bottom: @line-height-computed*3;
|
||||
|
||||
@media @breakpoint2 {
|
||||
padding-top: @line-height-computed*4;
|
||||
padding-bottom: @line-height-computed*6;
|
||||
}
|
||||
|
||||
figure img { max-height: none }
|
||||
|
||||
figcaption {
|
||||
opacity: 1;
|
||||
.translate(0,0);
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
background: #000;
|
||||
background: fade(#000, 40%);
|
||||
}
|
||||
|
||||
.entry-content,
|
||||
.entry-meta,
|
||||
.comments { .visuallyhidden; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.photo-link {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#exif {
|
||||
font-size: @font-size-small;
|
||||
color: #b9c3c9;
|
||||
text-align: center;
|
||||
margin-bottom: .5em;
|
||||
|
||||
span {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
// POST META
|
||||
/////////////////////////////////////
|
||||
|
||||
.entry-meta {
|
||||
.clearfix;
|
||||
&:extend(.clearfix all);
|
||||
margin-top: @line-height-computed*2;
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
|
|
@ -214,7 +93,7 @@
|
|||
.byline,
|
||||
time,
|
||||
.categories {
|
||||
text-align: center;
|
||||
&:extend(.textcenter);
|
||||
}
|
||||
|
||||
.byline,
|
||||
|
|
@ -225,7 +104,7 @@ time {
|
|||
|
||||
.byline {
|
||||
margin-bottom: 0;
|
||||
|
||||
|
||||
.by { display: block }
|
||||
}
|
||||
|
||||
|
|
@ -245,62 +124,24 @@ time {
|
|||
border: 2px solid #fff;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Related posts
|
||||
//
|
||||
.related-title {
|
||||
.h5;
|
||||
color: @text-color-dimmed;
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
margin-bottom: @line-height-computed;
|
||||
}
|
||||
|
||||
.related-posts {
|
||||
&:hover .post-title {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.related-post {
|
||||
text-align: center;
|
||||
|
||||
.post-title {
|
||||
font-size: 1em;
|
||||
color: @text-color-light;
|
||||
line-height: @line-height-base;
|
||||
margin-top: 0;
|
||||
margin-bottom: @line-height-computed;
|
||||
.transition;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
|
||||
&:hover .post-title { color: @link-color-hover }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Goodies download
|
||||
//
|
||||
.goodie-actions {
|
||||
.clearfix;
|
||||
&:extend(.clearfix all);
|
||||
max-width: 640px;
|
||||
margin: 0 auto;
|
||||
|
||||
|
||||
p,
|
||||
.btn { margin-bottom: 0 }
|
||||
|
||||
|
||||
.btn { display: block; }
|
||||
|
||||
.download {
|
||||
|
||||
.download {
|
||||
margin-top: @line-height-computed/2;
|
||||
|
||||
|
||||
@media @breakpoint2 {
|
||||
margin-top: 0;
|
||||
margin-top: 0;
|
||||
text-align: right
|
||||
}
|
||||
}
|
||||
|
|
@ -311,15 +152,15 @@ time {
|
|||
// Masonry
|
||||
|
||||
.masonry {
|
||||
|
||||
|
||||
@media @breakpoint2 {
|
||||
width: 125%;
|
||||
margin-left: -12.5%;
|
||||
.clearfix();
|
||||
}
|
||||
|
||||
|
||||
.hentry {
|
||||
|
||||
|
||||
@media @breakpoint1 {
|
||||
width: 49%;
|
||||
float: left;
|
||||
|
|
@ -333,7 +174,7 @@ time {
|
|||
border: none;
|
||||
|
||||
&:before { display: none; }
|
||||
|
||||
|
||||
&:nth-child(2n+1) { margin-right: 0; }
|
||||
|
||||
&:last-child { margin-bottom: 3em; }
|
||||
|
|
@ -341,57 +182,10 @@ time {
|
|||
}
|
||||
}
|
||||
|
||||
.grid-sizer {
|
||||
.grid-sizer {
|
||||
width: 100%;
|
||||
|
||||
|
||||
@media screen and (min-width: 480px) {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
// TABLES
|
||||
/////////////////////////////////////
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
background-color: transparent;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
margin-bottom: 1.5em;
|
||||
border-bottom: 1px solid #cfd9e1;
|
||||
}
|
||||
|
||||
td { vertical-align: top; }
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: .7em .3em;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
border-top: 1px solid #cfd9e1;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
thead th {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
table tbody + tbody {
|
||||
border-top: 2px solid #cfd9e1;
|
||||
}
|
||||
|
||||
table tbody tr:nth-child(odd) td,
|
||||
table tbody tr:nth-child(odd) th {
|
||||
background-color: rgba(255,255,255,.2);
|
||||
}
|
||||
|
||||
table tbody tr:hover td,
|
||||
table tbody tr:hover th {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
|
@ -47,6 +47,8 @@
|
|||
// Content
|
||||
@import 'tables.less';
|
||||
@import 'content.less';
|
||||
@import 'content-photo.less';
|
||||
@import 'content-link.less';
|
||||
@import 'comments.less';
|
||||
@import 'sticky.less';
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
// Dimmed Text
|
||||
/////////////////////////////////////
|
||||
.dimmed() {
|
||||
.dimmed {
|
||||
color: @text-color-dimmed;
|
||||
p { color: @text-color-dimmed; }
|
||||
li { color: @text-color-dimmed; }
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
// Text overflow
|
||||
/////////////////////////////////////
|
||||
|
||||
.ellipsis() {
|
||||
.ellipsis {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
.divider-top,
|
||||
.divider-bottom {
|
||||
position: relative;
|
||||
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
.divider-top {
|
||||
border-top: 1px dashed #afc3cb;
|
||||
padding-top: 1em;
|
||||
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
.divider-bottom {
|
||||
border-bottom: 1px dashed #afc3cb;
|
||||
padding-bottom: 1em;
|
||||
|
||||
|
||||
&:before {
|
||||
bottom: -2px;
|
||||
width: 100%;
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
// Heading band
|
||||
/////////////////////////////////////
|
||||
|
||||
.heading-band() {
|
||||
.heading-band {
|
||||
display: inline-block;
|
||||
clear: both;
|
||||
background: rgba(255,255,255,.55);
|
||||
|
|
|
|||
|
|
@ -7,17 +7,17 @@ body {
|
|||
font-weight: @font-weight-base;
|
||||
color: @text-color;
|
||||
word-wrap: break-word;
|
||||
|
||||
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
|
||||
|
||||
@media @breakpoint1 {
|
||||
line-height: @line-height-computed;
|
||||
}
|
||||
|
||||
@media @breakpoint3 {
|
||||
|
||||
@media @breakpoint3 {
|
||||
font-size: 125%;
|
||||
line-height: 1.6em;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -101,7 +101,7 @@ p, li {
|
|||
.hyphens(auto);
|
||||
}
|
||||
|
||||
b, strong,
|
||||
b, strong,
|
||||
.bold {
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
|
|
@ -152,8 +152,8 @@ ol {
|
|||
ul li {
|
||||
position: relative;
|
||||
margin-bottom: .5em;
|
||||
|
||||
&:before {
|
||||
|
||||
&:before {
|
||||
font-size: 14px;
|
||||
font-family: 'entypo';
|
||||
color: @text-color-light;
|
||||
|
|
@ -164,7 +164,7 @@ ul li {
|
|||
text-transform: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
|
||||
position: absolute;
|
||||
left: -2em;
|
||||
top: .5em;
|
||||
|
|
@ -173,10 +173,10 @@ ul li {
|
|||
|
||||
ol {
|
||||
counter-reset: ol-counter;
|
||||
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
left: -2em;
|
||||
|
|
@ -187,7 +187,7 @@ ol {
|
|||
font-style: italic;
|
||||
font-size: 14px;
|
||||
background: @text-color-dimmed;
|
||||
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 20px;
|
||||
|
|
@ -214,7 +214,7 @@ ol ul {
|
|||
}
|
||||
|
||||
nav ul, nav ol {
|
||||
.list-unstyled;
|
||||
&:extend(.list-unstyled);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user