Playing with the Fullscreen API
The great CSS Tricks never ceases to disappoint me. After just a few seconds on the site, I spotted a fantastic article, How to Leverage the Fullscreen API… and Style It written by Evgeny Klimenchenko, that taught me how easy it is to make an element fullscreen. I’m excited to try this out when I get more games made with PICO-8 and Voxatron games done and posted to my website.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sagittis commodo porta. Pellentesque in elit porta, lacinia massa ac, scelerisque felis. Nullam turpis quam, imperdiet ut ex eget, sodales bibendum risus. Integer libero enim, commodo ac convallis a, commodo vel massa. Donec fringilla ultricies libero, non vehicula felis dictum sed. Etiam sollicitudin urna at est mattis aliquet lacinia eget turpis. Sed congue at diam id rhoncus.
Nulla facilisi. Nam mollis augue eget lacus varius ornare. Donec neque felis, viverra ut bibendum eu, tristique ac neque. Integer vel odio nibh. Vestibulum felis mauris, elementum at odio eu, tristique consectetur massa. Ut vel erat vehicula est venenatis dictum. Sed risus turpis, volutpat sit amet diam interdum, aliquam auctor mauris. Integer consectetur laoreet tellus, at suscipit arcu lacinia vitae. Donec nunc mauris, faucibus eu vulputate vitae, aliquam eget felis. Vivamus eu sollicitudin turpis, eget pellentesque quam. Aenean commodo auctor nisi, condimentum ultrices mauris rutrum id. Curabitur venenatis eros sit amet tristique facilisis.
Vivamus molestie dolor id sapien luctus molestie. Sed ullamcorper massa vitae urna congue rhoncus. Integer scelerisque lectus a ultrices volutpat. Aenean commodo nunc congue felis malesuada vehicula in quis ex. Nullam eu ante nec diam mattis efficitur sed eget est. Aliquam condimentum pulvinar lacus non vehicula. Sed felis mauris, convallis sed imperdiet sed, vestibulum id leo. Cras lacinia convallis massa eu iaculis. Pellentesque ornare mauris quis magna luctus dignissim. Nulla orci magna, sodales vel ex at, eleifend ultrices neque. Cras facilisis nibh nulla, non aliquam sapien tincidunt vehicula.
View the code:
HTML and JS
<div class="code-block" id="fullscreen">
<div class="inner-grid">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sagittis commodo porta. Pellentesque in elit porta, lacinia massa ac, scelerisque felis. Nullam turpis quam, imperdiet ut ex eget, sodales bibendum risus. Integer libero enim, commodo ac convallis a, commodo vel massa. Donec fringilla ultricies libero, non vehicula felis dictum sed. Etiam sollicitudin urna at est mattis aliquet lacinia eget turpis. Sed congue at diam id rhoncus.</p>
<p>Nulla facilisi. Nam mollis augue eget lacus varius ornare. Donec neque felis, viverra ut bibendum eu, tristique ac neque. Integer vel odio nibh. Vestibulum felis mauris, elementum at odio eu, tristique consectetur massa. Ut vel erat vehicula est venenatis dictum. Sed risus turpis, volutpat sit amet diam interdum, aliquam auctor mauris. Integer consectetur laoreet tellus, at suscipit arcu lacinia vitae. Donec nunc mauris, faucibus eu vulputate vitae, aliquam eget felis. Vivamus eu sollicitudin turpis, eget pellentesque quam. Aenean commodo auctor nisi, condimentum ultrices mauris rutrum id. Curabitur venenatis eros sit amet tristique facilisis.</p>
<p>Vivamus molestie dolor id sapien luctus molestie. Sed ullamcorper massa vitae urna congue rhoncus. Integer scelerisque lectus a ultrices volutpat. Aenean commodo nunc congue felis malesuada vehicula in quis ex. Nullam eu ante nec diam mattis efficitur sed eget est. Aliquam condimentum pulvinar lacus non vehicula. Sed felis mauris, convallis sed imperdiet sed, vestibulum id leo. Cras lacinia convallis massa eu iaculis. Pellentesque ornare mauris quis magna luctus dignissim. Nulla orci magna, sodales vel ex at, eleifend ultrices neque. Cras facilisis nibh nulla, non aliquam sapien tincidunt vehicula. </p>
</div>
<button id="button-fullscreen-toggle">Toggle Fullscreen</button>
</div>
<script>
// ---------
// Variables
// ---------
let fullscreen = document.querySelector("#fullscreen");
let button = document.querySelector("#button-fullscreen-toggle");
button.addEventListener('click', () => {
if (!document.fullscreenElement) {
console.log('enable fullscreen');
fullscreen.requestFullscreen();
} else {
console.log('disable fullscreen');
document.exitFullscreen();
}
});
// ---------
// Functions
// ---------
// ---------
// Events
// ---------
</script>CSS
.code-block {
width: clamp(16em, 90vw, 60em);
margin: 1rem auto;
padding: 1rem;
background-color: orange;
border-radius: 1rem;
}
#button-fullscreen-toggle {
border-radius: .5rem;
background-color: lightgray;
padding: 1rem;
border: none;
}
.inner-grid p {
line-height: 1.5;
}
#fullscreen:fullscreen, #fullscreen:-webkit-full-screen, #fullscreen:-moz-full-screen {
background: linear-gradient(red, orange);
}
#fullscreen::backdrop {
background-color: blue;
}
@supports (display: grid) {
.code-block {
display: grid;
place-items: center;
}
.inner-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
max-width: calc(60em - 2rem);
}
}