mirror of
https://github.com/KevinMidboe/rohnenedre.git
synced 2026-01-11 11:56:02 +00:00
1057 lines
20 KiB
Plaintext
1057 lines
20 KiB
Plaintext
/*
|
|
* Main.less
|
|
* Main Design for theme
|
|
* This file contains information about the Structure of the theme.
|
|
*
|
|
* Index:
|
|
*
|
|
* • Pre Requisite/CSS
|
|
* • Top Bar
|
|
* • Top Menu
|
|
* • Search Bar
|
|
* • Social Icons
|
|
* • Masthead a.k.a Header
|
|
* • Slider
|
|
* • Content
|
|
* • Primary
|
|
* • Secondary(if any)
|
|
* • Footer
|
|
* • Widget Area(if any)
|
|
* • Colophon
|
|
* • Other Responsive Codes (Responsive codes are present, below each section)
|
|
*
|
|
*/
|
|
|
|
|
|
/* ---------------- Fonts ----------------------------------- */
|
|
|
|
@import url(//fonts.googleapis.com/css?family=Noto+Sans:400,300,700);
|
|
@import url(//fonts.googleapis.com/css?family=Michroma);
|
|
|
|
/* ---------------Parametric Mixins ------------------------ */
|
|
|
|
.transition(@value) {
|
|
transition: @value;
|
|
-webkit-transition: @value;
|
|
-moz-transition: @value;
|
|
-o-transition: @value;
|
|
-ms-transition: @value;
|
|
}
|
|
|
|
/* --------------- Color Variables ------------------------- */
|
|
|
|
@accent: #AD4F18;
|
|
@accent-hover: saturate(@accent,20%);
|
|
@content: #ABABAB;
|
|
@default-background: #ffffff;
|
|
|
|
/* ---------------- Font Variables ------------------------- */
|
|
|
|
.site-title-font {
|
|
font-family: 'Michroma', Arial, sans-serif;
|
|
}
|
|
|
|
.body-font {
|
|
font-family: "Noto Sans", sans-serif;
|
|
}
|
|
/*
|
|
------------------- Pre Requisite/Reset ----------------
|
|
*/
|
|
.container {
|
|
margin: auto;
|
|
}
|
|
a:hover {
|
|
text-decoration: none;
|
|
}
|
|
body {
|
|
overflow-x: hidden;
|
|
.body-font;
|
|
color: @accent;
|
|
}
|
|
#content {
|
|
background: @default-background;
|
|
clear: both;
|
|
}
|
|
a {
|
|
color: @accent;
|
|
transition: 0.4s all ease;
|
|
&:visited {
|
|
color: @accent-hover;
|
|
}
|
|
&:hover {
|
|
color: @accent-hover;
|
|
}
|
|
}
|
|
|
|
/* ----------------- Top Bar --------------------------- */
|
|
|
|
#top-bar {
|
|
border-bottom: solid 1px #eee;
|
|
margin-bottom: 10px;
|
|
background: url(../images/pattern2.png) repeat, @default-background;
|
|
|
|
//------------Social Icons -------------------- //
|
|
#social-icons {
|
|
padding-top: 4px;
|
|
float: right;
|
|
margin-top:5px;
|
|
overflow: hidden;
|
|
padding-bottom: 7px;
|
|
-webkit-backface-visibility: hidden;
|
|
a {
|
|
background: 0 0;
|
|
display: inline-block;
|
|
float: right;
|
|
width: 27px;
|
|
height: 27px;
|
|
margin-right: 2px;
|
|
transition: 0.4s opacity ease, .9s -webkit-transform ease;
|
|
&:hover {
|
|
background-position-y: 27px;
|
|
-webkit-transform: rotate(-50deg);
|
|
opacity: 0.95;
|
|
}
|
|
}
|
|
#facebook {
|
|
background-image: url(../images/social/facebook.png);
|
|
}
|
|
#instagram {
|
|
background-image: url(../images/social/instagram.png);
|
|
}
|
|
#twitter {
|
|
background-image: url(../images/social/twitter.png);
|
|
}
|
|
#rss {
|
|
background-image: url(../images/social/rss.png);
|
|
}
|
|
#google {
|
|
background-image: url(../images/social/google.png);
|
|
}
|
|
#flickr {
|
|
background-image: url(../images/social/flickr.png);
|
|
}
|
|
|
|
}
|
|
//----------------- Top Search Form ---------- //
|
|
.search-form-top {
|
|
float: left;
|
|
padding-top: 7px;
|
|
margin-right: 30px;
|
|
input[type=text] {
|
|
border-radius: 0px;
|
|
border-color: lighten(@content,10%);
|
|
padding-left: 10px;
|
|
outline: none;
|
|
width: 240px;
|
|
.transition(0.4s ease);
|
|
}
|
|
&:after {
|
|
content: url(../images/search.png);
|
|
position: relative;
|
|
top: 2px;
|
|
right: 30px;
|
|
}
|
|
::-webkit-input-placeholder {
|
|
color: lighten(@accent,7%);
|
|
font-size: 12px;
|
|
padding-top: 2px;
|
|
font-weight: lighter;
|
|
}
|
|
::-moz-input-placeholder {
|
|
color: lighten(@accent,7%);
|
|
font-size: 12px;
|
|
padding-top: 2px;
|
|
font-weight: lighter;
|
|
}
|
|
}
|
|
@media screen {
|
|
@media (max-width: 991px) {
|
|
#social-icons, .search-form-top {
|
|
float: none;
|
|
text-align: center;
|
|
|
|
}
|
|
#social-icons {
|
|
a {
|
|
float: none;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.search-form-top {
|
|
margin-right: 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
#masthead {
|
|
text-align: left;
|
|
padding: 0px;
|
|
border: none;
|
|
position: relative;
|
|
.site-title {
|
|
.site-title-font;
|
|
position: relative;
|
|
.transition(0.7s all ease);
|
|
a {
|
|
color: @accent;
|
|
font-size: 32px;
|
|
-webkit-backface-visibility: hidden;
|
|
-webkit-transform-style: flat;
|
|
display: inline-block;
|
|
&:hover {
|
|
transform: scale(1.02) rotate(-1deg);
|
|
-webkit-transform: scale(1.02) rotate(-1deg);
|
|
}
|
|
}
|
|
margin-top: 10px;
|
|
margin-bottom: 5px;
|
|
}
|
|
.site-description {
|
|
margin-top: 10px;
|
|
font-size: 14px;
|
|
margin-bottom: 5px;
|
|
font-weight: lighter;
|
|
color: @content;
|
|
}
|
|
@media screen {
|
|
@media (max-width: 991px) {
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*------------------ Navigation -------------- */
|
|
#top-nav {
|
|
clear:both;
|
|
display: block;
|
|
border-top: solid 2px @accent;
|
|
margin-top: 35px;
|
|
#site-navigation {
|
|
margin-bottom: 50px;
|
|
text-align: center;
|
|
font-size: 13px;
|
|
padding-left: 0px;
|
|
-webkit-backface-visibility: hidden;
|
|
a {
|
|
color: @content;
|
|
text-transform: uppercase;
|
|
padding: 13px 15px;
|
|
.body-font;
|
|
&:hover {
|
|
color: @accent;
|
|
background: darken(@default-background,5%);
|
|
}
|
|
}
|
|
ul {
|
|
margin-left: 0px;
|
|
z-index: 99999;
|
|
li{
|
|
float: left;
|
|
display: inline-block;
|
|
&:hover > a {
|
|
background: darken(@default-background, 5%);
|
|
}
|
|
}
|
|
ul {
|
|
background: darken(@default-background,5%);
|
|
box-shadow: none;
|
|
top:3.4em;
|
|
a {
|
|
padding: 5px;
|
|
font-size: 12px;
|
|
text-align: left;
|
|
padding-left: 10px;
|
|
color: darken(@content, 10%);
|
|
&:hover {
|
|
background: darken(@default-background, 8%);
|
|
}
|
|
}
|
|
ul {
|
|
top: 0em;
|
|
}
|
|
}
|
|
}
|
|
div.menu > ul > li > a, ul.menu > li > a {
|
|
&:before {
|
|
position: absolute;
|
|
-webkit-backface-visibility: hidden;
|
|
top: 80%;
|
|
left: 0;
|
|
width: 100%;
|
|
border-left: solid 2px @accent;
|
|
height: 2px;
|
|
opacity: 0;
|
|
background: @accent;
|
|
content: '';
|
|
.transition(0.3s all ease);
|
|
}
|
|
&:hover {
|
|
background: none;
|
|
&:before {
|
|
top: 100%;
|
|
opacity: 1;
|
|
height: 2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@media screen {
|
|
@media (max-width: 600px) {
|
|
h1.menu-toggle {
|
|
.site-title-font;
|
|
font-size: 18px;
|
|
text-transform: uppercase;
|
|
margin-bottom: 15px;
|
|
}
|
|
#site-navigation {
|
|
ul ul { display: none !important; }
|
|
ul { margin-left: 15%;}
|
|
ul li {
|
|
display: block;
|
|
width: 80%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* -------------------- Slider -------------------*/
|
|
#slider-wrapper {
|
|
clear: both;
|
|
position: relative;
|
|
margin-bottom: 50px;
|
|
margin-top: -47px;
|
|
z-index:434;
|
|
@media screen {
|
|
@media (max-width: 767px) {
|
|
margin-bottom: 0px;
|
|
}
|
|
}
|
|
.slider-caption {
|
|
position: absolute;
|
|
top: 15px;
|
|
left:15px;
|
|
background: rgba(0,0,0,0.7);
|
|
padding: 10px;
|
|
padding-left: 20px;
|
|
box-shadow: black 5px 5px 0px black;
|
|
@media screen and (min-width: 1199px) {
|
|
max-width: 55%;
|
|
}
|
|
.slider-caption-title {
|
|
.body-font;
|
|
font-size: 24px;
|
|
margin-bottom: 5px;
|
|
}
|
|
.slider-caption-desc {
|
|
.body-font;
|
|
font-size: 13px;
|
|
font-weight: lighter;
|
|
margin-bottom: 10px;
|
|
}
|
|
@media screen {
|
|
@media (max-width: 767px) {
|
|
background: rgba(0,0,0,0.4);
|
|
box-shadow: none;
|
|
padding: 3px 8px;
|
|
.slider-caption-title { font-size: 16px;}
|
|
.slider-caption-desc { font-size: 12px; margin-bottom: 0 }
|
|
}
|
|
}
|
|
}
|
|
a { color: white }
|
|
}
|
|
.bx-wrapper {
|
|
box-shadow: none;
|
|
ul {
|
|
margin-left: 0px;
|
|
}
|
|
img {
|
|
min-width: 100%;
|
|
}
|
|
.bx-caption {
|
|
text-align: center;
|
|
background: rgba(0,0,0,0.5);
|
|
padding-bottom: 10px;
|
|
font-size: 20px;
|
|
margin: auto;
|
|
}
|
|
.bx-viewport {
|
|
box-shadow: none;
|
|
border: none;
|
|
left:0px;
|
|
}
|
|
a.bx-next {
|
|
margin-right: 12px;
|
|
}
|
|
.bx-pager.bx-default-pager a {
|
|
width: 20px;
|
|
border-radius: 0px;
|
|
height: 8px;
|
|
background: fade(@accent,60%);
|
|
text-indent: 9999px;
|
|
}
|
|
.bx-pager-item .active {
|
|
background: fade(saturate(@accent,40%),90%) !important;
|
|
}
|
|
.bx-pager {
|
|
text-align: right;
|
|
position: absolute;
|
|
top: 1px;
|
|
right: 20px;
|
|
height: 25px;
|
|
}
|
|
.bx-controls-direction a {
|
|
.transition(0s);
|
|
}
|
|
}
|
|
|
|
/* -------------------- Showcase ----------------- */
|
|
// grid - showcase, li = .showcase, figcaption = .showcase-caption, figure = figure
|
|
#showcase {
|
|
padding: 20px 20px 50px 20px;
|
|
max-width: 1300px;
|
|
margin: 0 auto;
|
|
display: block;
|
|
list-style: none;
|
|
margin-bottom: 0px;
|
|
overflow: hidden;
|
|
@media screen {
|
|
@media (max-width: 767px) {
|
|
margin-top: -30px;
|
|
}
|
|
}
|
|
.showcase {
|
|
display: inline-block;
|
|
position: relative;
|
|
perspective: 1700;
|
|
-webkit-perspective: 1000;
|
|
@media screen {
|
|
@media (max-width: 767px) {
|
|
padding: 0;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
figure {
|
|
position: relative;
|
|
transform-style: preserve-3d;
|
|
& > div {
|
|
overflow: hidden;
|
|
}
|
|
img {
|
|
max-width: 100%;
|
|
z-index: 10;
|
|
.transition (all 0.9s);
|
|
-webkit-backface-visibility: hidden;
|
|
transform: scale(1);
|
|
-moz-transform: scale(1);
|
|
-ms-transform: scale(1);
|
|
-o-transform: scale(1);
|
|
-webkit-transform: scale(1);
|
|
}
|
|
.showcase-caption {
|
|
display: block;
|
|
text-align: center;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
padding: 5px 20px;
|
|
background: fade(@accent, 80%);
|
|
color: white;
|
|
opacity: 0;
|
|
transform-origin: bottom;
|
|
-moz-transform-origin: bottom;
|
|
-ms-transform-origin: bottom;
|
|
-o-transform-origin: bottom;
|
|
-webkit-transform-origin: bottom;
|
|
transform: rotateX(-180deg);
|
|
-webkit-transform: rotateX(-180deg);
|
|
-moz-transform: rotateX(-180deg);
|
|
-o-transform: rotateX(-180deg);
|
|
-ms-transform: rotateX(-180deg);
|
|
.transition(all 0.8s);
|
|
-moz-transition: all 0.4s;
|
|
z-index: 9999;
|
|
@media screen {
|
|
@media (max-width: 767px) {
|
|
transform: rotateX(0deg);
|
|
-webkit-transform: rotateX(0deg);
|
|
-moz-transform: rotateX(0deg);
|
|
-o-transform: rotateX(0deg);
|
|
-ms-transform: rotateX(0deg);
|
|
z-index: 99999;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.showcase-caption-title {
|
|
.site-title-font;
|
|
font-size: 17px;
|
|
}
|
|
.showcase-caption-desc {
|
|
font-size: 12px;
|
|
font-weight: lighter;
|
|
}
|
|
}
|
|
&:hover {
|
|
.showcase-caption {
|
|
opacity: 1.0;
|
|
transform: rotateX(0deg);
|
|
-webkit-transform: rotateX(0deg);
|
|
-moz-transform: rotateX(0deg);
|
|
-ms-transform: rotateX(0deg);
|
|
-o-transform: rotateX(0deg);
|
|
}
|
|
img {
|
|
transform: scale(1.05);
|
|
-moz-transform: scale(1.05);
|
|
-ms-transform: scale(1.05);
|
|
-o-transform: scale(1.05);
|
|
-webkit-transform: scale(1.05);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@media screen {
|
|
@media (max-width: 991px) and (min-width: 768px) {
|
|
.showcase {
|
|
padding: 2px;
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
text-align: center;
|
|
padding-bottom: 0px;
|
|
.showcase {
|
|
max-width: 80%;
|
|
margin: 0 auto;
|
|
margin-bottom: 16px;
|
|
}
|
|
}
|
|
@media (max-width: 550px) {
|
|
.showcase {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* -------------------- Content ------------------ */
|
|
#content {
|
|
padding-top: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
.page-header {
|
|
margin-top: -20px;
|
|
}
|
|
#home-title {
|
|
margin-top: -3px;
|
|
.site-title-font;
|
|
font-size: 22px;
|
|
margin-bottom: 30px;
|
|
margin-left: -15px;
|
|
display: inline-block;
|
|
padding-bottom: 10px;
|
|
border-bottom: dotted 2px @accent;
|
|
@media screen and (max-width: 768px) {
|
|
text-align: center;
|
|
margin: 10px auto;
|
|
display: block;
|
|
border-bottom: none;
|
|
width: 100%;
|
|
}
|
|
}
|
|
#primary {
|
|
article {
|
|
.featured-thumb {
|
|
|
|
}
|
|
.after-thumb {
|
|
overflow: auto;
|
|
margin-top: -20px;
|
|
.entry-title a {
|
|
font-size: 22px;
|
|
color: @accent;
|
|
&:hover {
|
|
color: @accent-hover;
|
|
}
|
|
}
|
|
h1.entry-title {
|
|
margin-top: 4px;
|
|
margin-bottom: 0px;
|
|
.site-title-font;
|
|
}
|
|
}
|
|
}
|
|
.entry-content {
|
|
margin-top: 0.3em;
|
|
border-bottom: solid 1px #eee;
|
|
margin-bottom: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
article.grid {
|
|
display: block;
|
|
padding-left: 0px;
|
|
padding-right: 0px;
|
|
min-height: 210px;
|
|
margin-bottom: 3px;
|
|
h1.entry-title {
|
|
.site-title-font;
|
|
font-size: 16px;
|
|
margin-top:12px;
|
|
margin-bottom: 12px;
|
|
a {
|
|
color: white;
|
|
}
|
|
}
|
|
.featured-thumb {
|
|
padding-right: 1px;
|
|
padding-left: 1px;
|
|
img {
|
|
.transition(all 0.9s ease);
|
|
-webkit-backface-visibility: hidden;
|
|
}
|
|
&:hover {
|
|
img {
|
|
.transition(all 0.9s ease);
|
|
-webkit-filter: brightness(85%);
|
|
}
|
|
}
|
|
}
|
|
.in-thumb {
|
|
position: absolute;
|
|
bottom: 0;
|
|
padding: 0;
|
|
width: 99%;
|
|
.transition(all 0.4s ease);
|
|
h1.entry-title a {
|
|
display: block;
|
|
width:100%;
|
|
margin-bottom: -12px;
|
|
background: fade(@accent,65%);
|
|
padding: 10px;
|
|
&:hover {
|
|
background: fade(@accent, 85%);
|
|
}
|
|
}
|
|
}
|
|
@media screen {
|
|
@media (max-width: 767px) and (min-width: 401px) {
|
|
width: 50%;
|
|
clear: none;
|
|
float: left;
|
|
}
|
|
|
|
}
|
|
}
|
|
article.grid2 {
|
|
padding: 0;
|
|
-webkit-backface-visibility: hidden;
|
|
.featured-thumb {
|
|
padding: 0;
|
|
overflow: hidden;
|
|
.transition(.5s all ease);
|
|
&:before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
.transition(.8s all ease);
|
|
pointer-events: none;
|
|
-webkit-transform: translateY(0%);
|
|
transform: translateY(0%);
|
|
background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.6) 75%);
|
|
z-index: 1;
|
|
}
|
|
&:hover {
|
|
&:before {
|
|
-webkit-transform: translateY(50%);
|
|
transform: translateY(50%);
|
|
}
|
|
}
|
|
img {
|
|
-webkit-backface-visibility: hidden;
|
|
.transition(.6s all ease);
|
|
z-index: 0;
|
|
&:hover {
|
|
-webkit-transform: scale(1.03);
|
|
transform: scale(1.03);
|
|
}
|
|
}
|
|
@media screen {
|
|
@media (max-width: 991px) {
|
|
margin: 10px;
|
|
}
|
|
}
|
|
}
|
|
.out-thumb {
|
|
h1.entry-title {
|
|
margin: 0 0 10px 0px;
|
|
font-size: 17px;
|
|
a {
|
|
color: saturate(@accent,4%);
|
|
&:hover {
|
|
color: darken(@content,20%);
|
|
}
|
|
}
|
|
}
|
|
.entry-excerpt {
|
|
color: @content;
|
|
font-size: 13px;
|
|
line-height: 1.5em;
|
|
}
|
|
.readmore {
|
|
.site-title-font;
|
|
text-align: right;
|
|
font-size: 13px;
|
|
margin-top: 10px;
|
|
display: block;
|
|
&:hover {
|
|
a{
|
|
color: darken(@content,20%);
|
|
}}
|
|
}
|
|
}
|
|
@media screen {
|
|
@media (max-width: 767px) {
|
|
width: 65%;
|
|
margin: 10px auto;
|
|
margin-bottom: 25px;
|
|
}
|
|
@media (max-width: 450px) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
#primary-mono {
|
|
#main {
|
|
margin-top: -25px;
|
|
}
|
|
h1.entry-title {
|
|
.site-title-font;
|
|
font-size: 32px;
|
|
}
|
|
.entry-meta {
|
|
font-size: 13px;
|
|
border-bottom: solid 1px lighten(@content,15%);
|
|
border-top: solid 1px lighten(@content, 15%);
|
|
padding-top: 7px;
|
|
padding-bottom: 7px;
|
|
color: @content;
|
|
a { color: darken(@content,10%); }
|
|
i.fa-user {
|
|
margin-left: 15px;
|
|
}
|
|
i.fa {
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
.entry-content {
|
|
color: darken(@content,18%);
|
|
line-height: 1.6em;
|
|
a {
|
|
&:hover {
|
|
color: darken(@content,20%);
|
|
}
|
|
}
|
|
}
|
|
.footer-meta {
|
|
margin-top: 25px;
|
|
border-top: solid 1px lighten(@content, 10%);
|
|
border-bottom: solid 1px lighten(@content, 10%);
|
|
padding-bottom: 10px;
|
|
padding-top: 10px;
|
|
i.fa {
|
|
margin-left: 15px;
|
|
}
|
|
i:first-child {
|
|
margin-left: 0px;
|
|
}
|
|
}
|
|
.edit-link {
|
|
float: right;
|
|
}
|
|
code {
|
|
background: #eee;
|
|
color: black;
|
|
font-weight: bold;
|
|
.site-title-font;
|
|
}
|
|
article.page {
|
|
h1.entry-title {
|
|
span {
|
|
background: url(../images/pattern2.png);
|
|
padding: 10px 15px;
|
|
display: inline-block;
|
|
.site-title-font;
|
|
font-size: 15px;
|
|
text-transform: uppercase;
|
|
font-weight: normal;
|
|
}
|
|
border-bottom: solid 2px @accent;
|
|
margin-bottom: 20px;
|
|
margin-top: 12px;
|
|
}
|
|
}
|
|
}
|
|
#secondary {
|
|
margin-top: -20px;
|
|
h1.widget-title {
|
|
font-size: 15px;
|
|
border-bottom: solid 2px @accent;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
padding-left: 5px;
|
|
text-transform: uppercase;
|
|
background: url(../images/pattern2.png);
|
|
.site-title-font;
|
|
font-weight: normal;
|
|
}
|
|
a {
|
|
color: @accent;
|
|
&:hover {
|
|
color: darken(@content,10%);
|
|
}
|
|
}
|
|
ul {
|
|
margin-left: 20px;
|
|
ul {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
font-size: 13px;
|
|
}
|
|
|
|
article {
|
|
table {
|
|
border: solid 1px #eee;
|
|
tr:nth-child(even) {
|
|
background: lighten(grey,50%);
|
|
}
|
|
th {
|
|
background: black;
|
|
color: white;
|
|
padding: 5px 10px;
|
|
}
|
|
td {
|
|
padding: 5px 10px;
|
|
}
|
|
}
|
|
h1,h2,h3 {
|
|
.site-title-font;
|
|
}
|
|
}
|
|
|
|
/* --------------- archives -------------- */
|
|
|
|
.archive {
|
|
section#primary {
|
|
h1.page-title {
|
|
span {
|
|
background: url(../images/pattern2.png);
|
|
padding: 10px 15px;
|
|
display: inline-block;
|
|
.site-title-font;
|
|
font-size: 15px;
|
|
text-transform: uppercase;
|
|
font-weight: normal;
|
|
}
|
|
border-bottom: solid 2px @accent;
|
|
margin-bottom: 20px;
|
|
margin-top: 11px;
|
|
}
|
|
.page-header {
|
|
border-bottom: none;
|
|
margin-bottom: 0px;
|
|
padding-bottom: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* --------------- pagination ------------ */
|
|
.pagination {
|
|
margin: 20px 0;
|
|
padding-top: 25px;
|
|
text-align: center;
|
|
width: 100%;
|
|
clear: both;
|
|
ul {
|
|
list-style: none;
|
|
display: inline-block;
|
|
text-align: center;
|
|
margin-bottom: 0;
|
|
margin-left: 0px;
|
|
& > li {
|
|
display: inline;
|
|
& > a {
|
|
color: darken(@accent, 15%);
|
|
transition: all 0.4s ease;
|
|
}
|
|
& > a:hover {
|
|
color: @accent-hover;
|
|
background: darken(@default-background, 25%);
|
|
}
|
|
}
|
|
}
|
|
.current {
|
|
background: darken(@default-background, 25%);
|
|
}
|
|
}
|
|
.pagination ul &>li &>a, .pagination ul &>li &>span {
|
|
float: left;
|
|
padding: 4px 12px;
|
|
line-height: 20px;
|
|
text-decoration: none;
|
|
background-color: darken(@default-background, 5%);
|
|
/* border: 1px solid desaturate(@default-background, 55%); */
|
|
border-left-width: 0;
|
|
display: inline-block;
|
|
color: desaturate(@accent, 40%);
|
|
}
|
|
.pagination ul &>li:first-child &>a, .pagination ul &>li:first-child &>span {
|
|
border-left-width: 1px;
|
|
}
|
|
.pagination ul &>li:last-child &>a, .pagination ul &>li:last-child &>span {
|
|
border-rigth-width: 1px;
|
|
}
|
|
|
|
/* --------------- comments -------------- */
|
|
#respond {
|
|
input[type=text] {
|
|
max-width: 450px;
|
|
}
|
|
}
|
|
|
|
#comments {
|
|
margin-top: 55px;
|
|
h2.comments-title {
|
|
font-size: x-large;
|
|
.site-title-font;
|
|
}
|
|
ol.comment-list {
|
|
list-style: none;
|
|
margin-left: 0px;
|
|
}
|
|
li.comment {
|
|
border: solid 1px #eee;
|
|
padding: 10px;
|
|
margin-top: 15px;
|
|
list-style: none;
|
|
background: #f9f9f9;
|
|
.comment-content {
|
|
color: darken(@content,10%);
|
|
}
|
|
}
|
|
li.trackback {
|
|
background: #f9f9f9;
|
|
padding: 10px;
|
|
margin-top: 15px;
|
|
margin-bottom: 15px;
|
|
border: solid 1px #eee;
|
|
font-weight: bold;
|
|
a { font-weight: normal; }
|
|
}
|
|
.vcard img {
|
|
border: solid 4px lighten(grey,40%);
|
|
border-radius: 5px;
|
|
margin: 0 10px 10px 0;
|
|
}
|
|
.comment-metadata {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
@media screen and (max-width:480px) {
|
|
li.comment {
|
|
margin-left: -5%;
|
|
}
|
|
}
|
|
|
|
/* -------------- footer widget area -------- */
|
|
|
|
#footer-sidebar {
|
|
border-top: solid 5px @accent;
|
|
padding-top: 20px;
|
|
background: url(../images/pattern2.png) top left repeat-x, #f9f9f9;
|
|
margin-top: 30px;
|
|
padding-bottom: 50px;
|
|
.container {
|
|
}
|
|
|
|
h1.widget-title {
|
|
font-weight: bold;
|
|
.site-title-font;
|
|
font-size: 20px;
|
|
color: darken(@accent, 4%);
|
|
margin-bottom: 20px;
|
|
}
|
|
a:hover {
|
|
color: darken(@content,5%);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* --------------- colophon ---------------- */
|
|
#colophon {
|
|
text-align: center;
|
|
border-top: solid 1px #eee;
|
|
padding: 15px;
|
|
background: @accent;
|
|
padding-bottom: 4px;
|
|
color: #eee;
|
|
.site-info {
|
|
text-align: left;
|
|
}
|
|
a {
|
|
color: white;
|
|
&:hover {
|
|
color: #ddd;
|
|
}
|
|
}
|
|
.footer-menu {
|
|
text-align: right;
|
|
ul ul {
|
|
display: none;
|
|
}
|
|
ul {
|
|
li {
|
|
display: inline;
|
|
padding-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
@media screen {
|
|
@media (max-width: 991px) {
|
|
.site-info {
|
|
text-align: center;
|
|
margin: 20px;
|
|
}
|
|
.footer-menu {
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/*--------------- responsive cheats ----------- */
|
|
|
|
@media screen and (max-width: 991px) {
|
|
#social-icons {
|
|
float: none;
|
|
text-align: center;
|
|
padding-bottom: 20px;
|
|
overflow: auto;
|
|
img {
|
|
float: none !important
|
|
}
|
|
}
|
|
.featured-thumb {
|
|
margin-bottom: 15px;
|
|
}
|
|
#secondary, #secondary-2 {
|
|
margin-top: 25px;
|
|
}
|
|
} |