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

home, tag archive improvements

Browse Source
This commit is contained in:
Péter Gyetvai
2019-06-24 02:37:58 +02:00
parent bbd581903b
commit 48e247e0f9
15 changed files with 768 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
KÉZIKÖNYV.md
View File

@@ -10,7 +10,7 @@ esemény cat-id-t átírni!!
settings>reading>Blog pages show at most 6
## Paraméterek
## Paraméterek, elemek szerkesztése
### Bejegyzések
@@ -28,6 +28,24 @@ dis-esemeny-datum
dis-esemeny-link
### BE-DO-THINK-LOVE Tagek
A leírást két helyen is szerkeszteni kell:
1. Ami a hoverre megjelenik azt itt kell szerkeszteni:
Megjelenés>Menük>tags (Tag menu)>Választás>Menü elem lenyitása.
Ha nincs ott a leírás menü, akkor fent:
Mit lássunk?>Mutassa a bővített menü részleteit-Leírás
2. Ami a listázott oldalon megjelenik azt itt kell szerkeszteni:
Bejegyzés>Címkék>Szerkesztés
## Developement verzió telepítése
Szükséges: python2, gulp global, max node 11

10
_jegyzet.md
View File

@@ -51,7 +51,7 @@ szerzőnek is paraméter, és kattinható
Single:
- Nem kell carousel a felső oldalra
- ~Nem kell carousel a felső oldalra~
- crop thumbnail a fenti képnél
- állókép körbefut a szöveg!!!!
- galéria: mobilon fix 2, column számot lehessen használni asztalin
@@ -60,15 +60,15 @@ Menü: csík küzépen, két részben, két küön menü
BEDO kör: forog,
- hover, megáll, fekete megjelenik, nagyszüvegre megy a be-kat-ra
- ~hover, megáll, fekete megjelenik, nagyszüvegre megy a be-kat-ra~
- kattintás a szóra:
Kategória lap: első csempe kimarad.
Kereső:
- teljes lábléc magasságban, hosszabban fusson ki
- ne legyen hover,
- focus
- ~teljes lábléc magasságban, hosszabban fusson ki~
- ~ne legyen hover~,
- ~focus~
# Kérdések

20
archive.php
View File

