work on wingle articles
This commit is contained in:
infeeeee
192
sass/base.scss
192
sass/base.scss
@@ -1259,8 +1259,8 @@ $v-unit-6: 24rem;
|
||||
@media #{$smalldesktop} {
|
||||
padding: 0 $h-unit-4;
|
||||
|
||||
.archivetitle h1, article h2 {
|
||||
|
||||
.archivetitle h1,
|
||||
article h2 {
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1321,6 +1321,12 @@ body.category.category-esemeny {
|
||||
/* single */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
@mixin singlDesktopLayout() {
|
||||
padding-right: $h-unit-4;
|
||||
padding-left: 0;
|
||||
max-width: calc(1024px + #{$h-unit-4});
|
||||
}
|
||||
|
||||
.single,
|
||||
.page {
|
||||
//no menus on single
|
||||
@@ -1379,12 +1385,19 @@ body.category.category-esemeny {
|
||||
position: relative;
|
||||
align-self: flex-end;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
@include single-metadata();
|
||||
|
||||
.time-cat {
|
||||
z-index: 10;
|
||||
.metaWrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
.time-cat {
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
}
|
||||
h1.single-title {
|
||||
@@ -1451,17 +1464,19 @@ body.category.category-esemeny {
|
||||
justify-content: flex-start;
|
||||
height: unset;
|
||||
padding-top: 0;
|
||||
// display: block;
|
||||
|
||||
.metadata {
|
||||
top: -#{$h-unit-1};
|
||||
// width: calc(100% - #{$h-unit-1});
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
padding-right: $h-unit-2;
|
||||
padding-right: 0;
|
||||
|
||||
@include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1}, white, #000, left);
|
||||
|
||||
.metaWrapper {
|
||||
@include singlDesktopLayout();
|
||||
}
|
||||
|
||||
// .time-cat {
|
||||
// }
|
||||
}
|
||||
@@ -1470,24 +1485,12 @@ body.category.category-esemeny {
|
||||
min-height: unset;
|
||||
top: -#{$h-unit-1};
|
||||
position: relative;
|
||||
padding-right: $h-unit-2;
|
||||
padding-left: 0;
|
||||
// //position: fixed;
|
||||
// // height: 100vh;
|
||||
// bottom: 0;
|
||||
// left: 0;
|
||||
// right: 0;
|
||||
// // padding: $h-unit-2;
|
||||
|
||||
// z-index: -1;
|
||||
// //ez lehet nem kell, összedolgozni:
|
||||
// display: block;
|
||||
// // @include single-title2();
|
||||
@include singlDesktopLayout();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------- single content ----------------------------- */
|
||||
/* ---------------------------- single content hr --------------------------- */
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
@@ -1506,8 +1509,12 @@ body.category.category-esemeny {
|
||||
}
|
||||
}
|
||||
&.content-end {
|
||||
margin-top: $padd;
|
||||
margin-bottom: $padd;
|
||||
margin-top: $padd * 2;
|
||||
margin-bottom: 0;
|
||||
@media #{$smalldesktop} {
|
||||
margin-top: $padd;
|
||||
margin-bottom: $padd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1518,13 +1525,14 @@ body.category.category-esemeny {
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------- single content ----------------------------- */
|
||||
|
||||
.single-content {
|
||||
position: relative;
|
||||
padding: $padd;
|
||||
@media #{$smalldesktop} {
|
||||
top: -#{$h-unit-1};
|
||||
padding-left: 0;
|
||||
padding-right: $h-unit-2;
|
||||
@include singlDesktopLayout();
|
||||
}
|
||||
|
||||
h2 {
|
||||
@@ -1574,16 +1582,22 @@ body.category.category-esemeny {
|
||||
text-align: unset;
|
||||
}
|
||||
|
||||
/* ---------------------------- images on single ---------------------------- */
|
||||
|
||||
.wp-block-image {
|
||||
// padding: $padd 0;
|
||||
margin: $padd 0;
|
||||
@media #{$smalldesktop} {
|
||||
padding: $padd 0;
|
||||
}
|
||||
position: relative !important;
|
||||
|
||||
@media #{$smalldesktop} {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&:not(.wp-block-image-aligned) {
|
||||
@include fit-content(width);
|
||||
}
|
||||
|
||||
figcaption {
|
||||
bottom: 0 !important;
|
||||
// width: calc(100% - #{$h-unit-1});
|
||||
|
||||
&::after {
|
||||
@include trianglecorner(topright, #{$h-unit-1});
|
||||
@@ -1642,24 +1656,54 @@ body.category.category-esemeny {
|
||||
//aligned:
|
||||
.wp-block-gallery,
|
||||
.wp-block-image {
|
||||
.alignleft,
|
||||
.alignright {
|
||||
//no align on mobile
|
||||
float: unset;
|
||||
margin: 0;
|
||||
.alignedWrapper {
|
||||
position: relative;
|
||||
|
||||
@media #{$smalldesktop} {
|
||||
width: 100%;
|
||||
max-width: 50%;
|
||||
@include fit-content(width);
|
||||
&.alignleftWrapper {
|
||||
padding-right: $padd;
|
||||
float: left;
|
||||
}
|
||||
&.alignrightWrapper {
|
||||
padding-left: $padd;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.alignleft,
|
||||
.alignright {
|
||||
margin: 0;
|
||||
//no align on mobile
|
||||
position: relative;
|
||||
// @media #{$only-mobile} {
|
||||
float: unset;
|
||||
// }
|
||||
|
||||
@media #{$smalldesktop} {
|
||||
width: auto;
|
||||
// max-width: 50%;
|
||||
|
||||
// @media #{$smalldesktop} {
|
||||
// &.alignleft {
|
||||
// padding-right: $padd;
|
||||
// }
|
||||
// &.alignright {
|
||||
// padding-left: $padd;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
.alignright {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.authors {
|
||||
@include single-h4();
|
||||
// @include single-h4();
|
||||
@include single-author();
|
||||
color: #000;
|
||||
-webkit-text-stroke: 0px;
|
||||
a {
|
||||
@include single-metadata();
|
||||
@include single-author();
|
||||
}
|
||||
}
|
||||
} //.single-content end
|
||||
@@ -1677,6 +1721,9 @@ body.category.category-esemeny {
|
||||
}
|
||||
#colorbox {
|
||||
z-index: 12;
|
||||
@media #{$smalldesktop} {
|
||||
z-index: 3150;
|
||||
}
|
||||
&:focus {
|
||||
border: none;
|
||||
outline: none;
|
||||
@@ -1706,13 +1753,24 @@ body.category.category-esemeny {
|
||||
bottom: -5rem;
|
||||
filter: invert(100);
|
||||
z-index: 14;
|
||||
@media #{$smalldesktop} {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
z-index: 3200;
|
||||
}
|
||||
}
|
||||
&#cboxPrevious {
|
||||
left: 1rem;
|
||||
@include transform(scaleX(-1));
|
||||
@media #{$smalldesktop} {
|
||||
left: $v-unit-1;
|
||||
}
|
||||
}
|
||||
&#cboxNext {
|
||||
right: 1rem;
|
||||
@media #{$smalldesktop} {
|
||||
right: $v-unit-1;
|
||||
}
|
||||
}
|
||||
&#cboxClose {
|
||||
background-image: url(../img/dis-plus.svg);
|
||||
@@ -1721,6 +1779,11 @@ body.category.category-esemeny {
|
||||
@include transform(rotate(45deg));
|
||||
top: -3rem;
|
||||
right: 1rem;
|
||||
@media #{$smalldesktop} {
|
||||
position: fixed;
|
||||
right: $v-unit-1;
|
||||
top: $v-unit-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1748,7 +1811,9 @@ body.category.category-esemeny {
|
||||
position: relative;
|
||||
padding-top: $padd * 2;
|
||||
top: -#{$h-unit-1};
|
||||
padding-right: $h-unit-2;
|
||||
margin: 0;
|
||||
@include singlDesktopLayout();
|
||||
|
||||
a {
|
||||
margin-bottom: $padd * 2;
|
||||
display: block;
|
||||
@@ -1795,6 +1860,7 @@ body.category.category-esemeny {
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
@include related-title();
|
||||
}
|
||||
}
|
||||
@@ -1823,10 +1889,10 @@ body.category.category-esemeny {
|
||||
|
||||
/* ------------------------ related posts on desktop ------------------------ */
|
||||
@media #{$smalldesktop} {
|
||||
padding-right: $h-unit-2;
|
||||
top: -#{$h-unit-1};
|
||||
position: relative;
|
||||
padding-top: $padd;
|
||||
padding-top: $padd * 2;
|
||||
@include singlDesktopLayout();
|
||||
|
||||
& > h3 {
|
||||
display: block;
|
||||
@@ -1836,23 +1902,9 @@ body.category.category-esemeny {
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
li {
|
||||
flex: 1 1 33%;
|
||||
// .relatedthumb {
|
||||
// img {
|
||||
// width: 100%;
|
||||
// height: calc((100vw - #{$v-unit-4}) / 3);
|
||||
// }
|
||||
// }
|
||||
// .relatedcontent {
|
||||
// position: absolute;
|
||||
// height: unset;
|
||||
// bottom: 0;
|
||||
// width: calc((100vw - #{$v-unit-4}) / 3);
|
||||
// }
|
||||
|
||||
flex: 0 0 calc(100% / 3);
|
||||
// height: 50%;
|
||||
height: calc((100vw - #{$v-unit-4}) / 3);
|
||||
max-height: calc(1024px / 3);
|
||||
position: relative;
|
||||
.related_thumbnailwrapper {
|
||||
width: 100%;
|
||||
@@ -2034,7 +2086,7 @@ body.page {
|
||||
|
||||
//colors on single articles
|
||||
|
||||
@mixin tagcolors-single($color) {
|
||||
@mixin tagcolors-single($color, $darkcolor) {
|
||||
.titlewrapper {
|
||||
.metadata {
|
||||
@media #{$smalldesktop} {
|
||||
@@ -2057,6 +2109,9 @@ body.page {
|
||||
h3 {
|
||||
background: $color !important;
|
||||
@include box-shadow(10px 0 $color, -5px 0 $color !important);
|
||||
a {
|
||||
color: $darkcolor;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: $color;
|
||||
@@ -2077,6 +2132,11 @@ $color-do: #3c00ff;
|
||||
$color-think: #00ffb8;
|
||||
$color-love: #ff5f5f;
|
||||
|
||||
$color-be-dark: #7e7f00;
|
||||
$color-do-dark: #1e007f;
|
||||
$color-think-dark: #007f5c;
|
||||
$color-love-dark: #7f2f2f;
|
||||
|
||||
//colors on articles
|
||||
|
||||
.tag-be {
|
||||
@@ -2126,19 +2186,19 @@ $color-love: #ff5f5f;
|
||||
//single article
|
||||
.single {
|
||||
.tag-be {
|
||||
@include tagcolors-single($color-be);
|
||||
@include tagcolors-single($color-be, $color-be-dark);
|
||||
}
|
||||
|
||||
.tag-do {
|
||||
@include tagcolors-single($color-do);
|
||||
@include tagcolors-single($color-do, $color-do-dark);
|
||||
}
|
||||
|
||||
.tag-think {
|
||||
@include tagcolors-single($color-think);
|
||||
@include tagcolors-single($color-think, $color-think-dark);
|
||||
}
|
||||
|
||||
.tag-love {
|
||||
@include tagcolors-single($color-love);
|
||||
@include tagcolors-single($color-love, $color-love-dark);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user