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

updates on 09.04

Browse Source
This commit is contained in:
infeeeee
2019-09-04 23:42:06 +02:00
parent 3553b6b0e0
commit 5d03dea44d
7 changed files with 1428 additions and 479 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
sass/_font-mixins.scss
View File

@@ -43,9 +43,13 @@
@media #{$smalldesktop} {
font-size: 5rem;
}
@media #{$bigdesktop} {
font-size: 6.8rem;
}
@media #{$bigdesktop-hidpi} {
// font-size: 5.5rem !important;
}
@media #{$verybigdesktop} {
font-size: 11rem;
}
@@ -84,6 +88,9 @@
@media #{$bigdesktop} {
font-size: 2rem;
}
@media #{$bigdesktop-hidpi} {
// font-size: 1.5rem !important;
}
@media #{$verybigdesktop} {
font-size: 3rem;
}
@@ -115,6 +122,10 @@
}
@mixin home-metadata-big {
// font-size: 1.4rem;
// @media #{$bigmobile} {
// font-size: 1.5rem;
// }
@media #{$tablet} {
font-size: 1.2rem;
}
@@ -127,7 +138,9 @@
}
@mixin home-metadata-bevezeto {
font: 300 1rem "Westeinde Caption";
@include home-title-small();
font-weight: 300;
// font: 300 1rem "Westeinde Caption";
color: #000;
@media #{$tablet} {
font: bold 1rem "Butler";
@@ -196,9 +209,9 @@
}
@mixin single-h4 {
font-weight: 500;
// font-size: 2.4rem;
// line-height: 1.6;
font-weight: 300;
font-size: 2.4rem;
line-height: 1.3;
}
@mixin captiontext {
@@ -213,6 +226,16 @@
color: #000;
}
@mixin single-quote-big{
font: 800 2.1rem "Butler";
color: #000;
padding-top: 8px;
@media #{$tablet} {
font-size: 2.8rem;
padding-top: 5px;
}
}
@mixin related-title {
font: 500 2rem "Westeinde Caption";
line-height: 1.3;
@@ -227,16 +250,16 @@
font-size: 1.8rem;
}
@media #{$tablet} {
font-size: 2.2rem;
font-size: 2rem;
}
@media #{$smalldesktop} {
font-size: 3rem;
font-size: 2.5rem;
}
@media #{$bigdesktop} {
font-size: 3.2rem;
font-size: 3rem;
}
@media #{$verybigdesktop} {
font-size: 4.5rem;
font-size: 4rem;
}
}

344
sass/base.scss
View File

