blog/assets/sass/_home.scss

120 lines
2.1 KiB
SCSS
Raw Normal View History

2022-01-25 00:35:39 +00:00
#homepageContainer {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
padding: 12px;
box-sizing: border-box;
2022-01-25 02:40:04 +00:00
overflow-y: auto;
2022-01-25 00:35:39 +00:00
#homepage {
width: 100%;
h1#title {
font-weight: normal;
font-size: 4em;
margin: 0;
2022-01-25 02:40:04 +00:00
margin-top: 40px;
2022-01-25 00:35:39 +00:00
}
div#about {
line-height: 1.5em;
p {
width: 60%;
2022-01-25 02:40:04 +00:00
min-width: Min(100%, 520px);
2022-01-25 00:35:39 +00:00
}
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;
gap: 6px;
2022-01-25 00:35:39 +00:00
}
@media screen and (min-width: 520px) {
flex-wrap: no-wrap;
gap: 20px;
2022-01-25 00:35:39 +00:00
}
list-style-type: none;
padding: 0;
2022-01-25 00:35:39 +00:00
> li {
display: block;
width: 100%;
2022-01-25 00:35:39 +00:00
padding: 8px;
background-color: $faded-background-color;
text-decoration: none;
flex-grow: 1;
flex-basis: 100%;
}
.blog-post-link {
text-decoration: none;
2022-01-25 00:35:39 +00:00
.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;
}
}
}
}
}