You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
1.3 KiB
CSS
87 lines
1.3 KiB
CSS
* {
|
|
min-height: 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
body {
|
|
background: #639ab2;
|
|
font-size: 15px;
|
|
font-family: 'Ubuntu Mono', monospace;
|
|
}
|
|
|
|
.prelative {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
div.container {
|
|
width: 100%;
|
|
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
|
|
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
|
|
display: -ms-flexbox; /* TWEENER - IE 10 */
|
|
display: -webkit-flex; /* NEW - Chrome */
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.word {
|
|
font-size: 3rem;
|
|
float: left;
|
|
position: relative;
|
|
text-align: center;
|
|
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
|
|
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
|
|
display: -ms-flexbox; /* TWEENER - IE 10 */
|
|
display: -webkit-flex; /* NEW - Chrome */
|
|
display:flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.word:before,
|
|
.word:after {
|
|
content: '';
|
|
color: #fff;
|
|
position: absolute;
|
|
font-family: 'PT Serif', serif;
|
|
font-weight: bold;
|
|
font-size: 1.5rem;
|
|
font-style: italic;
|
|
opacity: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.word:before {
|
|
content: attr(data-txt);
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
.word:hover:before,
|
|
.word:active:after {
|
|
opacity: 1;
|
|
}
|
|
|
|
|
|
|
|
.fade-out {
|
|
color: #275152;
|
|
}
|
|
|
|
p {
|
|
margin: 1rem;
|
|
}
|
|
|
|
.red {
|
|
color: red;
|
|
}
|
|
|
|
.blue {
|
|
color: blue;
|
|
}
|
|
|
|
.cyan {
|
|
color: cyan;
|
|
}
|
|
|
|
.underline {
|
|
text-decoration: underline;
|
|
}
|