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

home big hovers

Browse Source
This commit is contained in:
Péter Gyetvai
2019-06-18 16:41:45 +02:00
parent 5fe471dfe6
commit cfe1433555
7 changed files with 192 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
_jegyzet.md
View File

@@ -95,7 +95,7 @@ Kereső:
## kezdőlap ## kezdőlap
hover: ne nőjjön meg, csak a szín hover: ne nőjjön meg, csak a szín
a vonal felcsuszás animálva a vonal felcsuszás animálva
a szélek alá is kerüljön szín ~a szélek alá is kerüljön szín~
képre is hover, képre is klikk képre is hover, képre is klikk
kép pontosabb arány kép pontosabb arány
alapből lehet hogy több látszódjon alapből lehet hogy több látszódjon
@@ -109,7 +109,7 @@ Kereső:
## single: ## single:
képen ne egyen cím képen ne legyen cím
# Post-install teendők: # Post-install teendők:

146
css/base.css
View File

@@ -602,30 +602,32 @@ object {
@media (min-width: 769px) { @media (min-width: 769px) {
.archive main section .home-wrapper-big, .archive main section .home-wrapper-big,
.home main section .home-wrapper-big { .home main section .home-wrapper-big {
flex: 0 0 auto; } flex: 0 0 auto;
border-right: #000 1px solid; }
.archive main section .home-wrapper-big article, .archive main section .home-wrapper-big article,
.home main section .home-wrapper-big article { .home main section .home-wrapper-big article {
position: relative; position: relative;
width: calc(100vw - (10rem * 3)); width: calc(100vw - (10rem * 3));
height: calc(100vh - 4rem);
margin: 0; margin: 0;
padding: 0; padding: 0;
margin-left: 10rem; margin-left: 10rem;
padding-top: 4rem; margin-top: 4rem;
border-right: #000 1px solid; border-top: 1px #000 solid;
/* ------------- home article desktop big - thumbnail and title ------------- */ /* ------------- home article desktop big - thumbnail and title ------------- */
/* -------------------------- home article metadata big------------------------- */ /* -------------------------- home article metadata big------------------------- */
/* ------------------------- home article big hover ------------------------- */ } /* ------------------------- home article big hover ------------------------- */ }
.archive main section .home-wrapper-big article .thumbnailwrapper, .archive main section .home-wrapper-big article .thumbnailwrapper,
.home main section .home-wrapper-big article .thumbnailwrapper { .home main section .home-wrapper-big article .thumbnailwrapper {
width: 40%;
height: calc(100% - 4rem); height: calc(100% - 4rem);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start; }
border-top: 1px #000 solid; }
.archive main section .home-wrapper-big article .thumbnailwrapper img.attachment-home-big-thumbnail, .archive main section .home-wrapper-big article .thumbnailwrapper img.attachment-home-big-thumbnail,
.home main section .home-wrapper-big article .thumbnailwrapper img.attachment-home-big-thumbnail { .home main section .home-wrapper-big article .thumbnailwrapper img.attachment-home-big-thumbnail {
object-fit: cover; object-fit: cover;
width: 50%; width: 100%;
height: 100%; } height: 100%; }
.archive main section .home-wrapper-big article h2, .archive main section .home-wrapper-big article h2,
.home main section .home-wrapper-big article h2 { .home main section .home-wrapper-big article h2 {
@@ -643,37 +645,7 @@ object {
flex-direction: row; flex-direction: row;
padding: 0; padding: 0;
justify-content: flex-start; justify-content: flex-start;
align-items: center; } align-items: center; } }
.archive main section .home-wrapper-big article .metadata::after,
.home main section .home-wrapper-big article .metadata::after {
position: absolute;
content: "";
display: block;
top: 0;
border: none;
width: calc(100% - 4rem);
border-top: #000 1px solid;
left: calc(4rem);
background-color: transparent;
margin-left: -0; }
.archive main section .home-wrapper-big article .metadata::before,
.home main section .home-wrapper-big article .metadata::before {
display: block;
content: "";
position: absolute;
width: calc(4rem);
height: calc(4rem);
top: 0;
left: -0;
border-left: #000 solid 1px;
-moz-transform: skewX(-45deg);
-o-transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
transform-origin: left bottom;
background-color: transparent;
z-index: 9; } }
@media (min-width: 769px) and (min-width: 769px) { @media (min-width: 769px) and (min-width: 769px) {
.archive main section .home-wrapper-big article .metadata, .archive main section .home-wrapper-big article .metadata,
.home main section .home-wrapper-big article .metadata { .home main section .home-wrapper-big article .metadata {
@@ -691,7 +663,8 @@ object {
.home main section .home-wrapper-big article .metadata .vr { .home main section .home-wrapper-big article .metadata .vr {
height: 100%; height: 100%;
width: 1px; width: 1px;
background-color: #000; } background-color: #000;
flex: 0 0 auto; }
.archive main section .home-wrapper-big article .metadata .postedon, .archive main section .home-wrapper-big article .metadata .postedon,
.home main section .home-wrapper-big article .metadata .postedon { .home main section .home-wrapper-big article .metadata .postedon {
padding: 0 5rem; } padding: 0 5rem; }
@@ -699,16 +672,111 @@ object {
.archive main section .home-wrapper-big article .metadata .alcim, .archive main section .home-wrapper-big article .metadata .alcim,
.home main section .home-wrapper-big article .metadata .bevezeto, .home main section .home-wrapper-big article .metadata .bevezeto,
.home main section .home-wrapper-big article .metadata .alcim { .home main section .home-wrapper-big article .metadata .alcim {
color: #000 !important;
display: none; } display: none; }
.archive main section .home-wrapper-big article .metadata .bevezeto.transparent,
.archive main section .home-wrapper-big article .metadata .alcim.transparent,
.home main section .home-wrapper-big article .metadata .bevezeto.transparent,
.home main section .home-wrapper-big article .metadata .alcim.transparent {
color: transparent !important; }
.archive main section .home-wrapper-big article .metadata .alcim,
.home main section .home-wrapper-big article .metadata .alcim {
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
transform-origin: top bottom;
text-align: left;
flex: 0 0 auto;
height: 5rem;
width: 20rem;
margin: 0 -3rem; }
.archive main section .home-wrapper-big article .metadata .bevezeto,
.home main section .home-wrapper-big article .metadata .bevezeto {
width: 50%;
flex: 0 1 auto;
text-align: left;
padding: 5rem;
font: bold 1rem "Butler"; } }
@media (min-width: 769px) and (min-width: 769px) {
.archive main section .home-wrapper-big article .metadata .bevezeto,
.home main section .home-wrapper-big article .metadata .bevezeto {
font-size: 2rem; } }
@media (min-width: 769px) {
.archive main section .home-wrapper-big article .metadata .filler,
.home main section .home-wrapper-big article .metadata .filler {
flex: 0 0 auto;
width: 40%; }
.archive main section .home-wrapper-big article.hovered h2 > a, .archive main section .home-wrapper-big article.hovered h2 > a,
.home main section .home-wrapper-big article.hovered h2 > a { .home main section .home-wrapper-big article.hovered h2 > a {
color: #000; } color: #000; }
.archive main section .home-wrapper-big.home-wrapper-1 article .metadata::after,
.home main section .home-wrapper-big.home-wrapper-1 article .metadata::after {
position: absolute;
content: "";
display: block;
top: 0;
border: none;
width: calc(100% - 4rem);
border-top: #000 1px solid;
left: calc(4rem);
background-color: transparent;
margin-left: -0; }
.archive main section .home-wrapper-big.home-wrapper-1 article .metadata::before,
.home main section .home-wrapper-big.home-wrapper-1 article .metadata::before {
display: block;
content: "";
position: absolute;
width: calc(4rem);
height: calc(4rem);
top: 0;
left: -0;
border-left: #000 solid 1px;
-moz-transform: skewX(-45deg);
-o-transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
transform-origin: left bottom;
background-color: transparent;
z-index: 9; }
.archive main section .home-wrapper-big.home-wrapper-1 article a.thumbnailwrapper, .archive main section .home-wrapper-big.home-wrapper-1 article a.thumbnailwrapper,
.home main section .home-wrapper-big.home-wrapper-1 article a.thumbnailwrapper { .home main section .home-wrapper-big.home-wrapper-1 article a.thumbnailwrapper {
justify-content: flex-end; } float: right; }
.archive main section .home-wrapper-big.home-wrapper-2 article, .archive main section .home-wrapper-big.home-wrapper-2 article,
.home main section .home-wrapper-big.home-wrapper-2 article { .home main section .home-wrapper-big.home-wrapper-2 article {
border-left: #000 1px solid; } border-left: #000 1px solid; }
.archive main section .home-wrapper-big.home-wrapper-2 article .metadata::after,
.home main section .home-wrapper-big.home-wrapper-2 article .metadata::after {
position: absolute;
content: "";
display: block;
top: 0;
border: none;
width: calc(100% - 4rem);
border-top: #000 1px solid;
left: calc(4rem);
background-color: transparent;
margin-left: -0; }
.archive main section .home-wrapper-big.home-wrapper-2 article .metadata::before,
.home main section .home-wrapper-big.home-wrapper-2 article .metadata::before {
display: block;
content: "";
position: absolute;
width: calc(4rem);
height: calc(4rem);
top: 0;
left: -0;
border-left: #000 solid 1px;
-moz-transform: skewX(-45deg);
-o-transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
transform-origin: left bottom;
background-color: transparent;
z-index: 9; }
.archive main section .home-wrapper-big.home-wrapper-2 article .thumbnailwrapper img, .archive main section .home-wrapper-big.home-wrapper-2 article .thumbnailwrapper img,
.home main section .home-wrapper-big.home-wrapper-2 article .thumbnailwrapper img { .home main section .home-wrapper-big.home-wrapper-2 article .thumbnailwrapper img {
left: -5rem; left: -5rem;

40
js/myloadmore.js
View File

@@ -1,40 +0,0 @@
jQuery(function ($) { // use jQuery code inside this to avoid "$ is not defined" error
// $('.misha_loadmore').click(function () {
// var button = $(this),
// data = {
// 'action': 'loadmore',
// 'query': misha_loadmore_params.posts, // that's how we get params from wp_localize_script() function
// 'page': misha_loadmore_params.current_page
// };
// button.trigger("moreload-start")
// console.log(misha_loadmore_params)
// $.ajax({ // you can also use $.post here
// url: misha_loadmore_params.ajaxurl, // AJAX handler
// data: data,
// type: 'POST',
// beforeSend: function (xhr) {
// button.html('<p>Betöltés...</p>'); // change the button text, you can also add a preloader image
// },
// success: function (data) {
// if (data) {
// button.html('<a>Mutass többet</a>').before(data); // insert new posts
// misha_loadmore_params.current_page++;
// button.trigger("moreload-finish")
// if (misha_loadmore_params.current_page -1 == misha_loadmore_params.max_page)
// button.remove(); // if last page, remove the button
// // you can also fire the "post-load" event here if you use a plugin that requires it
// // $( document.body ).trigger( 'post-load' );
// } else {
// button.remove(); // if no data, remove the button as well
// }
// }
// });
// });
});

28
js/scripts.js
View File

@@ -221,7 +221,7 @@
} }
//add bottom scrollbar to div on bottom: //add bottom scrollbar to div on bottom:
$(".home-wrapper-big .metadata").css({bottom: bottomScrollHeight}) $(".home-wrapper-big .metadata").css({ bottom: bottomScrollHeight })
}//isHome || isArchive end }//isHome || isArchive end
}// !isMobile end }// !isMobile end
@@ -462,27 +462,43 @@
/* ------------------------------ hover on home ----------------------------- */ /* ------------------------------ hover on home ----------------------------- */
//hover on big articles //hover on big articles
$(".home-big h2").hover(function () { $(".home-big h2, .home-big .thumbnailwrapper").hover(function () {
let cc = $(this) let cc = $(this)
let cArticle = cc.parents("article") let cArticle = cc.parents("article")
let cMetadata = cArticle.children(".metadata")
//add hovered class //add hovered class
cArticle.addClass("hovered") cArticle.addClass("hovered")
//add tag to header for bg //add tag to header for bg
let artClasses = cArticle.attr("class").split(" ") let artClasses = cArticle.attr("class").split(" ")
let theTag = findClassByStart(artClasses, "tag") let theTag = findClassByStart(artClasses, "tag")
$("body, .header-1, .header-2").addClass("hover-" + theTag) $("body, .header-1, .header-2").addClass("hover-" + theTag)
//show excerpt and alcim
cArticle.children(".metadata").children(".alcim").show() //animate border
cArticle.children(".metadata").children(".bevezeto").show() cMetadata.stop().animate({ height: "25rem" }, _ => {
//hide metadata
cMetadata.children(".categories, .postedon").hide()
cMetadata.children(".alcim, .bevezeto").show().removeClass("transparent")
})
}, function () { }, function () {
let cc = $(this) let cc = $(this)
let cArticle = cc.parents("article")
let cMetadata = cArticle.children(".metadata")
//remove hovered class //remove hovered class
cc.parents("article").removeClass("hovered") cArticle.removeClass("hovered")
//remove tag from header and body //remove tag from header and body
let headerClasses = $(".header-1").attr("class").split(" ") let headerClasses = $(".header-1").attr("class").split(" ")
var hoverClass = findClassByStart(headerClasses, "hover") var hoverClass = findClassByStart(headerClasses, "hover")
$("body, .header-1, .header-2").removeClass(hoverClass) $("body, .header-1, .header-2").removeClass(hoverClass)
//transparent metadata
cMetadata.children(".alcim, .bevezeto").addClass("transparent")
//animate height change
cMetadata.stop().animate({ height: "10rem" }, _ => {
//hide and show metadata
cMetadata.children(".alcim, .bevezeto").hide().removeClass("transparent")
cMetadata.children(".categories, .postedon").show()
})
}) })

13
loop.php
View File

@@ -30,12 +30,6 @@
} }
}?> }?>
</div> </div>
<div class="vr">
</div>
<div class="postedon">
<?php the_time('m. d.');?>
</div>
<?php if(is_home() and $qc < 3): ; //first two posts subtitle and excerpt ?> <?php if(is_home() and $qc < 3): ; //first two posts subtitle and excerpt ?>
<div class="alcim"> <div class="alcim">
<?php <?php
@@ -46,6 +40,12 @@
} }
?> ?>
</div> </div>
<?php endif;?>
<div class="vr"></div>
<div class="postedon">
<?php the_time('m. d.');?>
</div>
<?php if(is_home() and $qc < 3): ; //first two posts subtitle and excerpt ?>
<div class="bevezeto"> <div class="bevezeto">
<?php <?php
$dis_bevezeto_value = get_post_meta( get_the_ID(), 'dis-bevezeto', true ); $dis_bevezeto_value = get_post_meta( get_the_ID(), 'dis-bevezeto', true );
@@ -57,6 +57,7 @@
</div> </div>
<?php endif;?> <?php endif;?>
<div class="filler"></div>
</div> <!-- metadata end --> </div> <!-- metadata end -->

7
sass/_font-mixins.scss
View File

@@ -71,6 +71,13 @@
} }
} }
@mixin home-metadata-bevezeto {
font: bold 1rem "Butler";
@media #{$smalldesktop} {
font-size: 2rem;
}
}
@mixin bedocircle { @mixin bedocircle {
font: 900 1rem "Westeinde Caption"; font: 900 1rem "Westeinde Caption";
color: transparent; color: transparent;

53
sass/base.scss
View File

@@ -103,6 +103,7 @@ $h-unit-1: 5rem;
//vertical units: //vertical units:
$v-unit-1: 4rem; $v-unit-1: 4rem;
$v-unit-2: 8rem;
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
/* other mixins */ /* other mixins */
@@ -685,27 +686,30 @@ $v-unit-1: 4rem;
//big: first 2 articles //big: first 2 articles
.home-wrapper-big { .home-wrapper-big {
flex: 0 0 auto; flex: 0 0 auto;
border-right: #000 1px solid;
article { article {
position: relative; position: relative;
width: calc(100vw - (#{$h-unit-2} * 3)); width: calc(100vw - (#{$h-unit-2} * 3));
height: calc(100vh - #{$v-unit-1});
margin: 0; margin: 0;
padding: 0; padding: 0;
margin-left: $h-unit-2; margin-left: $h-unit-2;
padding-top: $v-unit-1; margin-top: $v-unit-1;
border-right: #000 1px solid;
border-top: 1px #000 solid;
/* ------------- home article desktop big - thumbnail and title ------------- */ /* ------------- home article desktop big - thumbnail and title ------------- */
.thumbnailwrapper { .thumbnailwrapper {
width: 40%;
height: calc(100% - #{$v-unit-1}); height: calc(100% - #{$v-unit-1});
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
border-top: 1px #000 solid;
img.attachment-home-big-thumbnail { img.attachment-home-big-thumbnail {
object-fit: cover; object-fit: cover;
width: 50%; width: 100%;
height: 100%; height: 100%;
} }
} }
@@ -729,7 +733,7 @@ $v-unit-1: 4rem;
padding: 0; padding: 0;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
@include triangle-corner-bordered(#{$v-unit-1}, 0, transparent);
@include home-metadata-big(); @include home-metadata-big();
@media #{$mobile-landscape} { @media #{$mobile-landscape} {
@@ -744,6 +748,8 @@ $v-unit-1: 4rem;
height: 100%; height: 100%;
width: 1px; width: 1px;
background-color: #000; background-color: #000;
flex: 0 0 auto;
} }
.postedon{ .postedon{
@@ -752,7 +758,34 @@ $v-unit-1: 4rem;
.bevezeto, .bevezeto,
.alcim { .alcim {
color: #000 !important;
display: none; display: none;
&.transparent{
color: transparent !important;
}
}
.alcim{
@include transform(rotate(270deg));
transform-origin: top bottom;
text-align: left;
flex: 0 0 auto;
height: $h-unit-1;
width: 20rem;
margin: 0 -3rem;
}
.bevezeto{
width: 50%;
flex: 0 1 auto;
text-align: left;
padding: $h-unit-1;
@include home-metadata-bevezeto();
}
.filler{
flex: 0 0 auto;
width: 40%;
} }
} //metadata end } //metadata end
@@ -765,14 +798,20 @@ $v-unit-1: 4rem;
} }
&.home-wrapper-1 { &.home-wrapper-1 {
article { article {
.metadata{
@include triangle-corner-bordered(#{$v-unit-1}, 0, transparent);
}
a.thumbnailwrapper { a.thumbnailwrapper {
justify-content: flex-end; float: right;
} }
} }
} }
&.home-wrapper-2 { &.home-wrapper-2 {
article { article {
border-left: #000 1px solid; border-left: #000 1px solid;
.metadata{
@include triangle-corner-bordered(#{$v-unit-1}, 0, transparent);
}
.thumbnailwrapper { .thumbnailwrapper {
img { img {
left: -$h-unit-1; left: -$h-unit-1;