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

working on responsivity

Browse Source
This commit is contained in:
infeeeee
2019-08-13 04:34:46 +02:00
parent 0686d99971
commit 6edb7e59ed
10 changed files with 1514 additions and 855 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
.vscode/globalsnippets.code-snippets vendored
View File

@@ -15,46 +15,8 @@
// ], // ],
// "description": "Log output to console" // "description": "Log output to console"
// } // }
"smalldesktop": {
"scope": "scss,sass",
"prefix": "smalldesktop",
"body": [
"@media #{\\$smalldesktop} {",
"$0",
"}"
],
"description": "SCSS: Smalldesktop media query"
},
"bigdesktop": {
"scope": "scss,sass",
"prefix": "bigdesktop",
"body": [
"@media #{\\$bigdesktop} {",
"$0",
"}"
],
"description": "SCSS: Bigdesktop media query"
},
"div": {
"scope": "html,php",
"prefix": "div",
"body": [
"<div class=\"$1\">",
"$0",
"</div>"
],
"description": "HTML: div start and end"
},
"php": {
"scope": "html,php",
"prefix": "php",
"body": [
"<?php",
"$0",
"?>"
],
"description": "HTML: div start and end"
},
"console_debug": { "console_debug": {
"scope": "html,php", "scope": "html,php",
"prefix": "console_debug", "prefix": "console_debug",
@@ -62,13 +24,5 @@
"console_debug($0);" "console_debug($0);"
], ],
"description": "Log to js console" "description": "Log to js console"
}, }
"console.log": {
"scope": "javascript",
"prefix": "console.log",
"body": [
"console.log($0)"
],
"description": "console.log()"
},
} }

10
_teendők.md
View File

@@ -2,6 +2,8 @@
og: tag: pluginnal! og: tag: pluginnal!
Facebook like gomb
# Esemény oldal - ✔ # Esemény oldal - ✔
# Kezdőlap # Kezdőlap
@@ -36,3 +38,11 @@ vonalak néhol túlvékonyodik, vastagodik - egyenletlen
!Nincs találat oldal, pl keresésnél !Nincs találat oldal, pl keresésnél
404 oldal 404 oldal
Menü oldalakat átnézni, mi hiányzik még, miről van adat egyáltalán
# egyéb
Cookie értesítés
`@media print{}`

1738
css/base.css
View File

File diff suppressed because it is too large Load Diff

4
functions.php
View File

@@ -124,6 +124,9 @@ function dis2019_header_scripts()
wp_register_script('lettering', get_template_directory_uri() . '/js/lib/jquery.lettering.js', array('jquery'), '1.0.0'); // wp_register_script('lettering', get_template_directory_uri() . '/js/lib/jquery.lettering.js', array('jquery'), '1.0.0'); //
wp_enqueue_script('lettering'); // Enqueue it! wp_enqueue_script('lettering'); // Enqueue it!
// wp_register_script('clamp', get_template_directory_uri() . '/js/lib/clamp.min.js', array(), '1.5.1'); //
// wp_enqueue_script('clamp'); // Enqueue it!
wp_register_script('dis2019scripts', get_template_directory_uri() . '/js/scripts.js', array( wp_register_script('dis2019scripts', get_template_directory_uri() . '/js/scripts.js', array(
'jquery', 'jquery',
'conditionizr', 'conditionizr',
@@ -132,6 +135,7 @@ function dis2019_header_scripts()
'fittext', 'fittext',
'jquery.colorbox', 'jquery.colorbox',
'lettering', 'lettering',
// 'clamp',
), '1.0.0'); // Custom scripts ), '1.0.0'); // Custom scripts
wp_enqueue_script('dis2019scripts'); // Enqueue it! wp_enqueue_script('dis2019scripts'); // Enqueue it!
} }

12
js/lib/clamp.min.js vendored Normal file
View File

@@ -0,0 +1,12 @@
/*!
* Clamp.js 0.5.1
*
* Copyright 2011-2013, Joseph Schmitt http://joe.sh
* Released under the WTFPL license
* http://sam.zoy.org/wtfpl/
*/
(function(){window.$clamp=function(c,d){function s(a,b){n.getComputedStyle||(n.getComputedStyle=function(a,b){this.el=a;this.getPropertyValue=function(b){var c=/(\-([a-z]){1})/g;"float"==b&&(b="styleFloat");c.test(b)&&(b=b.replace(c,function(a,b,c){return c.toUpperCase()}));return a.currentStyle&&a.currentStyle[b]?a.currentStyle[b]:null};return this});return n.getComputedStyle(a,null).getPropertyValue(b)}function t(a){a=a||c.clientHeight;var b=u(c);return Math.max(Math.floor(a/b),0)}function x(a){return u(c)*
a}function u(a){var b=s(a,"line-height");"normal"==b&&(b=1.2*parseInt(s(a,"font-size")));return parseInt(b)}function l(a){if(a.lastChild.children&&0<a.lastChild.children.length)return l(Array.prototype.slice.call(a.children).pop());if(a.lastChild&&a.lastChild.nodeValue&&""!=a.lastChild.nodeValue&&a.lastChild.nodeValue!=b.truncationChar)return a.lastChild;a.lastChild.parentNode.removeChild(a.lastChild);return l(c)}function p(a,d){if(d){var e=a.nodeValue.replace(b.truncationChar,"");f||(h=0<k.length?
k.shift():"",f=e.split(h));1<f.length?(q=f.pop(),r(a,f.join(h))):f=null;m&&(a.nodeValue=a.nodeValue.replace(b.truncationChar,""),c.innerHTML=a.nodeValue+" "+m.innerHTML+b.truncationChar);if(f){if(c.clientHeight<=d)if(0<=k.length&&""!=h)r(a,f.join(h)+h+q),f=null;else return c.innerHTML}else""==h&&(r(a,""),a=l(c),k=b.splitOnChars.slice(0),h=k[0],q=f=null);if(b.animate)setTimeout(function(){p(a,d)},!0===b.animate?10:b.animate);else return p(a,d)}}function r(a,c){a.nodeValue=c+b.truncationChar}d=d||{};
var n=window,b={clamp:d.clamp||2,useNativeClamp:"undefined"!=typeof d.useNativeClamp?d.useNativeClamp:!0,splitOnChars:d.splitOnChars||[".","-","\u2013","\u2014"," "],animate:d.animate||!1,truncationChar:d.truncationChar||"\u2026",truncationHTML:d.truncationHTML},e=c.style,y=c.innerHTML,z="undefined"!=typeof c.style.webkitLineClamp,g=b.clamp,v=g.indexOf&&(-1<g.indexOf("px")||-1<g.indexOf("em")),m;b.truncationHTML&&(m=document.createElement("span"),m.innerHTML=b.truncationHTML);var k=b.splitOnChars.slice(0),
h=k[0],f,q;"auto"==g?g=t():v&&(g=t(parseInt(g)));var w;z&&b.useNativeClamp?(e.overflow="hidden",e.textOverflow="ellipsis",e.webkitBoxOrient="vertical",e.display="-webkit-box",e.webkitLineClamp=g,v&&(e.height=b.clamp+"px")):(e=x(g),e<=c.clientHeight&&(w=p(l(c),e)));return{original:y,clamped:w}}})();

