example/static/css/style.css
/**
* Device Selector Example
* Simon Gattner 2018
*
**/
@keyframes fadeInBody {
0% {
background-color: #FFFFFF;
opacity: 0;
}
100% {
background-color: #6f776f;
opacity: 1;
}
}
@keyframes fadeInBoxShadow {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
overflow-x: hidden;
}
body {
font: normal 100%/1.2 Arial, Helvetica Neue, Helvetica, sans-serif;
color: #f2f0ff;
background-color: #6f7077;
animation: fadeInBody .6s ease-in;
}
header {
display: flex;
flex-flow: column-reverse;
padding: 4em 1em 2em 1em;
}
header h1 {
margin-bottom: .6em;
}
header h2 {
font-size: 1em;
padding-bottom: .8em;
margin-bottom: 2vw;
border-bottom: 2px solid #f2f0ff;
}
header pre {
overflow: hidden;
}
footer {
margin: 0 1em;
padding: 2em 0;
border-top: 2px solid #f2f0ff;
}
footer .logo .javascript {
height: 1em;
vertical-align: -0.12em;
}
footer {
padding: 1em 0;
margin-bottom: 1rem;
}
footer::after {
content: " ";
clear: both;
display: block;
visibility: hidden;
height: 0px;
}
footer a:hover,
footer a:active,
footer a:focus {
font-style: italic;
}
footer p {
display: block;
padding: .2em 0;
line-height: 1.4em;
vertical-align: -.1em;
letter-spacing: 0.2em;
}
footer p a {
margin-right: 0;
text-decoration: none;
}
footer ul {
display: block;
margin-left: -.5em;
}
footer ul li {
display: inline-block;
margin-right: .4em;
list-style: none;
}
footer ul li a {
display: block;
padding: .2em .4em;
}
main {
display: block;
padding: 0 1em 2em 1em;
}
main ::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, .042);
}
main ::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .042);
outline: 1px solid rgba(0, 0, 0, .9);
}
main pre {
position: relative;
padding: 0 2em 3em;
font-size: 110%;
color: #6f776f;
background-color: #f2f0ff;
overflow-x: auto;
opacity: .7;
animation: fadeInBoxShadow 1s linear;
transition: all 1s ease-out;
}
main pre::after {
content: "</code>";
position: absolute;
right: 1em;
bottom: 1em;
font-size: 2em;
}
main pre.inline {
border-bottom: 2px solid #f2f0ff;
font-size: 140%;
}
section:not(:last-child),
header section {
border-bottom: 1px solid #f2f0ff;
margin-bottom: 5em;
}
a {
color: inherit;
text-decoration: none;
}
a:visited {
color: inherit;
text-decoration: none;
}
a:hover, a:active, a:focus, {
color: inherit;
text-decoration: underline;
}
h1, h2, h3, h4, p {
margin-bottom: 1em;
}
dl, main pre {
margin-bottom: 4em;
}
dl::after {
content: ' ';
display: table;
width: 1px;
height: 1px;
clear: left;
}
dt, dd {
float: left;
margin-bottom: .5em;
line-height: 2em;
min-width: 160px;
}
dd+dt {
clear: left;
}
dd {
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
dd code {
display: inline-block;
padding: 0 .4em;
margin-left: 1em;
min-width: 160px;
font-size: 150%;
border-left: 1px solid #f2f0ff;
}
[data-randrix] {
display: grid;
grid-gap: 0;
grid-template-columns: repeat(6, 4vw);
grid-template-rows: repeat(5, 16vw);
align-content: space-around;
justify-content: space-between;
}
[data-randrix-char] {
font-size: 6vw;
line-height: 6vw;
opacity: .6;
text-align: center;
}
[data-randrix-char-active="true"] {
font-weight: bold;
opacity: 1;
}
[data-randrix-style="monospace"] {
font-family: monospace;
}
[data-randrix-style="sans-serif"] {
font-family: sans-serif;
}
[data-randrix-style="serif"] {
font-family: serif;
}
[data-randrix-style="cursive"] {
font-family: cursive;
}
.hljs {
background: transparent !important;
}
@media only screen and (min-width: 560px) {
main {
padding: 0 4em 2em 4em;
}
header {
display: flex;
flex-flow: row-reverse nowrap;
height: 100%;
padding: 4em 4em 2em 4em;
}
header section {
width: 47%;
}
header section:first-child {
margin-left: 3%;
}
header section:first-child h1 {
padding-top: 2vw;
}
header section:last-child {
margin-right: 3%;
}
footer {
margin: 0 4em;
}
footer ul,
footer p {
max-width: 50%;
}
footer p {
float: right;
}
footer ul {
float: left;
}
[data-randrix] {
grid-template-rows: repeat(5, 8vw);
}
[data-randrix-char] {
font-size: 2.4vw;
}
}