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

home updates

Browse Source
This commit is contained in:
Péter Gyetvai
2019-06-17 19:27:21 +02:00
parent fc73386e85
commit 5fe471dfe6
4 changed files with 198 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
css/base.css
View File

@@ -503,14 +503,14 @@ object {
.touchevents .header-scroll {
display: none !important; }
@media (min-width: 769px) {
.touchevents .archive,
.touchevents .home {
overflow-y: hidden; } }
/* -------------------------------------------------------------------------- */
/* ARCHIVE AND HOMEPAGE */
/* -------------------------------------------------------------------------- */
@media (min-width: 769px) {
.archive,
.home {
overflow-y: hidden; } }
.archive .wrapper,
.home .wrapper {
/* ----------------------------- header on home ----------------------------- */ }
@@ -612,7 +612,7 @@ object {
margin-left: 10rem;
padding-top: 4rem;
border-right: #000 1px solid;
/* -------------------------------- thumbnail and title ------------------------------- */
/* ------------- home article desktop big - thumbnail and title ------------- */
/* -------------------------- home article metadata big------------------------- */
/* ------------------------- home article big hover ------------------------- */ }
.archive main section .home-wrapper-big article .thumbnailwrapper,
@@ -678,10 +678,6 @@ object {
.archive main section .home-wrapper-big article .metadata,
.home main section .home-wrapper-big article .metadata {
font-size: 2rem; } }
@media (min-width: 769px) {
.archive main section .home-wrapper-big article .metadata > div,
.home main section .home-wrapper-big article .metadata > div {
width: 30%; } }
@media (min-width: 769px) and (-webkit-min-device-pixel-ratio: 2.1) {
.archive main section .home-wrapper-big article .metadata,
.home main section .home-wrapper-big article .metadata {
@@ -689,24 +685,34 @@ object {
@media (min-width: 769px) {
.archive main section .home-wrapper-big article .metadata .categories,
.home main section .home-wrapper-big article .metadata .categories {
display: block; }
display: block;
padding: 0 5rem; }
.archive main section .home-wrapper-big article .metadata .vr,
.home main section .home-wrapper-big article .metadata .vr {
height: 100%;
width: 1px;
background-color: #000; }
.archive main section .home-wrapper-big article .metadata .postedon,
.home main section .home-wrapper-big article .metadata .postedon {
padding: 0 5rem; }
.archive main section .home-wrapper-big article .metadata .bevezeto,
.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 .alcim {
display: none; }
.archive main section .home-wrapper-big article.hovered,
.home main section .home-wrapper-big article.hovered {
width: calc(100vw - (10rem * 2)); }
.archive main section .home-wrapper-big article.hovered h2 > a,
.home main section .home-wrapper-big article.hovered h2 > a {
color: #000; }
.archive main section .home-wrapper-big article.hovered h2 > a,
.home main section .home-wrapper-big article.hovered h2 > a {
color: #000; }
.archive 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; }
.archive 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 .thumbnailwrapper img,
.home main section .home-wrapper-big.home-wrapper-2 article .thumbnailwrapper img {
left: -5rem;
position: relative; } }
@media (min-width: 769px) {
.archive main section .home-wrapper-small,
.home main section .home-wrapper-small {
@@ -1366,6 +1372,26 @@ object {
color: #fff !important;
-webkit-text-stroke: #3c00ff 1px !important; } }
body.hover-tag-be,
.header-1.hover-tag-be,
.header-2.hover-tag-be {
background-color: #00ffb8 !important; }
body.hover-tag-do,
.header-1.hover-tag-do,
.header-2.hover-tag-do {
background-color: #ff5f5f !important; }
body.hover-tag-think,
.header-1.hover-tag-think,
.header-2.hover-tag-think {
background-color: #fdff00 !important; }
body.hover-tag-love,
.header-1.hover-tag-love,
.header-2.hover-tag-love {
background-color: #3c00ff !important; }
/* -------------------------------------------------------------------------- */
/* imports */
/* -------------------------------------------------------------------------- */

121
js/scripts.js
View File

@@ -10,38 +10,56 @@
/* VARIABLES */
/* ========================================================================== */
/* -------------------------------- geometry -------------------------------- */
const vw = $(window).width()
const wow = window.outerWidth
console.log(vw, wow)
var isMobile
var isHome = false
var isArchive = false
var isEsemeny = false
// console.log(vw, wow)
const bottomScrollHeight = window.innerHeight - $(window).height()
const desktophomemargin = $(".header-1")[0].getBoundingClientRect().width
/* --------------------------- css values to vars --------------------------- */
//isMobile
const isMobile = (_ => {
if (wow < 769) {
//mobile settings
$('.social-link').addClass('hidden')
return true
if (wow < 769) {
isMobile = true
//mobile settings
$('.social-link').addClass('hidden')
} else {
return false
}
})()
} else {
isMobile = false
}
//isHome
const isHome = (_ => {
if ($('body').hasClass("home")) {
return true
} else {
return false
}
})()
if ($('body').hasClass("home")) {
isHome = true
}
if ($('body').hasClass("archive") & !$('body').hasClass("category-esemeny")) {
isArchive = true
}
//isArchive
const isArchive = (_ => {
if ($('body').hasClass("archive") & !$('body').hasClass("category-esemeny")) {
return true
} else {
return false
}
})()
if ($('body').hasClass("category-esemeny")) {
isEsemeny = true
}
var desktophomemargin = $(".header-1")[0].getBoundingClientRect().width
//isEsemeny
const isEsemeny = (_ => {
if ($('body').hasClass("category-esemeny")) {
return true
} else {
return false
}
})()
/* ========================================================================== */
@@ -155,8 +173,11 @@
if (!isMobile) {
if (isHome || isArchive) {
$('html').css({ overflowY: "hidden" })
//no overflowY
$('html').css({ overflowY: "hidden" })
//calculate wrappable elements
$('#content>*:not(.misha_loadmore)').addClass("hbox")
var wrapArticles = $(".hbox").length
@@ -165,10 +186,8 @@
$('.hbox:first-child').wrap('<div class="home-wrapper-big home-wrapper-1"></div>').addClass("home-big")
$('.hbox:nth-child(2)').wrap('<div class="home-wrapper-big home-wrapper-2"></div>').addClass("home-big")
wrapArticles = $(".hbox").length - 2
}
//add classes to articles and elements
var articleWrapCounter = 0
for (let i = 0; i < wrapArticles; i++) {
@@ -178,15 +197,14 @@
j = i + 3
}
if (i % 6 == 0) {
articleWrapCounter++
}
console.log($('.hbox:nth-child(' + j + ')').attr("id"), i, j)
//console.log($('.hbox:nth-child(' + j + ')').attr("id"), i, j)
$('.hbox:nth-child(' + j + ')').addClass("home-small home-thumbnail-small-" + articleWrapCounter)
//change order if there is a description
if ($(".archivedescription") && articleWrapCounter == 1 && j > 2 && j < 5) {
$('.hbox:nth-child(' + j + ')').css({order:"99"})
$('.hbox:nth-child(' + j + ')').css({ order: "99" })
}
}
//wrap classes
@@ -201,8 +219,12 @@
$(".home-wrapper-" + j).addClass("home-wrapper-s1")
}
}
}
}
//add bottom scrollbar to div on bottom:
$(".home-wrapper-big .metadata").css({bottom: bottomScrollHeight})
}//isHome || isArchive end
}// !isMobile end
//returns three random numebers 0-5
function randomNumbers() {
@@ -253,7 +275,6 @@
}
}
/* --------------------------------- To top --------------------------------- */
$(".totop>a").click(function (e) {
@@ -443,22 +464,40 @@
//hover on big articles
$(".home-big h2").hover(function () {
let cc = $(this)
//make width more
cc.parents("article").addClass("hovered")
//change bg
// $(this).parents('article').animate({})
//animate metadata
let cArticle = cc.parents("article")
//add hovered class
cArticle.addClass("hovered")
//add tag to header for bg
let artClasses = cArticle.attr("class").split(" ")
let theTag = findClassByStart(artClasses, "tag")
$("body, .header-1, .header-2").addClass("hover-" + theTag)
//show excerpt and alcim
cArticle.children(".metadata").children(".alcim").show()
cArticle.children(".metadata").children(".bevezeto").show()
//show excerpt
}, function () {
let cc = $(this)
//width back to normal
//remove hovered class
cc.parents("article").removeClass("hovered")
//remove tag from header and body
let headerClasses = $(".header-1").attr("class").split(" ")
var hoverClass = findClassByStart(headerClasses, "hover")
$("body, .header-1, .header-2").removeClass(hoverClass)
})
function findClassByStart(classlist, startString, sep = "-") {
//finds a name of a class, from the first elemnt
var fullstring
for (let i = 0; i < classlist.length; i++) {
let curr = classlist[i].split(sep)
if (curr[0] == startString) {
fullstring = classlist[i]
}
}
return fullstring
}
//hover on small articles
function showTitle(th) {
$(th).children("h2").show()

20
loop.php
View File

@@ -21,22 +21,20 @@
<div class="metadata">
<div class="categories">
<?php the_category(' | ');?>
<?php
$terms = get_the_terms($post->ID, 'Format');
if ($terms) {
foreach ($terms as $term) {
echo '| ';
echo $term->name;
}
}?>
<?php
$terms = get_the_terms($post->ID, 'Format');
if ($terms) {
foreach ($terms as $term) {
echo '| ';
echo $term->name;
}
}?>
</div>
<div class="vr">
</div>
<div class="postedon">
<?php the_time('Y. m. d.');?>
<?php the_time('m. d.');?>
</div>
<?php if(is_home() and $qc < 3): ; //first two posts subtitle and excerpt ?>
<div class="alcim">

80
sass/base.scss
View File

@@ -311,7 +311,7 @@ $v-unit-1: 4rem;
// color: #000;
// fill: currentColor;
filter: invert(100%); //black
@include transform(rotate(180deg)) // transform: rotate(180deg);;;;;;;;;;;;;;;;
@include transform(rotate(180deg)) // transform: rotate(180deg);;;;;;;;;;;;;;;;;;;;
}
}
}
@@ -563,8 +563,18 @@ $v-unit-1: 4rem;
} //wrapper end
//no header scroll on touch devices(because it's invisible)
.touchevents .header-scroll {
display: none !important;
.touchevents {
.header-scroll {
display: none !important;
}
// no overflow on touch devices, where no horizontal scrollbar visible
.archive,
.home {
@media #{$smalldesktop} {
overflow-y: hidden;
}
}
}
/* -------------------------------------------------------------------------- */
@@ -574,7 +584,7 @@ $v-unit-1: 4rem;
.archive,
.home {
@media #{$smalldesktop} {
overflow-y: hidden;
// overflow-y: hidden;
}
.wrapper {
@@ -685,7 +695,8 @@ $v-unit-1: 4rem;
padding-top: $v-unit-1;
border-right: #000 1px solid;
/* -------------------------------- thumbnail and title ------------------------------- */
/* ------------- home article desktop big - thumbnail and title ------------- */
.thumbnailwrapper {
height: calc(100% - #{$v-unit-1});
display: flex;
@@ -720,18 +731,23 @@ $v-unit-1: 4rem;
align-items: center;
@include triangle-corner-bordered(#{$v-unit-1}, 0, transparent);
@include home-metadata-big();
& > div {
width: 30%;
}
@media #{$mobile-landscape} {
height: calc(#{$h-unit-2} / 2);
}
.categories {
// display: none;
display: block;
// border-right: #000 solid 1px;
padding: 0 $h-unit-1;
}
.vr {
height: 100%;
width: 1px;
background-color: #000;
}
.postedon{
padding: 0 $h-unit-1;
}
.bevezeto,
@@ -742,7 +758,6 @@ $v-unit-1: 4rem;
/* ------------------------- home article big hover ------------------------- */
&.hovered {
width: calc(100vw - (#{$h-unit-2} * 2));
h2 > a {
color: #000;
}
@@ -758,6 +773,12 @@ $v-unit-1: 4rem;
&.home-wrapper-2 {
article {
border-left: #000 1px solid;
.thumbnailwrapper {
img {
left: -$h-unit-1;
position: relative;
}
}
}
}
}
@@ -846,7 +867,7 @@ $v-unit-1: 4rem;
border-right: #000 1px solid;
@include home-title();
@include triangle-corner-bordered($h-unit-1, 0, transparent);
&.tag{
&.tag {
text-transform: uppercase;
}
}
@@ -864,7 +885,7 @@ $v-unit-1: 4rem;
justify-content: flex-end;
align-items: flex-start;
padding: 2rem;
p{
p {
margin: 0;
@include archive-tag-description();
}
@@ -1142,6 +1163,8 @@ $v-unit-1: 4rem;
}
}
//tagclip: filters on small articale images
@mixin tagclip($tag) {
@media #{$smalldesktop} {
.thumbnailwrapper > img {
@@ -1157,6 +1180,8 @@ $v-unit-1: 4rem;
}
}
//colors on single articles
@mixin tagcolors-single($color) {
.metadata {
@media #{$smalldesktop} {
@@ -1172,6 +1197,8 @@ $v-unit-1: 4rem;
}
}
//colors on articles
.tag-be {
@include tagcolors(#00ffb8);
&.random {
@@ -1200,6 +1227,7 @@ $v-unit-1: 4rem;
}
}
//single article
.single {
.tag-be {
@include tagcolors-single(#00ffb8);
@@ -1218,6 +1246,28 @@ $v-unit-1: 4rem;
}
}
//menu colored on big article hover
body,
.header-1,
.header-2 {
&.hover-tag-be {
background-color: #00ffb8 !important;
}
&.hover-tag-do {
background-color: #ff5f5f !important;
}
&.hover-tag-think {
background-color: #fdff00 !important;
}
&.hover-tag-love {
background-color: #3c00ff !important;
}
}
/* -------------------------------------------------------------------------- */
/* imports */
/* -------------------------------------------------------------------------- */