474 lines
9.6 KiB
SCSS
474 lines
9.6 KiB
SCSS
/*-----------------------------------------------------------------------------------*/
|
|
/* 16.0 Shortcodes
|
|
/*-----------------------------------------------------------------------------------*/
|
|
|
|
/*
|
|
* Columns
|
|
*/
|
|
.two-columns-one,
|
|
.three-columns-one,
|
|
.three-columns-two,
|
|
.four-columns-one,
|
|
.four-columns-two,
|
|
.four-columns-three {
|
|
width: 100%;
|
|
}
|
|
|
|
.entry-content {
|
|
.two-columns-one,
|
|
.three-columns-one,
|
|
.three-columns-two,
|
|
.four-columns-one,
|
|
.four-columns-two,
|
|
.four-columns-three {
|
|
position: relative;
|
|
float: left;
|
|
margin-bottom: 30px;
|
|
@include px2rem($font-size-base);
|
|
|
|
|
|
&.secondcolor {
|
|
background: $color-shortcodes-secondcolor;
|
|
color: #fff;
|
|
padding: 10px;
|
|
|
|
&.lighten {
|
|
background: lighten( $color-shortcodes-secondcolor, 10%);
|
|
}
|
|
}
|
|
&.maincolor {
|
|
background: $color-shortcodes-maincolor;
|
|
padding: 10px;
|
|
a {
|
|
color: $color-shortcodes-secondcolor;
|
|
}
|
|
|
|
&.lighten {
|
|
background: lighten( $color-shortcodes-maincolor, 10%);
|
|
}
|
|
|
|
}
|
|
&.blue {
|
|
background: $color-shortcodes-blue;
|
|
padding: 10px;
|
|
&.lighten {
|
|
background: lighten( $color-shortcodes-blue, 10%);
|
|
}
|
|
}
|
|
&.red {
|
|
background: $color-shortcodes-red;
|
|
padding: 10px;
|
|
&.lighten {
|
|
background: lighten( $color-shortcodes-red, 10%);
|
|
}
|
|
}
|
|
&.yellow {
|
|
background: $color-shortcodes-yellow;
|
|
padding: 10px;
|
|
&.lighten {
|
|
background: lighten( $color-shortcodes-yellow, 10%);
|
|
}
|
|
}
|
|
&.green {
|
|
background: $color-shortcodes-green;
|
|
padding: 10px;
|
|
&.lighten {
|
|
background: lighten( $color-shortcodes-green, 10%);
|
|
}
|
|
}
|
|
&.lightgrey {
|
|
background: $color-shortcodes-lightgrey;
|
|
padding: 10px;
|
|
&.lighten {
|
|
background: lighten( $color-shortcodes-lightgrey, 10%);
|
|
}
|
|
}
|
|
&.grey {
|
|
background: $color-shortcodes-grey;
|
|
padding: 10px;
|
|
&.lighten {
|
|
background: lighten( $color-shortcodes-grey, 10%);
|
|
}
|
|
}
|
|
&.black {
|
|
background: $color-shortcodes-black;
|
|
padding: 10px;
|
|
color: #fff;
|
|
&.lighten {
|
|
background: lighten( $color-shortcodes-black, 10%);
|
|
}
|
|
}
|
|
&.dark {
|
|
background: $color-shortcodes-dark;
|
|
padding: 10px;
|
|
color: #fff;
|
|
&.lighten {
|
|
background: lighten( $color-shortcodes-dark, 10%);
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
.two-columns-one p,
|
|
.three-columns-one p,
|
|
.three-columns-two p,
|
|
.four-columns-one p,
|
|
.four-columns-two p,
|
|
.four-columns-three p {
|
|
@include px2rem($font-size-base);
|
|
}
|
|
}
|
|
|
|
.last {
|
|
clear: right;
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
.divider {
|
|
width: 100%;
|
|
margin-bottom: 21px;
|
|
padding-top: 21px;
|
|
display: block;
|
|
clear: both;
|
|
}
|
|
|
|
#section-fullwidth {
|
|
padding: 0;
|
|
// margin: 20px 0;
|
|
margin: 0;
|
|
// Kein Margin, um aufeinanderfolgende Bereiche ohne Abstand zuzulassen
|
|
|
|
img {
|
|
z-index: 1;
|
|
}
|
|
p, h1, h2, h3, h4, h5, h6, blockquote, em, code {
|
|
position:relative;
|
|
z-index: 2;
|
|
|
|
}
|
|
|
|
&.withbackground {
|
|
background-size: cover;
|
|
background-position: center center;
|
|
|
|
p, h1, h2, h3, h4, h5, h6, blockquote, em, code {
|
|
background: #000; // rgba($color-main, 0.70);
|
|
color: #fff;
|
|
display: table;
|
|
padding: 2px 5px;
|
|
margin-left: 6.25%;
|
|
margin-right: 6.25%;
|
|
}
|
|
}
|
|
&.withbackground.maincolor {
|
|
p, h1, h2, h3, h4, h5, h6, blockquote, em, code {
|
|
background: $color-shortcodes-maincolor;
|
|
color: #fff;
|
|
}
|
|
}
|
|
&.withbackground.secondcolor {
|
|
p, h1, h2, h3, h4, h5, h6, blockquote, em, code {
|
|
background: $color-shortcodes-secondcolor;
|
|
color: #fff;
|
|
}
|
|
}
|
|
&.withbackground.red {
|
|
p, h1, h2, h3, h4, h5, h6, blockquote, em, code {
|
|
background: $color-shortcodes-red;
|
|
color: #fff;
|
|
}
|
|
}
|
|
&.withbackground.green {
|
|
p, h1, h2, h3, h4, h5, h6, blockquote, em, code {
|
|
background: $color-shortcodes-green;
|
|
color: #fff;
|
|
}
|
|
}
|
|
&.withbackground.yellow {
|
|
p, h1, h2, h3, h4, h5, h6, blockquote, em, code {
|
|
background: $color-shortcodes-yellow;
|
|
color: #fff;
|
|
}
|
|
}
|
|
&.withbackground.blue {
|
|
p, h1, h2, h3, h4, h5, h6, blockquote, em, code {
|
|
background: $color-shortcodes-blue;
|
|
color: #fff;
|
|
}
|
|
}
|
|
&.withbackground.lightgrey {
|
|
p, h1, h2, h3, h4, h5, h6, blockquote, em, code {
|
|
background: $color-shortcodes-lightgrey;
|
|
color: #fff;
|
|
}
|
|
}
|
|
&.withbackground.grey {
|
|
p, h1, h2, h3, h4, h5, h6, blockquote, em, code {
|
|
background: $color-shortcodes-grey;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
p {
|
|
@include px2rem($font-size-bigtext);
|
|
}
|
|
|
|
|
|
|
|
&.secondcolor {
|
|
background: $color-shortcodes-secondcolor;
|
|
color: #fff;
|
|
&.lighten {
|
|
background: lighten( $color-shortcodes-secondcolor, 10%);
|
|
}
|
|
}
|
|
&.maincolor {
|
|
background: $color-shortcodes-maincolor;
|
|
a {
|
|
color: $color-shortcodes-secondcolor;
|
|
}
|
|
|
|
&.lighten {
|
|
background: lighten( $color-shortcodes-maincolor, 10%);
|
|
}
|
|
|
|
}
|
|
&.blue {
|
|
background: $color-shortcodes-blue;
|
|
&.lighten {
|
|
background: lighten( $color-shortcodes-blue, 10%);
|
|
}
|
|
}
|
|
&.red {
|
|
background: $color-shortcodes-red;
|
|
&.lighten {
|
|
background: lighten( $color-shortcodes-red, 10%);
|
|
}
|
|
}
|
|
&.yellow {
|
|
background: $color-shortcodes-yellow;
|
|
padding: 10px;
|
|
&.lighten {
|
|
background: lighten( $color-shortcodes-yellow, 10%);
|
|
}
|
|
}
|
|
&.green {
|
|
background: $color-shortcodes-green;
|
|
&.lighten {
|
|
background: lighten( $color-shortcodes-green, 10%);
|
|
}
|
|
}
|
|
&.lightgrey {
|
|
background: $color-shortcodes-lightgrey;
|
|
&.lighten {
|
|
background: lighten( $color-shortcodes-lightgrey, 10%);
|
|
}
|
|
}
|
|
&.grey {
|
|
background: $color-shortcodes-grey;
|
|
&.lighten {
|
|
background: lighten( $color-shortcodes-grey, 10%);
|
|
}
|
|
}
|
|
&.black {
|
|
background: $color-shortcodes-black;
|
|
color: #fff;
|
|
&.lighten {
|
|
background: lighten( $color-shortcodes-black, 10%);
|
|
}
|
|
}
|
|
&.dark {
|
|
background: $color-shortcodes-dark;
|
|
color: #fff;
|
|
&.lighten {
|
|
background: lighten( $color-shortcodes-dark, 10%);
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
@media screen and (min-width: 48em) {
|
|
.two-columns-one {
|
|
width: 48.5%;
|
|
}
|
|
.three-columns-one {
|
|
width: 30.3%;
|
|
}
|
|
.three-columns-two {
|
|
width: 65.15%;
|
|
}
|
|
.four-columns-one {
|
|
width: 22.375%;
|
|
}
|
|
.four-columns-two {
|
|
width: 48%;
|
|
}
|
|
.four-columns-three {
|
|
width: 74.5%;
|
|
}
|
|
.two-columns-one,
|
|
.three-columns-one,
|
|
.three-columns-two,
|
|
.four-columns-one,
|
|
.four-columns-two,
|
|
.four-columns-three {
|
|
position: relative;
|
|
float: left;
|
|
margin-bottom: 0;
|
|
}
|
|
.two-columns-one {
|
|
margin: 0 1.5% 0 0;
|
|
|
|
&.last {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
.three-columns-two {
|
|
margin: 0 1.5% 0 0;
|
|
&.last {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
.three-columns-one {
|
|
margin: 0 3% 0 0;
|
|
|
|
&.last {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
.four-columns-one {
|
|
margin: 0 3.5% 0 0;
|
|
&.last {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
* Shortcodes for Sections
|
|
*/
|
|
|
|
.shortcode-section {
|
|
a.all-posts-link {
|
|
color: $color-text;
|
|
text-decoration: none;
|
|
}
|
|
a.all-posts-link:after {
|
|
content: '\2192';
|
|
text-align: right;
|
|
padding-left: 3px;
|
|
}
|
|
.type-post {
|
|
position: relative;
|
|
display: block;
|
|
margin: 0;
|
|
padding: 20px 0 35px;
|
|
border-top: 1px solid #1a1a1a;
|
|
}
|
|
.hentry .entry-cats a {
|
|
display: none;
|
|
}
|
|
|
|
#primary .hentry.has-post-thumbnail:nth-child(4n+1) .entry-cats a:before,
|
|
.section-one-column-one .entry-cats a:before,
|
|
.section-three-column-one .entry-cats a:before,
|
|
#front-section-four .entry-cats a:before {
|
|
display: none;
|
|
}
|
|
|
|
#primary .hentry.has-post-thumbnail:nth-child(4n+1) {
|
|
margin-left: -5.94405594405594%;
|
|
/* -- 17px at 320px ---*/
|
|
margin-right: -5.94405594405594%;
|
|
/* -- 17px at 320px ---*/
|
|
margin-bottom: 34px;
|
|
padding: 0;
|
|
border-top: 0;
|
|
|
|
.entry-thumbnail {
|
|
width: 100%;
|
|
margin: 0;
|
|
float: none;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.meta-main-wrap {
|
|
width: 100%;
|
|
padding: 0 5.3125% 28px;
|
|
}
|
|
.entry-meta {
|
|
float: none;
|
|
}
|
|
.entry-summary {
|
|
display: none;
|
|
}
|
|
.entry-cats a {
|
|
padding: 2px 5px;
|
|
}
|
|
.entry-date, .entry-comments,
|
|
.entry-edit, .entry-author {
|
|
display: inline-block;
|
|
padding-bottom: 0;
|
|
}
|
|
.entry-date {
|
|
padding-right: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.blogroll {
|
|
.entry-meta a {
|
|
color: $color-text;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.entry-cats a:nth-child(n+2):before {
|
|
content: ' / ';
|
|
padding: 0 2px;
|
|
color: $color-text;
|
|
}
|
|
|
|
|
|
@media screen and (min-width: $breakpoint-sm) {
|
|
.entry-content & .entry-summary p {
|
|
@include px2rem($font-size-base);
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
@media screen and (min-width: $breakpoint-sm) {
|
|
|
|
.page #primary .blogroll .hentry {
|
|
padding: 20px 0 40px;
|
|
}
|
|
/* --- Blog - default --- */
|
|
.page #primary .blogroll .hentry .entry-meta {
|
|
width: 25.49019607843137%;
|
|
/* -- 130px at 1440px ---*/
|
|
float: left;
|
|
display: block;
|
|
}
|
|
.page #primary .blogroll .hentry .entry-main {
|
|
width: 74.50980392156863%;
|
|
/* -- 380px at 1440px ---*/
|
|
float: left;
|
|
}
|
|
|
|
.page #primary .blogroll .hentry .entry-thumbnail {
|
|
width: 36.14457831325301%;
|
|
/* -- 300px at 1440px ---*/
|
|
}
|
|
.page #primary .blogroll .hentry .meta-main-wrap {
|
|
width: 61.44578313253012%;
|
|
/* -- 510px at 1440px ---*/
|
|
float: left;
|
|
}
|
|
} |