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 ### function.php
esemény cat-id-t átírni!! esemény cat-id-t átírni!!
### wp beállítások ### wp beállítások
settings>reading>Blog pages show at most 6 settings>reading>Blog pages show at most 6
## Paraméterek ## Paraméterek
### Bejegyzések ### 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 ### Események
#### dis-esemeny-datum dis-esemeny-datum
#### dis-esemeny-link dis-esemeny-link
## 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
Mountnál exec paramétert nem kifelejteni!!! Mountnál exec paramétert nem kifelejteni!!!
``` ```

339
css/base.css
View File

@@ -306,6 +306,9 @@ object {
right: calc(10rem* 2); right: calc(10rem* 2);
top: calc(4rem/ 2); top: calc(4rem/ 2);
z-index: 1000; } z-index: 1000; }
@media (min-width: 769px) {
.wrapper .header #tag-nav {
top: calc(4rem* 0.4); } }
@media (min-width: 769px) { @media (min-width: 769px) {
.wrapper .header #tag-nav { .wrapper .header #tag-nav {
display: block; } } display: block; } }
@@ -316,120 +319,416 @@ 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 {
-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 { .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 {
height: calc(4rem/ 2); height: calc(4rem/ 2);
width: 1rem;
margin: auto;
display: block;
text-align: center;
position: absolute; position: absolute;
left: 0; transform-origin: 50% 100%;
top: 0;
transform-origin: bottom center;
font: 900 1rem "Westeinde Caption"; font: 900 1rem "Westeinde Caption";
color: transparent; color: transparent;
-webkit-text-stroke: #000 1px; -webkit-text-stroke: #000 1px;
text-transform: uppercase; } 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 { .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);
-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;
-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 { .wrapper .header #tag-nav ul li a span.char2 {
-moz-transform: rotate(42.35294deg); -moz-transform: rotate(42.35294deg);
-o-transform: rotate(42.35294deg); -o-transform: rotate(42.35294deg);
-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;
-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 { .wrapper .header #tag-nav ul li a span.char3 {
-moz-transform: rotate(63.52941deg); -moz-transform: rotate(63.52941deg);
-o-transform: rotate(63.52941deg); -o-transform: rotate(63.52941deg);
-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;
-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 { .wrapper .header #tag-nav ul li a span.char4 {
-moz-transform: rotate(84.70588deg); -moz-transform: rotate(84.70588deg);
-o-transform: rotate(84.70588deg); -o-transform: rotate(84.70588deg);
-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;
-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 { .wrapper .header #tag-nav ul li a span.char5 {
-moz-transform: rotate(105.88235deg); -moz-transform: rotate(105.88235deg);
-o-transform: rotate(105.88235deg); -o-transform: rotate(105.88235deg);
-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;
-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 { .wrapper .header #tag-nav ul li a span.char6 {
-moz-transform: rotate(127.05882deg); -moz-transform: rotate(127.05882deg);
-o-transform: rotate(127.05882deg); -o-transform: rotate(127.05882deg);
-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;
-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 { .wrapper .header #tag-nav ul li a span.char7 {
-moz-transform: rotate(148.23529deg); -moz-transform: rotate(148.23529deg);
-o-transform: rotate(148.23529deg); -o-transform: rotate(148.23529deg);
-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;
-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 { .wrapper .header #tag-nav ul li a span.char8 {
-moz-transform: rotate(169.41176deg); -moz-transform: rotate(169.41176deg);
-o-transform: rotate(169.41176deg); -o-transform: rotate(169.41176deg);
-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;
-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 { .wrapper .header #tag-nav ul li a span.char9 {
-moz-transform: rotate(190.58824deg); -moz-transform: rotate(190.58824deg);
-o-transform: rotate(190.58824deg); -o-transform: rotate(190.58824deg);
-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;
-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 { .wrapper .header #tag-nav ul li a span.char10 {
-moz-transform: rotate(211.76471deg); -moz-transform: rotate(211.76471deg);
-o-transform: rotate(211.76471deg); -o-transform: rotate(211.76471deg);
-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;
-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 { .wrapper .header #tag-nav ul li a span.char11 {
-moz-transform: rotate(232.94118deg); -moz-transform: rotate(232.94118deg);
-o-transform: rotate(232.94118deg); -o-transform: rotate(232.94118deg);
-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;
-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 { .wrapper .header #tag-nav ul li a span.char12 {
-moz-transform: rotate(254.11765deg); -moz-transform: rotate(254.11765deg);
-o-transform: rotate(254.11765deg); -o-transform: rotate(254.11765deg);
-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;
-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 { .wrapper .header #tag-nav ul li a span.char13 {
-moz-transform: rotate(275.29412deg); -moz-transform: rotate(275.29412deg);
-o-transform: rotate(275.29412deg); -o-transform: rotate(275.29412deg);
-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;
-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 { .wrapper .header #tag-nav ul li a span.char14 {
-moz-transform: rotate(296.47059deg); -moz-transform: rotate(296.47059deg);
-o-transform: rotate(296.47059deg); -o-transform: rotate(296.47059deg);
-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;
-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 { .wrapper .header #tag-nav ul li a span.char15 {
-moz-transform: rotate(317.64706deg); -moz-transform: rotate(317.64706deg);
-o-transform: rotate(317.64706deg); -o-transform: rotate(317.64706deg);
-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;
-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 { .wrapper .header #tag-nav ul li a span.char16 {
-moz-transform: rotate(338.82353deg); -moz-transform: rotate(338.82353deg);
-o-transform: rotate(338.82353deg); -o-transform: rotate(338.82353deg);
-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;
-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 { .wrapper .header #tag-nav ul li a span.char17 {
-moz-transform: rotate(360deg); -moz-transform: rotate(360deg);
-o-transform: rotate(360deg); -o-transform: rotate(360deg);
-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;
-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 { .wrapper main {
z-index: 1; } z-index: 1; }
.wrapper main section { .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) // Load dis-2019 scripts (header.php)
function dis2019_header_scripts() function dis2019_header_scripts()
{ {

7
header.php
View File

@@ -128,10 +128,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 wp_nav_menu( array( 'theme_location' => 'tag-menu' ) ); ?> <?php wp_nav_menu( array( 'theme_location' => 'tag-menu', 'walker' => $walker ) ); ?>
</nav> </nav>
<div class="sub-wrapper">
</div>
</div> </div>
<!-- ----------------------- to top arrow on mobile ------------------------ --> <!-- ----------------------- to top arrow on mobile ------------------------ -->

31
js/scripts.js
View File

@@ -479,7 +479,7 @@
cMetadata.children(".categories, .postedon").addClass("transparent") cMetadata.children(".categories, .postedon").addClass("transparent")
//animate border //animate border
cMetadata.stop().animate({ height: "25rem" },400, _ => { cMetadata.stop().animate({ height: "25rem" }, 400, _ => {
//hide metadata //hide metadata
cMetadata.children(".categories, .postedon").hide().removeClass("transparent") cMetadata.children(".categories, .postedon").hide().removeClass("transparent")
cMetadata.children(".alcim, .bevezeto").show().removeClass("transparent") cMetadata.children(".alcim, .bevezeto").show().removeClass("transparent")
@@ -503,7 +503,7 @@
cMetadata.children(".alcim, .bevezeto").addClass("transparent") cMetadata.children(".alcim, .bevezeto").addClass("transparent")
//animate height change //animate height change
cMetadata.stop().animate({ height: "10rem" },400, _ => { cMetadata.stop().animate({ height: "10rem" }, 400, _ => {
//hide and show metadata //hide and show metadata
cMetadata.children(".alcim, .bevezeto").hide().removeClass("transparent") cMetadata.children(".alcim, .bevezeto").hide().removeClass("transparent")
cMetadata.children(".categories, .postedon").removeClass("transparent").show() cMetadata.children(".categories, .postedon").removeClass("transparent").show()
@@ -568,8 +568,22 @@
/* CIRCULAR TEXT */ /* 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 var charnum = 0
$(".wrapper .header #tag-nav ul li a").each(function () { $(bedoWords).each(function () {
let chars = $(this).html().length + 1 let chars = $(this).html().length + 1
$(this).lettering() $(this).lettering()
$(this).children("span").each(function () { $(this).children("span").each(function () {
@@ -581,6 +595,17 @@
charnum += chars 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; color: transparent;
-webkit-text-stroke: #000 1px; -webkit-text-stroke: #000 1px;
text-transform: uppercase; text-transform: uppercase;
&.current{
-webkit-text-stroke: #fff 1px !important;
}
@media #{$smalldesktop} {
font-size: 1.2rem;
}
} }
@mixin single-title { @mixin single-title {

73
sass/base.scss
View File

@@ -133,6 +133,27 @@ $v-unit-2: 8rem;
@for $i from 1 through $num-letters { @for $i from 1 through $num-letters {
&.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;
-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; // 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);
} }
} }
} }
@@ -504,6 +525,9 @@ $v-unit-2: 8rem;
position: fixed; position: fixed;
right: calc(#{$h-unit-2}* 2); right: calc(#{$h-unit-2}* 2);
top: calc(#{$v-unit-1}/ 2); top: calc(#{$v-unit-1}/ 2);
@media #{$smalldesktop} {
top: calc(#{$v-unit-1}* 0.4);
}
z-index: 1000; z-index: 1000;
@media #{$smalldesktop} { @media #{$smalldesktop} {
display: block; display: block;
@@ -517,18 +541,48 @@ $v-unit-2: 8rem;
a { a {
span { span {
height: calc(#{$v-unit-1}/ 2); 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; position: absolute;
// width: 20px; // left: 50%;
left: 0; // top: 0;
top: 0; // transform-origin: bottom center;
transform-origin: bottom center; transform-origin: 50% 100%;
@include bedocircle(); @include bedocircle(); //this is the font
@include rotated-text(17, 360deg, 0deg); @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 } //header end
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
@@ -830,13 +884,6 @@ $v-unit-2: 8rem;
position: absolute; position: absolute;
right: 0; right: 0;
top: calc(-50% + 0.5px); top: calc(-50% + 0.5px);
// &:first-child {
// // top: calc(-100% + 2px);
// top: -100%;
// // top: unset;
// @include transform(scale(1, -1));
// // @include transform(rotate(-90deg));
// }
} }
} }
} //metadata end } //metadata end