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 settings>reading>Blog pages show at most 6
## Paraméterek ## Paraméterek, elemek szerkesztése
### Bejegyzések ### Bejegyzések
@@ -28,6 +28,24 @@ dis-esemeny-datum
dis-esemeny-link 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 ## Developement verzió telepítése
Szükséges: python2, gulp global, max node 11 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: Single:
- Nem kell carousel a felső oldalra - ~Nem kell carousel a felső oldalra~
- crop thumbnail a fenti képnél - crop thumbnail a fenti képnél
- állókép körbefut a szöveg!!!! - állókép körbefut a szöveg!!!!
- galéria: mobilon fix 2, column számot lehessen használni asztalin - 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, 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: - kattintás a szóra:
Kategória lap: első csempe kimarad. Kategória lap: első csempe kimarad.
Kereső: Kereső:
- teljes lábléc magasságban, hosszabban fusson ki - ~teljes lábléc magasságban, hosszabban fusson ki~
- ne legyen hover, - ~ne legyen hover~,
- focus - ~focus~
# Kérdések # Kérdések

20
archive.php
View File

@@ -1,10 +1,8 @@
<?php get_header();?> <?php get_header();?>
<!-- section --> <!-- section -->
<section id="content"> <section id="content">
<?php <?php
if (is_category()) { if (is_category()) {
$ttl = single_cat_title("", false); $ttl = single_cat_title("", false);
@@ -20,20 +18,28 @@
// esc_html_e($ttl, 'text-domain') // 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 <?php
// add description box if it's a tag
if (is_tag()) { if (is_tag()) {
echo '<div class="archivedescription">'; echo '<div class="archivedescription">';
echo tag_description(); echo tag_description();
echo "</div>"; echo "</div>";
} }
?> ?>
<?php get_template_part('loop');?> <?php get_template_part('loop');?>
<?php get_template_part('loadmore');?> <?php get_template_part('loadmore');?>

510
css/base.css
View File

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

36
functions.php
View File

@@ -87,37 +87,38 @@ function dis2019_nav()
} }
//walker for tag menu: bedo circle hover //walker for tag menu: bedo circle hover
class Menu_With_Description extends Walker_Nav_Menu { class Menu_With_Description extends Walker_Nav_Menu
function start_el(&$output, $item, $depth, $args) { {
public function start_el(&$output, $item, $depth, $args)
{
global $wp_query; global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : ''; $indent = ($depth) ? str_repeat("\t", $depth) : '';
$class_names = $value = ''; $class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes; $classes = empty($item->classes) ? array() : (array) $item->classes;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ); $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 .'>'; $output .= $indent . '<li id="menu-item-' . $item->ID . '"' . $value . $class_names . '>';
$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : ''; $attributes = !empty($item->attr_title) ? ' title="' . esc_attr($item->attr_title) . '"' : '';
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : ''; $attributes .= !empty($item->target) ? ' target="' . esc_attr($item->target) . '"' : '';
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : ''; $attributes .= !empty($item->xfn) ? ' rel="' . esc_attr($item->xfn) . '"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : ''; $attributes .= !empty($item->url) ? ' href="' . esc_attr($item->url) . '"' : '';
$item_output = $args->before; $item_output = $args->before;
$item_output .= '<a'. $attributes .'>'; $item_output .= '<a' . $attributes . '>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
$item_output .= '</a>'; $item_output .= '</a>';
$item_output .= '<span class="sub menu-item-sub-' . $item->ID . '">' . $item->description . '</span>'; $item_output .= '<span class="sub menu-item-sub-' . $item->ID . '">' . $item->description . '</span>';
$item_output .= $args->after; $item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
} }
} }
// Load dis-2019 scripts (header.php) // Load dis-2019 scripts (header.php)
function dis2019_header_scripts() function dis2019_header_scripts()
{ {
@@ -488,13 +489,12 @@ function dis_2019_more_posts_on_home(&$query)
if ($query->is_home()) { if ($query->is_home()) {
$pposts = 14; $pposts = 14;
}elseif ($query->is_tag()) { } elseif ($query->is_tag()) {
$pposts = 10; $pposts = 10;
}else { } else {
$pposts = 11; $pposts = 11;
} }
//set post_per_page if it's homepage //set post_per_page if it's homepage
if (!$query->is_paged) { if (!$query->is_paged) {
$query->set('posts_per_page', $pposts); $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 inkscape:version="0.92.3 (2405546, 2018-03-11)"><metadata
id="metadata13"><rdf:RDF><cc:Work id="metadata13"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type 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 id="defs11" /><sodipodi:namedview
pagecolor="#ffffff" pagecolor="#ffffff"
bordercolor="#666666" bordercolor="#666666"
@@ -37,22 +37,22 @@
id="namedview9" id="namedview9"
showgrid="false" showgrid="false"
inkscape:zoom="5.2850809" inkscape:zoom="5.2850809"
inkscape:cx="22.666" inkscape:cx="1.0958477"
inkscape:cy="45.032423" inkscape:cy="19.678033"
inkscape:window-x="0" inkscape:window-x="0"
inkscape:window-y="27" inkscape:window-y="27"
inkscape:window-maximized="0" inkscape:window-maximized="0"
inkscape:current-layer="Layer_1" /> inkscape:current-layer="Layer_1" />
<g <g
id="g4" id="g4"
style="fill:#ffffff;fill-opacity:1"> style="fill:#000000;fill-opacity:1">
<path <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" 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" id="path2"
style="fill:#ffffff;fill-opacity:1" /> style="fill:#000000;fill-opacity:1" />
</g> </g>
<path <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" 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" id="path6"
style="fill:#ffffff;fill-opacity:1" /> style="fill:#000000;fill-opacity:1" />
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

60
js/scripts.js
View File

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

5
loop.php
View File

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

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

321
sass/base.scss
View File

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