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

mobile home and friends

Browse Source
This commit is contained in:
infeeeee
2019-08-15 04:05:59 +02:00
parent 7ab073d280
commit 8284c8a412
28 changed files with 1591 additions and 712 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
sass/_font-mixins.scss
View File

@@ -32,16 +32,19 @@
@mixin home-title {
//article titles on home
font: bold 3rem "Westeinde Caption";
font: bold 2.2rem "Westeinde Caption";
color: #000;
@media #{$bigmobile} {
font-size: 2.8rem;
}
@media #{$mobile-landscape} {
font-size: 2.5rem !important;
font-size: 2.5rem;
}
@media #{$smalldesktop} {
font-size: 6rem;
font-size: 5rem;
}
@media #{$bigdesktop} {
font-size: 7.5rem;
font-size: 6.8rem;
}
@media #{$verybigdesktop} {
font-size: 11rem;
@@ -63,6 +66,14 @@
@mixin home-title-small {
//small titles on desktop on home and archives
font: bold 1.5rem "Westeinde Caption";
color: #000;
@media #{$bigmobile} {
font-size: 1.8rem;
}
@media #{$mobile-landscape} {
font-size: 2.5rem;
}
@media #{$tablet} {
font-size: 1.3rem;
color: #000;
@@ -108,14 +119,19 @@
font-size: 1.2rem;
}
@media #{$smalldesktop} {
font-size: 1.5rem;
}
@media #{$bigdesktop} {
font-size: 2rem;
}
}
@mixin home-metadata-bevezeto {
font: bold 1rem "Butler";
line-height: 1rem;
@media #{$smalldesktop} {
font-size: 2rem;
line-height: 2rem;
}
}

294
sass/base.scss
View File

