blog/assets/sass/_home.scss
2023-02-04 01:21:21 -06:00

137 lines
2.3 KiB
SCSS

.obfuscate {
user-select: none;
display: inline-flex;
flex-direction: row-reverse;
}
.sym-at-sign::before {
content: "@";
}
.sym-dot::before {
content: ".";
}
#homepageContainer {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
padding: 12px;
box-sizing: border-box;
overflow-y: auto;
#homepage {
width: 100%;
h1#title {
font-weight: normal;
font-size: 4em;
margin: 0;
margin-top: 40px;
}
div#about {
line-height: 1.5em;
p {
width: 60%;
min-width: Min(100%, 520px);
}
a code {
color: $code-color;
&:hover {
text-decoration: none;
}
}
ul {
list-style-type: "\25B8\00A0";
padding-left: 1.5em;
li {
padding-left: .5em;
p {
margin: 0.1rem;
}
}
}
}
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;
}
@media screen and (min-width: 520px) {
flex-wrap: no-wrap;
gap: 20px;
}
list-style-type: none;
padding: 0;
> li {
display: block;
width: 100%;
padding: 8px;
background-color: $faded-background-color;
text-decoration: none;
flex-grow: 1;
flex-basis: 100%;
}
.blog-post-link {
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;
}
}
}
}
}