splatter-plot
Version:
Layout elements using concentric rings in JS + SVG
98 lines (97 loc) • 2.2 kB
CSS
#ember-welcome-page-id-selector {
padding: 2em;
box-shadow: 0 0 0px 10px #FFFBF5;
font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
font-size: 16px;
line-height: 1.35em;
background: #FFFBF5;
color: #865931;
height: 100vh;
}
#ember-welcome-page-id-selector img {
max-width: 100%;
}
#ember-welcome-page-id-selector p {
margin: 0 0 .75em;
}
#ember-welcome-page-id-selector h2 {
color: #dd6a58;
margin-top: 1em;
font-size: 1.75em;
line-height: 1.2
}
#ember-welcome-page-id-selector a:link,
#ember-welcome-page-id-selector a:visited {
color: #dd6a58;
text-decoration: none;
}
#ember-welcome-page-id-selector a:hover,
#ember-welcome-page-id-selector a:active {
color: #c13c27;
}
#ember-welcome-page-id-selector .tomster {
flex: 2;
}
#ember-welcome-page-id-selector .welcome {
flex: 3;
}
#ember-welcome-page-id-selector .columns {
display: flex;
max-width: 960px;
margin: 0 auto;
}
#ember-welcome-page-id-selector .welcome ol {
list-style: disc;
padding-left: 2em;
margin-bottom: .75em;
}
#ember-welcome-page-id-selector .welcome > ol > li {
padding-bottom: .5em;
}
#ember-welcome-page-id-selector .postscript {
clear: both;
text-align: center;
padding-top: 3em;
font-size: 14px;
color: #888;
font-style: italic;
line-height: 2;
}
#ember-welcome-page-id-selector .postscript code {
background-color: #F8E7CF;
border-radius: 3px;
font-family: Menlo, Courier, monospace;
font-size: 0.9em;
padding: 0.2em 0.5em;
margin: 0 0.1em;
}
@media (max-width: 700px) {
#ember-welcome-page-id-selector {
padding: 1em;
}
#ember-welcome-page-id-selector .columns {
flex-direction: column;
}
#ember-welcome-page-id-selector .welcome,
#ember-welcome-page-id-selector .tomster {
}
#ember-welcome-page-id-selector .tomster img {
width: 50%;
margin: auto;
display: block;
}
#ember-welcome-page-id-selector h2 {
text-align: center;
}
}
@media (max-width: 400px) {
#ember-welcome-page-id-selector .tomster img {
width: 60%;
}
#ember-welcome-page-id-selector .welcome,
#ember-welcome-page-id-selector .tomster {
width: 100%;
float: none;
margin: auto;
}
}