working on responsivity
This commit is contained in:
infeeeee
52
.vscode/globalsnippets.code-snippets
vendored
52
.vscode/globalsnippets.code-snippets
vendored
@@ -15,46 +15,8 @@
|
||||
// ],
|
||||
// "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": {
|
||||
"scope": "html,php",
|
||||
"prefix": "console_debug",
|
||||
@@ -62,13 +24,5 @@
|
||||
"console_debug($0);"
|
||||
],
|
||||
"description": "Log to js console"
|
||||
},
|
||||
"console.log": {
|
||||
"scope": "javascript",
|
||||
"prefix": "console.log",
|
||||
"body": [
|
||||
"console.log($0)"
|
||||
],
|
||||
"description": "console.log()"
|
||||
},
|
||||
}
|
||||
}
|
||||
10
_teendők.md
10
_teendők.md
@@ -2,6 +2,8 @@
|
||||
|
||||
og: tag: pluginnal!
|
||||
|
||||
Facebook like gomb
|
||||
|
||||
# Esemény oldal - ✔
|
||||
|
||||
# Kezdőlap
|
||||
@@ -36,3 +38,11 @@ vonalak néhol túlvékonyodik, vastagodik - egyenletlen
|
||||
!Nincs találat oldal, pl keresésnél
|
||||
|
||||
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{}`
|
||||
634
css/base.css
634
css/base.css
File diff suppressed because it is too large
Load Diff
@@ -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_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(
|
||||
'jquery',
|
||||
'conditionizr',
|
||||
@@ -132,6 +135,7 @@ function dis2019_header_scripts()
|
||||
'fittext',
|
||||
'jquery.colorbox',
|
||||
'lettering',
|
||||
// 'clamp',
|
||||
), '1.0.0'); // Custom scripts
|
||||
wp_enqueue_script('dis2019scripts'); // Enqueue it!
|
||||
}
|
||||
|
||||
12
js/lib/clamp.min.js
vendored
Normal file
12
js/lib/clamp.min.js
vendored
Normal 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}}})();
|
||||
@@ -23,6 +23,7 @@
|
||||
|
||||
const desktophomemargin = $(".header-1")[0].getBoundingClientRect().width
|
||||
|
||||
|
||||
// height of scrollbar at bottom
|
||||
const bottomScrollHeight = (_ => {
|
||||
if (wih / vh > 1.5) {
|
||||
@@ -43,7 +44,7 @@
|
||||
vh: vh,
|
||||
bottomScrollHeight: bottomScrollHeight
|
||||
}
|
||||
//console.log(cssWidths)
|
||||
console.log(cssWidths)
|
||||
|
||||
|
||||
/* --------------------------- css values to vars --------------------------- */
|
||||
@@ -59,6 +60,8 @@
|
||||
}
|
||||
})()
|
||||
|
||||
const isTablet = (!isMobile && (wow < 1024 || wiw < 1024)) ? true : false
|
||||
|
||||
/**
|
||||
* Checks if body has a class
|
||||
* @param {string} classname The class to check
|
||||
@@ -96,11 +99,10 @@
|
||||
//isSingle
|
||||
const isSingle = bodyHasClass('single')
|
||||
|
||||
// Masonrypage: archive, home or search results
|
||||
var isMasonryPage = isArchive || isHome || isSearch
|
||||
|
||||
|
||||
|
||||
|
||||
/* ========================================================================== */
|
||||
/* FUNCTIONS */
|
||||
/* ========================================================================== */
|
||||
@@ -147,7 +149,7 @@
|
||||
})
|
||||
} else {
|
||||
//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")
|
||||
$(".search-input").focus()
|
||||
})
|
||||
@@ -165,6 +167,9 @@
|
||||
if (!isMobile) {
|
||||
menuWidth = 500
|
||||
}
|
||||
if (isTablet) {
|
||||
menuWidth = 350
|
||||
}
|
||||
|
||||
$("#sidebar").simplerSidebar({
|
||||
|
||||
@@ -207,8 +212,8 @@
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
/* ----------------------------------- css ---------------------------------- */
|
||||
|
||||
/* ----------------------------- css on desktop ----------------------------- */
|
||||
|
||||
if (!isMobile) {
|
||||
if (isMasonryPage) {
|
||||
@@ -634,11 +639,17 @@
|
||||
|
||||
/* ------------------------------ hover on home ----------------------------- */
|
||||
|
||||
var bigMetadataHeight
|
||||
|
||||
//hover on big articles
|
||||
$(".home-big h2 a").hover(function () {
|
||||
let cc = $(this)
|
||||
let cArticle = cc.parents("article")
|
||||
let cMetadata = cArticle.children(".metadata")
|
||||
if (!bigMetadataHeight) {
|
||||
bigMetadataHeight = cMetadata[0].getBoundingClientRect().height
|
||||
}
|
||||
|
||||
|
||||
//add hovered class
|
||||
cArticle.addClass("hovered")
|
||||
@@ -676,7 +687,7 @@
|
||||
cMetadata.children(".alcim, .bevezeto").addClass("transparent")
|
||||
|
||||
//animate height change
|
||||
cMetadata.stop().animate({ height: "10rem" }, 400, _ => {
|
||||
cMetadata.stop().animate({ height: bigMetadataHeight }, 400, _ => {
|
||||
//hide and show metadata
|
||||
cMetadata.children(".alcim, .bevezeto").hide().removeClass("transparent")
|
||||
cMetadata.children(".categories, .postedon").removeClass("transparent").show()
|
||||
@@ -741,6 +752,13 @@
|
||||
}, ".home-small a.thumbnailwrapper")
|
||||
|
||||
|
||||
/* ------------------------------- no results ------------------------------- */
|
||||
|
||||
|
||||
if (isMasonryPage && $("article").hasClass('no-result')) {
|
||||
$('body').addClass("no-result")
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* EVENTS - ESEMÉNYEK */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
@@ -818,6 +836,12 @@
|
||||
|
||||
if (isSingle) {
|
||||
|
||||
/* ---------------------------- wrap figcaptions --------------------------- */
|
||||
|
||||
|
||||
$("figcaption").wrapInner("<span></span>")
|
||||
|
||||
|
||||
|
||||
/* ----------------------------- images, gallery ---------------------------- */
|
||||
|
||||
@@ -880,15 +904,18 @@
|
||||
|
||||
|
||||
/* ---------------------------- hover and click on related ---------------------------- */
|
||||
|
||||
$(document).on({
|
||||
mouseenter: function () {
|
||||
if (!Modernizr.touchevents) {
|
||||
showTitle(this)
|
||||
let wrapper = $(this).children(".relatedWrapper")
|
||||
showTitle(wrapper)
|
||||
}
|
||||
},
|
||||
mouseleave: function () {
|
||||
if (!Modernizr.touchevents) {
|
||||
hideTitle(this)
|
||||
let wrapper = $(this).children(".relatedWrapper")
|
||||
hideTitle(wrapper)
|
||||
}
|
||||
}
|
||||
}, '#related_posts li');
|
||||
@@ -897,19 +924,15 @@
|
||||
$(document).on({
|
||||
'touchend': function (e) {
|
||||
e.preventDefault()
|
||||
var art = $(this).parents("li")
|
||||
var metadata = art.children(".metadata")
|
||||
if (metadata.hasClass("vis")) {
|
||||
hideTitle(art)
|
||||
} else {
|
||||
hideTitle($(".vis").parents("li"))
|
||||
var art = $(this).parents("li").children(".relatedWrapper")
|
||||
hideTitle($(".vis").parents(".relatedWrapper"))
|
||||
showTitle(art)
|
||||
}
|
||||
|
||||
}
|
||||
}, "#related_posts li a.related_thumbnailwrapper")
|
||||
|
||||
//click on related
|
||||
$('#related_posts li').click(function () {
|
||||
$('#related_posts li .relatedWrapper').click(function () {
|
||||
let href = $(this).children('a.related_thumbnailwrapper').attr("href")
|
||||
window.open(href, "_self")
|
||||
})
|
||||
|
||||
2
loop.php
2
loop.php
@@ -12,7 +12,7 @@
|
||||
<?php else: ?>
|
||||
|
||||
<!-- article -->
|
||||
<article>
|
||||
<article class="no-result">
|
||||
<h2><?php _e('Sorry, nothing to display.', 'dis2019');?></h2>
|
||||
</article>
|
||||
<!-- /article -->
|
||||
|
||||
@@ -10,6 +10,9 @@
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
@media #{$tablet} {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
@media #{$smalldesktop} {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
@@ -60,10 +63,12 @@
|
||||
|
||||
@mixin home-title-small {
|
||||
//small titles on desktop on home and archives
|
||||
@media #{$tablet} {
|
||||
font-size: 1.3rem;
|
||||
color: #000;
|
||||
}
|
||||
@media #{$smalldesktop} {
|
||||
font-size: 1.5rem;
|
||||
//-webkit-text-stroke: #000 1px;
|
||||
color: #000;
|
||||
}
|
||||
@media #{$bigdesktop} {
|
||||
font-size: 2rem;
|
||||
@@ -98,9 +103,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@mixin home-metadata-big {
|
||||
@media #{$tablet} {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
@media #{$smalldesktop} {
|
||||
font-size: 2rem;
|
||||
}
|
||||
@@ -121,6 +127,9 @@
|
||||
&.current {
|
||||
color: #000 !important;
|
||||
}
|
||||
@media #{$tablet} {
|
||||
font-size: 1rem;
|
||||
}
|
||||
@media #{$smalldesktop} {
|
||||
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 {
|
||||
font: 800 3rem "Butler";
|
||||
color: #000;
|
||||
@media #{$tablet} {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
@media #{$smalldesktop} {
|
||||
font-size: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// @mixin single-title2 {
|
||||
// font: bold 3rem "Butler";
|
||||
// color: #000;
|
||||
// @media #{$smalldesktop} {
|
||||
// font-size: 5rem;
|
||||
// }
|
||||
// }
|
||||
|
||||
@mixin single-metadata {
|
||||
font: bold 1.4rem "Westeinde Caption";
|
||||
@media #{$smalldesktop} {
|
||||
font: 900 2rem "Westeinde Caption";
|
||||
@media #{$tablet} {
|
||||
font: 900 1.5rem "Westeinde Caption";
|
||||
color: #fff;
|
||||
-webkit-text-stroke: #000 1px;
|
||||
}
|
||||
@media #{$smalldesktop} {
|
||||
font-size: 2rem;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@mixin single-author {
|
||||
|
||||
407
sass/base.scss
407
sass/base.scss
@@ -90,18 +90,21 @@ $only-mobile: only screen and
|
||||
);
|
||||
|
||||
$tablet: only screen and
|
||||
(
|
||||
min-width: 512px
|
||||
);
|
||||
$smalldesktop: only screen and
|
||||
(
|
||||
min-width: 769px
|
||||
);
|
||||
|
||||
$smalldesktop: only screen and
|
||||
(
|
||||
min-width: 1024px
|
||||
);
|
||||
|
||||
$mobile-landscape: only screen and
|
||||
(
|
||||
min-width: 769px
|
||||
)
|
||||
and (-webkit-min-device-pixel-ratio: 2.1);
|
||||
|
||||
$bigdesktop: only screen and
|
||||
(
|
||||
min-width: 1279px
|
||||
@@ -120,7 +123,9 @@ $verybigdesktop: only screen and
|
||||
$h-unit-5: 25rem;
|
||||
$h-unit-4: 20rem;
|
||||
$h-unit-2: 10rem; // menuwidth on desktop
|
||||
$h-unit-1-5: 7.5rem;
|
||||
$h-unit-1: 5rem;
|
||||
$h-unit-0-5: 2.5rem;
|
||||
|
||||
//vertical units:
|
||||
$v-unit-1: 4rem;
|
||||
@@ -312,7 +317,7 @@ $v-unit-6: 24rem;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
z-index: 3000;
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
height: 0;
|
||||
position: relative;
|
||||
width: 0;
|
||||
@@ -327,8 +332,8 @@ $v-unit-6: 24rem;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
line-height: 0;
|
||||
@media #{$smalldesktop} {
|
||||
width: $h-unit-2;
|
||||
@media #{$tablet} {
|
||||
width: $h-unit-1-5;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
@@ -347,6 +352,9 @@ $v-unit-6: 24rem;
|
||||
filter: invert(100);
|
||||
}
|
||||
}
|
||||
@media #{$smalldesktop} {
|
||||
width: $h-unit-2;
|
||||
}
|
||||
div {
|
||||
z-index: 3500;
|
||||
}
|
||||
@@ -359,7 +367,7 @@ $v-unit-6: 24rem;
|
||||
justify-content: space-between;
|
||||
flex: 1 1 auto;
|
||||
padding: 2rem 0 2rem 2rem;
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
border-right: #000 1px solid;
|
||||
}
|
||||
}
|
||||
@@ -368,7 +376,7 @@ $v-unit-6: 24rem;
|
||||
justify-content: flex-end;
|
||||
flex: 0 1 auto;
|
||||
padding: 2rem 2rem 2rem 0;
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
order: 99;
|
||||
border-left: #000 1px solid;
|
||||
right: 0;
|
||||
@@ -380,7 +388,7 @@ $v-unit-6: 24rem;
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
z-index: 2;
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
display: none;
|
||||
}
|
||||
a {
|
||||
@@ -395,32 +403,40 @@ $v-unit-6: 24rem;
|
||||
}
|
||||
}
|
||||
|
||||
//icons in menu:
|
||||
object {
|
||||
height: 3rem;
|
||||
@media #{$tablet} {
|
||||
height: 2.5rem;
|
||||
}
|
||||
@media #{$smalldesktop} {
|
||||
height: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* header elements */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
.header-1 > div,
|
||||
.header-2 > div {
|
||||
flex: 0 0 $h-unit-1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// dis logo size:
|
||||
.logo {
|
||||
object {
|
||||
height: $h-unit-1;
|
||||
@media #{$tablet} {
|
||||
height: 4rem;
|
||||
}
|
||||
@media #{$smalldesktop} {
|
||||
height: $h-unit-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
// .events-link {
|
||||
// display: block;
|
||||
// @media #{$smalldesktop} {
|
||||
// display: block;
|
||||
// }
|
||||
// }
|
||||
|
||||
.menubutton {
|
||||
$speed: 0.5s;
|
||||
@@ -429,21 +445,19 @@ $v-unit-6: 24rem;
|
||||
|
||||
order: 99;
|
||||
z-index: 3001;
|
||||
// @media #{$smalldesktop} {
|
||||
// }
|
||||
|
||||
button {
|
||||
transform-origin: center;
|
||||
@include transition($speed $easing);
|
||||
&.rotated {
|
||||
@include transform(rotate($degree));
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
filter: invert(100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
order: unset;
|
||||
}
|
||||
}
|
||||
@@ -454,7 +468,7 @@ $v-unit-6: 24rem;
|
||||
&.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@@ -496,7 +510,7 @@ $v-unit-6: 24rem;
|
||||
|
||||
/* ----------------------------- search desktop ----------------------------- */
|
||||
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
.search-box {
|
||||
display: block;
|
||||
flex: 1 1 0 !important;
|
||||
@@ -506,7 +520,10 @@ $v-unit-6: 24rem;
|
||||
display: none;
|
||||
position: fixed;
|
||||
width: 0;
|
||||
left: $h-unit-1-5;
|
||||
@media #{$smalldesktop} {
|
||||
left: $h-unit-2;
|
||||
}
|
||||
bottom: 0;
|
||||
height: $h-unit-2;
|
||||
form.search {
|
||||
@@ -540,7 +557,7 @@ $v-unit-6: 24rem;
|
||||
padding-top: 9rem !important;
|
||||
background-color: #000;
|
||||
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.sidebar-wrapper {
|
||||
@@ -549,7 +566,7 @@ $v-unit-6: 24rem;
|
||||
overflow: auto;
|
||||
padding: 0 $v-unit-1;
|
||||
padding-bottom: $v-unit-1;
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
padding: $v-unit-1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -557,7 +574,7 @@ $v-unit-6: 24rem;
|
||||
}
|
||||
.menuseparator {
|
||||
display: none;
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
display: block;
|
||||
width: 1px;
|
||||
height: 70%;
|
||||
@@ -572,7 +589,7 @@ $v-unit-6: 24rem;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0px;
|
||||
padding-inline-start: 0;
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
flex: 1 1 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -584,6 +601,9 @@ $v-unit-6: 24rem;
|
||||
li {
|
||||
display: block;
|
||||
padding-top: 2rem;
|
||||
@media #{$tablet} {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
@media #{$smalldesktop} {
|
||||
padding: 2rem 0;
|
||||
}
|
||||
@@ -603,14 +623,14 @@ $v-unit-6: 24rem;
|
||||
position: fixed;
|
||||
right: calc(#{$h-unit-4} + 4px);
|
||||
top: calc(#{$v-unit-1}/ 2); // this is the top position of the circle!!!
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
top: 1rem;
|
||||
}
|
||||
@media #{$bigdesktop} {
|
||||
top: 0.5rem;
|
||||
}
|
||||
z-index: 1000;
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
display: block;
|
||||
}
|
||||
ul {
|
||||
@@ -624,7 +644,7 @@ $v-unit-6: 24rem;
|
||||
height: calc(#{$v-unit-1}/ 2); //height of circle -> radius of circle!!
|
||||
// line-height: calc(#{$v-unit-1}/ 2);
|
||||
width: 1rem;
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
height: 3rem;
|
||||
// line-height: 5rem;
|
||||
}
|
||||
@@ -681,7 +701,7 @@ $v-unit-6: 24rem;
|
||||
|
||||
/* -------------------------------- load more ------------------------------- */
|
||||
.misha_loadmore {
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
min-width: $h-unit-2;
|
||||
width: calc(100vw - ((100vh - #{$v-unit-2}) / 2 * 3) - #{$h-unit-4});
|
||||
margin-right: $h-unit-2;
|
||||
@@ -695,7 +715,7 @@ $v-unit-6: 24rem;
|
||||
a,
|
||||
p {
|
||||
@include home-more();
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
transform-origin: center;
|
||||
white-space: nowrap;
|
||||
width: 100vh;
|
||||
@@ -718,7 +738,7 @@ $v-unit-6: 24rem;
|
||||
.archive,
|
||||
.home,
|
||||
.search-results {
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
@@ -731,12 +751,12 @@ $v-unit-6: 24rem;
|
||||
.archive,
|
||||
.home,
|
||||
.search-results {
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
// overflow-y: hidden;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
overflow-y: hidden;
|
||||
@include fit-content(width);
|
||||
min-width: 100vw;
|
||||
@@ -746,7 +766,7 @@ $v-unit-6: 24rem;
|
||||
|
||||
.header {
|
||||
.header-scroll {
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
display: block;
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
@@ -755,13 +775,19 @@ $v-unit-6: 24rem;
|
||||
top: 0;
|
||||
}
|
||||
&.header-scroll-left {
|
||||
left: $h-unit-1-5;
|
||||
@media #{$smalldesktop} {
|
||||
left: $h-unit-2;
|
||||
}
|
||||
button {
|
||||
cursor: url("../img/arrow-black-left.png"), w-resize;
|
||||
}
|
||||
}
|
||||
&.header-scroll-right {
|
||||
right: $h-unit-1-5;
|
||||
@media #{$smalldesktop} {
|
||||
right: $h-unit-2;
|
||||
}
|
||||
button {
|
||||
cursor: url("../img/arrow-black-right.png"), e-resize;
|
||||
}
|
||||
@@ -775,13 +801,13 @@ $v-unit-6: 24rem;
|
||||
}
|
||||
|
||||
main {
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
height: 100vh;
|
||||
@include fit-content(width);
|
||||
position: relative;
|
||||
}
|
||||
section {
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
//horizontal scrolling on desktop:
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -790,6 +816,11 @@ $v-unit-6: 24rem;
|
||||
@include fit-content(width);
|
||||
}
|
||||
|
||||
/* ------------------------- archivetitle on mobile ------------------------- */
|
||||
.archivetitle {
|
||||
padding: 8rem 2rem 0;
|
||||
}
|
||||
|
||||
/* --------------------------- home article mobile/default -------------------------- */
|
||||
|
||||
article {
|
||||
@@ -857,18 +888,22 @@ $v-unit-6: 24rem;
|
||||
/* ------------------------ home article desktop big ------------------------ */
|
||||
/* ------------------------------------ - ----------------------------------- */
|
||||
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
//big: first 2 articles
|
||||
.home_wrapper-big {
|
||||
flex: 0 0 auto;
|
||||
border-right: #000 1px solid;
|
||||
article {
|
||||
position: relative;
|
||||
width: calc(100vw - (#{$h-unit-2} * 3));
|
||||
width: calc(100vw - (#{$h-unit-1-5} * 3));
|
||||
height: calc(100vh - #{$v-unit-1});
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
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;
|
||||
|
||||
border-top: 1px #000 solid;
|
||||
@@ -892,7 +927,7 @@ $v-unit-6: 24rem;
|
||||
h2 {
|
||||
height: unset;
|
||||
position: absolute;
|
||||
top: 4rem;
|
||||
top: 0;
|
||||
padding: 4rem;
|
||||
padding-right: 2rem;
|
||||
width: calc(100vw - #{$h-unit-5});
|
||||
@@ -903,7 +938,10 @@ $v-unit-6: 24rem;
|
||||
bottom: 0;
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
height: #{$h-unit-1-5};
|
||||
@media #{$smalldesktop} {
|
||||
height: #{$h-unit-2};
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -977,13 +1015,20 @@ $v-unit-6: 24rem;
|
||||
display: block;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: ($h-unit-2);
|
||||
width: ($h-unit-2)/2;
|
||||
object {
|
||||
height: ($h-unit-2);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
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);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: calc(-50% + 0.5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
} //metadata end
|
||||
@@ -1013,7 +1058,7 @@ $v-unit-6: 24rem;
|
||||
}
|
||||
&.home_wrapper-2 {
|
||||
article {
|
||||
border-left: #000 1px solid;
|
||||
// border-left: #000 1px solid;
|
||||
|
||||
.metadata {
|
||||
justify-content: flex-end;
|
||||
@@ -1036,26 +1081,39 @@ $v-unit-6: 24rem;
|
||||
|
||||
/* ----------------------- home articles desktop small ----------------------- */
|
||||
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
.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});
|
||||
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;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin: auto 0;
|
||||
&.home_wrapper-s1:not(.home_wrapper-1) {
|
||||
margin-left: $h-unit-1-5 / 2;
|
||||
@media #{$smalldesktop} {
|
||||
margin-left: $h-unit-1;
|
||||
}
|
||||
}
|
||||
&.home_wrapper-s1.home_wrapper-small.home_wrapper-1 {
|
||||
margin-left: $h-unit-1-5;
|
||||
@media #{$smalldesktop} {
|
||||
margin-left: $h-unit-2;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: $h-unit-1-5;
|
||||
@media #{$smalldesktop} {
|
||||
margin-right: $h-unit-2;
|
||||
}
|
||||
}
|
||||
|
||||
article,
|
||||
.archivetitle,
|
||||
@@ -1076,7 +1134,10 @@ $v-unit-6: 24rem;
|
||||
.metadata {
|
||||
width: 100%;
|
||||
min-width: unset;
|
||||
height: $h-unit-0-5;
|
||||
@media #{$smalldesktop} {
|
||||
height: $h-unit-1;
|
||||
}
|
||||
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
@@ -1089,9 +1150,14 @@ $v-unit-6: 24rem;
|
||||
padding: 0;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
@include triangle-corner-bordered(#{$h-unit-1}, 0, transparent, #000, left);
|
||||
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} {
|
||||
height: $h-unit-2;
|
||||
@include triangle-corner-bordered(#{$h-unit-2}, 0, transparent, #000, left);
|
||||
@@ -1113,16 +1179,27 @@ $v-unit-6: 24rem;
|
||||
justify-content: center;
|
||||
}
|
||||
.categories {
|
||||
margin-left: $h-unit-0-5;
|
||||
@media #{$smalldesktop} {
|
||||
margin-left: $h-unit-1;
|
||||
}
|
||||
@media #{$verybigdesktop} {
|
||||
margin-left: $h-unit-2;
|
||||
}
|
||||
|
||||
padding-right: $v-unit-1 / 8;
|
||||
|
||||
@media #{$smalldesktop} {
|
||||
padding-right: $v-unit-1 / 4;
|
||||
// padding: $v-unit-1 / 3 0;
|
||||
}
|
||||
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
.postedon {
|
||||
padding: 0 $v-unit-1 / 8;
|
||||
@media #{$smalldesktop} {
|
||||
padding: 0 $v-unit-1 / 4;
|
||||
}
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
}
|
||||
@@ -1141,10 +1218,17 @@ $v-unit-6: 24rem;
|
||||
padding: 0;
|
||||
|
||||
a {
|
||||
margin-top: $h-unit-1 / 2;
|
||||
margin-top: $h-unit-0-5 / 2;
|
||||
margin-right: $v-unit-1 / 4;
|
||||
margin-bottom: $h-unit-0-5 + $v-unit-1 / 8;
|
||||
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} {
|
||||
margin-right: $v-unit-1 / 4;
|
||||
@@ -1224,6 +1308,54 @@ $v-unit-6: 24rem;
|
||||
}
|
||||
} //section 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
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
@@ -1243,12 +1375,12 @@ $v-unit-6: 24rem;
|
||||
|
||||
.search-no-results {
|
||||
main {
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
padding: 0 $h-unit-4;
|
||||
|
||||
.archivetitle h1,
|
||||
article h2 {
|
||||
}
|
||||
// .archivetitle h1,
|
||||
// article h2 {
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1337,7 +1469,7 @@ body.category.category-esemeny {
|
||||
}
|
||||
|
||||
/* ---------------------------- Events on desktop --------------------------- */
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
main {
|
||||
padding-top: 0;
|
||||
section {
|
||||
@@ -1415,7 +1547,7 @@ body.category.category-esemeny {
|
||||
.single,
|
||||
.page {
|
||||
//no menus on single
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
.wrapper {
|
||||
height: unset;
|
||||
width: 100%;
|
||||
@@ -1510,7 +1642,7 @@ body.category.category-esemeny {
|
||||
|
||||
/* ---------------------------- single header on desktop --------------------------- */
|
||||
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
min-height: calc(100vh - #{$h-unit-2});
|
||||
margin-top: 100vh;
|
||||
margin-left: $h-unit-1;
|
||||
@@ -1589,14 +1721,14 @@ body.category.category-esemeny {
|
||||
}
|
||||
&.content-begin {
|
||||
margin-top: $padd;
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
&.content-end {
|
||||
margin-top: $padd * 2;
|
||||
margin-bottom: 0;
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
margin-top: $padd;
|
||||
margin-bottom: $padd;
|
||||
}
|
||||
@@ -1615,7 +1747,7 @@ body.category.category-esemeny {
|
||||
.single-content {
|
||||
position: relative;
|
||||
padding: $padd;
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
top: -#{$h-unit-1};
|
||||
@include singleDesktopLayout();
|
||||
}
|
||||
@@ -1673,7 +1805,7 @@ body.category.category-esemeny {
|
||||
margin: $padd 0;
|
||||
position: relative !important;
|
||||
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@@ -1695,13 +1827,22 @@ body.category.category-esemeny {
|
||||
margin: $padd 0;
|
||||
li {
|
||||
margin-right: 0;
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
margin-bottom: $v-unit-1;
|
||||
}
|
||||
&:nth-child(odd) figcaption::after {
|
||||
&:nth-child(odd) figcaption {
|
||||
@media #{$tablet} {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
@include trianglecorner(topright, #{$h-unit-1});
|
||||
}
|
||||
}
|
||||
&:nth-child(even) figcaption {
|
||||
@media #{$tablet} {
|
||||
padding-left: 0;
|
||||
}
|
||||
right: 0;
|
||||
top: 0;
|
||||
&::after {
|
||||
@@ -1720,7 +1861,19 @@ body.category.category-esemeny {
|
||||
width: calc(100% - #{$h-unit-1});
|
||||
height: $h-unit-1;
|
||||
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;
|
||||
@include captiontext();
|
||||
line-height: 1;
|
||||
@@ -1730,10 +1883,18 @@ body.category.category-esemeny {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
@media #{$smalldesktop} {
|
||||
align-content: stretch;
|
||||
|
||||
span {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@media #{$tablet} {
|
||||
display: none;
|
||||
&.vis {
|
||||
display: block;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1744,8 +1905,9 @@ body.category.category-esemeny {
|
||||
.alignedWrapper {
|
||||
position: relative;
|
||||
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
max-width: 50%;
|
||||
|
||||
@include fit-content(width);
|
||||
&.alignleftWrapper {
|
||||
padding-right: $padd;
|
||||
@@ -1759,31 +1921,20 @@ body.category.category-esemeny {
|
||||
.alignleft,
|
||||
.alignright {
|
||||
margin: 0;
|
||||
//no align on mobile
|
||||
position: relative;
|
||||
// @media #{$only-mobile} {
|
||||
float: unset;
|
||||
// }
|
||||
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
width: auto;
|
||||
// max-width: 50%;
|
||||
|
||||
// @media #{$smalldesktop} {
|
||||
// &.alignleft {
|
||||
// padding-right: $padd;
|
||||
// }
|
||||
// &.alignright {
|
||||
// padding-left: $padd;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
img {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.authors {
|
||||
// @include single-h4();
|
||||
@include single-author();
|
||||
color: #000;
|
||||
-webkit-text-stroke: 0px;
|
||||
@@ -1806,7 +1957,7 @@ body.category.category-esemeny {
|
||||
}
|
||||
#colorbox {
|
||||
z-index: 12;
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
z-index: 3150;
|
||||
}
|
||||
&:focus {
|
||||
@@ -1838,7 +1989,7 @@ body.category.category-esemeny {
|
||||
bottom: -5rem;
|
||||
filter: invert(100);
|
||||
z-index: 14;
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
z-index: 3200;
|
||||
@@ -1847,13 +1998,13 @@ body.category.category-esemeny {
|
||||
&#cboxPrevious {
|
||||
left: 1rem;
|
||||
@include transform(scaleX(-1));
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
left: $v-unit-1;
|
||||
}
|
||||
}
|
||||
&#cboxNext {
|
||||
right: 1rem;
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
right: $v-unit-1;
|
||||
}
|
||||
}
|
||||
@@ -1864,7 +2015,7 @@ body.category.category-esemeny {
|
||||
@include transform(rotate(45deg));
|
||||
top: -3rem;
|
||||
right: 1rem;
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
position: fixed;
|
||||
right: $v-unit-1;
|
||||
top: $v-unit-1;
|
||||
@@ -1892,7 +2043,7 @@ body.category.category-esemeny {
|
||||
}
|
||||
}
|
||||
.toHome {
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
position: relative;
|
||||
padding-top: $padd * 2;
|
||||
top: -#{$h-unit-1};
|
||||
@@ -1916,11 +2067,7 @@ body.category.category-esemeny {
|
||||
display: block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
// .relatedcontent {
|
||||
// height: 50vw;
|
||||
// padding: $padd;
|
||||
//
|
||||
// }
|
||||
|
||||
& > a {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -1974,7 +2121,7 @@ body.category.category-esemeny {
|
||||
}
|
||||
|
||||
/* ------------------------ related posts on desktop ------------------------ */
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
top: -#{$h-unit-1};
|
||||
position: relative;
|
||||
padding-top: $padd * 2;
|
||||
@@ -1987,11 +2134,20 @@ body.category.category-esemeny {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
li {
|
||||
flex: 0 0 calc(100% / 3);
|
||||
height: calc((100vw - #{$v-unit-4}) / 3);
|
||||
max-height: calc(1024px / 3);
|
||||
li {
|
||||
width: calc(100% / 3);
|
||||
padding-bottom: calc(100% / 3);
|
||||
|
||||
position: relative;
|
||||
height: 0;
|
||||
|
||||
.relatedWrapper {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.related_thumbnailwrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -2005,7 +2161,6 @@ body.category.category-esemeny {
|
||||
.metadata {
|
||||
width: 100%;
|
||||
min-width: unset;
|
||||
height: $h-unit-1;
|
||||
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
@@ -2018,7 +2173,18 @@ body.category.category-esemeny {
|
||||
padding: 0;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
|
||||
height: $h-unit-1;
|
||||
@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;
|
||||
&.vis {
|
||||
display: flex;
|
||||
@@ -2027,11 +2193,23 @@ body.category.category-esemeny {
|
||||
.categories,
|
||||
.postedon {
|
||||
@include home-metadata();
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
}
|
||||
.categories {
|
||||
margin-left: $v-unit-1 * 1.5;
|
||||
padding: $v-unit-1 / 3 0;
|
||||
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 {
|
||||
padding: $v-unit-1 / 3 $v-unit-1 / 4;
|
||||
@@ -2051,17 +2229,32 @@ body.category.category-esemeny {
|
||||
background-color: #fff;
|
||||
height: 100%;
|
||||
padding-left: $v-unit-1;
|
||||
@media #{$tablet} {
|
||||
padding-left: $h-unit-0-5;
|
||||
}
|
||||
@media #{$smalldesktop} {
|
||||
padding-left: $v-unit-1;
|
||||
}
|
||||
@media #{$bigdesktop} {
|
||||
padding: $h-unit-1;
|
||||
}
|
||||
|
||||
a {
|
||||
bottom: $h-unit-1 + $v-unit-1 * 0.5;
|
||||
|
||||
width: calc(100% - #{$v-unit-2});
|
||||
@include fit-content(height);
|
||||
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} {
|
||||
width: calc(100% - #{$h-unit-2});
|
||||
}
|
||||
@@ -2075,7 +2268,7 @@ body.category.category-esemeny {
|
||||
|
||||
/* -------------------------------- page only------------------------------- */
|
||||
body.page {
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
article {
|
||||
margin-top: $h-unit-2;
|
||||
}
|
||||
@@ -2109,7 +2302,7 @@ body.page {
|
||||
color: $color !important;
|
||||
}
|
||||
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
&.home-big {
|
||||
h2 a {
|
||||
color: $color;
|
||||
@@ -2156,7 +2349,7 @@ body.page {
|
||||
//tagclip: filters on small articale images
|
||||
|
||||
@mixin tagclip($tag) {
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
.thumbnailwrapper > img {
|
||||
-webkit-mask: url(../img/clip/#{$tag}_desktop.svg);
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
@@ -2175,12 +2368,12 @@ body.page {
|
||||
@mixin tagcolors-single($color, $darkcolor) {
|
||||
.titlewrapper {
|
||||
.metadata {
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
// color: #fff !important;
|
||||
-webkit-text-stroke: $color 1px !important;
|
||||
}
|
||||
a {
|
||||
@media #{$smalldesktop} {
|
||||
@media #{$tablet} {
|
||||
color: #fff !important;
|
||||
-webkit-text-stroke: $color 1px !important;
|
||||
&:hover {
|
||||
|
||||
@@ -105,7 +105,10 @@
|
||||
?>
|
||||
|
||||
<li>
|
||||
<div class="relatedWrapper">
|
||||
<?php include( locate_template( 'loop-inner.php', false, false ) ); ?>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<?php
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user