diff --git a/_src/assets/less/content-link.less b/_src/assets/less/content-link.less new file mode 100644 index 00000000..3dbbb58b --- /dev/null +++ b/_src/assets/less/content-link.less @@ -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 +} \ No newline at end of file diff --git a/_src/assets/less/content-photo.less b/_src/assets/less/content-photo.less new file mode 100644 index 00000000..e5e5faa3 --- /dev/null +++ b/_src/assets/less/content-photo.less @@ -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; + } +} \ No newline at end of file diff --git a/_src/assets/less/content.less b/_src/assets/less/content.less index 23c9e678..82ecfe3e 100644 --- a/_src/assets/less/content.less +++ b/_src/assets/less/content.less @@ -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; } \ No newline at end of file diff --git a/_src/assets/less/kremalicious3.less b/_src/assets/less/kremalicious3.less index a83a30a7..d2a774d9 100644 --- a/_src/assets/less/kremalicious3.less +++ b/_src/assets/less/kremalicious3.less @@ -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'; diff --git a/_src/assets/less/mixins.less b/_src/assets/less/mixins.less index 79fbbce8..205e35a6 100644 --- a/_src/assets/less/mixins.less +++ b/_src/assets/less/mixins.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); diff --git a/_src/assets/less/typography.less b/_src/assets/less/typography.less index e5ec74ba..6f127b8a 100644 --- a/_src/assets/less/typography.less +++ b/_src/assets/less/typography.less @@ -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); }