@@ -1,10 +1,8 @@
<?php get_header();?>
<!-- section -->
<section id="content">
<?php
if (is_category()) {
$ttl = single_cat_title("", false);
@@ -20,20 +18,28 @@
// esc_html_e($ttl, 'text-domain')
?>
<h1 class="archivetitle <?php echo $cl; ?>"><?php echo $ttl; ?></h1>
<div class="archivetitle <?php echo $cl; ?>">
<h1><?php echo $ttl; ?></h1>
<?php if (is_tag()) : ?>
<!-- Show images on tag archives: -->
<object data="<?php echo get_template_directory_uri(); ?>/img/clip/<?php echo $ttl; ?>_desktop.svg" type="image/svg+xml">
<img src="<?php echo get_template_directory_uri(); ?>/img/clip/<?php echo $ttl; ?>_desktop.png" />
</object>
<?php endif; ?>
</div>
<?php
// add description box if it's a tag
if (is_tag()) {
echo '<div class="archivedescription">';
echo tag_description();
echo "</div>";
}
?>
<?php get_template_part('loop');?>
<?php get_template_part('loadmore');?>

460
css/base.css
View File

@@ -104,6 +104,9 @@ object {
/* ========================================================================== */
/* SEARCH */
/* ========================================================================== */
/* ------------------------------ search mobile ----------------------------- */
/* ----------------------------- search desktop ----------------------------- */
/* -------------------- header scroll: scroll with click -------------------- */
/* ========================================================================== */
/* MENUS */
/* ========================================================================== */
@@ -134,8 +137,14 @@ object {
align-content: space-between;
z-index: 3100;
background: #fff; }
.wrapper .header .header-1 > div:not(#sidebar),
.wrapper .header .header-2 > div:not(#sidebar) {
.wrapper .header .header-1 .logo,
.wrapper .header .header-1 .social-link,
.wrapper .header .header-1 .menubutton,
.wrapper .header .header-1 .events-link,
.wrapper .header .header-2 .logo,
.wrapper .header .header-2 .social-link,
.wrapper .header .header-2 .menubutton,
.wrapper .header .header-2 .events-link {
filter: invert(100); } }
.wrapper .header .header-1 div,
.wrapper .header .header-2 div {
@@ -220,21 +229,11 @@ object {
margin: 0; } }
.wrapper .header .search-box {
display: none; }
@media (min-width: 769px) {
.wrapper .header .search-box {
display: block;
flex: 1 1 0 !important; } }
@media (min-width: 769px) {
.wrapper .header .search-bar {
display: none;
position: absolute;
width: 0;
left: 7rem;
top: 0; } }
.wrapper .header .search-bar form.search {
display: flex;
flex-direction: row;
border-bottom: #fff 1px solid; }
border-bottom: #fff 1px solid;
background-color: #000; }
.wrapper .header .search-bar form.search input {
font: 900 4rem "Westeinde Caption";
color: #000;
@@ -245,14 +244,36 @@ object {
caret-color: #fff;
flex: 1 1 auto;
width: 1rem; }
.wrapper .header .search-bar form.search input:hover {
color: #fff; }
@media (min-width: 769px) {
.wrapper .header .search-bar form.search input {
font-size: 2.5rem; } }
font-size: 4rem;
color: #000 !important;
-webkit-text-stroke: unset !important; } }
.wrapper .header .search-bar form.search button {
flex: 0 0 auto; }
@media (max-width: 768px) {
.wrapper .header .search-bar form.search button {
filter: invert(100); } }
@media (min-width: 769px) {
.wrapper .header .search-box {
display: block;
flex: 1 1 0 !important; }
.wrapper .header .search-bar {
display: none;
position: fixed;
width: 0;
left: 10rem;
bottom: 0;
height: 10rem; }
.wrapper .header .search-bar form.search {
border-bottom: none;
height: 100%;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch; }
.wrapper .header .search-bar form.search input {
padding: 0 5rem; }
.wrapper .header .search-bar form.search button {
display: none; } }
.wrapper .header .header-scroll {
@@ -319,8 +340,10 @@ object {
color: transparent;
-webkit-text-stroke: #000 1px;
text-transform: uppercase; }
.wrapper .header #tag-nav ul.current {
.wrapper .header #tag-nav ul.pause {
-webkit-text-stroke: #fff 1px !important; }
.wrapper .header #tag-nav ul.current {
-webkit-text-stroke: #000 1px !important; }
@media (min-width: 769px) {
.wrapper .header #tag-nav ul {
font-size: 1.2rem; } }
@@ -341,8 +364,10 @@ object {
@media (min-width: 769px) {
.wrapper .header #tag-nav ul li a span {
height: 3rem; } }
.wrapper .header #tag-nav ul li a span.current {
.wrapper .header #tag-nav ul li a span.pause {
-webkit-text-stroke: #fff 1px !important; }
.wrapper .header #tag-nav ul li a span.current {
-webkit-text-stroke: #000 1px !important; }
@media (min-width: 769px) {
.wrapper .header #tag-nav ul li a span {
font-size: 1.2rem; } }
@@ -352,9 +377,9 @@ object {
-ms-transform: rotate(21.17647deg);
-webkit-transform: rotate(21.17647deg);
transform: rotate(21.17647deg);
-webkit-animation: spin1 4s linear infinite;
-moz-animation: spin1 4s linear infinite;
animation: spin1 4s linear infinite; }
-webkit-animation: spin1 10s linear infinite;
-moz-animation: spin1 10s linear infinite;
animation: spin1 10s linear infinite; }
@-moz-keyframes spin1 {
100% {
@@ -374,9 +399,9 @@ object {
-ms-transform: rotate(42.35294deg);
-webkit-transform: rotate(42.35294deg);
transform: rotate(42.35294deg);
-webkit-animation: spin2 4s linear infinite;
-moz-animation: spin2 4s linear infinite;
animation: spin2 4s linear infinite; }
-webkit-animation: spin2 10s linear infinite;
-moz-animation: spin2 10s linear infinite;
animation: spin2 10s linear infinite; }
@-moz-keyframes spin2 {
100% {
@@ -396,9 +421,9 @@ object {
-ms-transform: rotate(63.52941deg);
-webkit-transform: rotate(63.52941deg);
transform: rotate(63.52941deg);
-webkit-animation: spin3 4s linear infinite;
-moz-animation: spin3 4s linear infinite;
animation: spin3 4s linear infinite; }
-webkit-animation: spin3 10s linear infinite;
-moz-animation: spin3 10s linear infinite;
animation: spin3 10s linear infinite; }
@-moz-keyframes spin3 {
100% {
@@ -418,9 +443,9 @@ object {
-ms-transform: rotate(84.70588deg);
-webkit-transform: rotate(84.70588deg);
transform: rotate(84.70588deg);
-webkit-animation: spin4 4s linear infinite;
-moz-animation: spin4 4s linear infinite;
animation: spin4 4s linear infinite; }
-webkit-animation: spin4 10s linear infinite;
-moz-animation: spin4 10s linear infinite;
animation: spin4 10s linear infinite; }
@-moz-keyframes spin4 {
100% {
@@ -440,9 +465,9 @@ object {
-ms-transform: rotate(105.88235deg);
-webkit-transform: rotate(105.88235deg);
transform: rotate(105.88235deg);
-webkit-animation: spin5 4s linear infinite;
-moz-animation: spin5 4s linear infinite;
animation: spin5 4s linear infinite; }
-webkit-animation: spin5 10s linear infinite;
-moz-animation: spin5 10s linear infinite;
animation: spin5 10s linear infinite; }
@-moz-keyframes spin5 {
100% {
@@ -462,9 +487,9 @@ object {
-ms-transform: rotate(127.05882deg);
-webkit-transform: rotate(127.05882deg);
transform: rotate(127.05882deg);
-webkit-animation: spin6 4s linear infinite;
-moz-animation: spin6 4s linear infinite;
animation: spin6 4s linear infinite; }
-webkit-animation: spin6 10s linear infinite;
-moz-animation: spin6 10s linear infinite;
animation: spin6 10s linear infinite; }
@-moz-keyframes spin6 {
100% {
@@ -484,9 +509,9 @@ object {
-ms-transform: rotate(148.23529deg);
-webkit-transform: rotate(148.23529deg);
transform: rotate(148.23529deg);
-webkit-animation: spin7 4s linear infinite;
-moz-animation: spin7 4s linear infinite;
animation: spin7 4s linear infinite; }
-webkit-animation: spin7 10s linear infinite;
-moz-animation: spin7 10s linear infinite;
animation: spin7 10s linear infinite; }
@-moz-keyframes spin7 {
100% {
@@ -506,9 +531,9 @@ object {
-ms-transform: rotate(169.41176deg);
-webkit-transform: rotate(169.41176deg);
transform: rotate(169.41176deg);
-webkit-animation: spin8 4s linear infinite;
-moz-animation: spin8 4s linear infinite;
animation: spin8 4s linear infinite; }
-webkit-animation: spin8 10s linear infinite;
-moz-animation: spin8 10s linear infinite;
animation: spin8 10s linear infinite; }
@-moz-keyframes spin8 {
100% {
@@ -528,9 +553,9 @@ object {
-ms-transform: rotate(190.58824deg);
-webkit-transform: rotate(190.58824deg);
transform: rotate(190.58824deg);
-webkit-animation: spin9 4s linear infinite;
-moz-animation: spin9 4s linear infinite;
animation: spin9 4s linear infinite; }
-webkit-animation: spin9 10s linear infinite;
-moz-animation: spin9 10s linear infinite;
animation: spin9 10s linear infinite; }
@-moz-keyframes spin9 {
100% {
@@ -550,9 +575,9 @@ object {
-ms-transform: rotate(211.76471deg);
-webkit-transform: rotate(211.76471deg);
transform: rotate(211.76471deg);
-webkit-animation: spin10 4s linear infinite;
-moz-animation: spin10 4s linear infinite;
animation: spin10 4s linear infinite; }
-webkit-animation: spin10 10s linear infinite;
-moz-animation: spin10 10s linear infinite;
animation: spin10 10s linear infinite; }
@-moz-keyframes spin10 {
100% {
@@ -572,9 +597,9 @@ object {
-ms-transform: rotate(232.94118deg);
-webkit-transform: rotate(232.94118deg);
transform: rotate(232.94118deg);
-webkit-animation: spin11 4s linear infinite;
-moz-animation: spin11 4s linear infinite;
animation: spin11 4s linear infinite; }
-webkit-animation: spin11 10s linear infinite;
-moz-animation: spin11 10s linear infinite;
animation: spin11 10s linear infinite; }
@-moz-keyframes spin11 {
100% {
@@ -594,9 +619,9 @@ object {
-ms-transform: rotate(254.11765deg);
-webkit-transform: rotate(254.11765deg);
transform: rotate(254.11765deg);
-webkit-animation: spin12 4s linear infinite;
-moz-animation: spin12 4s linear infinite;
animation: spin12 4s linear infinite; }
-webkit-animation: spin12 10s linear infinite;
-moz-animation: spin12 10s linear infinite;
animation: spin12 10s linear infinite; }
@-moz-keyframes spin12 {
100% {
@@ -616,9 +641,9 @@ object {
-ms-transform: rotate(275.29412deg);
-webkit-transform: rotate(275.29412deg);
transform: rotate(275.29412deg);
-webkit-animation: spin13 4s linear infinite;
-moz-animation: spin13 4s linear infinite;
animation: spin13 4s linear infinite; }
-webkit-animation: spin13 10s linear infinite;
-moz-animation: spin13 10s linear infinite;
animation: spin13 10s linear infinite; }
@-moz-keyframes spin13 {
100% {
@@ -638,9 +663,9 @@ object {
-ms-transform: rotate(296.47059deg);
-webkit-transform: rotate(296.47059deg);
transform: rotate(296.47059deg);
-webkit-animation: spin14 4s linear infinite;
-moz-animation: spin14 4s linear infinite;
animation: spin14 4s linear infinite; }
-webkit-animation: spin14 10s linear infinite;
-moz-animation: spin14 10s linear infinite;
animation: spin14 10s linear infinite; }
@-moz-keyframes spin14 {
100% {
@@ -660,9 +685,9 @@ object {
-ms-transform: rotate(317.64706deg);
-webkit-transform: rotate(317.64706deg);
transform: rotate(317.64706deg);
-webkit-animation: spin15 4s linear infinite;
-moz-animation: spin15 4s linear infinite;
animation: spin15 4s linear infinite; }
-webkit-animation: spin15 10s linear infinite;
-moz-animation: spin15 10s linear infinite;
animation: spin15 10s linear infinite; }
@-moz-keyframes spin15 {
100% {
@@ -682,9 +707,9 @@ object {
-ms-transform: rotate(338.82353deg);
-webkit-transform: rotate(338.82353deg);
transform: rotate(338.82353deg);
-webkit-animation: spin16 4s linear infinite;
-moz-animation: spin16 4s linear infinite;
animation: spin16 4s linear infinite; }
-webkit-animation: spin16 10s linear infinite;
-moz-animation: spin16 10s linear infinite;
animation: spin16 10s linear infinite; }
@-moz-keyframes spin16 {
100% {
@@ -704,9 +729,9 @@ object {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-animation: spin17 4s linear infinite;
-moz-animation: spin17 4s linear infinite;
animation: spin17 4s linear infinite; }
-webkit-animation: spin17 10s linear infinite;
-moz-animation: spin17 10s linear infinite;
animation: spin17 10s linear infinite; }
@-moz-keyframes spin17 {
100% {
@@ -722,13 +747,84 @@ object {
transform: rotate(720deg); } }
.wrapper .header #tag-nav ul li a span.pause {
animation-play-state: paused; }
.wrapper .header #tag-nav .sub-wrapper {
.wrapper .header #tag-nav .sub-wrapper .bedo-sub-wrapper {
position: fixed;
display: none;
right: 10rem;
left: 10rem;
top: 0;
background-color: #000;
height: 50vh; }
height: 50vh;
z-index: -1;
flex-direction: row;
justify-content: flex-start;
align-items: center; }
.wrapper .header #tag-nav .sub-wrapper .bedo-sub-wrapper.opened {
display: flex; }
.wrapper .header #tag-nav .sub-wrapper .bedo-sub-wrapper a {
font: 900 12rem "Westeinde Caption";
color: transparent;
-webkit-text-stroke: #fff 1px;
text-transform: uppercase;
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
transform-origin: 50% 50%;
display: block;
width: calc(30% + 24rem);
text-align: center;
height: fit-content; }
.wrapper .header #tag-nav .sub-wrapper .bedo-sub-wrapper span {
display: block;
position: absolute;
bottom: 0;
right: 0;
height: 24rem;
width: 70%;
padding: 4rem;
padding-left: 32rem;
padding-right: 16rem;
font: 900 1.4rem "Westeinde Caption";
color: #fff; }
.wrapper .header #tag-nav .sub-wrapper .bedo-sub-wrapper span::after {
position: absolute;
content: "";
display: block;
top: 0;
border: none;
width: calc(100% - 24rem);
border-top: #fff 1px solid;
background-color: transparent;
left: calc(24rem);
margin-left: -0; }
.wrapper .header #tag-nav .sub-wrapper .bedo-sub-wrapper span::before {
display: block;
content: "";
position: absolute;
width: calc(24rem);
height: calc(24rem);
top: 0;
background-color: transparent;
z-index: 9;
left: -0;
border-left: #fff solid 1px;
-moz-transform: skewX(-45deg);
-o-transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
transform-origin: left bottom; }
.wrapper .header #tag-nav .sub-wrapper .bedo-sub-wrapper span .circle {
width: 4rem;
height: 4rem;
border-radius: 50%;
background: #fff;
position: absolute;
right: 0;
top: 0;
margin: 2rem; }
.wrapper main {
z-index: 1; }
.wrapper main section {
@@ -739,9 +835,8 @@ object {
position: absolute;
background-color: #fff;
padding: 2rem;
bottom: 49%;
right: 0;
width: 50vw;
min-width: 50vw;
text-align: center;
font: bold 1rem "Westeinde Caption";
color: #000;
@@ -778,7 +873,7 @@ object {
.wrapper main section .misha_loadmore a,
.wrapper main section .misha_loadmore p {
font: bold 3rem "Westeinde Caption";
color: #fff;
color: transparent;
-webkit-text-stroke: #000 1px; }
@media (-webkit-min-device-pixel-ratio: 2.1) {
.wrapper main section .misha_loadmore a,
@@ -856,6 +951,7 @@ object {
.home main section {
/* --------------------------- home article mobile/default -------------------------- */
/* ------------------------ home article desktop big ------------------------ */
/* ------------------------------------ - ----------------------------------- */
/* ----------------------- articles desktop small ----------------------- */ }
@media (min-width: 769px) {
.archive main section,
@@ -868,15 +964,14 @@ object {
.archive main section article,
.home main section article {
height: 100vh; }
@media (min-width: 769px) {
.archive main section article > a,
.home main section article > a {
margin: 0;
padding: 0;
border: none;
display: inline-block; }
.archive main section article .thumbnailwrapper img.attachment-home-thumbnail,
.home main section article .thumbnailwrapper img.attachment-home-thumbnail {
.archive main section article .thumbnailwrapper img,
.home main section article .thumbnailwrapper img {
height: 50vh;
width: 100vw;
object-fit: cover; }
@@ -890,15 +985,40 @@ object {
.archive main section article h2 a,
.home main section article h2 a {
font: bold 3rem "Westeinde Caption";
color: #000; } }
@media (min-width: 769px) and (-webkit-min-device-pixel-ratio: 2.1) {
color: #000; }
@media (-webkit-min-device-pixel-ratio: 2.1) {
.archive main section article h2 a,
.home main section article h2 a {
font-size: 2.5rem !important; } }
@media (min-width: 769px) and (min-width: 769px) {
@media (min-width: 769px) {
.archive main section article h2 a,
.home main section article h2 a {
font-size: 5rem; } }
.archive main section article .metadata,
.home main section article .metadata {
bottom: 50%;
height: 5rem;
display: flex;
width: fit-content;
justify-content: space-around;
flex-wrap: nowrap;
align-items: center;
padding: 0; }
.archive main section article .metadata .vr,
.home main section article .metadata .vr {
height: 100%;
width: 1px;
background-color: #000;
flex-grow: 0 !important;
flex-shrink: 0 !important;
flex-basis: auto !important; }
.archive main section article .metadata .bevezeto,
.archive main section article .metadata .alcim,
.archive main section article .metadata .curvyArrow,
.home main section article .metadata .bevezeto,
.home main section article .metadata .alcim,
.home main section article .metadata .curvyArrow {
display: none; }
@media (min-width: 769px) {
.archive main section .home-wrapper-big,
.home main section .home-wrapper-big {
@@ -963,12 +1083,6 @@ object {
.home main section .home-wrapper-big article .metadata .categories {
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;
flex: 0 0 auto; }
.archive main section .home-wrapper-big article .metadata .postedon,
.home main section .home-wrapper-big article .metadata .postedon {
padding: 0 5rem; }
@@ -1155,7 +1269,7 @@ object {
.home main section .home-wrapper-small .archivetitle .metadata,
.home main section .home-wrapper-small .archivedescription .metadata {
width: 100%;
height: 20%;
height: 5rem;
position: absolute;
bottom: 0;
right: 0;
@@ -1163,7 +1277,7 @@ object {
display: flex;
flex-direction: row;
padding: 0;
justify-content: flex-end;
justify-content: space-between;
align-items: stretch;
display: none; }
.archive main section .home-wrapper-small article .metadata::after,
@@ -1177,10 +1291,10 @@ object {
display: block;
top: 0;
border: none;
width: calc(100% - 4rem);
width: calc(100% - 5rem);
border-top: #000 1px solid;
background-color: transparent;
left: calc(4rem);
left: calc(5rem);
margin-left: -0; }
.archive main section .home-wrapper-small article .metadata::before,
.archive main section .home-wrapper-small .archivetitle .metadata::before,
@@ -1191,8 +1305,8 @@ object {
display: block;
content: "";
position: absolute;
width: calc(4rem);
height: calc(4rem);
width: calc(5rem);
height: calc(5rem);
top: 0;
background-color: transparent;
z-index: 9;
@@ -1210,7 +1324,44 @@ object {
.home main section .home-wrapper-small article .metadata.vis,
.home main section .home-wrapper-small .archivetitle .metadata.vis,
.home main section .home-wrapper-small .archivedescription .metadata.vis {
display: flex; } }
display: flex; }
.archive main section .home-wrapper-small article .metadata .categories,
.archive main section .home-wrapper-small article .metadata .postedon,
.archive main section .home-wrapper-small .archivetitle .metadata .categories,
.archive main section .home-wrapper-small .archivetitle .metadata .postedon,
.archive main section .home-wrapper-small .archivedescription .metadata .categories,
.archive main section .home-wrapper-small .archivedescription .metadata .postedon,
.home main section .home-wrapper-small article .metadata .categories,
.home main section .home-wrapper-small article .metadata .postedon,
.home main section .home-wrapper-small .archivetitle .metadata .categories,
.home main section .home-wrapper-small .archivetitle .metadata .postedon,
.home main section .home-wrapper-small .archivedescription .metadata .categories,
.home main section .home-wrapper-small .archivedescription .metadata .postedon {
font: bold 1rem "Westeinde Caption";
color: #000;
padding: 2rem; } }
@media (min-width: 769px) and (min-width: 769px) {
.archive main section .home-wrapper-small article .metadata .categories,
.archive main section .home-wrapper-small article .metadata .postedon,
.archive main section .home-wrapper-small .archivetitle .metadata .categories,
.archive main section .home-wrapper-small .archivetitle .metadata .postedon,
.archive main section .home-wrapper-small .archivedescription .metadata .categories,
.archive main section .home-wrapper-small .archivedescription .metadata .postedon,
.home main section .home-wrapper-small article .metadata .categories,
.home main section .home-wrapper-small article .metadata .postedon,
.home main section .home-wrapper-small .archivetitle .metadata .categories,
.home main section .home-wrapper-small .archivetitle .metadata .postedon,
.home main section .home-wrapper-small .archivedescription .metadata .categories,
.home main section .home-wrapper-small .archivedescription .metadata .postedon {
font-size: 1.2rem; } }
@media (min-width: 769px) {
.archive main section .home-wrapper-small article .metadata .categories,
.archive main section .home-wrapper-small .archivetitle .metadata .categories,
.archive main section .home-wrapper-small .archivedescription .metadata .categories,
.home main section .home-wrapper-small article .metadata .categories,
.home main section .home-wrapper-small .archivetitle .metadata .categories,
.home main section .home-wrapper-small .archivedescription .metadata .categories {
margin-left: 6rem; } }
@media (min-width: 769px) and (min-width: 769px) {
.archive main section .home-wrapper-small article h2,
.archive main section .home-wrapper-small article h2 a,
@@ -1226,7 +1377,7 @@ object {
.home main section .home-wrapper-small .archivedescription h2 a {
font-size: 1.2rem;
-webkit-text-stroke: #000 1px;
color: #fff; } }
color: transparent; } }
@media (min-width: 769px) {
.archive main section .home-wrapper-small article h2,
.archive main section .home-wrapper-small .archivetitle h2,
@@ -1258,18 +1409,7 @@ object {
justify-content: flex-end;
align-items: flex-start;
padding: 2rem;
border-right: #000 1px solid;
font: bold 3rem "Westeinde Caption";
color: #000; } }
@media (min-width: 769px) and (-webkit-min-device-pixel-ratio: 2.1) {
.archive main section .home-wrapper-small .archivetitle,
.home main section .home-wrapper-small .archivetitle {
font-size: 2.5rem !important; } }
@media (min-width: 769px) and (min-width: 769px) {
.archive main section .home-wrapper-small .archivetitle,
.home main section .home-wrapper-small .archivetitle {
font-size: 5rem; } }
@media (min-width: 769px) {
border-right: #000 1px solid; }
.archive main section .home-wrapper-small .archivetitle::after,
.home main section .home-wrapper-small .archivetitle::after {
position: absolute;
@@ -1300,12 +1440,36 @@ object {
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
transform-origin: left bottom; }
.archive main section .home-wrapper-small .archivetitle h1,
.home main section .home-wrapper-small .archivetitle h1 {
font: bold 3rem "Westeinde Caption";
color: #000;
margin: 0; } }
@media (min-width: 769px) and (-webkit-min-device-pixel-ratio: 2.1) {
.archive main section .home-wrapper-small .archivetitle h1,
.home main section .home-wrapper-small .archivetitle h1 {
font-size: 2.5rem !important; } }
@media (min-width: 769px) and (min-width: 769px) {
.archive main section .home-wrapper-small .archivetitle h1,
.home main section .home-wrapper-small .archivetitle h1 {
font-size: 5rem; } }
@media (min-width: 769px) {
.archive main section .home-wrapper-small .archivetitle.tag,
.home main section .home-wrapper-small .archivetitle.tag {
order: 1; }
.archive main section .home-wrapper-small .archivetitle.tag h1,
.home main section .home-wrapper-small .archivetitle.tag h1 {
text-transform: uppercase; }
.archive main section .home-wrapper-small .archivetitle > object,
.home main section .home-wrapper-small .archivetitle > object {
position: absolute;
top: 2rem;
right: 2rem;
width: 5rem;
height: 5rem; }
.archive main section .home-wrapper-small .archivedescription,
.home main section .home-wrapper-small .archivedescription {
order: 1;
order: 4;
border-top: #000 1px solid;
border-right: #000 1px solid;
border-bottom: #000 1px solid;
@@ -1590,6 +1754,9 @@ object {
/* -------------------------------------------------------------------------- */
.tag-be .metadata {
color: #00ffb8 !important; }
@media (max-width: 768px) {
.tag-be .metadata .vr {
background-color: #00ffb8 !important; } }
.tag-be .metadata a {
color: #00ffb8 !important; }
@@ -1614,6 +1781,23 @@ object {
.tag-be.home-small .metadata a {
color: #000 !important; } }
.tag-be.bedo-sub-wrapper > a {
-webkit-text-stroke: #00ffb8 1px !important; }
.tag-be.bedo-sub-wrapper span {
color: #00ffb8 !important; }
.tag-be.bedo-sub-wrapper .circle {
background-color: #00ffb8 !important; }
.tag-be.archive.tag {
background-color: #00ffb8 !important; }
.tag-be.archive.tag .header-1,
.tag-be.archive.tag .header-2 {
background-color: #00ffb8 !important; }
.tag-be.archive.tag article * {
background-color: #00ffb8 !important; }
@media (min-width: 769px) {
.tag-be.random .thumbnailwrapper > img {
-webkit-mask: url(../img/clip/be_desktop.svg);
@@ -1625,6 +1809,9 @@ object {
.tag-do .metadata {
color: #ff5f5f !important; }
@media (max-width: 768px) {
.tag-do .metadata .vr {
background-color: #ff5f5f !important; } }
.tag-do .metadata a {
color: #ff5f5f !important; }
@@ -1649,6 +1836,23 @@ object {
.tag-do.home-small .metadata a {
color: #000 !important; } }
.tag-do.bedo-sub-wrapper > a {
-webkit-text-stroke: #ff5f5f 1px !important; }
.tag-do.bedo-sub-wrapper span {
color: #ff5f5f !important; }
.tag-do.bedo-sub-wrapper .circle {
background-color: #ff5f5f !important; }
.tag-do.archive.tag {
background-color: #ff5f5f !important; }
.tag-do.archive.tag .header-1,
.tag-do.archive.tag .header-2 {
background-color: #ff5f5f !important; }
.tag-do.archive.tag article * {
background-color: #ff5f5f !important; }
@media (min-width: 769px) {
.tag-do.random .thumbnailwrapper > img {
-webkit-mask: url(../img/clip/do_desktop.svg);
@@ -1660,6 +1864,9 @@ object {
.tag-think .metadata {
color: #fdff00 !important; }
@media (max-width: 768px) {
.tag-think .metadata .vr {
background-color: #fdff00 !important; } }
.tag-think .metadata a {
color: #fdff00 !important; }
@@ -1684,6 +1891,23 @@ object {
.tag-think.home-small .metadata a {
color: #000 !important; } }
.tag-think.bedo-sub-wrapper > a {
-webkit-text-stroke: #fdff00 1px !important; }
.tag-think.bedo-sub-wrapper span {
color: #fdff00 !important; }
.tag-think.bedo-sub-wrapper .circle {
background-color: #fdff00 !important; }
.tag-think.archive.tag {
background-color: #fdff00 !important; }
.tag-think.archive.tag .header-1,
.tag-think.archive.tag .header-2 {
background-color: #fdff00 !important; }
.tag-think.archive.tag article * {
background-color: #fdff00 !important; }
@media (min-width: 769px) {
.tag-think.random .thumbnailwrapper > img {
-webkit-mask: url(../img/clip/think_desktop.svg);
@@ -1695,6 +1919,9 @@ object {
.tag-love .metadata {
color: #3c00ff !important; }
@media (max-width: 768px) {
.tag-love .metadata .vr {
background-color: #3c00ff !important; } }
.tag-love .metadata a {
color: #3c00ff !important; }
@@ -1719,6 +1946,23 @@ object {
.tag-love.home-small .metadata a {
color: #000 !important; } }
.tag-love.bedo-sub-wrapper > a {
-webkit-text-stroke: #3c00ff 1px !important; }
.tag-love.bedo-sub-wrapper span {
color: #3c00ff !important; }
.tag-love.bedo-sub-wrapper .circle {
background-color: #3c00ff !important; }
.tag-love.archive.tag {
background-color: #3c00ff !important; }
.tag-love.archive.tag .header-1,
.tag-love.archive.tag .header-2 {
background-color: #3c00ff !important; }
.tag-love.archive.tag article * {
background-color: #3c00ff !important; }
@media (min-width: 769px) {
.tag-love.random .thumbnailwrapper > img {
-webkit-mask: url(../img/clip/love_desktop.svg);

10
functions.php
View File

@@ -87,8 +87,10 @@ function dis2019_nav()
}
//walker for tag menu: bedo circle hover
class Menu_With_Description extends Walker_Nav_Menu {
function start_el(&$output, $item, $depth, $args) {
class Menu_With_Description extends Walker_Nav_Menu
{
public function start_el(&$output, $item, $depth, $args)
{
global $wp_query;
$indent = ($depth) ? str_repeat("\t", $depth) : '';
@@ -97,7 +99,7 @@ class Menu_With_Description extends Walker_Nav_Menu {
$classes = empty($item->classes) ? array() : (array) $item->classes;
$class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item));
$class_names = ' class="' . esc_attr( $class_names ) . '"';
$class_names = ' class="' . esc_attr($class_names) . ' tag-' . $item->title . '"';
$output .= $indent . '<li id="menu-item-' . $item->ID . '"' . $value . $class_names . '>';
@@ -117,7 +119,6 @@ class Menu_With_Description extends Walker_Nav_Menu {
}
}
// Load dis-2019 scripts (header.php)
function dis2019_header_scripts()
{
@@ -494,7 +495,6 @@ function dis_2019_more_posts_on_home(&$query)
$pposts = 11;
}
//set post_per_page if it's homepage
if (!$query->is_paged) {
$query->set('posts_per_page', $pposts);

BIN
img/clip/be_desktop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
img/clip/do_desktop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
img/clip/love_desktop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
img/clip/think_desktop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
img/kereso_icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 493 B

After

Width:  |  Height:  |  Size: 995 B

12
img/kereso_icon.svg
View File

@@ -22,7 +22,7 @@
inkscape:version="0.92.3 (2405546, 2018-03-11)"><metadata
id="metadata13"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
id="defs11" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
@@ -37,22 +37,22 @@
id="namedview9"
showgrid="false"
inkscape:zoom="5.2850809"
inkscape:cx="22.666"
inkscape:cy="45.032423"
inkscape:cx="1.0958477"
inkscape:cy="19.678033"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:window-maximized="0"
inkscape:current-layer="Layer_1" />
<g
id="g4"
style="fill:#ffffff;fill-opacity:1">
style="fill:#000000;fill-opacity:1">
<path
d="M18.548,5.871h-0.5v0.667v3v0.333h0.5c6.882,0,11.5,6.027,11.5,11.5v0.5h0.505h3h0.495v-0.5 C34.048,13.203,26.808,5.871,18.548,5.871z"
id="path2"
style="fill:#ffffff;fill-opacity:1" />
style="fill:#000000;fill-opacity:1" />
</g>
<path
d="M37.758,28.773c1.285-2.702,2.065-5.868,2.065-8.839c0-5.322-2.071-10.328-5.832-14.095C30.228,2.074,25.228,0,19.912,0 C14.595,0,9.595,2.074,5.831,5.839C2.071,9.606,0,14.612,0,19.934c0,5.324,2.071,10.33,5.831,14.096 c3.761,3.764,8.762,5.837,14.081,5.837c3.382,0,6.729-0.871,9.678-2.518l0.083-0.046l7.352,7.352l8.308-8.308L37.758,28.773z M29.913,35.069c-0.577,0.388-1.136,0.717-1.705,1.002l-0.081,0.041l-0.007-0.007c-2.563,1.305-5.325,1.967-8.208,1.967 c-4.842,0-9.39-1.884-12.807-5.305c-3.424-3.436-5.31-7.993-5.31-12.832c0-4.841,1.886-9.395,5.31-12.82 c3.424-3.428,7.973-5.316,12.807-5.316c4.831,0,9.383,1.888,12.818,5.316c3.417,3.419,5.299,7.973,5.299,12.82 c0,2.483-0.63,5.195-1.62,7.49l-0.004-0.004c-0.192,0.391-0.482,0.945-0.875,1.6l7.327,7.327l-5.833,5.833L29.913,35.069z"
id="path6"
style="fill:#ffffff;fill-opacity:1" />
style="fill:#000000;fill-opacity:1" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

56
js/scripts.js
View File

@@ -147,15 +147,18 @@
if (!isMobile) {
$(".search-box button").click(function (e) {
e.preventDefault()
// e.preventDefault()
var bar = $(this).next(".search-bar")
if (bar.hasClass("opensearch")) {
//if search is opened close:
bar.stop().animate({ width: "0" }, 400, function () {
bar.hide().removeClass("opensearch")
})
} else {
bar.show().stop().animate({ width: "20rem" }, 400, function () {
//if it's closed open:
bar.show().stop().animate({ width: "50vw" }, 400, function () {
bar.addClass("opensearch")
$(".search-input").focus()
})
}
@@ -203,8 +206,13 @@
//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" })
if ($("body").is('.archive, .tag') && articleWrapCounter == 1) {
if (j == 3 || j == 4) {
$('.hbox:nth-child(' + j + ')').css({ order: j - 1 })
} else if (j == 5 || j == 6) {
$('.hbox:nth-child(' + j + ')').css({ order: j })
}
}
}
//wrap classes
@@ -247,12 +255,27 @@
return i
}
function random2() {
const choices = [
[1, 3],
[1, 5],
[1, 6],
[2, 4],
[2, 6],
[3, 4],
[3, 5],
[4, 6]
]
let nr = Math.floor(Math.random() * choices.length);
return choices[nr]
}
//jquery function, adds random class to 3 random cihldren
(function ($) {
$.fn.addRandomClasses = function () {
let rn = randomNumbers()
for (let i = 0; i < 3; i++) {
var j = rn[i] + 1
let rn = random2()
for (let i = 0; i < 2; i++) {
var j = rn[i]
this.children("article:nth-child(" + j + ")").addClass("random")
}
return this
@@ -576,9 +599,20 @@
//move subs to wrapper
$(bedoListItems).each(function () {
let itemId = $(this).attr("id")
$(".sub-wrapper").append('<div id="' + itemId + '"></div>')
let tagClass = $(this).attr("class").split(" ")
let itemClass = findClassByStart(tagClass, 'tag')
// add wrapper div
$(".sub-wrapper").append('<div id="' + itemId + '" class="bedo-sub-wrapper ' + itemClass + '"></div>')
// add tag title
$(this).children("a").clone().appendTo(".sub-wrapper #" + itemId)
//add sub text
$(this).children("span").appendTo(".sub-wrapper #" + itemId)
//add circle
$(".sub-wrapper #" + itemId + " span").append('<div class="circle">')
})
//wrap each letter to spans
@@ -600,9 +634,15 @@
$(bedoWords).hover(function () {
$(bedoLetters).addClass("pause")
$(this).children("span").addClass("current")
let currTagClass = $(this).parent().attr("class").split(" ")
let tagClass = findClassByStart(currTagClass, "tag")
console.log(".bedo-sub-wrapper ." + tagClass)
$(".sub-wrapper>.opened").removeClass("opened")
$(".sub-wrapper>." + tagClass).addClass("opened")
}, function () {
$(bedoLetters).removeClass("pause")
$(this).children("span").removeClass("current")
$(".sub-wrapper>.opened").removeClass("opened")
})

5
loop.php
View File

@@ -21,7 +21,9 @@
<div class="metadata">
<div class="categories">
<?php the_category(' | ');?>
<?php
<?php if(is_home() and $qc < 3): ; //first two posts format only ?>
<?php //get the post format
$terms = get_the_terms($post->ID, 'Format');
if ($terms) {
foreach ($terms as $term) {
@@ -29,6 +31,7 @@
echo $term->name;
}
}?>
<?php endif;?>
</div>
<?php if(is_home() and $qc < 3): ; //first two posts subtitle and excerpt ?>
<div class="alcim">

36
sass/_font-mixins.scss
View File

@@ -15,6 +15,21 @@
}
}
@mixin searchtext {
//search textbox
font: 900 4rem "Westeinde Caption";
color: #000;
-webkit-text-stroke: #fff 1px;
@media #{$smalldesktop} {
font-size: 4rem;
color: #000 !important;
-webkit-text-stroke: unset !important;
}
}
@mixin home-title {
//article titles on home
font: bold 3rem "Westeinde Caption";
@@ -30,7 +45,7 @@
@mixin home-more {
//loadmore text on home and archives
font: bold 3rem "Westeinde Caption";
color: #fff;
color: transparent;
-webkit-text-stroke: #000 1px;
@media #{$mobile-landscape} {
font-size: 2rem !important;
@@ -45,7 +60,7 @@
@media #{$smalldesktop} {
font-size: 1.2rem;
-webkit-text-stroke: #000 1px;
color: #fff;
color: transparent;
}
}
@@ -83,14 +98,29 @@
color: transparent;
-webkit-text-stroke: #000 1px;
text-transform: uppercase;
&.current{
&.pause {
-webkit-text-stroke: #fff 1px !important;
}
&.current {
-webkit-text-stroke: #000 1px !important;
}
@media #{$smalldesktop} {
font-size: 1.2rem;
}
}
@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: bold 3rem "Butler";
color: #000;

245
sass/base.scss
View File

@@ -108,6 +108,8 @@ $h-unit-1: 5rem;
//vertical units:
$v-unit-1: 4rem;
$v-unit-2: 8rem;
$v-unit-4: 16rem;
$v-unit-6: 24rem;
/* -------------------------------------------------------------------------- */
/* other mixins */
@@ -134,9 +136,10 @@ $v-unit-2: 8rem;
&.char#{$i} {
@include transform(rotate($angle-offset + $angle-per-char * $i));
-webkit-animation: spin#{$i} 4s linear infinite;
-moz-animation: spin#{$i} 4s linear infinite;
animation: spin#{$i} 4s linear infinite;
$speed: 10s;
-webkit-animation: spin#{$i} $speed linear infinite;
-moz-animation: spin#{$i} $speed linear infinite;
animation: spin#{$i} $speed linear infinite;
@-moz-keyframes spin#{$i} {
100% {
@@ -202,7 +205,7 @@ $v-unit-2: 8rem;
z-index: -1;
}
@mixin triangle-corner-bordered($radius, $offset, $bgcolor, $side) {
@mixin triangle-corner-bordered($radius, $offset, $bgcolor, $bordercolor, $side) {
&::after {
//for border without corner
position: absolute;
@@ -216,7 +219,7 @@ $v-unit-2: 8rem;
width: calc(100% - #{$radius} + #{$offset});
}
border-top: #000 1px solid;
border-top: $bordercolor 1px solid;
background-color: $bgcolor;
@if $side==left {
@@ -241,13 +244,13 @@ $v-unit-2: 8rem;
@if $side==left {
left: -#{$offset};
border-left: #000 solid 1px;
border-left: $bordercolor solid 1px;
@include transform(skewX(-45deg));
transform-origin: left bottom;
}
@if $side==right {
right: -#{$offset};
border-right: #000 solid 1px;
border-right: $bordercolor solid 1px;
@include transform(skewX(45deg));
transform-origin: right bottom;
}
@@ -305,7 +308,10 @@ $v-unit-2: 8rem;
align-content: space-between;
z-index: 3100;
background: #fff;
& > div:not(#sidebar) {
.logo,
.social-link,
.menubutton,
.events-link {
filter: invert(100);
}
}
@@ -352,7 +358,7 @@ $v-unit-2: 8rem;
// color: #000;
// fill: currentColor;
filter: invert(100%); //black
@include transform(rotate(180deg)) // transform: rotate(180deg);
@include transform(rotate(180deg)) // transform: rotate(180deg);;;;;;;;;;;;;;;;;;;
}
}
}
@@ -424,47 +430,71 @@ $v-unit-2: 8rem;
/* SEARCH */
/* ========================================================================== */
/* ------------------------------ search mobile ----------------------------- */
.search-box {
display: none;
@media #{$smalldesktop} {
display: block;
flex: 1 1 0 !important;
}
}
.search-bar {
@media #{$smalldesktop} {
display: none;
position: absolute;
width: 0;
left: 7rem;
top: 0;
}
form.search {
display: flex;
flex-direction: row;
border-bottom: #fff 1px solid;
@media #{$smalldesktop} {
}
background-color: #000;
input {
@include menutext();
@include searchtext();
background-color: #000;
padding: 0;
border: none;
caret-color: #fff;
flex: 1 1 auto;
width: 1rem;
}
button {
flex: 0 0 auto;
@media #{$smalldesktop} {
display: none;
@media #{$only-mobile} {
filter: invert(100)
}
}
}
} //search-bar end
/* ----------------------------- search desktop ----------------------------- */
@media #{$smalldesktop} {
.search-box {
display: block;
flex: 1 1 0 !important;
}
.search-bar {
display: none;
position: fixed;
width: 0;
left: $h-unit-2;
bottom: 0;
height: $h-unit-2;
form.search {
border-bottom: none;
height: 100%;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
input {
padding: 0 $h-unit-1;
}
button {
display: none;
}
}
}
}
/* -------------------- header scroll: scroll with click -------------------- */
.header-scroll {
display: none;
}
@@ -567,21 +597,59 @@ $v-unit-2: 8rem;
}
}
.sub-wrapper {
.bedo-sub-wrapper {
position: fixed;
display: none;
right: $h-unit-2;
left: $h-unit-2;
top: 0;
background-color: #000;
height: 50vh;
z-index: -1;
flex-direction: row;
justify-content: flex-start;
align-items: center;
// &:first-child {
// display: flex;
// }
&.opened {
display: flex;
}
a {
@include bedo-hover-title();
@include transform(rotate(-45deg));
transform-origin: 50% 50%;
display: block;
width: calc(30% + #{$v-unit-6});
text-align: center;
height: fit-content;
}
span {
display: block;
position: absolute;
bottom: 0;
right: 0;
height: $v-unit-6;
width: 70%;
padding: $v-unit-1;
padding-left: $v-unit-6 + $v-unit-2;
padding-right: $v-unit-4;
@include triangle-corner-bordered(#{$v-unit-6}, 0, transparent, #fff, left);
@include bedo-hover-sub();
.circle {
$diameter: 4rem;
width: $diameter;
height: $diameter;
border-radius: 50%;
background: #fff;
position: absolute;
right: 0;
top: 0;
margin: $v-unit-1 / 2;
}
}
}
}
}
} //header end
@@ -597,9 +665,9 @@ $v-unit-2: 8rem;
position: absolute;
background-color: #fff;
padding: 2rem;
bottom: 49%;
// bottom: 49%;
right: 0;
width: 50vw;
min-width: 50vw;
text-align: center;
@include home-metadata();
z-index: 1;
@@ -721,7 +789,7 @@ $v-unit-2: 8rem;
article {
height: 100vh;
@media #{$smalldesktop} {
& > a {
margin: 0;
padding: 0;
@@ -730,7 +798,7 @@ $v-unit-2: 8rem;
}
.thumbnailwrapper {
img.attachment-home-thumbnail {
img {
// post thumbnail on home
height: 50vh;
width: 100vw;
@@ -752,10 +820,38 @@ $v-unit-2: 8rem;
@include home-title();
}
}
} //article end
.metadata {
bottom: 50%;
height: $h-unit-1;
display: flex;
width: fit-content;
justify-content: space-around;
flex-wrap: nowrap;
align-items: center;
padding: 0;
.vr {
height: 100%;
width: 1px;
background-color: #000;
flex-grow: 0 !important;
flex-shrink: 0 !important;
flex-basis: auto !important;
}
.bevezeto,
.alcim,
.curvyArrow {
display: none;
}
}
} //article end
/* ------------------------ home article desktop big ------------------------ */
/* ------------------------------------ - ----------------------------------- */
@media #{$smalldesktop} {
//big: first 2 articles
@@ -825,12 +921,7 @@ $v-unit-2: 8rem;
padding: 0 $h-unit-1;
}
.vr {
height: 100%;
width: 1px;
background-color: #000;
flex: 0 0 auto;
}
.postedon {
padding: 0 $h-unit-1;
@@ -898,7 +989,7 @@ $v-unit-2: 8rem;
&.home-wrapper-1 {
article {
.metadata {
@include triangle-corner-bordered(#{$v-unit-1}, 0, transparent, left);
@include triangle-corner-bordered(#{$v-unit-1}, 0, transparent, #000, left);
.filler {
position: relative;
}
@@ -914,7 +1005,7 @@ $v-unit-2: 8rem;
.metadata {
justify-content: flex-end;
@include triangle-corner-bordered(#{$v-unit-1}, 0, transparent, right);
@include triangle-corner-bordered(#{$v-unit-1}, 0, transparent, #000, right);
.filler {
order: -1;
}
@@ -963,7 +1054,7 @@ $v-unit-2: 8rem;
.metadata {
width: 100%;
height: 20%;
height: $h-unit-1;
position: absolute;
bottom: 0;
@@ -974,13 +1065,24 @@ $v-unit-2: 8rem;
display: flex;
flex-direction: row;
padding: 0;
justify-content: flex-end;
justify-content: space-between;
align-items: stretch;
@include triangle-corner-bordered(#{$v-unit-1}, 0, transparent, left);
@include triangle-corner-bordered(#{$h-unit-1}, 0, transparent, #000, left);
display: none;
&.vis {
display: flex;
}
.categories,
.postedon {
@include home-metadata();
padding: $v-unit-1 / 2;
}
.categories {
margin-left: $v-unit-1 * 1.5;
}
}
h2,
@@ -1011,14 +1113,27 @@ $v-unit-2: 8rem;
align-items: flex-start;
padding: 2rem;
border-right: #000 1px solid;
@include triangle-corner-bordered($h-unit-1, 0, transparent, #000, left);
h1 {
@include home-title();
@include triangle-corner-bordered($h-unit-1, 0, transparent, left);
margin: 0;
}
&.tag {
order: 1;
h1 {
text-transform: uppercase;
}
}
& > object {
position: absolute;
top: 2rem;
right: 2rem;
width: $h-unit-1;
height: $h-unit-1;
}
}
.archivedescription {
order: 1;
order: 4;
border-top: #000 1px solid;
border-right: #000 1px solid;
border-bottom: #000 1px solid;
@@ -1144,7 +1259,7 @@ $v-unit-2: 8rem;
padding-left: 0;
width: calc(100% - #{$h-unit-1}) !important;
@include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1}, white, left);
@include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1}, white, #000, left);
}
.time-cat {
z-index: 10;
@@ -1271,8 +1386,14 @@ $v-unit-2: 8rem;
/* -------------------------------------------------------------------------- */
@mixin tagcolors($color) {
//metadata on mobile
.metadata {
color: $color !important;
@media #{$only-mobile} {
.vr{
background-color: $color !important;
}
}
a {
color: $color !important;
@@ -1307,6 +1428,32 @@ $v-unit-2: 8rem;
}
}
}
//hover on bedo circle
&.bedo-sub-wrapper {
& > a {
-webkit-text-stroke: $color 1px !important;
}
span {
color: $color !important;
}
.circle {
background-color: $color !important;
}
}
// tag archive pages
&.archive.tag {
background-color: $color !important;
.header-1,
.header-2 {
background-color: $color !important;
}
article * {
background-color: $color !important;
}
}
}
//tagclip: filters on small articale images