Explorer
project
css
styles.css
img
text
about-me.md
footer.md
hompage.md
sidebar.md
index.html
recent-posts.html
Dependencies
Bootcamp
Study group
Collaborate with peers in your dedicated #study-group channel.
Code reviews
Submit projects for review using the /review
command in your #code-reviews channel
/* Fonts
-----
font-family: 'Lora', serif;
font-family: 'Ubuntu', sans-serif;
*/
body {
margin: 0;
font-family: 'Ubuntu', sans-serif;
font-size: 1.125rem;
font-weight: 300;
}
img {
max-width: 100%;
display: block;
}
/* =================
Typography
================= */
h1,
h2,
h3 {
font-family: 'Lora', serif;
font-weight: 400;
color: #143774;
margin-top: 0;
}
h1 {
font-size: 2rem;
margin: 0;
}
a {
color: #1792d2;
}
a:hover,
a:focus {
color: #143774;
}
strong {
font-weight: 700;
}
/* h1 subtitle */
.subtitle {
font-weight: 700;
color: #1792d2;
font-size: .75rem;
margin: 0;
}
.article-title {
font-size: 1.5rem;
}
.article-read-more,
.article-info {
font-size: .875rem;
}
.article-read-more {
color: #1792d2;
text-decoration: none;
font-weight: 700;
}
.article-read-more:hover,
.article-read-more:focus {
color: #143774;
text-decoration: underline;
}
.article-info {
margin: 2em 0;
}
.widget-title,
.widget-recent-post-title {
font-size: 1rem;
}
.widget-title {
font-family: 'Ubuntu', sans-serif;
font-weight: 700;
}
/* =================
Layout
================= */
.container {
width: 90%;
max-width: 900px;
margin: 0 auto;
}
.container-flex {
display: flex;
flex-direction: column;
justify-content: space-between;
}
header {
background: #f8f8f8;
padding: 2em 0;
text-align: center;
margin-bottom: 3em;
}
footer {
background:#143774;
color: white;
text-align: center;
padding: 3em 0;
}
@media (min-width: 675px) {
header {
text-align: left;
}
.container-flex {
flex-direction: row;
}
main {
width: 70%;
}
aside {
width: 25%;
min-width: 200px;
margin-left: 1em;
}
}
/* navigation */
nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}
nav li {
margin-left: 2em;
}
nav a {
text-decoration: none;
color: #707070;
font-weight: 700;
padding: .25em 0;
}
nav a:hover,
nav a:focus {
color: #1792d2;
}
.current-page {
border-bottom: 1px solid #707070;
}
.current-page:hover {
color: #707070;
}
@media (max-width: 675px) {
nav ul {
flex-direction: column;
}
nav li {
margin: .5em 0;
}
}
/* articles */
.article-featured {
border-bottom: #707070 1px solid;
padding-bottom: 2em;
margin-bottom: 2em;
}
.article-recent {
display: flex;
flex-direction: column;
margin-bottom: 2em;
}
.article-recent-main {
order: 2;
}
.article-recent-secondary {
order: 1;
}
@media (min-width: 675px) {
.article-recent {
flex-direction: row;
justify-content: space-between;
}
.article-recent-main {
width: 68%;
}
.article-recent-secondary {
width: 30%;
}
.article-featured {
display: flex;
flex-direction: column;
}
.article-image {
order: -2;
min-height: 250px;
object-fit: cover;
/* object-position: left; */
}
.article-info {
order: -1;
}
}
/* widgets */
.sidebar-widget {
border: 20px solid #efefef;
margin-bottom: 2em;
padding: 1em;
}
.widget-recent-post {
display: flex;
flex-direction: column;
border-bottom: 1px solid #707070;
margin-bottom: 1em;
}
.widget-recent-post:last-child {
border: 0;
margin: 0;
}
.widget-image {
order: -1;
}