body {
margin: 0;
}
/*Everything goes inside here.*/
.wrapper {
width: 900px;
margin: 0 auto;
}
.sidebar-img, .footer, .title, .links, .box {
margin-top: 25px;
}
.title, .links, .footer {
text-align: center;
}
/*Navigation links.*/
.links ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.links li {
display: inline-block;
}
/*Some fancy code for fun, to add special characters around the navigation links. Change content to "" if you don't want these.*/
.links li:before {
content: "「";
}
.links li:after {
content: "〠∷ ";
}
.links .last:after {
content: "ã€";
}
.links li:before, .links li:after {
letter-spacing: 0.1em;
}
/*Basic box code that is used for all content boxes on the page.*/
.box {
border: 1px solid black;
padding: 0.5em 1em;
}
/*Goes inside the box class. Not given any style by default, but can be used for stuff like fancy borders.*/
.inner {
}
/*Prevent image overflow.*/
.box img, .sidebar img {
max-width: 100%;
height: auto;
}
/*Wrapper for the sidebar.*/
.sidebar {
width: 200px;
float: left;
}
/*Container for the sidebar image.*/
.sidebar-image {
border: 1px solid black;
}
/*Remove extra padding line at the bottom of the image.*/
.sidebar-image img {
display: block;
}
/*This is where the title, navbar, and main content all go.*/
.main-wrapper {
margin-left: 225px;
}
/*Two columns by default. The "single-column" class can be added to make it one column.*/
.main {
columns: 2;
column-gap: 25px;
}
/*Make sure boxes don't spread over multiple columns.*/
.main .box {
display: inline-block;
}
.single-column {
columns: 1;
}
.footer {
margin-bottom: 25px;
}
@media(max-width:915px) {
.wrapper {
width: 95%;
}
.main-wrapper {
width: calc(100% - 225px);
}
}
@media (orientation: portrait), (max-width: 480px) {
.wrapper {
width: 100%;
}
.main-wrapper, .sidebar, .footer {
margin: 0 auto;
width: 90%;
}
.sidebar {
float: none;
display: block;
}
.sidebar-image {
margin: 0 auto;
width: 33%;
margin-top:25px;
}
.sidebar .sidebar-image img {
width: 100%;
}
.footer {
margin-bottom: 25px;
}
}