@@ -84,6 +84,11 @@ object {
/* MEDIA QUERIES */
/* -------------------------------------------------------------------------- */
$bigmobile: only screen and
(
min-width: 360px
);
$only-mobile: only screen and
(
max-width: 768px
@@ -103,7 +108,10 @@ $mobile-landscape: only screen and
(
min-width: 769px
)
and (-webkit-min-device-pixel-ratio: 2.1);
and (-webkit-min-device-pixel-ratio: 2.1) and
(
min-aspect-ratio: 1/1
);
$bigdesktop: only screen and
(
@@ -293,6 +301,71 @@ $v-unit-6: 24rem;
}
}
/* -------------------------------------------------------------------------- */
/* COOKIE NOTIFICATION */
/* -------------------------------------------------------------------------- */
.cookie-notice-container {
@include home-metadata();
display: flex;
flex-direction: column;
align-content: center;
padding: 2rem;
@media #{$tablet} {
flex-direction: row;
max-width: 1024px;
margin: 0 auto;
}
@media #{$verybigdesktop} {
max-width: 1920px;
}
span{
text-align: left;
@media #{$tablet} {
flex: 1 1 auto;
align-self: center;
}
}
#cn-accept-cookie {
background-color: #000;
border-radius: 50%;
display: inline-block;
order: 99;
@include home-title-small();
color: #ff0;
padding: 1rem 2rem;
// @include fit-content(width);
@include fit-content(height);
margin-top: 1.5rem;
align-self: center;
@media #{$tablet} {
margin: 0;
color: #ff0;
flex: 0 0 auto;
}
}
#cn-more-info {
@include home-title-small;
margin-top: 1rem;
-webkit-text-stroke: #000 1px;
color: transparent;
@media #{$tablet} {
flex: 0 0 auto;
margin: 0 2rem;
line-height: 1;
align-self: center;
}
@media #{$smalldesktop} {
color: transparent;
}
}
}
/* -------------------------------------------------------------------------- */
/* STRUCTURE */
/* -------------------------------------------------------------------------- */
@@ -600,13 +673,14 @@ $v-unit-6: 24rem;
li {
display: block;
padding-top: 2rem;
padding: 2rem;
flex-shrink: 1;
@media #{$tablet} {
padding: 1rem 0;
}
@media #{$smalldesktop} {
padding: 2rem 0;
padding: 0;
}
// @media #{$smalldesktop} {
// padding: 2rem 0;
// }
a {
@include menutext();
}
@@ -701,6 +775,8 @@ $v-unit-6: 24rem;
/* -------------------------------- load more ------------------------------- */
.misha_loadmore {
text-align: center;
padding: 2rem 0;
@media #{$tablet} {
min-width: $h-unit-2;
width: calc(100vw - ((100vh - #{$v-unit-2}) / 2 * 3) - #{$h-unit-4});
@@ -802,6 +878,16 @@ $v-unit-6: 24rem;
}
}
//header not on home
&.archive,
&.search-results,
&.search-no-results,
&.error404 {
.wrapper .header {
background-color: #000;
}
}
main {
@media #{$tablet} {
height: 100vh;
@@ -826,7 +912,7 @@ $v-unit-6: 24rem;
/* --------------------------- home article mobile/default -------------------------- */
article {
height: 100vh;
// height: 100vh;
& > a {
margin: 0;
@@ -838,7 +924,8 @@ $v-unit-6: 24rem;
.thumbnailwrapper {
img {
// post thumbnail on home
height: 50vh;
// height: 50vh;
height: 50vw;
width: 100vw;
object-fit: cover;
}
@@ -846,21 +933,23 @@ $v-unit-6: 24rem;
h2 {
width: 100%;
height: 50vh;
height: 37.5vw;
padding: 2rem;
padding-top: 3rem;
padding-top: 1.5rem;
margin: 0;
line-height: 0.8;
// display: flex;
// flex-direction: row;
// align-items: center;
a {
@include home-title();
@include home-title-small();
}
}
.metadata {
bottom: 50%;
bottom: 37.5vw;
height: $h-unit-1;
display: flex;
@include fit-content(width);
@@ -879,12 +968,48 @@ $v-unit-6: 24rem;
box-shadow: 0 0 1px transparent;
}
.bevezeto,
.bevezetoWrapper,
.alcimWrapper,
.curvyArrow {
display: none;
}
}
/* ----------------------- home article mobile cutout ----------------------- */
&.cut-even {
.metadata {
background-color: transparent;
&::after {
display: none;
}
}
}
/* ----------------------- home article mobile first 2 ----------------------- */
&.post_nr_1,
&.post_nr_2 {
height: 100vh;
.thumbnailwrapper {
img {
height: 50vh;
}
}
h2 {
height: 50vh;
padding-top: 3rem;
a {
@include home-title();
@media #{$bigmobile} {
line-height: 1.5;
}
}
}
.metadata {
bottom: 50%;
}
}
} //article end
/* ------------------------ home article desktop big ------------------------ */
@@ -968,10 +1093,6 @@ $v-unit-6: 24rem;
height: calc(#{$h-unit-2} / 2);
}
&.noBottomScrollbar {
height: $h-unit-2 + 1.5rem;
}
& > div {
flex: 1 1 auto;
}
@@ -985,13 +1106,14 @@ $v-unit-6: 24rem;
padding: 0;
}
.bevezeto,
.bevezetoWrapper,
.alcimWrapper {
display: none;
}
.transparent,
.transparent a {
.transparent a,
.transparent div {
color: transparent !important;
//color: #000 !important;
}
@@ -1027,36 +1149,64 @@ $v-unit-6: 24rem;
} //metadata end
/* --------------------- home article desktop big hover --------------------- */
&.hovered {
.bevezeto,
.alcim {
color: #000 !important;
// flex: 0 0 auto;
}
// &.hovered {
.bevezeto,
.alcim {
color: #000 !important;
// flex: 0 0 auto;
}
.alcimWrapper {
align-self: flex-start;
padding: $v-unit-1 / 2 0 $h-unit-1;
min-width: $v-unit-2;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-content: space-around;
position: relative;
.alcim {
writing-mode: vertical-rl;
@include transform(rotate(180deg));
text-align: right;
writing-mode: vertical-lr;
margin: $v-unit-1 / 2;
}
flex: 0 0 auto;
.bevezeto {
height: 100%;
max-height: 100%;
text-align: left;
margin: 0 $v-unit-1 / 2;
padding: $v-unit-1 / 2 0;
align-self: flex-start;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
align-items: flex-end;
@include home-metadata-bevezeto();
}
h2 > a {
color: #000;
.alcimInner {
text-align: left;
}
}
}
.bevezetoWrapper {
line-height: 1;
padding: $v-unit-1 / 2;
align-self: flex-start;
.bevezeto {
margin: 0;
overflow: hidden;
@include home-metadata-bevezeto();
.bevezetoInner {
@include home-metadata-bevezeto();
text-align: left;
}
}
}
&.hovered h2 > a {
color: #000;
}
// }
}
/* ------------------------ home article desktop 1 + 2 ----------------------- */
@@ -1336,9 +1486,6 @@ $v-unit-6: 24rem;
&.search-no-results {
.wrapper {
height: unset;
header {
background-color: #000;
}
section .archivetitle {
padding: 8rem 2rem 0;
}
@@ -1426,9 +1573,6 @@ $v-unit-6: 24rem;
.search-no-results {
.wrapper {
height: unset;
header {
background-color: #000;
}
main {
section {
@@ -2105,6 +2249,10 @@ $padd: 2rem;
-webkit-text-stroke-color: transparent;
}
}
hr {
margin-top: 2rem !important;
}
}
.toHome {
@media #{$tablet} {
@@ -2331,6 +2479,12 @@ $padd: 2rem;
/* -------------------------------- page only------------------------------- */
body.page {
@media #{$only-mobile} {
.single-content {
padding-top: 8rem;
}
}
@media #{$tablet} {
article {
margin-top: $h-unit-2;
@@ -2412,17 +2566,15 @@ 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%;
@media #{$tablet} {
.thumbnailwrapper > img {
-webkit-mask: url(../img/clip/#{$tag}_desktop.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100%;
// -webkit-clip-path: url(../img/clip/#{$tag}_desktop.svg);
// clip-path: url(../img/clip/#{$tag}_desktop.svg#clipper);
mask: url(../img/clip/#{$tag}_desktop.svg);
mask-repeat: no-repeat;
mask-size: 100%;
}
-webkit-mask: url(../img/clip/#{$tag}_desktop.svg);
mask: url(../img/clip/#{$tag}_desktop.svg);
}
}
@@ -2487,8 +2639,11 @@ $color-love-dark: #7f2f2f;
color: #000;
background-color: $color-do;
}
&.random {
@include tagclip(be);
&.random,
&.cut-even {
.thumbnailwrapper > img {
@include tagclip(be);
}
}
}
@@ -2498,8 +2653,11 @@ $color-love-dark: #7f2f2f;
color: #000;
background-color: $color-be;
}
&.random {
@include tagclip(do);
&.random,
&.cut-even {
.thumbnailwrapper > img {
@include tagclip(do);
}
}
}
@@ -2509,8 +2667,11 @@ $color-love-dark: #7f2f2f;
color: #000;
background-color: $color-love;
}
&.random {
@include tagclip(think);
&.random,
&.cut-even {
.thumbnailwrapper > img {
@include tagclip(think);
}
}
}
@@ -2520,8 +2681,11 @@ $color-love-dark: #7f2f2f;
color: #000;
background-color: $color-think;
}
&.random {
@include tagclip(love);
&.random,
&.cut-even {
.thumbnailwrapper > img {
@include tagclip(love);
}
}
}