Created blog post page and updated a few things here and there to work with the blog post page. Has comments and a sidebar.

Signed-off-by: rodude123 <rodude123@gmail.com>

src/blog/css/blogPosts.css

@@ -0,0 +1,176 @@
+.profile {
+    -webkit-border-radius: 50%;
+    -moz-border-radius: 50%;
+    border-radius: 50%;
+    width: 70%;
+}
+
+svg {
+    width: 2em;
+    fill: var(--primaryDefault);
+    font-size: 2em;
+}
+
+footer {
+    margin-top: 0;
+}
+
+div.byLine {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 1em;
+}
+
+div.byLine h3:last-child {
+    border-left: 2px solid var(--mutedBlack);
+    padding-left: 1em;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 1em;
+}
+
+div.byLine h3:last-child a {
+    padding: 0 1em;
+}
+
+div.cover {
+    width: 100%;
+    height: 20rem;
+    background-position: center;
+    background-size: cover;
+    border-radius: 10px;
+    box-shadow: 0 4px 2px 0 var(--mutedBlack);
+}
+
+section#individualPost {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+}
+
+div.mainContent {
+    border-right: 5px solid var(--mutedGrey);
+    min-height: 100%;
+    width: 85%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: stretch;
+}
+
+article {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    padding: 0 2em;
+}
+
+article a::before,
+article a::after {
+    visibility: hidden;
+    position: absolute;
+    margin-top: 1px;
+}
+
+article a::before {
+    content: '<';
+    margin-left: -0.5em;
+}
+
+article a::after {
+    content: '>';
+}
+
+article a:hover::before,
+article a:hover::after {
+    visibility: visible;
+}
+
+article h1 {
+    margin-bottom: 0.5em;
+}
+
+article h3 {
+    margin-top: 0;
+}
+
+aside.sideContent {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-end;
+    width: 15%;
+    align-self: flex-start;
+}
+
+div.authorInfo {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    grid-template-rows: repeat(4, auto);
+    padding-left: 1em;
+    padding-top: 0.5em;
+    border-bottom: 5px solid var(--mutedGrey);
+}
+
+div.authorInfo .picture {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    grid-row: span 3;
+}
+
+div.authorInfo h3 {
+    grid-column: span 2;
+}
+
+div.otherPosts {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    padding: 0 1em 1em;
+    border-bottom: 5px solid var(--mutedGrey);
+    width: 100%;
+}
+
+div.otherPosts a {
+    padding: 0.5em 1em;
+}
+
+div.categories {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    padding: 0 1em 1em;
+    width: 100%;
+}
+
+.image img, .image_resized img {
+    max-width: 100%;
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    border-radius: 10px;
+    box-shadow: 0 4px 2px 0 var(--mutedBlack);
+}
+
+.image {
+    justify-self: center;
+    align-self: center;
+}
+
+.image-style-side {
+    justify-self: flex-end;
+    align-self: flex-end;
+}
+
+section.comments {
+    padding: 0 2em 2em;
+}

src/blog/css/home.css

@@ -0,0 +1,80 @@
+.banner {
+    max-width: 30%;
+    box-shadow: 0 6px 4px 0 var(--mutedBlack);
+    -webkit-border-radius: 0.625rem;
+    -moz-border-radius: 0.625rem;
+    border-radius: 0.625rem;
+    border: 2px solid var(--mutedGrey);
+}
+
+h2 {
+    font-family: Share Tech Mono, monospace;
+    font-style: normal;
+    font-weight: normal;
+    font-size: var(--headingFS);
+    line-height: 2.5625rem;
+    text-transform: lowercase;
+}
+
+h3 {
+    font-family: Noto Sans KR, sans-serif;
+    font-style: normal;
+    font-weight: 500;
+    font-size: var(--generalFS);
+    line-height: 2.1875rem;
+}
+
+section.largePost {
+    /*margin: 0 5em;*/
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: flex-start;
+    gap: 2em;
+    width: 100%;
+    padding: 0 5em 1em;
+}
+
+section.largePost:first-child {
+    border-bottom: 5px solid var(--mutedGrey);
+}
+
+section.largePost .outerContent {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    align-items: center;
+    gap: 1em;
+}
+
+section.largePost .outerContent > img, section.largePost .outerContent > .content {
+    width: 50%;
+}
+
+section.largePost .outerContent .postContent {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: flex-start;
+}
+
+section.largePost .outerContent .postContent h2 {
+    align-self: center;
+}
+
+section.largePost .outerContent .postContent a {
+    align-self: flex-end;
+}
+
+#main .error {
+    display: table;
+    width: 100%;
+    height: 100vh;
+    text-align: center;
+}
+
+.fof {
+    display: table-cell;
+    vertical-align: middle;
+}

src/blog/css/main.css

@@ -6,6 +6,6 @@
 @import "../../css/nav.css";
 @import "../../css/footer.css";
 @import "blogPosts.css";
+@import "home.css";
 @import "prism.css";
 
-