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

home improvments, bedo circle

Browse Source
This commit is contained in:
Péter Gyetvai
2019-06-23 03:22:06 +02:00
parent 8b99976607
commit bbd581903b
7 changed files with 466 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
KÉZIKÖNYV.md
View File

@@ -4,33 +4,34 @@
### function.php
esemény cat-id-t átírni!!
esemény cat-id-t átírni!!
### wp beállítások
settings>reading>Blog pages show at most 6
settings>reading>Blog pages show at most 6
## Paraméterek
### Bejegyzések
#### dis-alcim
dis-alcim:
Csak az első két nagy cikknél jelenik meg
- Csak az első két nagy cikknél jelenik meg
#### dis-bevezeto
dis-bevezeto:
Csak az első két nagy cikknél jelenik meg
- Csak az első két nagy cikknél jelenik meg
### Események
#### dis-esemeny-datum
dis-esemeny-datum
#### dis-esemeny-link
dis-esemeny-link
## Developement verzió telepítése
Szükséges: python2, gulp global, max node 11
Mountnál exec paramétert nem kifelejteni!!!
```

339
css/base.css
View File

@@ -306,6 +306,9 @@ object {
right: calc(10rem* 2);
top: calc(4rem/ 2);
z-index: 1000; }
@media (min-width: 769px) {
.wrapper .header #tag-nav {
top: calc(4rem* 0.4); } }
@media (min-width: 769px) {
.wrapper .header #tag-nav {
display: block; } }
@@ -316,120 +319,416 @@ object {
color: transparent;
-webkit-text-stroke: #000 1px;
text-transform: uppercase; }
.wrapper .header #tag-nav ul.current {
-webkit-text-stroke: #fff 1px !important; }
@media (min-width: 769px) {
.wrapper .header #tag-nav ul {
font-size: 1.2rem; } }
.wrapper .header #tag-nav ul li {
display: inline; }
.wrapper .header #tag-nav ul li a span {
height: calc(4rem/ 2);
width: 1rem;
margin: auto;
display: block;
text-align: center;
position: absolute;
left: 0;
top: 0;
transform-origin: bottom center;
transform-origin: 50% 100%;
font: 900 1rem "Westeinde Caption";
color: transparent;
-webkit-text-stroke: #000 1px;
text-transform: uppercase; }
@media (min-width: 769px) {
.wrapper .header #tag-nav ul li a span {
height: 3rem; } }
.wrapper .header #tag-nav ul li a span.current {
-webkit-text-stroke: #fff 1px !important; }
@media (min-width: 769px) {
.wrapper .header #tag-nav ul li a span {
font-size: 1.2rem; } }
.wrapper .header #tag-nav ul li a span.char1 {
-moz-transform: rotate(21.17647deg);
-o-transform: rotate(21.17647deg);
-ms-transform: rotate(21.17647deg);
-webkit-transform: rotate(21.17647deg);
transform: rotate(21.17647deg); }
transform: rotate(21.17647deg);
-webkit-animation: spin1 4s linear infinite;
-moz-animation: spin1 4s linear infinite;
animation: spin1 4s linear infinite; }
@-moz-keyframes spin1 {
100% {
-moz-transform: rotate(381.17647deg); } }
@-webkit-keyframes spin1 {
100% {
-webkit-transform: rotate(381.17647deg); } }
@keyframes spin1 {
100% {
-webkit-transform: rotate(381.17647deg);
transform: rotate(381.17647deg); } }
.wrapper .header #tag-nav ul li a span.char2 {
-moz-transform: rotate(42.35294deg);
-o-transform: rotate(42.35294deg);
-ms-transform: rotate(42.35294deg);
-webkit-transform: rotate(42.35294deg);
transform: rotate(42.35294deg); }
transform: rotate(42.35294deg);
-webkit-animation: spin2 4s linear infinite;
-moz-animation: spin2 4s linear infinite;
animation: spin2 4s linear infinite; }
@-moz-keyframes spin2 {
100% {
-moz-transform: rotate(402.35294deg); } }
@-webkit-keyframes spin2 {
100% {
-webkit-transform: rotate(402.35294deg); } }
@keyframes spin2 {
100% {
-webkit-transform: rotate(402.35294deg);
transform: rotate(402.35294deg); } }
.wrapper .header #tag-nav ul li a span.char3 {
-moz-transform: rotate(63.52941deg);
-o-transform: rotate(63.52941deg);
-ms-transform: rotate(63.52941deg);
-webkit-transform: rotate(63.52941deg);
transform: rotate(63.52941deg); }
transform: rotate(63.52941deg);
-webkit-animation: spin3 4s linear infinite;
-moz-animation: spin3 4s linear infinite;
animation: spin3 4s linear infinite; }
@-moz-keyframes spin3 {
100% {
-moz-transform: rotate(423.52941deg); } }
@-webkit-keyframes spin3 {
100% {
-webkit-transform: rotate(423.52941deg); } }
@keyframes spin3 {
100% {
-webkit-transform: rotate(423.52941deg);
transform: rotate(423.52941deg); } }
.wrapper .header #tag-nav ul li a span.char4 {
-moz-transform: rotate(84.70588deg);
-o-transform: rotate(84.70588deg);
-ms-transform: rotate(84.70588deg);
-webkit-transform: rotate(84.70588deg);
transform: rotate(84.70588deg); }
transform: rotate(84.70588deg);
-webkit-animation: spin4 4s linear infinite;
-moz-animation: spin4 4s linear infinite;
animation: spin4 4s linear infinite; }
@-moz-keyframes spin4 {
100% {
-moz-transform: rotate(444.70588deg); } }
@-webkit-keyframes spin4 {
100% {
-webkit-transform: rotate(444.70588deg); } }
@keyframes spin4 {
100% {
-webkit-transform: rotate(444.70588deg);
transform: rotate(444.70588deg); } }
.wrapper .header #tag-nav ul li a span.char5 {
-moz-transform: rotate(105.88235deg);
-o-transform: rotate(105.88235deg);
-ms-transform: rotate(105.88235deg);
-webkit-transform: rotate(105.88235deg);
transform: rotate(105.88235deg); }
transform: rotate(105.88235deg);
-webkit-animation: spin5 4s linear infinite;
-moz-animation: spin5 4s linear infinite;
animation: spin5 4s linear infinite; }
@-moz-keyframes spin5 {
100% {
-moz-transform: rotate(465.88235deg); } }
@-webkit-keyframes spin5 {
100% {
-webkit-transform: rotate(465.88235deg); } }
@keyframes spin5 {
100% {
-webkit-transform: rotate(465.88235deg);
transform: rotate(465.88235deg); } }
.wrapper .header #tag-nav ul li a span.char6 {
-moz-transform: rotate(127.05882deg);
-o-transform: rotate(127.05882deg);
-ms-transform: rotate(127.05882deg);
-webkit-transform: rotate(127.05882deg);
transform: rotate(127.05882deg); }
transform: rotate(127.05882deg);
-webkit-animation: spin6 4s linear infinite;
-moz-animation: spin6 4s linear infinite;
animation: spin6 4s linear infinite; }
@-moz-keyframes spin6 {
100% {
-moz-transform: rotate(487.05882deg); } }
@-webkit-keyframes spin6 {
100% {
-webkit-transform: rotate(487.05882deg); } }
@keyframes spin6 {
100% {
-webkit-transform: rotate(487.05882deg);
transform: rotate(487.05882deg); } }
.wrapper .header #tag-nav ul li a span.char7 {
-moz-transform: rotate(148.23529deg);
-o-transform: rotate(148.23529deg);
-ms-transform: rotate(148.23529deg);
-webkit-transform: rotate(148.23529deg);
transform: rotate(148.23529deg); }
transform: rotate(148.23529deg);
-webkit-animation: spin7 4s linear infinite;
-moz-animation: spin7 4s linear infinite;
animation: spin7 4s linear infinite; }
@-moz-keyframes spin7 {
100% {
-moz-transform: rotate(508.23529deg); } }
@-webkit-keyframes spin7 {
100% {
-webkit-transform: rotate(508.23529deg); } }
@keyframes spin7 {
100% {
-webkit-transform: rotate(508.23529deg);
transform: rotate(508.23529deg); } }
.wrapper .header #tag-nav ul li a span.char8 {
-moz-transform: rotate(169.41176deg);
-o-transform: rotate(169.41176deg);
-ms-transform: rotate(169.41176deg);
-webkit-transform: rotate(169.41176deg);
transform: rotate(169.41176deg); }
transform: rotate(169.41176deg);
-webkit-animation: spin8 4s linear infinite;
-moz-animation: spin8 4s linear infinite;
animation: spin8 4s linear infinite; }
@-moz-keyframes spin8 {
100% {
-moz-transform: rotate(529.41176deg); } }
@-webkit-keyframes spin8 {
100% {
-webkit-transform: rotate(529.41176deg); } }
@keyframes spin8 {
100% {
-webkit-transform: rotate(529.41176deg);
transform: rotate(529.41176deg); } }
.wrapper .header #tag-nav ul li a span.char9 {
-moz-transform: rotate(190.58824deg);
-o-transform: rotate(190.58824deg);
-ms-transform: rotate(190.58824deg);
-webkit-transform: rotate(190.58824deg);
transform: rotate(190.58824deg); }
transform: rotate(190.58824deg);
-webkit-animation: spin9 4s linear infinite;
-moz-animation: spin9 4s linear infinite;
animation: spin9 4s linear infinite; }
@-moz-keyframes spin9 {
100% {
-moz-transform: rotate(550.58824deg); } }
@-webkit-keyframes spin9 {
100% {
-webkit-transform: rotate(550.58824deg); } }
@keyframes spin9 {
100% {
-webkit-transform: rotate(550.58824deg);
transform: rotate(550.58824deg); } }
.wrapper .header #tag-nav ul li a span.char10 {
-moz-transform: rotate(211.76471deg);
-o-transform: rotate(211.76471deg);
-ms-transform: rotate(211.76471deg);
-webkit-transform: rotate(211.76471deg);
transform: rotate(211.76471deg); }
transform: rotate(211.76471deg);
-webkit-animation: spin10 4s linear infinite;
-moz-animation: spin10 4s linear infinite;
animation: spin10 4s linear infinite; }
@-moz-keyframes spin10 {
100% {
-moz-transform: rotate(571.76471deg); } }
@-webkit-keyframes spin10 {
100% {
-webkit-transform: rotate(571.76471deg); } }
@keyframes spin10 {
100% {
-webkit-transform: rotate(571.76471deg);
transform: rotate(571.76471deg); } }
.wrapper .header #tag-nav ul li a span.char11 {
-moz-transform: rotate(232.94118deg);
-o-transform: rotate(232.94118deg);
-ms-transform: rotate(232.94118deg);
-webkit-transform: rotate(232.94118deg);
transform: rotate(232.94118deg); }
transform: rotate(232.94118deg);
-webkit-animation: spin11 4s linear infinite;
-moz-animation: spin11 4s linear infinite;
animation: spin11 4s linear infinite; }
@-moz-keyframes spin11 {
100% {
-moz-transform: rotate(592.94118deg); } }
@-webkit-keyframes spin11 {
100% {
-webkit-transform: rotate(592.94118deg); } }
@keyframes spin11 {
100% {
-webkit-transform: rotate(592.94118deg);
transform: rotate(592.94118deg); } }
.wrapper .header #tag-nav ul li a span.char12 {
-moz-transform: rotate(254.11765deg);
-o-transform: rotate(254.11765deg);
-ms-transform: rotate(254.11765deg);
-webkit-transform: rotate(254.11765deg);
transform: rotate(254.11765deg); }
transform: rotate(254.11765deg);
-webkit-animation: spin12 4s linear infinite;
-moz-animation: spin12 4s linear infinite;
animation: spin12 4s linear infinite; }
@-moz-keyframes spin12 {
100% {
-moz-transform: rotate(614.11765deg); } }
@-webkit-keyframes spin12 {
100% {
-webkit-transform: rotate(614.11765deg); } }
@keyframes spin12 {
100% {
-webkit-transform: rotate(614.11765deg);
transform: rotate(614.11765deg); } }
.wrapper .header #tag-nav ul li a span.char13 {
-moz-transform: rotate(275.29412deg);
-o-transform: rotate(275.29412deg);
-ms-transform: rotate(275.29412deg);
-webkit-transform: rotate(275.29412deg);
transform: rotate(275.29412deg); }
transform: rotate(275.29412deg);
-webkit-animation: spin13 4s linear infinite;
-moz-animation: spin13 4s linear infinite;
animation: spin13 4s linear infinite; }
@-moz-keyframes spin13 {
100% {
-moz-transform: rotate(635.29412deg); } }
@-webkit-keyframes spin13 {
100% {
-webkit-transform: rotate(635.29412deg); } }
@keyframes spin13 {
100% {
-webkit-transform: rotate(635.29412deg);
transform: rotate(635.29412deg); } }
.wrapper .header #tag-nav ul li a span.char14 {
-moz-transform: rotate(296.47059deg);
-o-transform: rotate(296.47059deg);
-ms-transform: rotate(296.47059deg);
-webkit-transform: rotate(296.47059deg);
transform: rotate(296.47059deg); }
transform: rotate(296.47059deg);
-webkit-animation: spin14 4s linear infinite;
-moz-animation: spin14 4s linear infinite;
animation: spin14 4s linear infinite; }
@-moz-keyframes spin14 {
100% {
-moz-transform: rotate(656.47059deg); } }
@-webkit-keyframes spin14 {
100% {
-webkit-transform: rotate(656.47059deg); } }
@keyframes spin14 {
100% {
-webkit-transform: rotate(656.47059deg);
transform: rotate(656.47059deg); } }
.wrapper .header #tag-nav ul li a span.char15 {
-moz-transform: rotate(317.64706deg);
-o-transform: rotate(317.64706deg);
-ms-transform: rotate(317.64706deg);
-webkit-transform: rotate(317.64706deg);
transform: rotate(317.64706deg); }
transform: rotate(317.64706deg);
-webkit-animation: spin15 4s linear infinite;
-moz-animation: spin15 4s linear infinite;
animation: spin15 4s linear infinite; }
@-moz-keyframes spin15 {
100% {
-moz-transform: rotate(677.64706deg); } }
@-webkit-keyframes spin15 {
100% {
-webkit-transform: rotate(677.64706deg); } }
@keyframes spin15 {
100% {
-webkit-transform: rotate(677.64706deg);
transform: rotate(677.64706deg); } }
.wrapper .header #tag-nav ul li a span.char16 {
-moz-transform: rotate(338.82353deg);
-o-transform: rotate(338.82353deg);
-ms-transform: rotate(338.82353deg);
-webkit-transform: rotate(338.82353deg);
transform: rotate(338.82353deg); }
transform: rotate(338.82353deg);
-webkit-animation: spin16 4s linear infinite;
-moz-animation: spin16 4s linear infinite;
animation: spin16 4s linear infinite; }
@-moz-keyframes spin16 {
100% {
-moz-transform: rotate(698.82353deg); } }
@-webkit-keyframes spin16 {
100% {
-webkit-transform: rotate(698.82353deg); } }
@keyframes spin16 {
100% {
-webkit-transform: rotate(698.82353deg);
transform: rotate(698.82353deg); } }
.wrapper .header #tag-nav ul li a span.char17 {
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg); }
transform: rotate(360deg);
-webkit-animation: spin17 4s linear infinite;
-moz-animation: spin17 4s linear infinite;
animation: spin17 4s linear infinite; }
@-moz-keyframes spin17 {
100% {
-moz-transform: rotate(720deg); } }
@-webkit-keyframes spin17 {
100% {
-webkit-transform: rotate(720deg); } }
@keyframes spin17 {
100% {
-webkit-transform: rotate(720deg);
transform: rotate(720deg); } }
.wrapper .header #tag-nav ul li a span.pause {
animation-play-state: paused; }
.wrapper .header #tag-nav .sub-wrapper {
position: fixed;
right: 10rem;
left: 10rem;
top: 0;
background-color: #000;
height: 50vh; }
.wrapper main {
z-index: 1; }
.wrapper main section {

32
functions.php
View File

@@ -86,6 +86,38 @@ function dis2019_nav()
);
}
//walker for tag menu: bedo circle hover
class Menu_With_Description extends Walker_Nav_Menu {
function start_el(&$output, $item, $depth, $args) {
global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
$class_names = ' class="' . esc_attr( $class_names ) . '"';
$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->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '</a>';
$item_output .= '<span class="sub menu-item-sub-' . $item->ID . '">' . $item->description . '</span>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
// Load dis-2019 scripts (header.php)
function dis2019_header_scripts()
{

7
header.php
View File

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

45
js/scripts.js
View File

@@ -466,10 +466,10 @@
let cc = $(this)
let cArticle = cc.parents("article")
let cMetadata = cArticle.children(".metadata")
//add hovered class
cArticle.addClass("hovered")
//add tag to header for bg
let artClasses = cArticle.attr("class").split(" ")
let theTag = findClassByStart(artClasses, "tag")
@@ -477,14 +477,14 @@
//transparent metadata
cMetadata.children(".categories, .postedon").addClass("transparent")
//animate border
cMetadata.stop().animate({ height: "25rem" },400, _ => {
cMetadata.stop().animate({ height: "25rem" }, 400, _ => {
//hide metadata
cMetadata.children(".categories, .postedon").hide().removeClass("transparent")
cMetadata.children(".alcim, .bevezeto").show().removeClass("transparent")
})
}, function () {
let cc = $(this)
@@ -493,17 +493,17 @@
//remove hovered class
cArticle.removeClass("hovered")
//remove tag from header and body
let headerClasses = $(".header-1").attr("class").split(" ")
var hoverClass = findClassByStart(headerClasses, "hover")
$("body, .header-1, .header-2").removeClass(hoverClass)
//transparent metadata
cMetadata.children(".alcim, .bevezeto").addClass("transparent")
//animate height change
cMetadata.stop().animate({ height: "10rem" },400, _ => {
cMetadata.stop().animate({ height: "10rem" }, 400, _ => {
//hide and show metadata
cMetadata.children(".alcim, .bevezeto").hide().removeClass("transparent")
cMetadata.children(".categories, .postedon").removeClass("transparent").show()
@@ -568,8 +568,22 @@
/* CIRCULAR TEXT */
/* -------------------------------------------------------------------------- */
const bedoListItems = ".wrapper .header #tag-nav ul li"
const bedoWords = bedoListItems + " a"
const bedoLetters = bedoWords + " span"
//move subs to wrapper
$(bedoListItems).each(function () {
let itemId = $(this).attr("id")
$(".sub-wrapper").append('<div id="' + itemId + '"></div>')
$(this).children("a").clone().appendTo(".sub-wrapper #"+ itemId)
$(this).children("span").appendTo(".sub-wrapper #"+ itemId)
})
//wrap each letter to spans
var charnum = 0
$(".wrapper .header #tag-nav ul li a").each(function () {
$(bedoWords).each(function () {
let chars = $(this).html().length + 1
$(this).lettering()
$(this).children("span").each(function () {
@@ -581,6 +595,17 @@
charnum += chars
})
/* ---------------------------------- hover --------------------------------- */
$(bedoWords).hover(function () {
$(bedoLetters).addClass("pause")
$(this).children("span").addClass("current")
}, function () {
$(bedoLetters).removeClass("pause")
$(this).children("span").removeClass("current")
})
});

6
sass/_font-mixins.scss
View File

@@ -83,6 +83,12 @@
color: transparent;
-webkit-text-stroke: #000 1px;
text-transform: uppercase;
&.current{
-webkit-text-stroke: #fff 1px !important;
}
@media #{$smalldesktop} {
font-size: 1.2rem;
}
}
@mixin single-title {

75
sass/base.scss
View File

@@ -133,6 +133,27 @@ $v-unit-2: 8rem;
@for $i from 1 through $num-letters {
&.char#{$i} {
@include transform(rotate($angle-offset + $angle-per-char * $i));
-webkit-animation: spin#{$i} 4s linear infinite;
-moz-animation: spin#{$i} 4s linear infinite;
animation: spin#{$i} 4s linear infinite;
@-moz-keyframes spin#{$i} {
100% {
-moz-transform: rotate((360deg + $angle-per-char * $i));
}
}
@-webkit-keyframes spin#{$i} {
100% {
-webkit-transform: rotate((360deg + $angle-per-char * $i));
}
}
@keyframes spin#{$i} {
100% {
-webkit-transform: rotate((360deg + $angle-per-char * $i));
transform: rotate((360deg + $angle-per-char * $i));
}
}
}
}
}
@@ -331,7 +352,7 @@ $v-unit-2: 8rem;
// color: #000;
// fill: currentColor;
filter: invert(100%); //black
@include transform(rotate(180deg)) // transform: rotate(180deg);;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@include transform(rotate(180deg)) // transform: rotate(180deg);
}
}
}
@@ -504,6 +525,9 @@ $v-unit-2: 8rem;
position: fixed;
right: calc(#{$h-unit-2}* 2);
top: calc(#{$v-unit-1}/ 2);
@media #{$smalldesktop} {
top: calc(#{$v-unit-1}* 0.4);
}
z-index: 1000;
@media #{$smalldesktop} {
display: block;
@@ -517,17 +541,47 @@ $v-unit-2: 8rem;
a {
span {
height: calc(#{$v-unit-1}/ 2);
// line-height: calc(#{$v-unit-1}/ 2);
width: 1rem;
@media #{$smalldesktop} {
height: 3rem;
// line-height: 5rem;
}
margin: auto;
display: block;
text-align: center;
position: absolute;
// width: 20px;
left: 0;
top: 0;
transform-origin: bottom center;
@include bedocircle();
// left: 50%;
// top: 0;
// transform-origin: bottom center;
transform-origin: 50% 100%;
@include bedocircle(); //this is the font
@include rotated-text(17, 360deg, 0deg);
&.pause {
animation-play-state: paused;
}
}
}
}
}
.sub-wrapper{
position: fixed;
right: $h-unit-2;
left: $h-unit-2;
top: 0;
background-color: #000;
height: 50vh;
a{
}
span{
}
}
}
} //header end
@@ -829,14 +883,7 @@ $v-unit-2: 8rem;
height: ($h-unit-1 + $h-unit-2);
position: absolute;
right: 0;
top: calc(-50% + 0.5px);
// &:first-child {
// // top: calc(-100% + 2px);
// top: -100%;
// // top: unset;
// @include transform(scale(1, -1));
// // @include transform(rotate(-90deg));
// }
top: calc(-50% + 0.5px);
}
}
} //metadata end