voussoir/voussoir.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve positioning of fullscreen button on mobile.

Browse source 
And remove unnecessary holder div.
This commit is contained in:
voussoir 2022-01-14 22:00:13 -08:00
parent a9681cacd7
commit 437c02820b
No known key found for this signature in database
GPG key ID: 5F7554F8C26DACCB
1 changed files with 20 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
voussoir.net/index.html
View file

@ -61,6 +61,10 @@ code { font-family: monospace; }
{ {
display: none !important; display: none !important;
} }
.hidden_opacity
{
opacity: 0 !important;
}
#headline #headline
{ {
@ -98,26 +102,27 @@ code { font-family: monospace; }
height: 2em; height: 2em;
} }
#fullscreen_button_holder
{
height: 16px;
text-align: end;
width: 100%;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
#headline_fullscreen_button #headline_fullscreen_button
{ {
display: none; display: flex;
width: 16px; justify-content: center;
align-items: center;
height: 16px; height: 16px;
width: 16px;
margin-left: auto;
margin-right: 25%;
/* Remove default button appearance */
background-color: transparent; background-color: transparent;
padding: 0;
border: none; border: none;
opacity: 0;
} }
#headline:hover #headline_fullscreen_button #headline:hover #headline_fullscreen_button
{ {
display: initial; opacity: 1;
} }
@keyframes splash_pulsate @keyframes splash_pulsate
@ -301,9 +306,7 @@ code { font-family: monospace; }
<div class="tilt_holder width_limited"> <div class="tilt_holder width_limited">
<div id="headline_splash"><noscript>somewhat new and hardly improved</noscript></div> <div id="headline_splash"><noscript>somewhat new and hardly improved</noscript></div>
</div> </div>
<div id="fullscreen_button_holder">
<button id="headline_fullscreen_button" onclick="return fullscreen_toggle();">⛶</button> <button id="headline_fullscreen_button" onclick="return fullscreen_toggle();">⛶</button>
</div>
</section> </section>
<section id="cv"> <section id="cv">
@ -986,7 +989,7 @@ function fullscreen_mousehandler()
function fullscreen_showmouse() function fullscreen_showmouse()
{ {
document.getElementById("headline").style.cursor = ""; document.getElementById("headline").style.cursor = "";
document.getElementById("headline_fullscreen_button").classList.remove("hidden"); document.getElementById("headline_fullscreen_button").classList.remove("hidden_opacity");
clearTimeout(HIDE_MOUSE_TIMEOUT); clearTimeout(HIDE_MOUSE_TIMEOUT);
} }
@ -995,7 +998,7 @@ function fullscreen_hidemouse()
if (document.fullscreenElement) if (document.fullscreenElement)
{ {
document.getElementById("headline").style.cursor = "none"; document.getElementById("headline").style.cursor = "none";
document.getElementById("headline_fullscreen_button").classList.add("hidden"); document.getElementById("headline_fullscreen_button").classList.add("hidden_opacity");
} }
} }
function fullscreenchange_handler() function fullscreenchange_handler()