@@ -125,6 +125,12 @@ $bigdesktop: only screen and
min-width: 1279px
);
$bigdesktop-hidpi: only screen and
(
min-width: 1279px
)
and (-webkit-min-device-pixel-ratio: 1.4);
$verybigdesktop: only screen and
(
min-width: 1919px
@@ -280,6 +286,7 @@ $v-unit-6: 24rem;
right: calc(#{$radius});
margin-right: $minusOffset;
}
z-index: 90;
}
&::before {
//filleted corner
@@ -381,6 +388,7 @@ $v-unit-6: 24rem;
position: relative;
width: 100vw;
height: 100vh;
z-index: 1;
/* -------------------------------------------------------------------------- */
/* header */
@@ -482,11 +490,14 @@ $v-unit-6: 24rem;
//icons in menu:
object {
height: 3rem;
// width: 3rem;
@media #{$tablet} {
height: 2.5rem;
// width: 2.5rem;
}
@media #{$smalldesktop} {
height: 3rem;
// width: 3rem;
}
}
@@ -499,6 +510,12 @@ $v-unit-6: 24rem;
.social-link,
.menubutton,
.events-link {
a,
button,
* {
z-index: 3501;
cursor: pointer;
}
.white {
display: block;
}
@@ -533,11 +550,14 @@ $v-unit-6: 24rem;
.logo {
object {
height: $h-unit-1;
// width: $h-unit-1;
@media #{$tablet} {
height: 4rem;
// width: 4rem;
}
@media #{$smalldesktop} {
height: $h-unit-1;
// width: $h-unit-1;
}
}
}
@@ -803,7 +823,7 @@ $v-unit-6: 24rem;
/* STRUCTURE ALL PAGE */
/* -------------------------------------------------------------------------- */
main {
z-index: 1;
z-index: 2;
section {
article {
position: relative;
@@ -1001,7 +1021,7 @@ $v-unit-6: 24rem;
.metadata {
// bottom: 37.5vw;
top: calc(50vw - #{$h-unit-1});
top: calc(50vw - #{$h-unit-1} + 1px);
height: $h-unit-1;
display: flex;
@include fit-content(width);
@@ -1010,6 +1030,18 @@ $v-unit-6: 24rem;
align-items: center;
padding: 0;
&::after {
display: none;
}
@media #{$only-mobile} {
@include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1} + 1px, white, #000, left);
}
z-index: 15;
& > * {
z-index: 15;
}
.vr {
height: 100%;
width: 1px;
@@ -1027,8 +1059,15 @@ $v-unit-6: 24rem;
}
}
h2 {
// top: -1px;
position: relative;
border-top: #000 1px solid;
z-index: 8;
}
& > .bevezetoWrapper {
padding: 0 2rem 1.5rem;
padding: 0 2rem 3rem;
@include home-metadata-bevezeto();
&::before {
display: block;
@@ -1055,18 +1094,18 @@ $v-unit-6: 24rem;
/* ----------------------- home article mobile first 2 ----------------------- */
&.post_nr_1,
&.post_nr_2 {
height: 100vh;
min-height: 100vh;
.thumbnailwrapper {
img {
height: 50vh;
}
}
.metadata {
top: calc(50vh - 5rem);
top: calc(50vh - 5rem + 1px);
}
h2 {
height: 50vh;
// height: 50vh;
// height: calc(50vh + 1px);
padding-top: 3rem;
a {
@include home-title();
@@ -1075,28 +1114,38 @@ $v-unit-6: 24rem;
}
}
}
.bevezetoWrapper {
&::before {
// margin-top: 1rem;
margin-bottom: 0;
}
.bevezeto {
// @include home-metadata-big();
padding-top: 1rem;
}
}
}
//border on first elements
&.post_nr_1 {
.metadata {
&::after {
display: none;
}
// .metadata {
// &::after {
// display: none;
// }
@include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1} + 1px, white, #000, left);
z-index: 15;
& > * {
z-index: 15;
}
}
h2 {
height: calc(50vh + 1px);
top: -1px;
position: relative;
border-top: #000 1px solid;
z-index: 8;
}
// @include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1} + 1px, white, #000, left);
// z-index: 15;
// & > * {
// z-index: 15;
// }
// }
// h2 {
// height: calc(50vh + 1px);
// top: -1px;
// position: relative;
// border-top: #000 1px solid;
// z-index: 8;
// }
}
} //article end
@@ -1148,6 +1197,7 @@ $v-unit-6: 24rem;
padding: 2rem;
padding-left: $v-unit-1;
border: none;
width: calc(100vw - #{$h-unit-1-5 * 2.5});
@media #{$smalldesktop} {
width: calc(100vw - #{$h-unit-5});
@@ -1322,6 +1372,7 @@ $v-unit-6: 24rem;
.metadata {
justify-content: flex-end;
@include triangle-corner-bordered(#{$v-unit-1}, 1px, transparent, #000, right);
.filler {
order: -1;
@@ -1480,6 +1531,7 @@ $v-unit-6: 24rem;
background-color: #fff;
height: 100%;
padding: 0;
border: none;
a {
margin-top: $h-unit-0-5 / 2;
@@ -1712,7 +1764,7 @@ body.category.category-esemeny {
flex-direction: column;
justify-content: space-between;
align-content: stretch;
padding: 1.5rem;
padding: 1rem;
@media #{$bigmobile} {
padding: 2rem;
}
@@ -1725,7 +1777,7 @@ body.category.category-esemeny {
flex-direction: row;
justify-content: space-between;
height: 50%;
flex: 0 0 auto;
flex: 1 1 auto;
}
.top-row {
@@ -1746,7 +1798,12 @@ body.category.category-esemeny {
flex: 1 0.9 auto;
height: unset;
padding: 0;
@include event-title;
border: none;
padding-right: 2rem;
a{
@include event-title;
}
}
.vr {
flex: 0 0 auto;
@@ -1757,8 +1814,9 @@ body.category.category-esemeny {
}
a.text-link {
flex: 1 1 auto;
padding-left: 1rem;
@include event-link;
text-align: right;
// text-align: right;
&:hover {
-webkit-text-stroke: transparent;
color: #00f;
@@ -1781,26 +1839,31 @@ body.category.category-esemeny {
main {
padding-top: 0;
section {
height: 100%;
margin: $v-unit-1 $h-unit-2;
border-top: #000 1px solid;
height: calc(100vh - #{$v-unit-2});
// padding-top:
padding-left: $h-unit-2;
// margin-left: $h-unit-2;
display: flex;
flex-direction: row;
align-content: center;
article {
width: calc(50vw - #{$h-unit-2});
height: calc(50vw - #{$h-unit-2});
// height: calc(50vw - #{$h-unit-2});
max-width: calc(100vh - #{$h-unit-1});
max-height: calc(100vh - #{$h-unit-1});
height: unset;
min-height: unset;
// max-height: calc(100vh - #{$h-unit-1});
min-width: 80vh;
min-height: 80vh;
// min-width: 80vh;
// min-height: 80vh;
// margin: auto;
margin: auto $h-unit-2 auto 0;
margin: 0 $h-unit-2 0 0;
display: flex;
flex-direction: column;
justify-content: space-between;
justify-content: center;
.thumbnailwrapper {
height: unset;
@@ -1814,25 +1877,28 @@ body.category.category-esemeny {
}
flex: 1 1 auto;
padding: 0;
// .top-row{
// .ev-date{
// padding-left: 2rem;
// }
.top-row {
flex: 1 1 auto;
.ev-date {
padding-left: 2rem;
}
// padding-right: 2rem;
// }
padding-right: 2rem;
}
.bottom-row {
flex: 1 1 auto;
h2 {
// padding-left: 2rem;
padding-left: 2rem;
padding-bottom: 2rem;
padding-right: 0;
}
.vr {
margin: 0 2rem;
margin: 0 1rem;
}
.text-link {
// padding-right: 2rem;
padding-right: 2rem;
padding-bottom: 2rem;
padding-left: 0;
}
}
}
@@ -1849,7 +1915,8 @@ body.category.category-esemeny {
@mixin singleDesktopLayout() {
padding-right: $h-unit-4;
padding-left: 0;
max-width: calc(1024px + #{$h-unit-4});
// max-width: calc(1024px + #{$h-unit-4});
max-width: calc(768px + #{$h-unit-4});
}
$padd: 2rem;
@@ -1913,17 +1980,26 @@ $padd: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 0;
@include single-metadata();
.metaWrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
justify-content: flex-start;
.time-cat {
z-index: 10;
}
.time-cat::after {
content: " ";
display: inline-block;
}
.format::before {
content: "|";
display: inline-block;
}
}
}
h1.single-title {
@@ -1957,7 +2033,7 @@ $padd: 2rem;
margin-left: $h-unit-1;
background-color: #fff;
border-left: #000 solid 1px;
padding-left: $h-unit-1;
padding-left: $h-unit-2;
// & > * {
// padding: $padd $h-unit-1;
@@ -1993,7 +2069,8 @@ $padd: 2rem;
.metadata {
top: -#{$h-unit-1};
width: 100%;
// left: -#{$h-unit-1};
width: calc(100% + #{$h-unit-1});
padding-left: 0;
padding-right: 0;
@@ -2001,15 +2078,7 @@ $padd: 2rem;
.metaWrapper {
@include singleDesktopLayout();
justify-content: flex-start;
.time-cat::after {
content: " ";
display: inline-block;
}
.format::before {
content: "|";
display: inline-block;
}
padding-left: $h-unit-1;
}
// .time-cat {
@@ -2032,6 +2101,7 @@ $padd: 2rem;
background-color: #ff5f5f;
padding: 0;
margin: 0 auto;
border: none;
width: 20%;
&.content-wrap {
@@ -2051,6 +2121,9 @@ $padd: 2rem;
margin-bottom: $padd;
}
}
&.wp-block-separator:nth-of-type(2) {
margin-bottom: 4rem;
}
}
//override if thumbnail
@@ -2104,7 +2177,7 @@ $padd: 2rem;
p {
background: #ff5f5f;
display: inline;
padding: 3px 0;
padding: 5px 0 3px;
@include box-shadow(10px 0 #ff5f5f, -5px 0 #ff5f5f);
}
@@ -2117,8 +2190,28 @@ $padd: 2rem;
}
}
//nagyon nagy kiemelt
.wp-block-pullquote {
text-align: unset;
// text-align: unset;
padding: 4rem;
blockquote {
display: inline;
position: relative;
p{
@include single-quote-big();
}
cite {
// display: inline !important;
position: absolute;
font-size: 80%;
bottom: -3rem;
right: 0;
top: unset;
left: unset;
display: inline-block;
}
}
}
/* ---------------------------- images on single ---------------------------- */
@@ -2147,10 +2240,16 @@ $padd: 2rem;
.wp-block-gallery {
padding: 0;
margin: $padd 0;
// @media #{$tablet} {
// align-content: space-between;
// }
li {
margin-right: 0;
@media #{$tablet} {
margin-bottom: $v-unit-1;
// margin-bottom: $v-unit-1 /2;
// margin-top: $v-unit-1 /2;
margin: 0;
}
&:nth-child(odd) figcaption {
@media #{$tablet} {
@@ -2342,7 +2441,7 @@ $padd: 2rem;
}
}
&#cboxClose {
background-image: url(../img/dis-plus.svg);
background-image: url(../img/dis-plus-white.svg);
width: 2rem;
height: 2rem;
@include transform(rotate(45deg));
@@ -2650,6 +2749,7 @@ body.page {
@mixin tagcolors($color) {
//metadata on mobile
.metadata {
@media #{$only-mobile} {
color: $color !important;
@@ -2661,19 +2761,28 @@ body.page {
a {
color: $color !important;
}
}
//mobile desktop firat post
&.post_nr_1:not(.home-big) {
.metadata {
@media #{$only-mobile} {
&::before,
&::after {
border-color: $color !important;
}
}
h2 {
}
//mobile desktop firat post
// &.post_nr_1:not(.home-big) {
// .metadata {
// &::before,
// &::after {
// border-color: $color !important;
// }
// }
h2 {
@media #{$only-mobile} {
border-top-color: $color !important;
}
}
// }
& > .bevezetoWrapper::before {
background-color: $color !important;
@@ -2755,11 +2864,13 @@ body.page {
@mixin tagcolors-single($color, $darkcolor) {
.titlewrapper {
.metadata {
color: $color !important;
@media #{$tablet} {
// color: #fff !important;
color: #fff !important;
-webkit-text-stroke: $color 1px !important;
}
a {
color: $color !important;
@media #{$tablet} {
color: #fff !important;
-webkit-text-stroke: $color 1px !important;
@@ -2804,59 +2915,66 @@ $color-think-dark: #007f5c;
$color-love-dark: #7f2f2f;
//colors on articles
.tag-be {
@include tagcolors($color-be);
::selection {
color: #000;
background-color: $color-do;
}
// &.cut-even,
&.random {
.thumbnailwrapper > img {
@include tagclip(be);
.archive,
.home,
.search-results {
&.tag-be,
.tag-be {
@include tagcolors($color-be);
::selection {
color: #000;
background-color: $color-do;
}
// &.cut-even,
&.random {
.thumbnailwrapper > img {
@include tagclip(be);
}
}
}
}
.tag-do {
@include tagcolors($color-do);
::selection {
color: #000;
background-color: $color-be;
}
// &.cut-even,
&.random {
.thumbnailwrapper > img {
@include tagclip(do);
&.tag-do,
.tag-do {
@include tagcolors($color-do);
::selection {
color: #000;
background-color: $color-be;
}
// &.cut-even,
&.random {
.thumbnailwrapper > img {
@include tagclip(do);
}
}
}
}
.tag-think {
@include tagcolors($color-think);
::selection {
color: #000;
background-color: $color-love;
}
// &.cut-even,
&.random {
.thumbnailwrapper > img {
@include tagclip(think);
&.tag-think,
.tag-think {
@include tagcolors($color-think);
::selection {
color: #000;
background-color: $color-love;
}
// &.cut-even,
&.random {
.thumbnailwrapper > img {
@include tagclip(think);
}
}
}
}
.tag-love {
@include tagcolors($color-love);
::selection {
color: #000;
background-color: $color-think;
}
// &.cut-even,
&.random {
.thumbnailwrapper > img {
@include tagclip(love);
&.tag-love,
.tag-love {
@include tagcolors($color-love);
::selection {
color: #000;
background-color: $color-think;
}
// &.cut-even,
&.random {
.thumbnailwrapper > img {
@include tagclip(love);
}
}
}
}