<html>
<head>
<title>SCCJXQ</title>
<link rel="stylesheet" type="text/css" href="./cssisok.css">
</head>
<body>
<div class="deadcenter">
<div id="nav-prev" class="nav-button btn-enabled"> < </div>
<div class="curved-corner-block">
<!-- Move the content-slider, not the verses -->
<!-- trick is positioning the verses right. Current is ALWAYS in center. -->
<!-- sometimes surrounded by spacers. -->
<div id="song-holder">
<!--
<section class="lyrics">
<div class="lyrics-container">
<div class="lyrics-content">
</div>
</div>
</section>
-->
<section class="lyrics">
<div class="lyrics-container">
<div class="lyrics-content">
Pseudoclasses, selectors,<br />
calc and mixins<br />
The important! directive<br />
and the order of precedence
<span class="blinking-cursor"> </span>
</div>
</div>
</section>
<section class="lyrics">
<div class="lyrics-container">
<div class="lyrics-content">
The box model, layers, grid & flex<br />
How to convert RGB to hex<br />
Which sites to visit to see what's new<br />
<span class="blinking-cursor"> </span>
</div>
</div>
</section>
<section class="lyrics">
<div class="lyrics-container">
<div class="lyrics-content">
Media queries<br />
all the properties<br />
and the frameworks too
<span class="blinking-cursor"> </span>
</div>
</div>
</section>
<section class="lyrics">
<div class="lyrics-container">
<div class="lyrics-content">
Animating with an SVG<br />
trying to debug cascading<br />
rules you don't see<br />
<span class="blinking-cursor"> </span>
</div>
</div>
</section>
<section class="lyrics">
<div class="lyrics-container">
<div class="lyrics-content">
All the libraries everyone seems to use<br />
You can try to learn them all but better just to choose<br />
Being good by standardizing all your names<br />
But I bet you'll never get everything the same
<span class="blinking-cursor"> </span>
</div>
</div>
</section>
<section class="lyrics">
<div class="lyrics-container">
<div class="lyrics-content">
CSS is the way it is<br />
It's something you just gotta know in the biz<br />
Now I can get by but I ain't no whiz<br />
Guess that's why I wrote this song
<span class="blinking-cursor"> </span>
</div>
</div>
</section>
<section class="lyrics">
<div class="lyrics-container">
<div class="lyrics-content">
Instead of writing another style<br />
That'll probably break and go wrong for a while
<span class="blinking-cursor"> </span>
</div>
</div>
</section>
<section class="lyrics">
<div class="lyrics-container">
<div class="lyrics-content">
But my bills won't get paid if the website's unmade<br />
So I gotta get back before long
<span class="blinking-cursor"> </span>
</div>
</div>
</section>
<section class="lyrics">
<div class="lyrics-container">
<div class="lyrics-content">
CSS is ok I guess<br />
CSS is ok I guess<br />
CSS is ok I guess
<span class="blinking-cursor"> </span>
</div>
</div>
</section>
<section class="lyrics">
<div class="lyrics-container">
<div class="lyrics-content">
CSS is ok I guess<br />
it can easily become a mess<br />
You experiment and try to assess<br />
why your page ain't rendering right
<span class="blinking-cursor"> </span>
</div>
</div>
</section>
<section class="lyrics">
<div class="lyrics-container">
<div class="lyrics-content">
You can use SASS, you can try LESS<br />
your page'll say "NO" while your code says "YES"<br />
I been writin' this so long I confess<br />
I still feel dumb every night
<span class="blinking-cursor"> </span>
</di>
</div>
</section>
<section class="lyrics">
<div class="lyrics-container">
<div class="lyrics-content">
starting from basic HTML<br />
every layer of layer of tech makes me yell<br />
at the Universe and my computery Hell<br />
as I go insane in the head
<span class="blinking-cursor"> </span>
</di>
</div>
</section>
<section class="lyrics">
<div class="lyrics-container">
<div class="lyrics-content">
it's not learning the code that's hard<br />
but integrating and organizin' the parts<br />
that - not to be arrogant - does require smartzz<br />
and careful thinkin ahead
<span class="blinking-cursor"> </span>
</div>
</div>
</section>
<section class="lyrics">
<div class="lyrics-container">
<div class="lyrics-content lyrics-bridge">
Watch out friend<br />
If you end<br />
up with them combined<br />
in imported files,<br />
and in plugins,<br />
and scattered inline
<span class="blinking-cursor"> </span>
</div>
</div>
</section>
<section class="lyrics">
<div class="lyrics-container">
<div class="lyrics-content lyrics-bridge">
Oh, the conflicts!<br />
Oh, the unporocessed lines<br />
the under-internet<br />
is full of mines
<span class="blinking-cursor"> </span>
</div>
</div>
</section>
<section class="lyrics">
<div class="lyrics-container">
<div class="lyrics-content">
Still CSS must be more than OK<br />
Some crazy codepens blow me away<br />
It can all come down to if your display<br />
's set relative or absolute
<span class="blinking-cursor"> </span>
</div>
</div>
</section>
<section class="lyrics">
<div class="lyrics-container">
<div class="lyrics-content">
I just want my stuff to look good<br />
Some folks know more than I ever could<br />
They take to the tech like a tree takes to wood<br />
It's their special attribute
<span class="blinking-cursor"> </span>
</div>
</div>
</section>
<section class="lyrics">
<div class="lyrics-container">
<div class="lyrics-content">
Here is a list of some CSS things
<span class="blinking-cursor"> </span>
</div>
</div>
</section>
<section class="lyrics">
<div class="lyrics-container">
<div class="lyrics-content">
That I'll aim to remember as I sing
<span class="blinking-cursor"> </span>
</div>
</div>
</section>
</div>
</div>
<div id="nav-next" class="nav-button btn-enabled"> > </div>
</div>
</body>
</html>
/**************************************************************
/ CSS is OKay
/ by quayxjan
/
// ver 0.xx
//
// Helpers:
//
/**************************************************************/
:root {
--baseFontSize: 2.5vw;
--lyricWindowWidth: 66vw;
/* Spacer is visible if this is odd. Count 'em all, even the spacer. */
/* hmm any way to calculate this? In CSS, not JS. */
--numStanzas: 19;
}
body {
margin: 0 auto;
background-color:#454545;
}
.deadcenter {
display:flex;
justify-content:center;
align-items:center;
width:100vw; min-width:100vw;
height:100vh; min-height:100vh;
}
/* We are going to make this static with respect to the width of the page.
Resizing and keeping things centered is too tricky, and
we'd have to animate it which is even a tough aesthetic decision. */
.curved-corner-block {
border-radius: 4.1em;
background: linear-gradient(white 1%, aqua 30% 70%, white 89%);
margin: 0 0 0 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
max-width: var(--lyricWindowWidth); min-width: var(--lyricWindowWidth);
max-height: 77vh; min-height: 77vh;
overflow: hidden;
}
#song-holder {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
box-sizing: border-box;
background: rgba(100, 100, 100, 0.1);
}
.lyrics {
font-family: 'courier';
font-size: var(--baseFontSize);
line-height: 1.6em; /* calc(var(--baseFontSize) * 1.6); */
color: red;
display: inline-block;
text-align: left;
overflow: hidden;
box-sizing: border-content;
width:var(--lyricWindowWidth); min-width:var(--lyricWindowWidth); max-width:var(--lyricWindowWidth);
}
.lyrics-container {
display: flex;
overflow: hidden;
box-sizing: border-box;
justify-content: center;
align-items: center;
margin: auto 1em;
}
.lyrics-content {
text-align: left;
}
.lyrics-bridge {
color: goldenrod;
text-align: center;
}
.blinking-cursor {
display: inline-block; /* vital */
background-color: #000000;
font-size: 0.3em;
vertical-align: text-bottom;
line-height: calc(1.6em * (1.0/0.3) * 0.8);
max-height: calc(1.6em * (1.0/0.3) * 0.8);
margin: 0 0 calc(1.6em * 0.3 * 1.2) 0;
animation: cursor-blink 1s infinite;
}
@keyframes cursor-blink { 0% {opacity: 0%}
15% {opacity:100%}
65% {opacity:100%}
100% {opacity: 0%} }
.nav-button {
display: flex;
background-color: aqua;
font-size: 2.4em;
font-family: sans-serif;
padding: 0.5em;
z-index: 999;
}
#nav-next {
border-radius: 0 0.3em 0.3em 0;
margin: 0 0 0 0.3em;
transform: translateX(-20%);
}
#nav-prev {
border-radius: 0.3em 0 0 0.3em;
margin: 0 0.3em 0 0em;
transform: translateX(20%)
}
.btn-enabled {
cursor: pointer;
color: black;
opacity: 1;
}
.btn-disabled {
cursor: initial;
color: lightgrey;
opacity: 0; /* better than the above */
}
.slide-over-left { animation: slide-one-left 1000ms ease-out 1 forwards;}
@keyframes slide-one-left { to { transform: translateX(calc(-100%/var(--numStanzas))) } }
.slide-over-right { animation: slide-one-right 1000ms ease-out 1 forwards;}
@keyframes slide-one-right { to { transform: translateX(calc(100%/var(--numStanzas))) } }
const btnPrev = document.querySelector('#nav-prev');
const btnNext = document.querySelector('#nav-next');
const theSlider = document.getElementById('song-holder');
const allLyrics = document.getElementsByClassName('lyrics');
theSlider.addEventListener('animationend', () => {
// keep the first element always as a spacer, in case of an even number of stanzas.
const nodeFirst = theSlider.firstElementChild;
const nodeLast = theSlider.lastElementChild;
const nodesGoingNext = document.getElementsByClassName('slide-over-left');
const nodesGoingPrev = document.getElementsByClassName('slide-over-right');
const nodeAnchor = (nodeFirst.classList.contains('lyrics-spacer')) ? theSlider.children[1] : nodeFirst;
if (nodesGoingNext.length > 0) { theSlider.appendChild(nodeAnchor); }
else if (nodesGoingPrev.length > 0) { theSlider.insertBefore(nodeLast, nodeAnchor); }
theSlider.classList.remove('slide-over-left', 'slide-over-right');
});
btnNext.addEventListener('click', () => {
theSlider.classList.add('slide-over-left');
});
btnPrev.addEventListener('click', () => {
theSlider.classList.add('slide-over-right');
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.