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

work on homepage

Browse Source
This commit is contained in:
Péter Gyetvai
2019-06-09 19:55:23 +02:00
parent 647e333a16
commit 027ad5511c
17 changed files with 396 additions and 381 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
sass/_font-mixins.scss
View File

@@ -25,6 +25,18 @@
}
}
@mixin home-more {
font: bold 3rem "Westeinde Caption";
color: #fff;
-webkit-text-stroke: #000 1px;
@media #{$mobile-landscape} {
font-size: 2rem !important;
}
@media #{$smalldesktop} {
font-size: 3rem;
}
}
@mixin home-title-small {
@media #{$smalldesktop} {
font-size: 1.2rem;

94
sass/base.scss
View File

@@ -310,7 +310,7 @@ $desktop-bottom-margin-double: 4rem;
// color: #000;
// fill: currentColor;
filter: invert(100%); //black
@include transform(rotate(180deg)) // transform: rotate(180deg);;
@include transform(rotate(180deg)) // transform: rotate(180deg);;;;;;;;;;;
}
}
}
@@ -536,18 +536,24 @@ $desktop-bottom-margin-double: 4rem;
/* -------------------------------- load more ------------------------------- */
.misha_loadmore {
@include home-title();
@media #{$smalldesktop} {
border-left: #000 1px solid;
padding: $desktop-top-margin $desktop-home-margin;
width: $desktop-home-margin;
margin-right: $desktop-home-margin;
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: space-around;
flex-direction: row;
justify-content: center;
align-items: center;
height: 100%;
}
a {
a,
p {
@include home-more();
@media #{$smalldesktop} {
transform-origin: center;
white-space: nowrap;
width: 100vh;
@include transform(rotate(-90deg));
}
}
}
@@ -555,6 +561,11 @@ $desktop-bottom-margin-double: 4rem;
}
} //wrapper end
//no header scroll on touch devices(because it's invisible)
.touchevents .header-scroll {
display: none !important;
}
/* -------------------------------------------------------------------------- */
/* HOMEPAGE */
/* -------------------------------------------------------------------------- */
@@ -585,14 +596,12 @@ $desktop-bottom-margin-double: 4rem;
&.header-scroll-left {
left: $desktop-home-margin;
button {
// cursor: url("../img/arrow-black-left.svg"), url("../img/arrow-black-left.png"), w-resize, auto;
cursor: url("../img/arrow-black-left.png"), w-resize;
}
}
&.header-scroll-right {
right: $desktop-home-margin;
button {
// cursor: url("../img/arrow-black-right.svg"), url("../img/arrow-black-right.png"), e-resize, auto;
cursor: url("../img/arrow-black-right.png"), e-resize;
}
}
@@ -673,19 +682,15 @@ $desktop-bottom-margin-double: 4rem;
margin-left: $desktop-home-margin;
padding-top: $desktop-top-margin;
border-right: #000 1px solid;
&::before {
//this is the border on top
content: "<hr>";
display: block;
height: 1px;
width: 100%;
background: #000;
}
/* -------------------------------- thumbnail and title ------------------------------- */
.thumbnailwrapper {
height: calc(100% - #{$desktop-top-margin});
img.attachment-home-thumbnail {
display: flex;
flex-direction: row;
justify-content: flex-start;
border-top: 1px #000 solid;
img.attachment-home-big-thumbnail {
object-fit: cover;
width: 50%;
height: 100%;
@@ -727,13 +732,22 @@ $desktop-bottom-margin-double: 4rem;
display: block;
border-right: #000 solid 1px;
}
.postedon {
}
} //metadata end
/* ------------------------- home article big hover ------------------------- */
&.hovered {
width: calc(100vw - (#{$desktop-home-margin} * 2));
h2>a{
color: #000;
}
}
}
}
.home-wrapper-1 {
article {
a.thumbnailwrapper {
justify-content: flex-end;
}
}
}
.home-wrapper-2 {
@@ -749,6 +763,7 @@ $desktop-bottom-margin-double: 4rem;
.home-wrapper-small {
width: calc(100vw - (#{$desktop-home-margin} * 3));
height: calc((100vw - (#{$desktop-home-margin} * 3)) / 3 * 2);
flex-shrink: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
@@ -772,14 +787,13 @@ $desktop-bottom-margin-double: 4rem;
}
.metadata {
width: 100%;
height: 20%;
position: absolute;
bottom: 0;
right: 0;
background: transparent;
display: flex;
@@ -789,7 +803,7 @@ $desktop-bottom-margin-double: 4rem;
align-items: stretch;
@include triangle-corner-bordered(#{$desktop-bottom-margin-double}, 0, transparent);
display: none;
&.vis{
&.vis {
display: flex;
}
}
@@ -1069,9 +1083,12 @@ $desktop-bottom-margin-double: 4rem;
@media #{$smalldesktop} {
&.home-big {
h2 a {
color: $color !important;
color: $color;
}
}
&.home-big.hovered{
background-color: $color !important;
}
&.home-small {
.metadata,
.metadata a {
@@ -1081,10 +1098,17 @@ $desktop-bottom-margin-double: 4rem;
}
}
@mixin tagclip($tag){
@mixin tagclip($tag) {
@media #{$smalldesktop} {
.thumbnailwrapper>img{
clip-path: url(../img/clip/#{$tag}_desktop.svg)
.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%;
}
}
}
@@ -1106,29 +1130,29 @@ $desktop-bottom-margin-double: 4rem;
.tag-be {
@include tagcolors(#00ffb8);
&.random{
@include tagclip(be)
&.random {
@include tagclip(be);
}
}
.tag-do {
@include tagcolors(#ff5f5f);
&.random{
@include tagclip(do)
&.random {
@include tagclip(do);
}
}
.tag-think {
@include tagcolors(#fdff00);
&.random{
@include tagclip(think)
&.random {
@include tagclip(think);
}
}
.tag-love {
@include tagcolors(#3c00ff);
&.random{
@include tagclip(love)
&.random {
@include tagclip(love);
}
}