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

2019 08 28 word mods

Browse Source
This commit is contained in:
infeeeee
2019-09-03 00:08:51 +02:00
parent 74a33168d7
commit cd3124784f
18 changed files with 681 additions and 401 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
sass/_font-mixins.scss
View File

@@ -127,8 +127,12 @@
}
@mixin home-metadata-bevezeto {
font: bold 1rem "Butler";
line-height: 1rem;
font: 300 1rem "Westeinde Caption";
color: #000;
@media #{$tablet} {
font: bold 1rem "Butler";
line-height: 1rem;
}
@media #{$smalldesktop} {
font-size: 2rem;
line-height: 2rem;
@@ -174,7 +178,6 @@
}
@media #{$smalldesktop} {
font-size: 2rem;
}
}
@@ -194,8 +197,8 @@
@mixin single-h4 {
font-weight: 500;
font-size: 2.4rem;
line-height: 1.6;
// font-size: 2.4rem;
// line-height: 1.6;
}
@mixin captiontext {
@@ -215,9 +218,14 @@
line-height: 1.3;
}
/* ---------------------------------- event --------------------------------- */
@mixin event-title {
font: 800 1.8rem "Butler";
font: 800 1.6rem "Butler";
color: #000;
@media #{$bigmobile} {
font-size: 1.8rem;
}
@media #{$tablet} {
font-size: 2.2rem;
}
@@ -238,13 +246,28 @@
}
@mixin event-link {
@include event-title();
font: 500 1.8rem "Westeinde Caption";
color: #00f;
font: 500 1.3rem "Westeinde Caption";
-webkit-text-stroke: #00f 1px;
color: transparent;
@media #{$bigmobile} {
font-size: 1.4rem;
}
@media #{$tablet} {
font-size: 1.9rem;
}
@media #{$smalldesktop} {
font-size: 2.8rem;
}
@media #{$bigdesktop} {
font-size: 2.8rem;
}
@media #{$verybigdesktop} {
font-size: 4rem;
}
}
@mixin event-arrow {
font: normal 2.8rem "Westeinde Caption";
font: normal 2.8rem "Westeinde Caption";
color: #000;
@media #{$tablet} {
font-size: 3rem;

200
sass/base.scss
View File

@@ -80,6 +80,13 @@ object {
pointer-events: none;
}
/* ---------------------------- default selection --------------------------- */
html *::selection {
color: #000;
background-color: #fdff00;
}
/* -------------------------------------------------------------------------- */
/* MEDIA QUERIES */
/* -------------------------------------------------------------------------- */
@@ -311,7 +318,7 @@ $v-unit-6: 24rem;
flex-direction: column;
align-content: center;
padding: 2rem;
@media #{$tablet} {
flex-direction: row;
max-width: 1024px;
@@ -321,8 +328,7 @@ $v-unit-6: 24rem;
max-width: 1920px;
}
span{
span {
text-align: left;
@media #{$tablet} {
flex: 1 1 auto;
@@ -347,7 +353,6 @@ $v-unit-6: 24rem;
color: #ff0;
flex: 0 0 auto;
}
}
#cn-more-info {
@include home-title-small;
@@ -383,6 +388,7 @@ $v-unit-6: 24rem;
.header {
position: fixed;
top: 0;
width: 100vw;
display: flex;
@@ -423,6 +429,10 @@ $v-unit-6: 24rem;
.menubutton,
.events-link {
filter: invert(100);
&::selection,
&::selection * {
filter: invert(0);
}
}
}
@media #{$smalldesktop} {
@@ -430,6 +440,7 @@ $v-unit-6: 24rem;
}
div {
z-index: 3500;
-webkit-transform: translate3d(0, 0, 0);
}
a {
display: inline-block;
@@ -456,25 +467,25 @@ $v-unit-6: 24rem;
}
}
.totop {
position: fixed;
bottom: 1rem;
right: 1rem;
z-index: 2;
@media #{$tablet} {
display: none;
}
a {
display: inline-block;
object {
height: 2rem;
// color: #000;
// fill: currentColor;
filter: invert(100%); //black
@include transform(rotate(180deg));
}
}
}
// .totop {
// position: fixed;
// bottom: 1rem;
// right: 1rem;
// z-index: 2;
// @media #{$tablet} {
// display: none;
// }
// a {
// display: inline-block;
// object {
// height: 2rem;
// // color: #000;
// // fill: currentColor;
// filter: invert(100%); //black
// @include transform(rotate(180deg));
// }
// }
// }
//icons in menu:
object {
@@ -517,7 +528,7 @@ $v-unit-6: 24rem;
$easing: linear;
order: 99;
z-index: 3001;
z-index: 3002;
button {
transform-origin: center;
@@ -646,12 +657,13 @@ $v-unit-6: 24rem;
align-items: center;
}
.menuseparator {
display: none;
display: block;
width: 100%;
height: 1px;
background-color: #fff;
@media #{$tablet} {
display: block;
width: 1px;
height: 70%;
background-color: #fff;
flex: 0 0 auto;
margin: $v-unit-1;
}
@@ -913,6 +925,7 @@ $v-unit-6: 24rem;
article {
// height: 100vh;
min-height: 87.5vw;
& > a {
margin: 0;
@@ -933,10 +946,8 @@ $v-unit-6: 24rem;
h2 {
width: 100%;
height: 37.5vw;
padding: 2rem;
padding-top: 1.5rem;
padding: 1.5rem 2rem 1rem;
// padding-top: 1.5rem;
margin: 0;
line-height: 0.8;
// display: flex;
@@ -949,7 +960,8 @@ $v-unit-6: 24rem;
}
.metadata {
bottom: 37.5vw;
// bottom: 37.5vw;
top: calc(50vw - #{$h-unit-1});
height: $h-unit-1;
display: flex;
@include fit-content(width);
@@ -975,17 +987,31 @@ $v-unit-6: 24rem;
}
}
/* ----------------------- home article mobile cutout ----------------------- */
&.cut-even {
.metadata {
background-color: transparent;
&::after {
display: none;
}
& > .bevezetoWrapper {
padding: 0 2rem 1.5rem;
@include home-metadata-bevezeto();
&::before {
display: block;
content: "";
height: 1px;
width: 20%;
margin: 0 auto;
background-color: #000;
margin-bottom: 1rem;
}
}
/* ----------------------- home article mobile cutout ----------------------- */
// &.cut-even {
// .metadata {
// // background-color: transparent;
// &::after {
// display: none;
// }
// }
// }
/* ----------------------- home article mobile first 2 ----------------------- */
&.post_nr_1,
&.post_nr_2 {
@@ -1024,6 +1050,7 @@ $v-unit-6: 24rem;
position: relative;
width: calc(100vw - (#{$h-unit-1-5} * 3));
height: calc(100vh - #{$v-unit-1});
min-height: unset;
margin: 0;
padding: 0;
margin-left: $h-unit-1-5;
@@ -1073,11 +1100,17 @@ $v-unit-6: 24rem;
/* -------------------------- home article metadata big------------------------- */
.metadata {
bottom: 0;
top: unset;
background: transparent;
width: 100%;
height: #{$h-unit-1-5};
@media #{$mobile-landscape} {
height: calc(#{$h-unit-2} / 2);
}
@media #{$smalldesktop} {
height: #{$h-unit-2};
// height: #{$h-unit-2};
height: ($h-unit-1 + $h-unit-2) / 2 + $v-unit-1;
}
display: flex;
@@ -1089,10 +1122,6 @@ $v-unit-6: 24rem;
@include home-metadata-big();
@media #{$mobile-landscape} {
height: calc(#{$h-unit-2} / 2);
}
& > div {
flex: 1 1 auto;
}
@@ -1291,6 +1320,7 @@ $v-unit-6: 24rem;
flex: 0 0 calc(100% / 3);
height: 50%;
position: relative;
min-height: unset;
.thumbnailwrapper {
width: 100%;
height: 100%;
@@ -1312,6 +1342,7 @@ $v-unit-6: 24rem;
position: absolute;
bottom: 0;
right: 0;
top: unset;
background: transparent;
@@ -1618,7 +1649,10 @@ body.category.category-esemeny {
flex-direction: column;
justify-content: space-between;
align-content: stretch;
padding: 2rem;
padding: 1.5rem;
@media #{$bigmobile} {
padding: 2rem;
}
height: 35vw;
max-height: 180px;
@@ -1662,6 +1696,10 @@ body.category.category-esemeny {
flex: 1 1 auto;
@include event-link;
text-align: right;
&:hover {
-webkit-text-stroke: transparent;
color: #00f;
}
}
}
@@ -1900,6 +1938,15 @@ $padd: 2rem;
.metaWrapper {
@include singleDesktopLayout();
justify-content: flex-start;
.time-cat::after{
content: " ";
display: inline-block;
}
.format::before{
content: "|";
display: inline-block;
}
}
// .time-cat {
@@ -1960,6 +2007,10 @@ $padd: 2rem;
@include singleDesktopLayout();
}
p {
line-height: 1.3;
}
h2 {
@include single-h2();
}
@@ -2066,11 +2117,14 @@ $padd: 2rem;
.wp-block-gallery .blocks-gallery-item figcaption {
background: #fff;
position: absolute;
display: none;
width: calc(100% - #{$h-unit-1});
height: $h-unit-1;
padding: 1rem $padd;
@media #{$tablet} {
display: flex;
width: calc(100% - #{$h-unit-0-5});
height: $h-unit-0-5;
padding: 0.5rem ($padd / 2);
@@ -2087,7 +2141,7 @@ $padd: 2rem;
line-height: 1;
text-align: left;
overflow: unset;
display: flex;
flex-direction: column;
justify-content: center;
z-index: 1;
@@ -2177,8 +2231,16 @@ $padd: 2rem;
padding: 1rem;
@include captiontext();
color: #fff;
width: 100%;
text-align: center;
width: 100%;
span {
max-width: calc(100% - 8rem);
display: inline-block;
@media #{$tablet} {
max-width: 100%;
}
}
}
#cboxCurrent {
display: none !important;
@@ -2511,6 +2573,10 @@ body.page {
}
}
& > .bevezetoWrapper::before {
background-color: $color !important;
}
hr {
background-color: $color !important;
}
@@ -2566,19 +2632,19 @@ body.page {
//tagclip: filters on small articale images
@mixin tagclip($tag) {
-webkit-mask: url(../img/clip/#{$tag}_mobil.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100%;
mask: url(../img/clip/#{$tag}_mobil.svg);
mask-repeat: no-repeat;
mask-size: 100%;
// -webkit-mask: url(../img/clip/#{$tag}_mobil.svg);
// -webkit-mask-repeat: no-repeat;
// -webkit-mask-size: 100%;
// mask: url(../img/clip/#{$tag}_mobil.svg);
// mask-repeat: no-repeat;
// mask-size: 100%;
@media #{$tablet} {
-webkit-mask: url(../img/clip/#{$tag}_desktop.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100%;
mask: url(../img/clip/#{$tag}_desktop.svg);
mask-repeat: no-repeat;
mask-size: 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100%;
mask: url(../img/clip/#{$tag}_desktop.svg);
mask-repeat: no-repeat;
mask-size: 100%;
}
}
@@ -2643,8 +2709,8 @@ $color-love-dark: #7f2f2f;
color: #000;
background-color: $color-do;
}
&.random,
&.cut-even {
// &.cut-even,
&.random {
.thumbnailwrapper > img {
@include tagclip(be);
}
@@ -2657,8 +2723,8 @@ $color-love-dark: #7f2f2f;
color: #000;
background-color: $color-be;
}
&.random,
&.cut-even {
// &.cut-even,
&.random {
.thumbnailwrapper > img {
@include tagclip(do);
}
@@ -2671,8 +2737,8 @@ $color-love-dark: #7f2f2f;
color: #000;
background-color: $color-love;
}
&.random,
&.cut-even {
// &.cut-even,
&.random {
.thumbnailwrapper > img {
@include tagclip(think);
}
@@ -2685,8 +2751,8 @@ $color-love-dark: #7f2f2f;
color: #000;
background-color: $color-think;
}
&.random,
&.cut-even {
// &.cut-even,
&.random {
.thumbnailwrapper > img {
@include tagclip(love);
}