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

working on single and events

Browse Source
This commit is contained in:
infeeeee
2019-08-09 00:38:47 +02:00
parent 5a234f87e1
commit 911688225f
7 changed files with 165 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
sass/_font-mixins.scss
View File

@@ -191,3 +191,23 @@
font: 500 2rem "Westeinde Caption";
line-height: 1.3;
}
@mixin event-title{
font: 800 1.8rem "Butler";
color: #000;
@media #{$tablet} {
font-size: 2.2rem;
}
}
@mixin event-date{
@include event-title();
color: #00f;
}
@mixin event-link{
@include event-title();
font: 500 1.8rem "Westeinde Caption";
color: #00f;
}

65
sass/base.scss
View File

@@ -89,6 +89,10 @@ $only-mobile: only screen and
max-width: 768px
);
$tablet: only screen and
(
min-width: 512px
);
$smalldesktop: only screen and
(
min-width: 769px
@@ -236,7 +240,7 @@ $v-unit-6: 24rem;
@if $offset==0 {
width: calc(100% - #{$radius});
} @else {
width: calc(100% - #{$radius} + #{$offset});
width: calc(100% - #{$radius} + (#{$offset}));
}
border-top: $bordercolor 1px solid;
@@ -244,11 +248,11 @@ $v-unit-6: 24rem;
@if $side==left {
left: calc(#{$radius});
margin-left: -#{$offset};
margin-left: calc((#{$offset}) * -1);
}
@if $side==right {
right: calc(#{$radius});
margin-right: -#{$offset};
margin-right: calc((#{$offset}) * -1);
}
}
&::before {
@@ -263,14 +267,14 @@ $v-unit-6: 24rem;
z-index: 9;
@if $side==left {
left: -#{$offset};
left: calc((#{$offset}) * -1);
border-left: $bordercolor solid 1px;
@include transform(skewX(-45deg));
transform-origin: left bottom;
border-top: $bordercolor solid 1px;
}
@if $side==right {
right: -#{$offset};
right: calc((#{$offset}) * -1);
border-right: $bordercolor solid 1px;
@include transform(skewX(45deg));
transform-origin: right bottom;
@@ -316,6 +320,7 @@ $v-unit-6: 24rem;
display: flex;
flex-direction: row;
align-items: center;
line-height: 0;
@media #{$smalldesktop} {
width: $h-unit-2;
position: fixed;
@@ -1277,7 +1282,8 @@ body.category.category-esemeny {
main {
padding-top: 5rem + (2rem * 2);
article {
height: 50vh;
height: 85vw;
max-height: calc(50vw + 180px);
.thumbnailwrapper {
height: 50vw;
img {
@@ -1289,7 +1295,11 @@ body.category.category-esemeny {
.event-metadata {
display: flex;
flex-direction: column;
justify-content: space-between;
align-content: stretch;
padding: 2rem;
height: 35vw;
max-height: 180px;
.top-row,
.bottom-row {
@@ -1298,14 +1308,41 @@ body.category.category-esemeny {
justify-content: space-between;
height: 50%;
flex: 0 0 auto;
// & > * {
// }
// .ev-date {
// }
h2 {
height: unset;
}
.top-row {
align-items: center;
.ev-date {
@include event-date();
}
a {
@include transform(rotate(225deg));
font-size: 2.8rem;
}
}
.bottom-row {
align-items: flex-end;
h2 {
flex: 1 0.9 auto;
height: unset;
padding: 0;
@include event-title;
}
.vr {
flex: 0 0 auto;
width: 1px;
height: 100%;
background-color: #000;
}
a.text-link {
flex: 1 1 auto;
@include event-link;
text-align: right;
}
}
.hr {
flex: 0 0 auto;
height: 1px;
@@ -1471,7 +1508,7 @@ body.category.category-esemeny {
padding-left: 0;
padding-right: 0;
@include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1}, white, #000, left);
@include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1} + 1px, white, #000, left);
.metaWrapper {
@include singlDesktopLayout();
@@ -1722,7 +1759,7 @@ body.category.category-esemeny {
#colorbox {
z-index: 12;
@media #{$smalldesktop} {
z-index: 3150;
z-index: 3150;
}
&:focus {
border: none;