/*! web-ignition v2.2.9 ~~ https://github.com/center-key/web-ignition ~~ MIT License */
/*
Neon layout -- For hackers and space junkies
Usage:
...
HTML ():
header
h1, h2, h3, h4
main
section
h2
aside
figure
figcaption
pre code
div
blockquote
cite
footer
p
Neon colors:
lime, fuchsia, yellow, aqua, red
*/
/* Foundation */
body.neon-image-1 { background-image: url(neon/ameba-cdcgov.jpg); }
body.neon-image-2 { background-image: url(neon/crystal-nihgov.jpg); }
body.neon-image-3 { background-image: url(neon/embryo-nihgov.jpg); }
body.neon-image-4 { background-image: url(neon/fruit-fly-science360gov.jpg); }
body.neon-image-5 { background-image: url(neon/neuroscience-ucdavisedu.jpg); }
body.neon-image-6 { background-image: url(neon/supernova-nasagov.jpg); }
body.neon-image-7 { background-image: url(neon/supernova-shock-lblgov.jpg); }
body.neon-image-8 { background-image: url(neon/wind-tunnel-nasagov.jpg); }
body {
max-width: 850px;
color: lime;
background: black 20px 20px no-repeat fixed;
background-size: 200px;
margin-top: 30px;
}
/* Page header */
body >header {
text-align: right;
border-bottom: 2px solid fuchsia;
}
body >header h1 {
font-size: 2.4rem;
color: white;
padding-left: 140px;
}
body >header h2 {
font-size: 1.0rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: white;
padding-left: 140px;
margin-bottom: 30px;
}
body >header h3 {
margin-bottom: 20px;
}
body >header h4 {
font-size: 1.1rem;
text-align: left;
text-transform: none;
}
/* Page sections */
main >section >h2 {
display: table;
font-size: 1.3rem;
color: black;
background-color: lime;
padding: 3px 30px;
}
main >section >h3 {
color: aqua;
}
main >section >h2 + aside,
main >section >h3 + aside {
font-weight: bold;
background-color: black;
color: cyan;
border-color: cyan;
margin-top: -25px;
}
/* Code blocks */
main >section code {
color: fuchsia;
}
main >section >figure {
overflow: scroll;
}
main >section figure >pre {
display: inline-block;
text-align: left;
border: solid yellow 1px;
padding: 10px 15px;
margin: 0px 0px 20px 0px;
}
main >section figure >pre >code {
display: inline-block;
font-size: 0.9rem;
}
main >section figure >pre >code.language-shell >span.prompt {
color: aqua;
}
main >section figure >pre >code.language-shell >span.output {
color: lime;
}
main >section figure >pre >code.language-bash {
color: aqua;
}
/* Link color */
main >section a,
main >section a:visited {
font-size: 1.2em;
color: white;
border-color: fuchsia;
}
main >section a:visited {
color: silver;
}
main >section a:hover {
color: white;
background-color: fuchsia;
outline-color: fuchsia;
}
/* Quotes */
main >section blockquote {
clear: both;
font-size: 1.1rem;
color: yellow;
border: dashed aqua 1px;
padding: 8px 15px;
margin: 10px 0px;
}
main >section blockquote >cite {
display: block;
font-size: 0.9rem;
font-weight: lighter;
text-transform: uppercase;
letter-spacing: 0.1em;
}
main >section blockquote >cite::before {
content: "\2014"; /* mdash */
padding-right: 0.4em;
}
/* Page footer */
body >footer {
flex-direction: column;
padding: 0px;
}
body >footer p {
text-align: center;
color: lime;
}
/* Mobile devices */
@media (max-width: 667px) { /* selects iPhone 6/6s/7/8/SE2/SE3 landscape and anything narrower */
main >section >h2 + aside,
main >section >h3 + aside {
margin-top: 10px;
}
}
/* Social buttons */
#social-buttons span i[data-brand] { color: black; }
#social-buttons span i[data-brand]:hover { color: red; }
/* Flat button color */
button { background-color: fuchsia; }
button:hover:not(:disabled), button:focus { background-color: red; }
/* Reveal action color */
.reveal-button { color: fuchsia; }
.reveal-button:hover { background-color: fuchsia; }
/* PERFECT colors */
form.perfect { background-color: black; border-color: aqua; } /* outer color */
form.perfect h2 { color: black; background-color: aqua; } /* outer color */
form.perfect label span { color: aqua; }
form.perfect input, form.perfect textarea { background-color: white; } /* input fields */
form.perfect p button:hover:not(:disabled), form.perfect p button:focus { background-color: lime; }