57
js/scripts.js
View File

@@ -23,6 +23,7 @@
const desktophomemargin = $(".header-1")[0].getBoundingClientRect().width const desktophomemargin = $(".header-1")[0].getBoundingClientRect().width
// height of scrollbar at bottom // height of scrollbar at bottom
const bottomScrollHeight = (_ => { const bottomScrollHeight = (_ => {
if (wih / vh > 1.5) { if (wih / vh > 1.5) {
@@ -43,7 +44,7 @@
vh: vh, vh: vh,
bottomScrollHeight: bottomScrollHeight bottomScrollHeight: bottomScrollHeight
} }
//console.log(cssWidths) console.log(cssWidths)
/* --------------------------- css values to vars --------------------------- */ /* --------------------------- css values to vars --------------------------- */
@@ -59,6 +60,8 @@
} }
})() })()
const isTablet = (!isMobile && (wow < 1024 || wiw < 1024)) ? true : false
/** /**
* Checks if body has a class * Checks if body has a class
* @param {string} classname The class to check * @param {string} classname The class to check
@@ -96,11 +99,10 @@
//isSingle //isSingle
const isSingle = bodyHasClass('single') const isSingle = bodyHasClass('single')
// Masonrypage: archive, home or search results
var isMasonryPage = isArchive || isHome || isSearch var isMasonryPage = isArchive || isHome || isSearch
/* ========================================================================== */ /* ========================================================================== */
/* FUNCTIONS */ /* FUNCTIONS */
/* ========================================================================== */ /* ========================================================================== */
@@ -147,7 +149,7 @@
}) })
} else { } else {
//if it's closed open: //if it's closed open:
bar.show().stop().animate({ width: wiw - (desktophomemargin * 3) }, 400, function () { bar.show().stop().animate({ width: wiw - (desktophomemargin * 2) }, 400, function () {
bar.addClass("opensearch") bar.addClass("opensearch")
$(".search-input").focus() $(".search-input").focus()
}) })
@@ -165,6 +167,9 @@
if (!isMobile) { if (!isMobile) {
menuWidth = 500 menuWidth = 500
} }
if (isTablet) {
menuWidth = 350
}
$("#sidebar").simplerSidebar({ $("#sidebar").simplerSidebar({
@@ -207,8 +212,8 @@
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
/* ----------------------------------- css ---------------------------------- */
/* ----------------------------- css on desktop ----------------------------- */
if (!isMobile) { if (!isMobile) {
if (isMasonryPage) { if (isMasonryPage) {
@@ -634,11 +639,17 @@
/* ------------------------------ hover on home ----------------------------- */ /* ------------------------------ hover on home ----------------------------- */
var bigMetadataHeight
//hover on big articles //hover on big articles
$(".home-big h2 a").hover(function () { $(".home-big h2 a").hover(function () {
let cc = $(this) let cc = $(this)
let cArticle = cc.parents("article") let cArticle = cc.parents("article")
let cMetadata = cArticle.children(".metadata") let cMetadata = cArticle.children(".metadata")
if (!bigMetadataHeight) {
bigMetadataHeight = cMetadata[0].getBoundingClientRect().height
}
//add hovered class //add hovered class
cArticle.addClass("hovered") cArticle.addClass("hovered")
@@ -676,7 +687,7 @@
cMetadata.children(".alcim, .bevezeto").addClass("transparent") cMetadata.children(".alcim, .bevezeto").addClass("transparent")
//animate height change //animate height change
cMetadata.stop().animate({ height: "10rem" }, 400, _ => { cMetadata.stop().animate({ height: bigMetadataHeight }, 400, _ => {
//hide and show metadata //hide and show metadata
cMetadata.children(".alcim, .bevezeto").hide().removeClass("transparent") cMetadata.children(".alcim, .bevezeto").hide().removeClass("transparent")
cMetadata.children(".categories, .postedon").removeClass("transparent").show() cMetadata.children(".categories, .postedon").removeClass("transparent").show()
@@ -741,6 +752,13 @@
}, ".home-small a.thumbnailwrapper") }, ".home-small a.thumbnailwrapper")
/* ------------------------------- no results ------------------------------- */
if (isMasonryPage && $("article").hasClass('no-result')) {
$('body').addClass("no-result")
}
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
/* EVENTS - ESEMÉNYEK */ /* EVENTS - ESEMÉNYEK */
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
@@ -818,6 +836,12 @@
if (isSingle) { if (isSingle) {
/* ---------------------------- wrap figcaptions --------------------------- */
$("figcaption").wrapInner("<span></span>")
/* ----------------------------- images, gallery ---------------------------- */ /* ----------------------------- images, gallery ---------------------------- */
@@ -880,15 +904,18 @@
/* ---------------------------- hover and click on related ---------------------------- */ /* ---------------------------- hover and click on related ---------------------------- */
$(document).on({ $(document).on({
mouseenter: function () { mouseenter: function () {
if (!Modernizr.touchevents) { if (!Modernizr.touchevents) {
showTitle(this) let wrapper = $(this).children(".relatedWrapper")
showTitle(wrapper)
} }
}, },
mouseleave: function () { mouseleave: function () {
if (!Modernizr.touchevents) { if (!Modernizr.touchevents) {
hideTitle(this) let wrapper = $(this).children(".relatedWrapper")
hideTitle(wrapper)
} }
} }
}, '#related_posts li'); }, '#related_posts li');
@@ -897,19 +924,15 @@
$(document).on({ $(document).on({
'touchend': function (e) { 'touchend': function (e) {
e.preventDefault() e.preventDefault()
var art = $(this).parents("li") var art = $(this).parents("li").children(".relatedWrapper")
var metadata = art.children(".metadata") hideTitle($(".vis").parents(".relatedWrapper"))
if (metadata.hasClass("vis")) { showTitle(art)
hideTitle(art)
} else {
hideTitle($(".vis").parents("li"))
showTitle(art)
}
} }
}, "#related_posts li a.related_thumbnailwrapper") }, "#related_posts li a.related_thumbnailwrapper")
//click on related //click on related
$('#related_posts li').click(function () { $('#related_posts li .relatedWrapper').click(function () {
let href = $(this).children('a.related_thumbnailwrapper').attr("href") let href = $(this).children('a.related_thumbnailwrapper').attr("href")
window.open(href, "_self") window.open(href, "_self")
}) })

2
loop.php
View File

@@ -12,7 +12,7 @@
<?php else: ?> <?php else: ?>
<!-- article --> <!-- article -->
<article> <article class="no-result">
<h2><?php _e('Sorry, nothing to display.', 'dis2019');?></h2> <h2><?php _e('Sorry, nothing to display.', 'dis2019');?></h2>
</article> </article>
<!-- /article --> <!-- /article -->

48
sass/_font-mixins.scss
View File

@@ -10,6 +10,9 @@
&:hover { &:hover {
color: #fff; color: #fff;
} }
@media #{$tablet} {
font-size: 1.4rem;
}
@media #{$smalldesktop} { @media #{$smalldesktop} {
font-size: 2.5rem; font-size: 2.5rem;
} }
@@ -60,10 +63,12 @@
@mixin home-title-small { @mixin home-title-small {
//small titles on desktop on home and archives //small titles on desktop on home and archives
@media #{$tablet} {
font-size: 1.3rem;
color: #000;
}
@media #{$smalldesktop} { @media #{$smalldesktop} {
font-size: 1.5rem; font-size: 1.5rem;
//-webkit-text-stroke: #000 1px;
color: #000;
} }
@media #{$bigdesktop} { @media #{$bigdesktop} {
font-size: 2rem; font-size: 2rem;
@@ -98,9 +103,10 @@
} }
} }
@mixin home-metadata-big { @mixin home-metadata-big {
@media #{$tablet} {
font-size: 1.2rem;
}
@media #{$smalldesktop} { @media #{$smalldesktop} {
font-size: 2rem; font-size: 2rem;
} }
@@ -121,6 +127,9 @@
&.current { &.current {
color: #000 !important; color: #000 !important;
} }
@media #{$tablet} {
font-size: 1rem;
}
@media #{$smalldesktop} { @media #{$smalldesktop} {
font-size: 1.2rem; font-size: 1.2rem;
} }
@@ -129,41 +138,28 @@
} }
} }
// @mixin bedo-hover-title {
// font: 900 12rem "Westeinde Caption";
// color: transparent;
// -webkit-text-stroke: #fff 1px;
// text-transform: uppercase;
// }
// @mixin bedo-hover-sub {
// font: 900 1.4rem "Westeinde Caption";
// color: #fff;
// }
@mixin single-title { @mixin single-title {
font: 800 3rem "Butler"; font: 800 3rem "Butler";
color: #000; color: #000;
@media #{$tablet} {
font-size: 3.5rem;
}
@media #{$smalldesktop} { @media #{$smalldesktop} {
font-size: 5rem; font-size: 5rem;
} }
} }
// @mixin single-title2 {
// font: bold 3rem "Butler";
// color: #000;
// @media #{$smalldesktop} {
// font-size: 5rem;
// }
// }
@mixin single-metadata { @mixin single-metadata {
font: bold 1.4rem "Westeinde Caption"; font: bold 1.4rem "Westeinde Caption";
@media #{$smalldesktop} { @media #{$tablet} {
font: 900 2rem "Westeinde Caption"; font: 900 1.5rem "Westeinde Caption";
color: #fff; color: #fff;
-webkit-text-stroke: #000 1px; -webkit-text-stroke: #000 1px;
} }
@media #{$smalldesktop} {
font-size: 2rem;
}
} }
@mixin single-author { @mixin single-author {

441
sass/base.scss
View File

@@ -90,18 +90,21 @@ $only-mobile: only screen and
); );
$tablet: only screen and $tablet: only screen and
(
min-width: 512px
);
$smalldesktop: only screen and
( (
min-width: 769px min-width: 769px
); );
$smalldesktop: only screen and
(
min-width: 1024px
);
$mobile-landscape: only screen and $mobile-landscape: only screen and
( (
min-width: 769px min-width: 769px
) )
and (-webkit-min-device-pixel-ratio: 2.1); and (-webkit-min-device-pixel-ratio: 2.1);
$bigdesktop: only screen and $bigdesktop: only screen and
( (
min-width: 1279px min-width: 1279px
@@ -120,7 +123,9 @@ $verybigdesktop: only screen and
$h-unit-5: 25rem; $h-unit-5: 25rem;
$h-unit-4: 20rem; $h-unit-4: 20rem;
$h-unit-2: 10rem; // menuwidth on desktop $h-unit-2: 10rem; // menuwidth on desktop
$h-unit-1-5: 7.5rem;
$h-unit-1: 5rem; $h-unit-1: 5rem;
$h-unit-0-5: 2.5rem;
//vertical units: //vertical units:
$v-unit-1: 4rem; $v-unit-1: 4rem;
@@ -312,7 +317,7 @@ $v-unit-6: 24rem;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
z-index: 3000; z-index: 3000;
@media #{$smalldesktop} { @media #{$tablet} {
height: 0; height: 0;
position: relative; position: relative;
width: 0; width: 0;
@@ -327,8 +332,8 @@ $v-unit-6: 24rem;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
line-height: 0; line-height: 0;
@media #{$smalldesktop} { @media #{$tablet} {
width: $h-unit-2; width: $h-unit-1-5;
position: fixed; position: fixed;
top: 0; top: 0;
height: 100vh; height: 100vh;
@@ -347,6 +352,9 @@ $v-unit-6: 24rem;
filter: invert(100); filter: invert(100);
} }
} }
@media #{$smalldesktop} {
width: $h-unit-2;
}
div { div {
z-index: 3500; z-index: 3500;
} }
@@ -359,7 +367,7 @@ $v-unit-6: 24rem;
justify-content: space-between; justify-content: space-between;
flex: 1 1 auto; flex: 1 1 auto;
padding: 2rem 0 2rem 2rem; padding: 2rem 0 2rem 2rem;
@media #{$smalldesktop} { @media #{$tablet} {
border-right: #000 1px solid; border-right: #000 1px solid;
} }
} }
@@ -368,7 +376,7 @@ $v-unit-6: 24rem;
justify-content: flex-end; justify-content: flex-end;
flex: 0 1 auto; flex: 0 1 auto;
padding: 2rem 2rem 2rem 0; padding: 2rem 2rem 2rem 0;
@media #{$smalldesktop} { @media #{$tablet} {
order: 99; order: 99;
border-left: #000 1px solid; border-left: #000 1px solid;
right: 0; right: 0;
@@ -380,7 +388,7 @@ $v-unit-6: 24rem;
bottom: 1rem; bottom: 1rem;
right: 1rem; right: 1rem;
z-index: 2; z-index: 2;
@media #{$smalldesktop} { @media #{$tablet} {
display: none; display: none;
} }
a { a {
@@ -395,32 +403,40 @@ $v-unit-6: 24rem;
} }
} }
//icons in menu:
object { object {
height: 3rem; height: 3rem;
@media #{$tablet} {
height: 2.5rem;
}
@media #{$smalldesktop} {
height: 3rem;
}
} }
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
/* header elements */ /* header elements */
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
@media #{$smalldesktop} { @media #{$tablet} {
.header-1 > div, .header-1 > div,
.header-2 > div { .header-2 > div {
flex: 0 0 $h-unit-1 !important; flex: 0 0 $h-unit-1 !important;
} }
} }
// dis logo size:
.logo { .logo {
object { object {
height: $h-unit-1; height: $h-unit-1;
@media #{$tablet} {
height: 4rem;
}
@media #{$smalldesktop} {
height: $h-unit-1;
}
} }
} }
// .events-link {
// display: block;
// @media #{$smalldesktop} {
// display: block;
// }
// }
.menubutton { .menubutton {
$speed: 0.5s; $speed: 0.5s;
@@ -429,21 +445,19 @@ $v-unit-6: 24rem;
order: 99; order: 99;
z-index: 3001; z-index: 3001;
// @media #{$smalldesktop} {
// }
button { button {
transform-origin: center; transform-origin: center;
@include transition($speed $easing); @include transition($speed $easing);
&.rotated { &.rotated {
@include transform(rotate($degree)); @include transform(rotate($degree));
@media #{$smalldesktop} { @media #{$tablet} {
filter: invert(100); filter: invert(100);
} }
} }
} }
@media #{$smalldesktop} { @media #{$tablet} {
order: unset; order: unset;
} }
} }
@@ -454,7 +468,7 @@ $v-unit-6: 24rem;
&.hidden { &.hidden {
display: none !important; display: none !important;
} }
@media #{$smalldesktop} { @media #{$tablet} {
margin: 0; margin: 0;
} }
} }
@@ -496,7 +510,7 @@ $v-unit-6: 24rem;
/* ----------------------------- search desktop ----------------------------- */ /* ----------------------------- search desktop ----------------------------- */
@media #{$smalldesktop} { @media #{$tablet} {
.search-box { .search-box {
display: block; display: block;
flex: 1 1 0 !important; flex: 1 1 0 !important;
@@ -506,7 +520,10 @@ $v-unit-6: 24rem;
display: none; display: none;
position: fixed; position: fixed;
width: 0; width: 0;
left: $h-unit-2; left: $h-unit-1-5;
@media #{$smalldesktop} {
left: $h-unit-2;
}
bottom: 0; bottom: 0;
height: $h-unit-2; height: $h-unit-2;
form.search { form.search {
@@ -540,7 +557,7 @@ $v-unit-6: 24rem;
padding-top: 9rem !important; padding-top: 9rem !important;
background-color: #000; background-color: #000;
@media #{$smalldesktop} { @media #{$tablet} {
padding: 0 !important; padding: 0 !important;
} }
.sidebar-wrapper { .sidebar-wrapper {
@@ -549,7 +566,7 @@ $v-unit-6: 24rem;
overflow: auto; overflow: auto;
padding: 0 $v-unit-1; padding: 0 $v-unit-1;
padding-bottom: $v-unit-1; padding-bottom: $v-unit-1;
@media #{$smalldesktop} { @media #{$tablet} {
padding: $v-unit-1; padding: $v-unit-1;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -557,7 +574,7 @@ $v-unit-6: 24rem;
} }
.menuseparator { .menuseparator {
display: none; display: none;
@media #{$smalldesktop} { @media #{$tablet} {
display: block; display: block;
width: 1px; width: 1px;
height: 70%; height: 70%;
@@ -572,7 +589,7 @@ $v-unit-6: 24rem;
margin-inline-start: 0; margin-inline-start: 0;
margin-inline-end: 0px; margin-inline-end: 0px;
padding-inline-start: 0; padding-inline-start: 0;
@media #{$smalldesktop} { @media #{$tablet} {
flex: 1 1 50%; flex: 1 1 50%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -584,6 +601,9 @@ $v-unit-6: 24rem;
li { li {
display: block; display: block;
padding-top: 2rem; padding-top: 2rem;
@media #{$tablet} {
padding: 1rem 0;
}
@media #{$smalldesktop} { @media #{$smalldesktop} {
padding: 2rem 0; padding: 2rem 0;
} }
@@ -603,14 +623,14 @@ $v-unit-6: 24rem;
position: fixed; position: fixed;
right: calc(#{$h-unit-4} + 4px); right: calc(#{$h-unit-4} + 4px);
top: calc(#{$v-unit-1}/ 2); // this is the top position of the circle!!! top: calc(#{$v-unit-1}/ 2); // this is the top position of the circle!!!
@media #{$smalldesktop} { @media #{$tablet} {
top: 1rem; top: 1rem;
} }
@media #{$bigdesktop} { @media #{$bigdesktop} {
top: 0.5rem; top: 0.5rem;
} }
z-index: 1000; z-index: 1000;
@media #{$smalldesktop} { @media #{$tablet} {
display: block; display: block;
} }
ul { ul {
@@ -624,7 +644,7 @@ $v-unit-6: 24rem;
height: calc(#{$v-unit-1}/ 2); //height of circle -> radius of circle!! height: calc(#{$v-unit-1}/ 2); //height of circle -> radius of circle!!
// line-height: calc(#{$v-unit-1}/ 2); // line-height: calc(#{$v-unit-1}/ 2);
width: 1rem; width: 1rem;
@media #{$smalldesktop} { @media #{$tablet} {
height: 3rem; height: 3rem;
// line-height: 5rem; // line-height: 5rem;
} }
@@ -681,7 +701,7 @@ $v-unit-6: 24rem;
/* -------------------------------- load more ------------------------------- */ /* -------------------------------- load more ------------------------------- */
.misha_loadmore { .misha_loadmore {
@media #{$smalldesktop} { @media #{$tablet} {
min-width: $h-unit-2; min-width: $h-unit-2;
width: calc(100vw - ((100vh - #{$v-unit-2}) / 2 * 3) - #{$h-unit-4}); width: calc(100vw - ((100vh - #{$v-unit-2}) / 2 * 3) - #{$h-unit-4});
margin-right: $h-unit-2; margin-right: $h-unit-2;
@@ -695,7 +715,7 @@ $v-unit-6: 24rem;
a, a,
p { p {
@include home-more(); @include home-more();
@media #{$smalldesktop} { @media #{$tablet} {
transform-origin: center; transform-origin: center;
white-space: nowrap; white-space: nowrap;
width: 100vh; width: 100vh;
@@ -718,7 +738,7 @@ $v-unit-6: 24rem;
.archive, .archive,
.home, .home,
.search-results { .search-results {
@media #{$smalldesktop} { @media #{$tablet} {
overflow-y: hidden; overflow-y: hidden;
} }
} }
@@ -731,12 +751,12 @@ $v-unit-6: 24rem;
.archive, .archive,
.home, .home,
.search-results { .search-results {
@media #{$smalldesktop} { @media #{$tablet} {
// overflow-y: hidden; // overflow-y: hidden;
} }
.wrapper { .wrapper {
@media #{$smalldesktop} { @media #{$tablet} {
overflow-y: hidden; overflow-y: hidden;
@include fit-content(width); @include fit-content(width);
min-width: 100vw; min-width: 100vw;
@@ -746,7 +766,7 @@ $v-unit-6: 24rem;
.header { .header {
.header-scroll { .header-scroll {
@media #{$smalldesktop} { @media #{$tablet} {
display: block; display: block;
position: fixed; position: fixed;
height: 100vh; height: 100vh;
@@ -755,13 +775,19 @@ $v-unit-6: 24rem;
top: 0; top: 0;
} }
&.header-scroll-left { &.header-scroll-left {
left: $h-unit-2; left: $h-unit-1-5;
@media #{$smalldesktop} {
left: $h-unit-2;
}
button { button {
cursor: url("../img/arrow-black-left.png"), w-resize; cursor: url("../img/arrow-black-left.png"), w-resize;
} }
} }
&.header-scroll-right { &.header-scroll-right {
right: $h-unit-2; right: $h-unit-1-5;
@media #{$smalldesktop} {
right: $h-unit-2;
}
button { button {
cursor: url("../img/arrow-black-right.png"), e-resize; cursor: url("../img/arrow-black-right.png"), e-resize;
} }
@@ -775,13 +801,13 @@ $v-unit-6: 24rem;
} }
main { main {
@media #{$smalldesktop} { @media #{$tablet} {
height: 100vh; height: 100vh;
@include fit-content(width); @include fit-content(width);
position: relative; position: relative;
} }
section { section {
@media #{$smalldesktop} { @media #{$tablet} {
//horizontal scrolling on desktop: //horizontal scrolling on desktop:
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -790,6 +816,11 @@ $v-unit-6: 24rem;
@include fit-content(width); @include fit-content(width);
} }
/* ------------------------- archivetitle on mobile ------------------------- */
.archivetitle {
padding: 8rem 2rem 0;
}
/* --------------------------- home article mobile/default -------------------------- */ /* --------------------------- home article mobile/default -------------------------- */
article { article {
@@ -857,18 +888,22 @@ $v-unit-6: 24rem;
/* ------------------------ home article desktop big ------------------------ */ /* ------------------------ home article desktop big ------------------------ */
/* ------------------------------------ - ----------------------------------- */ /* ------------------------------------ - ----------------------------------- */
@media #{$smalldesktop} { @media #{$tablet} {
//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; border-right: #000 1px solid;
article { article {
position: relative; position: relative;
width: calc(100vw - (#{$h-unit-2} * 3)); width: calc(100vw - (#{$h-unit-1-5} * 3));
height: calc(100vh - #{$v-unit-1}); height: calc(100vh - #{$v-unit-1});
margin: 0; margin: 0;
padding: 0; padding: 0;
margin-left: $h-unit-2; margin-left: $h-unit-1-5;
@media #{$smalldesktop} {
width: calc(100vw - (#{$h-unit-2} * 3));
margin-left: $h-unit-2;
}
margin-top: $v-unit-1; margin-top: $v-unit-1;
border-top: 1px #000 solid; border-top: 1px #000 solid;
@@ -892,7 +927,7 @@ $v-unit-6: 24rem;
h2 { h2 {
height: unset; height: unset;
position: absolute; position: absolute;
top: 4rem; top: 0;
padding: 4rem; padding: 4rem;
padding-right: 2rem; padding-right: 2rem;
width: calc(100vw - #{$h-unit-5}); width: calc(100vw - #{$h-unit-5});
@@ -903,7 +938,10 @@ $v-unit-6: 24rem;
bottom: 0; bottom: 0;
background: transparent; background: transparent;
width: 100%; width: 100%;
height: #{$h-unit-2}; height: #{$h-unit-1-5};
@media #{$smalldesktop} {
height: #{$h-unit-2};
}
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -977,14 +1015,21 @@ $v-unit-6: 24rem;
display: block; display: block;
right: 0; right: 0;
top: 0; top: 0;
height: ($h-unit-1 + $h-unit-2); height: ($h-unit-2);
width: ($h-unit-1 + $h-unit-2)/2; width: ($h-unit-2)/2;
object { object {
height: ($h-unit-1 + $h-unit-2); height: ($h-unit-2);
position: absolute; position: absolute;
right: 0; right: 0;
top: calc(-50% + 0.5px); top: calc(-50% + 0.5px);
} }
@media #{$smalldesktop} {
height: ($h-unit-1 + $h-unit-2);
width: ($h-unit-1 + $h-unit-2)/2;
object {
height: ($h-unit-1 + $h-unit-2);
}
}
} }
} //metadata end } //metadata end
@@ -1013,7 +1058,7 @@ $v-unit-6: 24rem;
} }
&.home_wrapper-2 { &.home_wrapper-2 {
article { article {
border-left: #000 1px solid; // border-left: #000 1px solid;
.metadata { .metadata {
justify-content: flex-end; justify-content: flex-end;
@@ -1036,25 +1081,38 @@ $v-unit-6: 24rem;
/* ----------------------- home articles desktop small ----------------------- */ /* ----------------------- home articles desktop small ----------------------- */
@media #{$smalldesktop} { @media #{$tablet} {
.home_wrapper-small { .home_wrapper-small {
max-width: calc(100vw - (#{$h-unit-2} * 3));
max-height: calc((100vw - (#{$h-unit-2} * 3)) / 3 * 2);
height: calc(100vh - #{$v-unit-2}); height: calc(100vh - #{$v-unit-2});
width: calc((100vh - #{$v-unit-2}) / 2 * 3); width: calc((100vh - #{$v-unit-2}) / 2 * 3);
max-width: calc(100vw - (#{$h-unit-1-5} * 3));
max-height: calc((100vw - (#{$h-unit-1-5} * 3)) / 3 * 2);
@media #{$smalldesktop} {
max-width: calc(100vw - (#{$h-unit-2} * 3));
max-height: calc((100vw - (#{$h-unit-2} * 3)) / 3 * 2);
}
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
margin: auto 0; margin: auto 0;
&.home_wrapper-s1:not(.home_wrapper-1) { &.home_wrapper-s1:not(.home_wrapper-1) {
margin-left: $h-unit-1; margin-left: $h-unit-1-5 / 2;
@media #{$smalldesktop} {
margin-left: $h-unit-1;
}
} }
&.home_wrapper-s1.home_wrapper-small.home_wrapper-1 { &.home_wrapper-s1.home_wrapper-small.home_wrapper-1 {
margin-left: $h-unit-2; margin-left: $h-unit-1-5;
@media #{$smalldesktop} {
margin-left: $h-unit-2;
}
} }
&:last-child { &:last-child {
margin-right: $h-unit-2; margin-right: $h-unit-1-5;
@media #{$smalldesktop} {
margin-right: $h-unit-2;
}
} }
article, article,
@@ -1076,7 +1134,10 @@ $v-unit-6: 24rem;
.metadata { .metadata {
width: 100%; width: 100%;
min-width: unset; min-width: unset;
height: $h-unit-1; height: $h-unit-0-5;
@media #{$smalldesktop} {
height: $h-unit-1;
}
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@@ -1089,9 +1150,14 @@ $v-unit-6: 24rem;
padding: 0; padding: 0;
justify-content: space-between; justify-content: space-between;
align-items: stretch; align-items: stretch;
@include triangle-corner-bordered(#{$h-unit-1}, 0, transparent, #000, left);
display: none; display: none;
@include triangle-corner-bordered(#{$h-unit-0-5}, 0, transparent, #000, left);
@media #{$smalldesktop} {
@include triangle-corner-bordered(#{$h-unit-1}, 0, transparent, #000, left);
}
@media #{$verybigdesktop} { @media #{$verybigdesktop} {
height: $h-unit-2; height: $h-unit-2;
@include triangle-corner-bordered(#{$h-unit-2}, 0, transparent, #000, left); @include triangle-corner-bordered(#{$h-unit-2}, 0, transparent, #000, left);
@@ -1113,16 +1179,27 @@ $v-unit-6: 24rem;
justify-content: center; justify-content: center;
} }
.categories { .categories {
margin-left: $h-unit-1; margin-left: $h-unit-0-5;
@media #{$smalldesktop} {
margin-left: $h-unit-1;
}
@media #{$verybigdesktop} { @media #{$verybigdesktop} {
margin-left: $h-unit-2; margin-left: $h-unit-2;
} }
padding-right: $v-unit-1 / 4;
// padding: $v-unit-1 / 3 0; padding-right: $v-unit-1 / 8;
@media #{$smalldesktop} {
padding-right: $v-unit-1 / 4;
}
flex: 1 0 auto; flex: 1 0 auto;
} }
.postedon { .postedon {
padding: 0 $v-unit-1 / 4; padding: 0 $v-unit-1 / 8;
@media #{$smalldesktop} {
padding: 0 $v-unit-1 / 4;
}
flex: 1 0 auto; flex: 1 0 auto;
} }
} }
@@ -1141,10 +1218,17 @@ $v-unit-6: 24rem;
padding: 0; padding: 0;
a { a {
margin-top: $h-unit-1 / 2; margin-top: $h-unit-0-5 / 2;
margin-right: $v-unit-1 / 2; margin-right: $v-unit-1 / 4;
margin-bottom: $h-unit-1 + $v-unit-1 / 2; margin-bottom: $h-unit-0-5 + $v-unit-1 / 8;
margin-left: $h-unit-1; margin-left: $h-unit-0-5;
@media #{$smalldesktop} {
margin-top: $h-unit-0-5;
margin-right: $v-unit-1 / 2;
margin-bottom: $h-unit-1 + $v-unit-1 / 2;
margin-left: $h-unit-1;
}
@media #{$bigdesktop} { @media #{$bigdesktop} {
margin-right: $v-unit-1 / 4; margin-right: $v-unit-1 / 4;
@@ -1224,6 +1308,54 @@ $v-unit-6: 24rem;
} }
} //section end } //section end
} //main end } //main end
/* -------------------------- no results on mobile -------------------------- */
&.no-result {
.wrapper {
height: unset;
header {
background-color: #000;
}
#content {
.archivetitle {
padding: 8rem 2rem 0;
}
article.no-result {
height: unset;
}
}
}
/* -------------------------- no results on desktop ------------------------- */
@media #{$tablet} {
main {
width: 100vw;
section#content {
width: 100%;
.home_wrapper-1 {
position: relative;
width: calc(100% - #{$h-unit-1-5 * 2});
max-width: unset;
.archivetitle {
border-bottom: 1px #000 solid;
border-right: none;
padding: 1rem 2rem !important;
margin-left: 0;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: transparent;
}
}
}
}
}
}
} //home, archive, search end } //home, archive, search end
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
@@ -1243,12 +1375,12 @@ $v-unit-6: 24rem;
.search-no-results { .search-no-results {
main { main {
@media #{$smalldesktop} { @media #{$tablet} {
padding: 0 $h-unit-4; padding: 0 $h-unit-4;
.archivetitle h1, // .archivetitle h1,
article h2 { // article h2 {
} // }
} }
} }
} }
@@ -1337,7 +1469,7 @@ body.category.category-esemeny {
} }
/* ---------------------------- Events on desktop --------------------------- */ /* ---------------------------- Events on desktop --------------------------- */
@media #{$smalldesktop} { @media #{$tablet} {
main { main {
padding-top: 0; padding-top: 0;
section { section {
@@ -1415,7 +1547,7 @@ body.category.category-esemeny {
.single, .single,
.page { .page {
//no menus on single //no menus on single
@media #{$smalldesktop} { @media #{$tablet} {
.wrapper { .wrapper {
height: unset; height: unset;
width: 100%; width: 100%;
@@ -1510,7 +1642,7 @@ body.category.category-esemeny {
/* ---------------------------- single header on desktop --------------------------- */ /* ---------------------------- single header on desktop --------------------------- */
@media #{$smalldesktop} { @media #{$tablet} {
min-height: calc(100vh - #{$h-unit-2}); min-height: calc(100vh - #{$h-unit-2});
margin-top: 100vh; margin-top: 100vh;
margin-left: $h-unit-1; margin-left: $h-unit-1;
@@ -1589,14 +1721,14 @@ body.category.category-esemeny {
} }
&.content-begin { &.content-begin {
margin-top: $padd; margin-top: $padd;
@media #{$smalldesktop} { @media #{$tablet} {
margin-top: 0 !important; margin-top: 0 !important;
} }
} }
&.content-end { &.content-end {
margin-top: $padd * 2; margin-top: $padd * 2;
margin-bottom: 0; margin-bottom: 0;
@media #{$smalldesktop} { @media #{$tablet} {
margin-top: $padd; margin-top: $padd;
margin-bottom: $padd; margin-bottom: $padd;
} }
@@ -1615,7 +1747,7 @@ body.category.category-esemeny {
.single-content { .single-content {
position: relative; position: relative;
padding: $padd; padding: $padd;
@media #{$smalldesktop} { @media #{$tablet} {
top: -#{$h-unit-1}; top: -#{$h-unit-1};
@include singleDesktopLayout(); @include singleDesktopLayout();
} }
@@ -1673,7 +1805,7 @@ body.category.category-esemeny {
margin: $padd 0; margin: $padd 0;
position: relative !important; position: relative !important;
@media #{$smalldesktop} { @media #{$tablet} {
padding: 0; padding: 0;
} }
@@ -1695,13 +1827,22 @@ body.category.category-esemeny {
margin: $padd 0; margin: $padd 0;
li { li {
margin-right: 0; margin-right: 0;
@media #{$smalldesktop} { @media #{$tablet} {
margin-bottom: $v-unit-1; margin-bottom: $v-unit-1;
} }
&:nth-child(odd) figcaption::after { &:nth-child(odd) figcaption {
@include trianglecorner(topright, #{$h-unit-1}); @media #{$tablet} {
padding-right: 0;
}
&::after {
@include trianglecorner(topright, #{$h-unit-1});
}
} }
&:nth-child(even) figcaption { &:nth-child(even) figcaption {
@media #{$tablet} {
padding-left: 0;
}
right: 0; right: 0;
top: 0; top: 0;
&::after { &::after {
@@ -1720,7 +1861,19 @@ body.category.category-esemeny {
width: calc(100% - #{$h-unit-1}); width: calc(100% - #{$h-unit-1});
height: $h-unit-1; height: $h-unit-1;
padding: 1rem $padd; padding: 1rem $padd;
margin: 0;
@media #{$tablet} {
width: calc(100% - #{$h-unit-0-5});
height: $h-unit-0-5;
padding: 0.5rem ($padd / 2);
}
@media #{$smalldesktop} {
width: calc(100% - #{$h-unit-1});
height: $h-unit-1;
padding: 1rem $padd;
}
margin: auto 0;
bottom: unset; bottom: unset;
@include captiontext(); @include captiontext();
line-height: 1; line-height: 1;
@@ -1730,10 +1883,18 @@ body.category.category-esemeny {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
z-index: 1; z-index: 1;
@media #{$smalldesktop} { align-content: stretch;
span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
@media #{$tablet} {
display: none; display: none;
&.vis { &.vis {
display: block; display: flex;
} }
} }
} }
@@ -1744,8 +1905,9 @@ body.category.category-esemeny {
.alignedWrapper { .alignedWrapper {
position: relative; position: relative;
@media #{$smalldesktop} { @media #{$tablet} {
max-width: 50%; max-width: 50%;
@include fit-content(width); @include fit-content(width);
&.alignleftWrapper { &.alignleftWrapper {
padding-right: $padd; padding-right: $padd;
@@ -1759,31 +1921,20 @@ body.category.category-esemeny {
.alignleft, .alignleft,
.alignright { .alignright {
margin: 0; margin: 0;
//no align on mobile
position: relative; position: relative;
// @media #{$only-mobile} {
float: unset; float: unset;
// }
@media #{$smalldesktop} { @media #{$tablet} {
width: auto; width: auto;
// max-width: 50%; }
img {
// @media #{$smalldesktop} { height: auto;
// &.alignleft {
// padding-right: $padd;
// }
// &.alignright {
// padding-left: $padd;
// }
// }
} }
} }
} }
} }
.authors { .authors {
// @include single-h4();
@include single-author(); @include single-author();
color: #000; color: #000;
-webkit-text-stroke: 0px; -webkit-text-stroke: 0px;
@@ -1806,7 +1957,7 @@ body.category.category-esemeny {
} }
#colorbox { #colorbox {
z-index: 12; z-index: 12;
@media #{$smalldesktop} { @media #{$tablet} {
z-index: 3150; z-index: 3150;
} }
&:focus { &:focus {
@@ -1838,7 +1989,7 @@ body.category.category-esemeny {
bottom: -5rem; bottom: -5rem;
filter: invert(100); filter: invert(100);
z-index: 14; z-index: 14;
@media #{$smalldesktop} { @media #{$tablet} {
position: fixed; position: fixed;
top: 50%; top: 50%;
z-index: 3200; z-index: 3200;
@@ -1847,13 +1998,13 @@ body.category.category-esemeny {
&#cboxPrevious { &#cboxPrevious {
left: 1rem; left: 1rem;
@include transform(scaleX(-1)); @include transform(scaleX(-1));
@media #{$smalldesktop} { @media #{$tablet} {
left: $v-unit-1; left: $v-unit-1;
} }
} }
&#cboxNext { &#cboxNext {
right: 1rem; right: 1rem;
@media #{$smalldesktop} { @media #{$tablet} {
right: $v-unit-1; right: $v-unit-1;
} }
} }
@@ -1864,7 +2015,7 @@ body.category.category-esemeny {
@include transform(rotate(45deg)); @include transform(rotate(45deg));
top: -3rem; top: -3rem;
right: 1rem; right: 1rem;
@media #{$smalldesktop} { @media #{$tablet} {
position: fixed; position: fixed;
right: $v-unit-1; right: $v-unit-1;
top: $v-unit-1; top: $v-unit-1;
@@ -1892,7 +2043,7 @@ body.category.category-esemeny {
} }
} }
.toHome { .toHome {
@media #{$smalldesktop} { @media #{$tablet} {
position: relative; position: relative;
padding-top: $padd * 2; padding-top: $padd * 2;
top: -#{$h-unit-1}; top: -#{$h-unit-1};
@@ -1916,11 +2067,7 @@ body.category.category-esemeny {
display: block; display: block;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
// .relatedcontent {
// height: 50vw;
// padding: $padd;
//
// }
& > a { & > a {
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -1974,7 +2121,7 @@ body.category.category-esemeny {
} }
/* ------------------------ related posts on desktop ------------------------ */ /* ------------------------ related posts on desktop ------------------------ */
@media #{$smalldesktop} { @media #{$tablet} {
top: -#{$h-unit-1}; top: -#{$h-unit-1};
position: relative; position: relative;
padding-top: $padd * 2; padding-top: $padd * 2;
@@ -1987,11 +2134,20 @@ body.category.category-esemeny {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
height: calc((100vw - #{$v-unit-4}) / 3);
max-height: calc(1024px / 3);
li { li {
flex: 0 0 calc(100% / 3); width: calc(100% / 3);
height: calc((100vw - #{$v-unit-4}) / 3); padding-bottom: calc(100% / 3);
max-height: calc(1024px / 3);
position: relative; position: relative;
height: 0;
.relatedWrapper {
position: absolute;
height: 100%;
width: 100%;
}
.related_thumbnailwrapper { .related_thumbnailwrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -2005,7 +2161,6 @@ body.category.category-esemeny {
.metadata { .metadata {
width: 100%; width: 100%;
min-width: unset; min-width: unset;
height: $h-unit-1;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@@ -2018,7 +2173,18 @@ body.category.category-esemeny {
padding: 0; padding: 0;
justify-content: space-between; justify-content: space-between;
align-items: stretch; align-items: stretch;
height: $h-unit-1;
@include triangle-corner-bordered(#{$h-unit-1}, 0, transparent, #000, left); @include triangle-corner-bordered(#{$h-unit-1}, 0, transparent, #000, left);
@media #{$tablet} {
@include triangle-corner-bordered(#{$h-unit-0-5}, 0, transparent, #000, left);
height: $h-unit-0-5;
}
@media #{$smalldesktop} {
@include triangle-corner-bordered(#{$h-unit-1}, 0, transparent, #000, left);
height: $h-unit-1;
}
display: none; display: none;
&.vis { &.vis {
display: flex; display: flex;
@@ -2027,11 +2193,23 @@ body.category.category-esemeny {
.categories, .categories,
.postedon { .postedon {
@include home-metadata(); @include home-metadata();
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
} }
.categories { .categories {
margin-left: $v-unit-1 * 1.5;
padding: $v-unit-1 / 3 0; padding: $v-unit-1 / 3 0;
flex: 1 1 auto; flex: 1 1 auto;
margin-left: $v-unit-1 * 1.5;
@media #{$tablet} {
margin-left: $v-unit-1 / 2;
}
@media #{$smalldesktop} {
margin-left: $v-unit-1 * 1.5;
}
} }
.postedon { .postedon {
padding: $v-unit-1 / 3 $v-unit-1 / 4; padding: $v-unit-1 / 3 $v-unit-1 / 4;
@@ -2051,17 +2229,32 @@ body.category.category-esemeny {
background-color: #fff; background-color: #fff;
height: 100%; height: 100%;
padding-left: $v-unit-1; padding-left: $v-unit-1;
@media #{$tablet} {
padding-left: $h-unit-0-5;
}
@media #{$smalldesktop} {
padding-left: $v-unit-1;
}
@media #{$bigdesktop} { @media #{$bigdesktop} {
padding: $h-unit-1; padding: $h-unit-1;
} }
a { a {
bottom: $h-unit-1 + $v-unit-1 * 0.5;
width: calc(100% - #{$v-unit-2});
@include fit-content(height); @include fit-content(height);
position: absolute; position: absolute;
bottom: $h-unit-1 + $v-unit-1 * 0.5;
width: calc(100% - #{$v-unit-2});
@media #{$tablet} {
bottom: $h-unit-0-5 + $v-unit-1 / 4;
width: calc(100% - #{$v-unit-1});
}
@media #{$smalldesktop} {
bottom: $h-unit-1 + $v-unit-1 * 0.5;
width: calc(100% - #{$v-unit-2});
}
@media #{$bigdesktop} { @media #{$bigdesktop} {
width: calc(100% - #{$h-unit-2}); width: calc(100% - #{$h-unit-2});
} }
@@ -2075,7 +2268,7 @@ body.category.category-esemeny {
/* -------------------------------- page only------------------------------- */ /* -------------------------------- page only------------------------------- */
body.page { body.page {
@media #{$smalldesktop} { @media #{$tablet} {
article { article {
margin-top: $h-unit-2; margin-top: $h-unit-2;
} }
@@ -2109,7 +2302,7 @@ body.page {
color: $color !important; color: $color !important;
} }
@media #{$smalldesktop} { @media #{$tablet} {
&.home-big { &.home-big {
h2 a { h2 a {
color: $color; color: $color;
@@ -2156,7 +2349,7 @@ body.page {
//tagclip: filters on small articale images //tagclip: filters on small articale images
@mixin tagclip($tag) { @mixin tagclip($tag) {
@media #{$smalldesktop} { @media #{$tablet} {
.thumbnailwrapper > img { .thumbnailwrapper > img {
-webkit-mask: url(../img/clip/#{$tag}_desktop.svg); -webkit-mask: url(../img/clip/#{$tag}_desktop.svg);
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
@@ -2175,12 +2368,12 @@ body.page {
@mixin tagcolors-single($color, $darkcolor) { @mixin tagcolors-single($color, $darkcolor) {
.titlewrapper { .titlewrapper {
.metadata { .metadata {
@media #{$smalldesktop} { @media #{$tablet} {
// color: #fff !important; // color: #fff !important;
-webkit-text-stroke: $color 1px !important; -webkit-text-stroke: $color 1px !important;
} }
a { a {
@media #{$smalldesktop} { @media #{$tablet} {
color: #fff !important; color: #fff !important;
-webkit-text-stroke: $color 1px !important; -webkit-text-stroke: $color 1px !important;
&:hover { &:hover {

5
singular.php
View File

@@ -105,7 +105,10 @@
?> ?>
<li> <li>
<?php include( locate_template( 'loop-inner.php', false, false ) ); ?> <div class="relatedWrapper">
<?php include( locate_template( 'loop-inner.php', false, false ) ); ?>
</div>
</li> </li>
<?php <?php
} }