From 4b04df1bca04019f666fa77c5f96c232dabf5619 Mon Sep 17 00:00:00 2001 From: Daniel-I-Am Date: Thu, 26 May 2022 16:05:49 +0200 Subject: [PATCH] Replace blog with snippets --- src/index.pug | 19 ++++--- src/partials/recent-snippet.pug | 15 +++--- src/sass/_blogedit.scss | 74 -------------------------- src/sass/{_blog.scss => _snippet.scss} | 40 +++++++------- src/sass/main.scss | 3 +- 5 files changed, 37 insertions(+), 114 deletions(-) delete mode 100644 src/sass/_blogedit.scss rename src/sass/{_blog.scss => _snippet.scss} (76%) diff --git a/src/index.pug b/src/index.pug index b331296..dd237d7 100644 --- a/src/index.pug +++ b/src/index.pug @@ -1,19 +1,18 @@ extends templates/homepage.pug block main - section.blog-recent + section.snippet-recent .header - h3 Latest Articles - .all-articles - a(href="/blog") All articles + h3 Latest Snippets + .all-snippets + a(href="/snippets") All Snippets .list - ul.blog-items - div(insert-data='insertRecentSnippets(this, 5)') + div(insert-data='insertRecentSnippets(this, 5)') block aside - section.blog-popular - h3 Popular Content - ul.popular-items + section.snippet-common-tags + h3 Common tags + ul.common-tags li include partials/arrow.pug - a.link(href="javascript:void(0)") New Portfolio Layout + a.link(href="javascript:void(0)") Some tag diff --git a/src/partials/recent-snippet.pug b/src/partials/recent-snippet.pug index 4b05d9a..cb7008b 100644 --- a/src/partials/recent-snippet.pug +++ b/src/partials/recent-snippet.pug @@ -1,8 +1,7 @@ -.list - ul.blog-items - each snippet in snippets - li.blog-item - img.article-image(src="//via.placeholder.com/128", alt="Article Topic") - .article-text - h4.article-title=snippet.title - span.article-date(title=snippet.timeAddedPretty)=snippet.timeAddedRelative +ul.snippet-items + each snippet in snippets + li.snippet-item + img.snippet-image(src="//via.placeholder.com/128", alt="Snippet Topic") + .snippet-text + h4.snippet-title=snippet.title + span.snippet-date(title=snippet.timeAddedPretty)=snippet.timeAddedRelative diff --git a/src/sass/_blogedit.scss b/src/sass/_blogedit.scss deleted file mode 100644 index a1b05de..0000000 --- a/src/sass/_blogedit.scss +++ /dev/null @@ -1,74 +0,0 @@ -.blog-edit { - .article-form { - input, - textarea { - padding: .1rem; - width: calc(100% - .2rem); - margin: 0; - } - - .controls { - width: 100%; - } - - input { - border-radius: 5px; - } - - .md-editor { - margin-top: .5rem; - - :first-child { - border-top-left-radius: 5px; - border-top-right-radius: 5px; - } - - :last-child { - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; - } - - &> * { - border-width: 3px; - } - - .controls { - background-color: $background-lighter; - border-color: $background-darker; - border-bottom-width: 0; - border-style: solid; - - ul { - display: flex; - list-style: none; - padding: .25rem; - margin: 0; - - li { - a { - display: inline-block; - width: 32px; - height: 32px; - - i { - width: 100%; - max-height: 100%; - font-size: 24px; - text-align: center; - vertical-align: baseline; - } - } - } - } - } - } - - input, - textarea, - button { - background-color: $background-lighter; - border-color: $background-darker; - color: $text-color; - } - } -} diff --git a/src/sass/_blog.scss b/src/sass/_snippet.scss similarity index 76% rename from src/sass/_blog.scss rename to src/sass/_snippet.scss index d58e3ae..7237f4c 100644 --- a/src/sass/_blog.scss +++ b/src/sass/_snippet.scss @@ -1,11 +1,11 @@ -$article-image-size: 24px; +$snippet-image-size: 24px; -section.blog-recent { +section.snippet-recent { .header { display: flex; justify-content: space-between; - .all-articles { + .all-snippets { display: flex; flex-direction: column; justify-content: center; @@ -21,14 +21,14 @@ section.blog-recent { } } -section.blog-recent, -section.blog { +section.snippet-recent, +section.snippet { .list { - .blog-items { + .snippet-items { list-style: none; padding: 0; - .blog-item { + .snippet-item { background-color: $background-lighter; border-radius: 16px; padding: 8px; @@ -54,31 +54,31 @@ section.blog { } } - .article-image { - max-width: $article-image-size; - max-height: $article-image-size; + .snippet-image { + max-width: $snippet-image-size; + max-height: $snippet-image-size; margin-right: 1rem; } - .article-text { - .article-title { - line-height: $article-image-size; + .snippet-text { + .snippet-title { + line-height: $snippet-image-size; font-size: 1.2rem; margin: 0; } - .article-desc, - .article-date, - .article-published { + .snippet-desc, + .snippet-date, + .snippet-published { display: block; } - .article-date { + .snippet-date { color: darken($text-color, 15%); } - .article-published { + .snippet-published { text-transform: uppercase; font-size: 1rem; color: red; @@ -89,7 +89,7 @@ section.blog { } } -section.blog-popular { +section.snippet-popular { .popular-items { list-style: none; padding: 0; @@ -121,7 +121,7 @@ section.blog-popular { } } -.blog-links { +.snippet-links { &> :not(:first-child) { margin-left: 1rem; } diff --git a/src/sass/main.scss b/src/sass/main.scss index 042a73a..8d8b221 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -13,9 +13,8 @@ // Component specific styling @import "header"; @import "hero"; -@import "blog"; +@import "snippet"; @import "footer"; @import "home"; @import "pagination"; @import "markdown"; -@import "blogedit";