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

small fixes

Browse Source
This commit is contained in:
Péter Gyetvai
2019-07-01 03:31:24 +02:00
parent 48e247e0f9
commit 98e0282821
9 changed files with 388 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
_jegyzet.md
View File

@@ -98,3 +98,8 @@ Kereső:
## single: ## single:
képen ne legyen cím képen ne legyen cím
## bedo magasság:
margin: $v-unit-1 => 4rem
top: calc(#{$v-unit-1}/ 2); => 2rem

13
category-esemeny.php
View File

@@ -4,8 +4,6 @@
<!-- section --> <!-- section -->
<section> <section>
<h1>Események</h1>
<?php if (have_posts()): while (have_posts()): the_post();?> <?php if (have_posts()): while (have_posts()): the_post();?>
@@ -14,19 +12,12 @@
<!-- post thumbnail --> <!-- post thumbnail -->
<?php if (has_post_thumbnail()): // Check if thumbnail exists ?> <?php if (has_post_thumbnail()): // Check if thumbnail exists ?>
<a class="thumbnailwrapper" href="<?php the_permalink();?>" title="<?php the_title();?>"> <a class="thumbnailwrapper" href="<?php the_permalink();?>" title="<?php the_title();?>">
<?php the_post_thumbnail('home-thumbnail');?> <?php the_post_thumbnail('home-event-thumbnail');?>
</a> </a>
<?php endif;?> <?php endif;?>
<!-- /post thumbnail --> <!-- /post thumbnail -->
<div class="metadata"> <div class="event-metadata">
<div class="categories">
<?php the_category(' | ');?>
</div>
<div class="postedon">
<?php the_time('Y. m. d.');?>
</div>
</div> </div>

320
css/base.css
View File

@@ -247,8 +247,7 @@ object {
@media (min-width: 769px) { @media (min-width: 769px) {
.wrapper .header .search-bar form.search input { .wrapper .header .search-bar form.search input {
font-size: 4rem; font-size: 4rem;
color: #000 !important; 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 (max-width: 768px) { @media (max-width: 768px) {
@@ -324,12 +323,15 @@ object {
.wrapper .header #tag-nav { .wrapper .header #tag-nav {
display: none; display: none;
position: fixed; position: fixed;
right: calc(10rem* 2); right: calc(20rem + 2px);
top: calc(4rem/ 2); top: calc(4rem/ 2);
z-index: 1000; } z-index: 1000; }
@media (min-width: 769px) { @media (min-width: 769px) {
.wrapper .header #tag-nav { .wrapper .header #tag-nav {
top: calc(4rem* 0.4); } } top: 1rem; } }
@media (min-width: 1279px) {
.wrapper .header #tag-nav {
top: 0.5rem; } }
@media (min-width: 769px) { @media (min-width: 769px) {
.wrapper .header #tag-nav { .wrapper .header #tag-nav {
display: block; } } display: block; } }
@@ -340,13 +342,14 @@ 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.pause {
-webkit-text-stroke: #fff 1px !important; }
.wrapper .header #tag-nav ul.current { .wrapper .header #tag-nav ul.current {
-webkit-text-stroke: #000 1px !important; } color: #000 !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; } }
@media (min-width: 1279px) {
.wrapper .header #tag-nav ul {
font-size: 1.4rem; } }
.wrapper .header #tag-nav ul li { .wrapper .header #tag-nav ul li {
display: inline; } display: inline; }
.wrapper .header #tag-nav ul li a span { .wrapper .header #tag-nav ul li a span {
@@ -364,13 +367,17 @@ 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.pause { @media (min-width: 1279px) {
-webkit-text-stroke: #fff 1px !important; } .wrapper .header #tag-nav ul li a span {
height: 3.5rem; } }
.wrapper .header #tag-nav ul li a span.current { .wrapper .header #tag-nav ul li a span.current {
-webkit-text-stroke: #000 1px !important; } color: #000 !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; } }
@media (min-width: 1279px) {
.wrapper .header #tag-nav ul li a span {
font-size: 1.4rem; } }
.wrapper .header #tag-nav ul li a span.char1 { .wrapper .header #tag-nav ul li a span.char1 {
-moz-transform: rotate(21.17647deg); -moz-transform: rotate(21.17647deg);
-o-transform: rotate(21.17647deg); -o-transform: rotate(21.17647deg);
@@ -747,84 +754,6 @@ 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 .bedo-sub-wrapper {
position: fixed;
display: none;
right: 10rem;
left: 10rem;
top: 0;
background-color: #000;
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 {
@@ -993,7 +922,15 @@ object {
@media (min-width: 769px) { @media (min-width: 769px) {
.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: 5rem; } } font-size: 6rem; } }
@media (min-width: 1279px) {
.archive main section article h2 a,
.home main section article h2 a {
font-size: 7.5rem; } }
@media (min-width: 1919px) {
.archive main section article h2 a,
.home main section article h2 a {
font-size: 11rem; } }
.archive main section article .metadata, .archive main section article .metadata,
.home main section article .metadata { .home main section article .metadata {
bottom: 50%; bottom: 50%;
@@ -1039,7 +976,7 @@ object {
/* ------------------------- home article big hover ------------------------- */ } /* ------------------------- home article big hover ------------------------- */ }
.archive main section .home-wrapper-big article .thumbnailwrapper, .archive main section .home-wrapper-big article .thumbnailwrapper,
.home main section .home-wrapper-big article .thumbnailwrapper { .home main section .home-wrapper-big article .thumbnailwrapper {
width: 40%; width: 60%;
height: calc(100% - 4rem); height: calc(100% - 4rem);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -1054,7 +991,8 @@ object {
height: unset; height: unset;
position: absolute; position: absolute;
top: 6rem; top: 6rem;
padding: 4rem; } padding: 4rem;
width: calc(100vw - 20rem); }
.archive main section .home-wrapper-big article .metadata, .archive main section .home-wrapper-big article .metadata,
.home main section .home-wrapper-big article .metadata { .home main section .home-wrapper-big article .metadata {
bottom: 0; bottom: 0;
@@ -1078,14 +1016,14 @@ object {
@media (min-width: 769px) { @media (min-width: 769px) {
.archive main section .home-wrapper-big article .metadata > div, .archive main section .home-wrapper-big article .metadata > div,
.home main section .home-wrapper-big article .metadata > div { .home main section .home-wrapper-big article .metadata > div {
flex: 1 0 auto; } flex: 1 1 auto; }
.archive main section .home-wrapper-big article .metadata .categories, .archive main section .home-wrapper-big article .metadata .categories,
.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; }
.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; }
.archive main section .home-wrapper-big article .metadata .bevezeto, .archive main section .home-wrapper-big article .metadata .bevezeto,
.archive main section .home-wrapper-big article .metadata .alcim, .archive main section .home-wrapper-big article .metadata .alcim,
.home main section .home-wrapper-big article .metadata .bevezeto, .home main section .home-wrapper-big article .metadata .bevezeto,
@@ -1125,12 +1063,13 @@ object {
.archive main section .home-wrapper-big article .metadata .filler, .archive main section .home-wrapper-big article .metadata .filler,
.home main section .home-wrapper-big article .metadata .filler { .home main section .home-wrapper-big article .metadata .filler {
flex: 0 0 auto; flex: 0 0 auto;
width: 40%; width: 60%;
height: 1px; height: 1px;
align-self: flex-start; } align-self: flex-start; }
.archive main section .home-wrapper-big article .metadata .curvyArrow, .archive main section .home-wrapper-big article .metadata .curvyArrow,
.home main section .home-wrapper-big article .metadata .curvyArrow { .home main section .home-wrapper-big article .metadata .curvyArrow {
position: absolute; position: absolute;
display: block;
right: 0; right: 0;
top: 0; top: 0;
height: 15rem; height: 15rem;
@@ -1452,7 +1391,15 @@ object {
@media (min-width: 769px) and (min-width: 769px) { @media (min-width: 769px) and (min-width: 769px) {
.archive main section .home-wrapper-small .archivetitle h1, .archive main section .home-wrapper-small .archivetitle h1,
.home main section .home-wrapper-small .archivetitle h1 { .home main section .home-wrapper-small .archivetitle h1 {
font-size: 5rem; } } font-size: 6rem; } }
@media (min-width: 769px) and (min-width: 1279px) {
.archive main section .home-wrapper-small .archivetitle h1,
.home main section .home-wrapper-small .archivetitle h1 {
font-size: 7.5rem; } }
@media (min-width: 769px) and (min-width: 1919px) {
.archive main section .home-wrapper-small .archivetitle h1,
.home main section .home-wrapper-small .archivetitle h1 {
font-size: 11rem; } }
@media (min-width: 769px) { @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 {
@@ -1492,6 +1439,15 @@ object {
.home main section .home-wrapper-small .archivedescription p { .home main section .home-wrapper-small .archivedescription p {
font-size: 1.2rem; } } font-size: 1.2rem; } }
/* -------------------------------------------------------------------------- */
/* Events */
/* -------------------------------------------------------------------------- */
body.category.category-esemeny header {
background-color: #000; }
body.category.category-esemeny main {
padding-top: 9rem; }
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
/* single */ /* single */
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
@@ -1752,51 +1708,52 @@ object {
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
/* TAG COLORS */ /* TAG COLORS */
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
.tag-be .metadata {
color: #00ffb8 !important; }
@media (max-width: 768px) { @media (max-width: 768px) {
.tag-be .metadata {
color: #fdff00 !important; }
.tag-be .metadata .vr { .tag-be .metadata .vr {
background-color: #00ffb8 !important; } } background-color: #fdff00 !important; } }
.tag-be .metadata a { .tag-be .metadata a {
color: #00ffb8 !important; } color: #fdff00 !important; }
.tag-be blockquote p { .tag-be blockquote p {
background: #00ffb8 !important; background: #fdff00 !important;
-moz-box-shadow: 10px 0 #00ffb8, -5px 0 #00ffb8 !important; -moz-box-shadow: 10px 0 #fdff00, -5px 0 #fdff00 !important;
-webkit-box-shadow: 10px 0 #00ffb8, -5px 0 #00ffb8 !important; -webkit-box-shadow: 10px 0 #fdff00, -5px 0 #fdff00 !important;
box-shadow: 10px 0 #00ffb8, -5px 0 #00ffb8 !important; } box-shadow: 10px 0 #fdff00, -5px 0 #fdff00 !important; }
.tag-be hr { .tag-be hr {
background-color: #00ffb8 !important; } background-color: #fdff00 !important; }
.tag-be figcaption { .tag-be figcaption {
-webkit-text-stroke-color: #00ffb8 !important; } -webkit-text-stroke-color: #fdff00 !important; }
@media (min-width: 769px) { @media (min-width: 769px) {
.tag-be.home-big h2 a { .tag-be.home-big h2 a {
color: #00ffb8; } color: #fdff00; }
.tag-be.home-big.hovered { .tag-be.home-big.hovered {
background-color: #00ffb8 !important; } background-color: #fdff00 !important; }
.tag-be.home-small .metadata, .tag-be.home-small .metadata,
.tag-be.home-small .metadata a { .tag-be.home-small .metadata a {
color: #000 !important; } } color: #000 !important; } }
.tag-be.bedo-sub-wrapper > a { .tag-be.bedo-sub-wrapper > a {
-webkit-text-stroke: #00ffb8 1px !important; } -webkit-text-stroke: #fdff00 1px !important; }
.tag-be.bedo-sub-wrapper span { .tag-be.bedo-sub-wrapper span {
color: #00ffb8 !important; } color: #fdff00 !important; }
.tag-be.bedo-sub-wrapper .circle { .tag-be.bedo-sub-wrapper .circle {
background-color: #00ffb8 !important; } background-color: #fdff00 !important; }
.tag-be.archive.tag { .tag-be.archive.tag {
background-color: #00ffb8 !important; } background-color: #fdff00 !important; }
.tag-be.archive.tag .header-1, .tag-be.archive.tag .header-1,
.tag-be.archive.tag .header-2 { .tag-be.archive.tag .header-2 {
background-color: #00ffb8 !important; } background-color: #fdff00 !important; }
.tag-be.archive.tag article * { .tag-be.archive.tag article * {
background-color: #00ffb8 !important; } background-color: #fdff00 !important; }
@media (min-width: 769px) { @media (min-width: 769px) {
.tag-be.random .thumbnailwrapper > img { .tag-be.random .thumbnailwrapper > img {
@@ -1807,51 +1764,52 @@ object {
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: 100%; } } mask-size: 100%; } }
.tag-do .metadata {
color: #ff5f5f !important; }
@media (max-width: 768px) { @media (max-width: 768px) {
.tag-do .metadata {
color: #3c00ff !important; }
.tag-do .metadata .vr { .tag-do .metadata .vr {
background-color: #ff5f5f !important; } } background-color: #3c00ff !important; } }
.tag-do .metadata a { .tag-do .metadata a {
color: #ff5f5f !important; } color: #3c00ff !important; }
.tag-do blockquote p { .tag-do blockquote p {
background: #ff5f5f !important; background: #3c00ff !important;
-moz-box-shadow: 10px 0 #ff5f5f, -5px 0 #ff5f5f !important; -moz-box-shadow: 10px 0 #3c00ff, -5px 0 #3c00ff !important;
-webkit-box-shadow: 10px 0 #ff5f5f, -5px 0 #ff5f5f !important; -webkit-box-shadow: 10px 0 #3c00ff, -5px 0 #3c00ff !important;
box-shadow: 10px 0 #ff5f5f, -5px 0 #ff5f5f !important; } box-shadow: 10px 0 #3c00ff, -5px 0 #3c00ff !important; }
.tag-do hr { .tag-do hr {
background-color: #ff5f5f !important; } background-color: #3c00ff !important; }
.tag-do figcaption { .tag-do figcaption {
-webkit-text-stroke-color: #ff5f5f !important; } -webkit-text-stroke-color: #3c00ff !important; }
@media (min-width: 769px) { @media (min-width: 769px) {
.tag-do.home-big h2 a { .tag-do.home-big h2 a {
color: #ff5f5f; } color: #3c00ff; }
.tag-do.home-big.hovered { .tag-do.home-big.hovered {
background-color: #ff5f5f !important; } background-color: #3c00ff !important; }
.tag-do.home-small .metadata, .tag-do.home-small .metadata,
.tag-do.home-small .metadata a { .tag-do.home-small .metadata a {
color: #000 !important; } } color: #000 !important; } }
.tag-do.bedo-sub-wrapper > a { .tag-do.bedo-sub-wrapper > a {
-webkit-text-stroke: #ff5f5f 1px !important; } -webkit-text-stroke: #3c00ff 1px !important; }
.tag-do.bedo-sub-wrapper span { .tag-do.bedo-sub-wrapper span {
color: #ff5f5f !important; } color: #3c00ff !important; }
.tag-do.bedo-sub-wrapper .circle { .tag-do.bedo-sub-wrapper .circle {
background-color: #ff5f5f !important; } background-color: #3c00ff !important; }
.tag-do.archive.tag { .tag-do.archive.tag {
background-color: #ff5f5f !important; } background-color: #3c00ff !important; }
.tag-do.archive.tag .header-1, .tag-do.archive.tag .header-1,
.tag-do.archive.tag .header-2 { .tag-do.archive.tag .header-2 {
background-color: #ff5f5f !important; } background-color: #3c00ff !important; }
.tag-do.archive.tag article * { .tag-do.archive.tag article * {
background-color: #ff5f5f !important; } background-color: #3c00ff !important; }
@media (min-width: 769px) { @media (min-width: 769px) {
.tag-do.random .thumbnailwrapper > img { .tag-do.random .thumbnailwrapper > img {
@@ -1862,51 +1820,52 @@ object {
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: 100%; } } mask-size: 100%; } }
.tag-think .metadata {
color: #fdff00 !important; }
@media (max-width: 768px) { @media (max-width: 768px) {
.tag-think .metadata {
color: #00ffb8 !important; }
.tag-think .metadata .vr { .tag-think .metadata .vr {
background-color: #fdff00 !important; } } background-color: #00ffb8 !important; } }
.tag-think .metadata a { .tag-think .metadata a {
color: #fdff00 !important; } color: #00ffb8 !important; }
.tag-think blockquote p { .tag-think blockquote p {
background: #fdff00 !important; background: #00ffb8 !important;
-moz-box-shadow: 10px 0 #fdff00, -5px 0 #fdff00 !important; -moz-box-shadow: 10px 0 #00ffb8, -5px 0 #00ffb8 !important;
-webkit-box-shadow: 10px 0 #fdff00, -5px 0 #fdff00 !important; -webkit-box-shadow: 10px 0 #00ffb8, -5px 0 #00ffb8 !important;
box-shadow: 10px 0 #fdff00, -5px 0 #fdff00 !important; } box-shadow: 10px 0 #00ffb8, -5px 0 #00ffb8 !important; }
.tag-think hr { .tag-think hr {
background-color: #fdff00 !important; } background-color: #00ffb8 !important; }
.tag-think figcaption { .tag-think figcaption {
-webkit-text-stroke-color: #fdff00 !important; } -webkit-text-stroke-color: #00ffb8 !important; }
@media (min-width: 769px) { @media (min-width: 769px) {
.tag-think.home-big h2 a { .tag-think.home-big h2 a {
color: #fdff00; } color: #00ffb8; }
.tag-think.home-big.hovered { .tag-think.home-big.hovered {
background-color: #fdff00 !important; } background-color: #00ffb8 !important; }
.tag-think.home-small .metadata, .tag-think.home-small .metadata,
.tag-think.home-small .metadata a { .tag-think.home-small .metadata a {
color: #000 !important; } } color: #000 !important; } }
.tag-think.bedo-sub-wrapper > a { .tag-think.bedo-sub-wrapper > a {
-webkit-text-stroke: #fdff00 1px !important; } -webkit-text-stroke: #00ffb8 1px !important; }
.tag-think.bedo-sub-wrapper span { .tag-think.bedo-sub-wrapper span {
color: #fdff00 !important; } color: #00ffb8 !important; }
.tag-think.bedo-sub-wrapper .circle { .tag-think.bedo-sub-wrapper .circle {
background-color: #fdff00 !important; } background-color: #00ffb8 !important; }
.tag-think.archive.tag { .tag-think.archive.tag {
background-color: #fdff00 !important; } background-color: #00ffb8 !important; }
.tag-think.archive.tag .header-1, .tag-think.archive.tag .header-1,
.tag-think.archive.tag .header-2 { .tag-think.archive.tag .header-2 {
background-color: #fdff00 !important; } background-color: #00ffb8 !important; }
.tag-think.archive.tag article * { .tag-think.archive.tag article * {
background-color: #fdff00 !important; } background-color: #00ffb8 !important; }
@media (min-width: 769px) { @media (min-width: 769px) {
.tag-think.random .thumbnailwrapper > img { .tag-think.random .thumbnailwrapper > img {
@@ -1917,51 +1876,52 @@ object {
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: 100%; } } mask-size: 100%; } }
.tag-love .metadata {
color: #3c00ff !important; }
@media (max-width: 768px) { @media (max-width: 768px) {
.tag-love .metadata {
color: #ff5f5f !important; }
.tag-love .metadata .vr { .tag-love .metadata .vr {
background-color: #3c00ff !important; } } background-color: #ff5f5f !important; } }
.tag-love .metadata a { .tag-love .metadata a {
color: #3c00ff !important; } color: #ff5f5f !important; }
.tag-love blockquote p { .tag-love blockquote p {
background: #3c00ff !important; background: #ff5f5f !important;
-moz-box-shadow: 10px 0 #3c00ff, -5px 0 #3c00ff !important; -moz-box-shadow: 10px 0 #ff5f5f, -5px 0 #ff5f5f !important;
-webkit-box-shadow: 10px 0 #3c00ff, -5px 0 #3c00ff !important; -webkit-box-shadow: 10px 0 #ff5f5f, -5px 0 #ff5f5f !important;
box-shadow: 10px 0 #3c00ff, -5px 0 #3c00ff !important; } box-shadow: 10px 0 #ff5f5f, -5px 0 #ff5f5f !important; }
.tag-love hr { .tag-love hr {
background-color: #3c00ff !important; } background-color: #ff5f5f !important; }
.tag-love figcaption { .tag-love figcaption {
-webkit-text-stroke-color: #3c00ff !important; } -webkit-text-stroke-color: #ff5f5f !important; }
@media (min-width: 769px) { @media (min-width: 769px) {
.tag-love.home-big h2 a { .tag-love.home-big h2 a {
color: #3c00ff; } color: #ff5f5f; }
.tag-love.home-big.hovered { .tag-love.home-big.hovered {
background-color: #3c00ff !important; } background-color: #ff5f5f !important; }
.tag-love.home-small .metadata, .tag-love.home-small .metadata,
.tag-love.home-small .metadata a { .tag-love.home-small .metadata a {
color: #000 !important; } } color: #000 !important; } }
.tag-love.bedo-sub-wrapper > a { .tag-love.bedo-sub-wrapper > a {
-webkit-text-stroke: #3c00ff 1px !important; } -webkit-text-stroke: #ff5f5f 1px !important; }
.tag-love.bedo-sub-wrapper span { .tag-love.bedo-sub-wrapper span {
color: #3c00ff !important; } color: #ff5f5f !important; }
.tag-love.bedo-sub-wrapper .circle { .tag-love.bedo-sub-wrapper .circle {
background-color: #3c00ff !important; } background-color: #ff5f5f !important; }
.tag-love.archive.tag { .tag-love.archive.tag {
background-color: #3c00ff !important; } background-color: #ff5f5f !important; }
.tag-love.archive.tag .header-1, .tag-love.archive.tag .header-1,
.tag-love.archive.tag .header-2 { .tag-love.archive.tag .header-2 {
background-color: #3c00ff !important; } background-color: #ff5f5f !important; }
.tag-love.archive.tag article * { .tag-love.archive.tag article * {
background-color: #3c00ff !important; } background-color: #ff5f5f !important; }
@media (min-width: 769px) { @media (min-width: 769px) {
.tag-love.random .thumbnailwrapper > img { .tag-love.random .thumbnailwrapper > img {
@@ -1975,62 +1935,62 @@ object {
@media (min-width: 769px) { @media (min-width: 769px) {
.single .tag-be .metadata { .single .tag-be .metadata {
color: #fff !important; color: #fff !important;
-webkit-text-stroke: #00ffb8 1px !important; } } -webkit-text-stroke: #fdff00 1px !important; } }
@media (min-width: 769px) { @media (min-width: 769px) {
.single .tag-be .metadata a { .single .tag-be .metadata a {
color: #fff !important; color: #fff !important;
-webkit-text-stroke: #00ffb8 1px !important; } } -webkit-text-stroke: #fdff00 1px !important; } }
@media (min-width: 769px) { @media (min-width: 769px) {
.single .tag-do .metadata { .single .tag-do .metadata {
color: #fff !important; color: #fff !important;
-webkit-text-stroke: #ff5f5f 1px !important; } } -webkit-text-stroke: #3c00ff 1px !important; } }
@media (min-width: 769px) { @media (min-width: 769px) {
.single .tag-do .metadata a { .single .tag-do .metadata a {
color: #fff !important; color: #fff !important;
-webkit-text-stroke: #ff5f5f 1px !important; } } -webkit-text-stroke: #3c00ff 1px !important; } }
@media (min-width: 769px) { @media (min-width: 769px) {
.single .tag-think .metadata { .single .tag-think .metadata {
color: #fff !important; color: #fff !important;
-webkit-text-stroke: #fdff00 1px !important; } } -webkit-text-stroke: #00ffb8 1px !important; } }
@media (min-width: 769px) { @media (min-width: 769px) {
.single .tag-think .metadata a { .single .tag-think .metadata a {
color: #fff !important; color: #fff !important;
-webkit-text-stroke: #fdff00 1px !important; } } -webkit-text-stroke: #00ffb8 1px !important; } }
@media (min-width: 769px) { @media (min-width: 769px) {
.single .tag-love .metadata { .single .tag-love .metadata {
color: #fff !important; color: #fff !important;
-webkit-text-stroke: #3c00ff 1px !important; } } -webkit-text-stroke: #ff5f5f 1px !important; } }
@media (min-width: 769px) { @media (min-width: 769px) {
.single .tag-love .metadata a { .single .tag-love .metadata a {
color: #fff !important; color: #fff !important;
-webkit-text-stroke: #3c00ff 1px !important; } } -webkit-text-stroke: #ff5f5f 1px !important; } }
body.hover-tag-be, body.hover-tag-be,
.header-1.hover-tag-be, .header-1.hover-tag-be,
.header-2.hover-tag-be { .header-2.hover-tag-be {
background-color: #00ffb8 !important; } background-color: #fdff00 !important; }
body.hover-tag-do, body.hover-tag-do,
.header-1.hover-tag-do, .header-1.hover-tag-do,
.header-2.hover-tag-do { .header-2.hover-tag-do {
background-color: #ff5f5f !important; } background-color: #3c00ff !important; }
body.hover-tag-think, body.hover-tag-think,
.header-1.hover-tag-think, .header-1.hover-tag-think,
.header-2.hover-tag-think { .header-2.hover-tag-think {
background-color: #fdff00 !important; } background-color: #00ffb8 !important; }
body.hover-tag-love, body.hover-tag-love,
.header-1.hover-tag-love, .header-1.hover-tag-love,
.header-2.hover-tag-love { .header-2.hover-tag-love {
background-color: #3c00ff !important; } background-color: #ff5f5f !important; }
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
/* imports */ /* imports */

53
functions.php
View File

@@ -1,7 +1,6 @@
<?php <?php
/* /*
* Author: Todd Motto | @toddmotto * Original author: Todd Motto | @toddmotto
* URL: dis2019.com | @dis2019
* Custom functions, support, custom post types and more. * Custom functions, support, custom post types and more.
*/ */
@@ -30,6 +29,7 @@ if (function_exists('add_theme_support')) {
add_image_size('small', 120, '', true); // Small Thumbnail add_image_size('small', 120, '', true); // Small Thumbnail
add_image_size('home-big-thumbnail', 1024, 1024, true); // Custom Thumbnail Size call using the_post_thumbnail('home-thumbnail'); add_image_size('home-big-thumbnail', 1024, 1024, true); // Custom Thumbnail Size call using the_post_thumbnail('home-thumbnail');
add_image_size('home-small-thumbnail', 256, 256, true); // Custom Thumbnail Size call using the_post_thumbnail('home-thumbnail'); add_image_size('home-small-thumbnail', 256, 256, true); // Custom Thumbnail Size call using the_post_thumbnail('home-thumbnail');
add_image_size('home-event-thumbnail', 1024, 512, true);
// Add Support for Custom Backgrounds - Uncomment below if you're going to use // Add Support for Custom Backgrounds - Uncomment below if you're going to use
/*add_theme_support('custom-background', array( /*add_theme_support('custom-background', array(
@@ -87,37 +87,37 @@ 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
{ // {
public 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) . ' tag-' . $item->title . '"'; // $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()
@@ -204,6 +204,7 @@ function register_dis_menu()
'header-menu' => __('Header Menu', 'dis2019'), // Main Navigation 'header-menu' => __('Header Menu', 'dis2019'), // Main Navigation
// 'sidebar-menu' => __('Sidebar Menu', 'dis2019'), // Sidebar Navigation // 'sidebar-menu' => __('Sidebar Menu', 'dis2019'), // Sidebar Navigation
'tag-menu' => __('Tag Menu', 'dis2019'), // Extra Navigation if needed (duplicate as many as you need!) 'tag-menu' => __('Tag Menu', 'dis2019'), // Extra Navigation if needed (duplicate as many as you need!)
'right-menu' => __('Right Menu', 'dis2019'), // Extra Navigation if needed (duplicate as many as you need!)
)); ));
} }

9
header.php
View File

@@ -114,6 +114,7 @@
<nav role="navigation" id="sidebar-wrapper" class="nav sidebar-wrapper"> <nav role="navigation" id="sidebar-wrapper" class="nav sidebar-wrapper">
<?php dis2019_nav(); ?> <?php dis2019_nav(); ?>
<?php wp_nav_menu( array( 'theme_location' => 'right-menu') ); ?>
</nav> </nav>
</div> </div>
@@ -128,11 +129,11 @@
<div id="tag-nav"> <div id="tag-nav">
<nav role="navigation" class="tag-nav"> <nav role="navigation" class="tag-nav">
<?php $walker = new Menu_With_Description; ?> <!-- <?php //$walker = new Menu_With_Description; ?> -->
<?php wp_nav_menu( array( 'theme_location' => 'tag-menu', 'walker' => $walker ) ); ?> <?php wp_nav_menu( array( 'theme_location' => 'tag-menu') ); ?>
</nav> </nav>
<div class="sub-wrapper"> <!-- <div class="sub-wrapper">
</div> </div> -->
</div> </div>
<!-- ----------------------- to top arrow on mobile ------------------------ --> <!-- ----------------------- to top arrow on mobile ------------------------ -->

90
js/scripts.js
View File

@@ -14,12 +14,26 @@
const vw = $(window).width() const vw = $(window).width()
const wow = window.outerWidth const wow = window.outerWidth
// console.log(vw, wow) const wiw = window.innerWidth
const bw = $('body').width()
const wih = window.innerHeight
const vh = $(window).height()
const bottomScrollHeight = window.innerHeight - $(window).height()
const desktophomemargin = $(".header-1")[0].getBoundingClientRect().width const desktophomemargin = $(".header-1")[0].getBoundingClientRect().width
const cssWidths = {
vw: vw,
wow: wow,
wiw: wiw,
bw: bw,
desktophomemargin: desktophomemargin
}
console.log(cssWidths)
/* --------------------------- css values to vars --------------------------- */ /* --------------------------- css values to vars --------------------------- */
//isMobile //isMobile
const isMobile = (_ => { const isMobile = (_ => {
@@ -61,15 +75,21 @@
} }
})() })()
const bottomScrollHeight = (_ => {
if (wih / vh > 1.5) {
return 0
} else {
let bs = wih - vh
return bs
}
})()
/* ========================================================================== */ /* ========================================================================== */
/* FUNCTIONS */ /* FUNCTIONS */
/* ========================================================================== */ /* ========================================================================== */
var focusSearch = function () {
$(".search-bar input").focus()
}
var rotateMenuButton = function () { var rotateMenuButton = function () {
if ($(".menubutton button").hasClass("rotated")) { if ($(".menubutton button").hasClass("rotated")) {
@@ -95,10 +115,33 @@
/* SEARCH */ /* SEARCH */
/* ========================================================================== */ /* ========================================================================== */
// on mobile add to sidebar:
if (isMobile) { if (isMobile) {
$(".search-bar").prependTo("#sidebar-wrapper") $(".search-bar").prependTo("#sidebar-wrapper")
} }
//clicking on desktop
if (!isMobile) {
$(".search-box button").click(function (e) {
// 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 {
//if it's closed open:
bar.show().stop().animate({ width: wiw - (desktophomemargin * 3) }, 400, function () {
bar.addClass("opensearch")
$(".search-input").focus()
})
// console.log("calc(100% - " + (desktophomemargin * 2) + "px)")
}
})
}
/* ========================================================================== */ /* ========================================================================== */
/* MENU */ /* MENU */
/* ========================================================================== */ /* ========================================================================== */
@@ -143,28 +186,6 @@
}); });
/* --------------------------------- Search --------------------------------- */
if (!isMobile) {
$(".search-box button").click(function (e) {
// 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 {
//if it's closed open:
bar.show().stop().animate({ width: "50vw" }, 400, function () {
bar.addClass("opensearch")
$(".search-input").focus()
})
}
})
}
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
/* HOME & ARCHIVES */ /* HOME & ARCHIVES */
@@ -229,8 +250,9 @@
} }
//add bottom scrollbar to div on bottom: //add bottom scrollbar to div on bottom:
if (bottomScrollHeight > 0) {
$(".home-wrapper-big .metadata").css({ bottom: bottomScrollHeight }) $(".home-wrapper-big .metadata").css({ bottom: bottomScrollHeight })
}
}//isHome || isArchive end }//isHome || isArchive end
}// !isMobile end }// !isMobile end
@@ -485,7 +507,7 @@
/* ------------------------------ hover on home ----------------------------- */ /* ------------------------------ hover on home ----------------------------- */
//hover on big articles //hover on big articles
$(".home-big h2, .home-big .thumbnailwrapper").hover(function () { $(".home-big h2 a").hover(function () {
let cc = $(this) let cc = $(this)
let cArticle = cc.parents("article") let cArticle = cc.parents("article")
let cMetadata = cArticle.children(".metadata") let cMetadata = cArticle.children(".metadata")
@@ -603,16 +625,16 @@
let itemClass = findClassByStart(tagClass, 'tag') let itemClass = findClassByStart(tagClass, 'tag')
// add wrapper div // add wrapper div
$(".sub-wrapper").append('<div id="' + itemId + '" class="bedo-sub-wrapper ' + itemClass + '"></div>') // $(".sub-wrapper").append('<div id="' + itemId + '" class="bedo-sub-wrapper ' + itemClass + '"></div>')
// add tag title // add tag title
$(this).children("a").clone().appendTo(".sub-wrapper #" + itemId) // $(this).children("a").clone().appendTo(".sub-wrapper #" + itemId)
//add sub text //add sub text
$(this).children("span").appendTo(".sub-wrapper #" + itemId) // $(this).children("span").appendTo(".sub-wrapper #" + itemId)
//add circle //add circle
$(".sub-wrapper #" + itemId + " span").append('<div class="circle">') // $(".sub-wrapper #" + itemId + " span").append('<div class="circle">')
}) })
//wrap each letter to spans //wrap each letter to spans

9
loop.php
View File

@@ -20,7 +20,12 @@
<div class="metadata"> <div class="metadata">
<div class="categories"> <div class="categories">
<?php the_category(' | ');?> <?php //the_category(' | ');?>
<?php
foreach((get_the_category()) as $category){
echo $category->name;
}
?>
<?php if(is_home() and $qc < 3): ; //first two posts format only ?> <?php if(is_home() and $qc < 3): ; //first two posts format only ?>
<?php //get the post format <?php //get the post format
@@ -46,7 +51,7 @@
<?php endif;?> <?php endif;?>
<div class="vr"></div> <div class="vr"></div>
<div class="postedon"> <div class="postedon">
<?php the_time('m. d.');?> '<?php the_time('y.m.d.');?>
</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="bevezeto"> <div class="bevezeto">

40
sass/_font-mixins.scss
View File

@@ -21,12 +21,9 @@
color: #000; color: #000;
-webkit-text-stroke: #fff 1px; -webkit-text-stroke: #fff 1px;
@media #{$smalldesktop} { @media #{$smalldesktop} {
font-size: 4rem; font-size: 4rem;
color: #000 !important; color: #000 !important;
-webkit-text-stroke: unset !important;
} }
} }
@@ -38,7 +35,13 @@
font-size: 2.5rem !important; font-size: 2.5rem !important;
} }
@media #{$smalldesktop} { @media #{$smalldesktop} {
font-size: 5rem; font-size: 6rem;
}
@media #{$bigdesktop} {
font-size: 7.5rem;
}
@media #{$verybigdesktop} {
font-size: 11rem;
} }
} }
@@ -84,6 +87,7 @@
@media #{$smalldesktop} { @media #{$smalldesktop} {
font-size: 2rem; font-size: 2rem;
} }
} }
@mixin home-metadata-bevezeto { @mixin home-metadata-bevezeto {
@@ -98,28 +102,28 @@
color: transparent; color: transparent;
-webkit-text-stroke: #000 1px; -webkit-text-stroke: #000 1px;
text-transform: uppercase; text-transform: uppercase;
&.pause {
-webkit-text-stroke: #fff 1px !important;
}
&.current { &.current {
-webkit-text-stroke: #000 1px !important; color: #000 !important;
} }
@media #{$smalldesktop} { @media #{$smalldesktop} {
font-size: 1.2rem; font-size: 1.2rem;
} }
@media #{$bigdesktop} {
font-size: 1.4rem;
}
} }
@mixin bedo-hover-title { // @mixin bedo-hover-title {
font: 900 12rem "Westeinde Caption"; // font: 900 12rem "Westeinde Caption";
color: transparent; // color: transparent;
-webkit-text-stroke: #fff 1px; // -webkit-text-stroke: #fff 1px;
text-transform: uppercase; // text-transform: uppercase;
} // }
@mixin bedo-hover-sub { // @mixin bedo-hover-sub {
font: 900 1.4rem "Westeinde Caption"; // font: 900 1.4rem "Westeinde Caption";
color: #fff; // color: #fff;
} // }
@mixin single-title { @mixin single-title {
font: bold 3rem "Butler"; font: bold 3rem "Butler";

193
sass/base.scss
View File

@@ -98,10 +98,16 @@ $mobile-landscape: only screen and
and (-webkit-min-device-pixel-ratio: 2.1); and (-webkit-min-device-pixel-ratio: 2.1);
$bigdesktop: only screen and $bigdesktop: only screen and
( (
min-width: 1281px min-width: 1279px
);
$verybigdesktop: only screen and
(
min-width: 1919px
); );
//Horizontal units: //Horizontal units:
$h-unit-4: 20rem;
$h-unit-2: 10rem; // menuwidth on desktop $h-unit-2: 10rem; // menuwidth on desktop
$h-unit-1: 5rem; $h-unit-1: 5rem;
@@ -111,6 +117,7 @@ $v-unit-2: 8rem;
$v-unit-4: 16rem; $v-unit-4: 16rem;
$v-unit-6: 24rem; $v-unit-6: 24rem;
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
/* other mixins */ /* other mixins */
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
@@ -358,7 +365,7 @@ $v-unit-6: 24rem;
// 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);;;;;;;;;;;;;;;;;;;;;;
} }
} }
} }
@@ -455,7 +462,7 @@ $v-unit-6: 24rem;
button { button {
flex: 0 0 auto; flex: 0 0 auto;
@media #{$only-mobile} { @media #{$only-mobile} {
filter: invert(100) filter: invert(100);
} }
} }
} }
@@ -553,10 +560,13 @@ $v-unit-6: 24rem;
display: none; display: none;
position: fixed; position: fixed;
right: calc(#{$h-unit-2}* 2); right: calc(#{$h-unit-4} + 2px);
top: calc(#{$v-unit-1}/ 2); top: calc(#{$v-unit-1}/ 2); // this is the top position of the circle!!!
@media #{$smalldesktop} { @media #{$smalldesktop} {
top: calc(#{$v-unit-1}* 0.4); top: 1rem;
}
@media #{$bigdesktop} {
top: 0.5rem;
} }
z-index: 1000; z-index: 1000;
@media #{$smalldesktop} { @media #{$smalldesktop} {
@@ -570,13 +580,16 @@ $v-unit-6: 24rem;
display: inline; display: inline;
a { a {
span { span {
height: calc(#{$v-unit-1}/ 2); height: calc(#{$v-unit-1}/ 2); //height of circle -> radius of circle!!
// line-height: calc(#{$v-unit-1}/ 2); // line-height: calc(#{$v-unit-1}/ 2);
width: 1rem; width: 1rem;
@media #{$smalldesktop} { @media #{$smalldesktop} {
height: 3rem; height: 3rem;
// line-height: 5rem; // line-height: 5rem;
} }
@media #{$bigdesktop} {
height: 3.5rem;
}
margin: auto; margin: auto;
display: block; display: block;
text-align: center; text-align: center;
@@ -596,60 +609,60 @@ $v-unit-6: 24rem;
} }
} }
} }
.sub-wrapper { // .sub-wrapper {
.bedo-sub-wrapper { // .bedo-sub-wrapper {
position: fixed; // position: fixed;
display: none; // display: none;
right: $h-unit-2; // right: $h-unit-2;
left: $h-unit-2; // left: $h-unit-2;
top: 0; // top: 0;
background-color: #000; // background-color: #000;
height: 50vh; // height: 50vh;
z-index: -1; // z-index: -1;
flex-direction: row; // flex-direction: row;
justify-content: flex-start; // justify-content: flex-start;
align-items: center; // align-items: center;
// &:first-child { // // &:first-child {
// // display: flex;
// // }
// &.opened {
// display: flex; // display: flex;
// } // }
&.opened { // a {
display: flex; // @include bedo-hover-title();
} // @include transform(rotate(-45deg));
a { // transform-origin: 50% 50%;
@include bedo-hover-title(); // display: block;
@include transform(rotate(-45deg)); // width: calc(30% + #{$v-unit-6});
transform-origin: 50% 50%; // text-align: center;
display: block; // height: fit-content;
width: calc(30% + #{$v-unit-6}); // }
text-align: center; // span {
height: fit-content; // display: block;
} // position: absolute;
span { // bottom: 0;
display: block; // right: 0;
position: absolute; // height: $v-unit-6;
bottom: 0; // width: 70%;
right: 0; // padding: $v-unit-1;
height: $v-unit-6; // padding-left: $v-unit-6 + $v-unit-2;
width: 70%; // padding-right: $v-unit-4;
padding: $v-unit-1; // @include triangle-corner-bordered(#{$v-unit-6}, 0, transparent, #fff, left);
padding-left: $v-unit-6 + $v-unit-2; // @include bedo-hover-sub();
padding-right: $v-unit-4; // .circle {
@include triangle-corner-bordered(#{$v-unit-6}, 0, transparent, #fff, left); // $diameter: 4rem;
@include bedo-hover-sub(); // width: $diameter;
.circle { // height: $diameter;
$diameter: 4rem; // border-radius: 50%;
width: $diameter; // background: #fff;
height: $diameter; // position: absolute;
border-radius: 50%; // right: 0;
background: #fff; // top: 0;
position: absolute; // margin: $v-unit-1 / 2;
right: 0; // }
top: 0; // }
margin: $v-unit-1 / 2; // }
} // }
}
}
}
} }
} //header end } //header end
@@ -822,7 +835,6 @@ $v-unit-6: 24rem;
} }
.metadata { .metadata {
bottom: 50%; bottom: 50%;
height: $h-unit-1; height: $h-unit-1;
display: flex; display: flex;
@@ -832,7 +844,6 @@ $v-unit-6: 24rem;
align-items: center; align-items: center;
padding: 0; padding: 0;
.vr { .vr {
height: 100%; height: 100%;
width: 1px; width: 1px;
@@ -872,7 +883,7 @@ $v-unit-6: 24rem;
/* ------------- home article desktop big - thumbnail and title ------------- */ /* ------------- home article desktop big - thumbnail and title ------------- */
.thumbnailwrapper { .thumbnailwrapper {
width: 40%; width: 60%;
height: calc(100% - #{$v-unit-1}); height: calc(100% - #{$v-unit-1});
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -890,6 +901,8 @@ $v-unit-6: 24rem;
position: absolute; position: absolute;
top: 6rem; top: 6rem;
padding: 4rem; padding: 4rem;
// padding-right: 0;
width: calc(100vw - #{$h-unit-4});
} }
/* -------------------------- home article metadata big------------------------- */ /* -------------------------- home article metadata big------------------------- */
@@ -913,18 +926,16 @@ $v-unit-6: 24rem;
} }
& > div { & > div {
flex: 1 0 auto; flex: 1 1 auto;
} }
.categories { .categories {
display: block; display: block;
padding: 0 $h-unit-1; padding: 0;
} }
.postedon { .postedon {
padding: 0 $h-unit-1; padding: 0;
} }
.bevezeto, .bevezeto,
@@ -959,13 +970,14 @@ $v-unit-6: 24rem;
.filler { .filler {
flex: 0 0 auto; flex: 0 0 auto;
width: 40%; width: 60%;
height: 1px; height: 1px;
align-self: flex-start; align-self: flex-start;
} }
.curvyArrow { .curvyArrow {
position: absolute; position: absolute;
display: block;
right: 0; right: 0;
top: 0; top: 0;
height: ($h-unit-1 + $h-unit-2); height: ($h-unit-1 + $h-unit-2);
@@ -1073,8 +1085,6 @@ $v-unit-6: 24rem;
display: flex; display: flex;
} }
.categories, .categories,
.postedon { .postedon {
@include home-metadata(); @include home-metadata();
@@ -1157,6 +1167,19 @@ $v-unit-6: 24rem;
} //main end } //main end
} //home end } //home end
/* -------------------------------------------------------------------------- */
/* Events */
/* -------------------------------------------------------------------------- */
body.category.category-esemeny {
header {
background-color: #000;
}
main {
padding-top: 5rem + (2rem * 2);
}
}
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
/* single */ /* single */
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
@@ -1388,8 +1411,8 @@ $v-unit-6: 24rem;
@mixin tagcolors($color) { @mixin tagcolors($color) {
//metadata on mobile //metadata on mobile
.metadata { .metadata {
color: $color !important;
@media #{$only-mobile} { @media #{$only-mobile} {
color: $color !important;
.vr { .vr {
background-color: $color !important; background-color: $color !important;
} }
@@ -1489,32 +1512,36 @@ $v-unit-6: 24rem;
} }
} }
} }
$color-be: #fdff00;
$color-do: #3c00ff;
$color-think: #00ffb8;
$color-love: #ff5f5f;
//colors on articles //colors on articles
.tag-be { .tag-be {
@include tagcolors(#00ffb8); @include tagcolors($color-be);
&.random { &.random {
@include tagclip(be); @include tagclip(be);
} }
} }
.tag-do { .tag-do {
@include tagcolors(#ff5f5f); @include tagcolors($color-do);
&.random { &.random {
@include tagclip(do); @include tagclip(do);
} }
} }
.tag-think { .tag-think {
@include tagcolors(#fdff00); @include tagcolors($color-think);
&.random { &.random {
@include tagclip(think); @include tagclip(think);
} }
} }
.tag-love { .tag-love {
@include tagcolors(#3c00ff); @include tagcolors($color-love);
&.random { &.random {
@include tagclip(love); @include tagclip(love);
} }
@@ -1523,19 +1550,19 @@ $v-unit-6: 24rem;
//single article //single article
.single { .single {
.tag-be { .tag-be {
@include tagcolors-single(#00ffb8); @include tagcolors-single($color-be);
} }
.tag-do { .tag-do {
@include tagcolors-single(#ff5f5f); @include tagcolors-single($color-do);
} }
.tag-think { .tag-think {
@include tagcolors-single(#fdff00); @include tagcolors-single($color-think);
} }
.tag-love { .tag-love {
@include tagcolors-single(#3c00ff); @include tagcolors-single($color-love);
} }
} }
@@ -1545,19 +1572,19 @@ body,
.header-1, .header-1,
.header-2 { .header-2 {
&.hover-tag-be { &.hover-tag-be {
background-color: #00ffb8 !important; background-color: $color-be !important;
} }
&.hover-tag-do { &.hover-tag-do {
background-color: #ff5f5f !important; background-color: $color-do !important;
} }
&.hover-tag-think { &.hover-tag-think {
background-color: #fdff00 !important; background-color: $color-think !important;
} }
&.hover-tag-love { &.hover-tag-love {
background-color: #3c00ff !important; background-color: $color-love !important;
} }
} }