Sample Styles
body {
font-family: "Arial", sans-serif;
text-align: center;
font-size: 1em;
margin: 0 auto;
}
h1, h3 {
text-align: center;
}
a {
text-decoration: none;
color: lightcoral;
}
a:hover {
color: aqua;
}
main {
text-align: left;
margin: auto;
background-color: white;
width: 1300px;
max-width: 100%;
padding: 20px;
}
blockquote {
border: 1px solid #bbb;
padding: 10px;
}
.half-column-1, .half-column-2, .full-column, .third-column-1, .third-column-2, .third-column-3, .two-thirds-column-1, .two-thirds-column-2 {
margin-top: 30px;
display: inline-block;
box-sizing: border-box;
background-color: white;
line-height: 170%;
vertical-align: top;
margin: 5px 0;
padding: 10px;
max-width: 100%;
}
.half-column-1, .half-column-2 {
width: 48%;
margin: 5px;
}
.third-column-1, .third-column-2, .third-column-3 {
width: 33%;
}
.two-thirds-column-1, .two-thirds-column-2 {
width: 66%;
}
.greybackground {
background-color: #eee;
padding: 20px;
}
img {
max-width: 95%;
margin: auto;
display: block;
width: 400px;
}
figure {
padding: 20px;
}
.image-center {
margin: 0 auto;
float: none;
}
.image-right {
float: right;
margin-left: 20px;
}
.image-left {
float: left;
margin-right: 20px;
}
.image-xsmall {
max-width: 140px;
}
.image-small {
max-width: 240px;
}
.image-medium {
max-width: 400px;
}
.image-large {
max-width: 600px;
}
.image-xlarge {
width: 700px;
}
/** BREAKPOINT */
@media only screen and (max-width: 750px) {
.half-column-1, .half-column-2, .full-column, .third-column-1, .third-column-2, .third-column-3, .two-thirds-column-1, .two-thirds-column-2 {
width: 100%;
margin: 0;
}
main {
padding: 0;
}
.image-right, .image-left {
float: none;
}
}