ripple
ripple copied to clipboard
Some elements doesn't have hover effects.
This elements have:
<header>
...
...
<a
class="main_title"
onclick="go_after_timeout(this, event, '{{ link___main_page }}')"
>
{% if DEFAULT_LANG == "ru" %}Добро пожаловать на личную страницу vlad1777d
{% else %}Welcome to vlad1777d personal page
{% endif %}
</a>
...
...
</header
and such does not:
<header>
...
...
<div class="language_switcher">
<a class="language_button russian_button button_ripple" onclick="go_after_timeout(this, event, '{{ link___main_page___russian }}')"></a>
<div class="language_button_separator"></div>
<a class="language_button english_button button_ripple" onclick="go_after_timeout(this, event, '{{ link___main_page___english }}')"></a>
</div>
...
...
</header>
their css:
.language_switcher {
display: block;
position: absolute;
/*top: 3vmin;
right: 1vmin;*/
top: 0vmin;
right: 0vmin;
padding-top: 3vmin;
padding-right: 1vmin;
padding-left: 12vmin;
height: 12vmin;
z-index: 1;
}
.language_button {
display: block;
width: 32pt;
height: 18pt;
background-size: 100% 100%;
box-shadow: 0 0 3pt 0px hsla(0, 0%, 0%, 0.8), inset 0 0 16pt 0px hsla(0, 0%, 0%, 0.8);
transition-duration: 0.6s;
}
.main_title {
/* Заглавие "Добро пожаловать" со ссылкой на главную страницу. */
display: flex;
justify-content: flex-start;
align-items: center;
width: calc(100% - (8.33vw + 2.08vw + 16.66vw)); /* accounting padding */
height: 16.66vh;
margin: 0;
padding-left: calc(8.33vw + 2.08vw);
padding-right: 16.66vw;
font-size: 18pt;
background-color: hsla(0, 0%, 50%, 0.0);
transition-duration: 0.5s;
}
I'm trying to add it to this website (vlad1777d only page), it's full css: https://github.com/vlad1777d/vlad1777d.github.io/blob/master/theme/css/block___header.css it's html: https://github.com/vlad1777d/vlad1777d.github.io/blob/master/index.html
Update: commented background-color here: https://github.com/vlad1777d/vlad1777d.github.io/blob/master/theme/css/block___header.css#L163 and ripple effect appeared on this submenu items (submenu > a).
Update: my website with partially implemented adding ripple.js: vlad1777d.github.io___bug_ripple.js.zip (it depends on current location, so it could be build with script "compile___vlad1777d___local.py" using pelican and python (python3 and pelican static website generator must be installed)