diff --git a/css/base.css b/css/base.css
index ce6e77b..7f54272 100644
--- a/css/base.css
+++ b/css/base.css
@@ -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 */
/* -------------------------------------------------------------------------- */
diff --git a/js/scripts.js b/js/scripts.js
index 6fc7545..1183e62 100644
--- a/js/scripts.js
+++ b/js/scripts.js
@@ -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('').addClass("home-big")
$('.hbox:nth-child(2)').wrap('').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()
diff --git a/loop.php b/loop.php
index a56c14b..8120e83 100644
--- a/loop.php
+++ b/loop.php
@@ -21,22 +21,20 @@
-
- ID, 'Format');
- if ($terms) {
- foreach ($terms as $term) {
- echo '| ';
- echo $term->name;
- }
- }?>
-
+ ID, 'Format');
+ if ($terms) {
+ foreach ($terms as $term) {
+ echo '| ';
+ echo $term->name;
+ }
+ }?>
-
+
diff --git a/sass/base.scss b/sass/base.scss
index f62020e..68f44bf 100644
--- a/sass/base.scss
+++ b/sass/base.scss
@@ -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 */
/* -------------------------------------------------------------------------- */