Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Some elements doesn't have hover effects. #4

Open
vlad0337187 opened this issue Nov 14, 2017 · 0 comments
Open

Some elements doesn't have hover effects. #4

vlad0337187 opened this issue Nov 14, 2017 · 0 comments

Comments

@vlad0337187
Copy link

vlad0337187 commented Nov 14, 2017

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant