blog/assets/sass/_home.scss
2022-01-24 18:35:39 -06:00

108 lines
1.9 KiB
SCSS

#homepageContainer {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
padding: 12px;
box-sizing: border-box;
#homepage {
width: 100%;
h1#title {
font-weight: normal;
font-size: 4em;
margin: 0;
}
div#about {
line-height: 1.5em;
p {
min-width: 520px;
width: 60%;
}
a code {
color: $code-color;
&:hover {
text-decoration: none;
}
}
ul {
list-style-type: "\22A2 ";
padding-left: 1.5em;
li {
padding-left: .5em;
}
}
}
h2 {
font-weight: normal;
margin-bottom: 6px;
color: $text-color;
}
h2#blog-posts-title {
a {
text-decoration: none;
color: $text-color;
}
}
#blog-posts {
width: 100%;
display: flex;
flex-direction: row;
align-content: stretch;
@media screen and (max-width: 520px) {
flex-wrap: wrap;
}
@media screen and (min-width: 520px) {
flex-wrap: no-wrap;
}
gap: 20px;
.blog-post-link {
flex-grow: 1;
flex-basis: 100%;
padding: 8px;
background-color: $faded-background-color;
text-decoration: none;
.blog-post {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
align-content: stretch;
justify-content: space-between;
color: $text-color;
text-decoration: none;
.title {
display: flex;
}
.details {
text-align: right;
color: $smaller-text-color;
}
}
&:hover .title {
text-decoration: underline;
text-decoration-style: dotted;
}
}
}
}
}