infeeeee/dis-2019
1
0
Fork 0
Code Issues 6 Pull Requests Releases 19 Wiki Activity

work on wingle articles

Browse Source
This commit is contained in:
infeeeee
2019-08-07 22:54:34 +02:00
parent 8e00b8717b
commit 5a234f87e1
10 changed files with 438 additions and 306 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
sass/_font-mixins.scss
View File

@@ -147,12 +147,21 @@
// }
@mixin single-metadata {
font: bold 1rem "Westeinde Caption";
font: bold 1.4rem "Westeinde Caption";
@media #{$smalldesktop} {
font: 900 2rem "Westeinde Caption";
color: #fff;
-webkit-text-stroke: #000 1px;
}
}
@mixin single-author {
@include single-metadata();
font-size: 2rem;
color: #fff;
-webkit-text-stroke: #000 1px;
@media #{$smalldesktop} {
font-size: 3rem;
}
}
@@ -180,4 +189,5 @@
@mixin related-title {
font: 500 2rem "Westeinde Caption";
line-height: 1.3;
}

192
sass/base.scss
View File

@@ -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);
}
}