From a4a83e4b549e858d4f8c821591bfb74706d846e8 Mon Sep 17 00:00:00 2001 From: Vidhu Kant Sharma Date: Sat, 28 May 2022 14:45:09 +0530 Subject: Moved the blog to new repository --- src/web/styles/home.scss | 133 +++++++++++++++++++++++++ src/web/styles/partials/_article.scss | 31 ++++++ src/web/styles/partials/_home.scss | 27 ++++++ src/web/styles/partials/_navbar.scss | 35 +++++++ src/web/styles/partials/_tags_menu.scss | 122 +++++++++++++++++++++++ src/web/styles/post/post.scss | 166 ++++++++++++++++++++++++++++++++ src/web/styles/post/posts.scss | 94 ++++++++++++++++++ src/web/styles/styles.scss | 30 ++++++ src/web/styles/theme/_global.scss | 39 ++++++++ src/web/styles/theme/_home.scss | 17 ++++ src/web/styles/theme/_navbar.scss | 10 ++ src/web/styles/theme/_post.scss | 62 ++++++++++++ 12 files changed, 766 insertions(+) create mode 100644 src/web/styles/home.scss create mode 100644 src/web/styles/partials/_article.scss create mode 100644 src/web/styles/partials/_home.scss create mode 100644 src/web/styles/partials/_navbar.scss create mode 100644 src/web/styles/partials/_tags_menu.scss create mode 100644 src/web/styles/post/post.scss create mode 100644 src/web/styles/post/posts.scss create mode 100644 src/web/styles/styles.scss create mode 100644 src/web/styles/theme/_global.scss create mode 100644 src/web/styles/theme/_home.scss create mode 100644 src/web/styles/theme/_navbar.scss create mode 100644 src/web/styles/theme/_post.scss (limited to 'src/web/styles') diff --git a/src/web/styles/home.scss b/src/web/styles/home.scss new file mode 100644 index 0000000..c2d6242 --- /dev/null +++ b/src/web/styles/home.scss @@ -0,0 +1,133 @@ +@import "theme/global"; +@import "theme/home"; +@import "partials/home"; + +body { @include home-body; } + +.header { + text-align: center; + #welcome-title { + color: $welcomeHeadingFG; + } + #welcome-subtitle { + font-size: 1.1em; + color: $welcomeHeadingAltFG; + } +} + +.links-container { + width: 100%; + display: flex; + justify-content: center; + // border: 1px solid pink; + + .links { + max-width: 42em; + width: 100%; + + display: flex; + flex-wrap: wrap; + justify-content: space-around; + + a { + display: flex; + align-items: center; + justify-content: center; + font-size: 1.1em; + background-color: $buttonBackgroundColor; + height: 3rem; + min-width: 10em; + border: 1px solid $buttonBorderColor; + border-radius: 2em; + } + } +} + +.recents { + display: flex; + flex-direction: column; + + .recents-label { + color: $recentsLabelFG; + margin-bottom: 0.5rem; + } + + .posts, .tags { + background-color: $recentsItemBG; + border: 1px solid $buttonBorderColor; + width: 100%; + padding: 3px 7px; + overflow-y: scroll; + } + + .posts { + font-size: 1.3rem; + max-height: 13em; + .post { + margin: 0.3em auto; + a { + word-break: break-word; + color: $postTitleFG; + // font-weight: bold; + font-size: 0.95em; + } + a:hover { + color: $defLinkForeground; + } + .post-createdat { + color: $postCreatedAtFG; + font-size: 0.9em; + } + } + } + + .tags { + height: 28em; + } +} + +@media screen and (max-width: 1200px) { + body { @include home-body-1200px; } +} + +@media screen and (max-width: 800px) { + body { @include home-body-800px; } + .links-container .links { + a { + font-size: 1em; + min-width: 9em; + margin: 0.3em auto; + } + } +} + +@media screen and (max-width: 600px) { + body { @include home-body-600px; } + .links-container .links { + a { + font-size: 0.9em; + min-width: 8.5em; + } + } + .recents { + .recents-label { + padding: 0 0.8rem + } + .posts, .tags { + padding: 0.2rem 0.8rem; + width: 100%; + border: none; + } + .posts { + // background-color: $defBackgroundColor; + .post { + a { + font-size: 0.8em; + } + .post-createdat { + font-size: 0.7em; + } + } + } + } +} diff --git a/src/web/styles/partials/_article.scss b/src/web/styles/partials/_article.scss new file mode 100644 index 0000000..341ff94 --- /dev/null +++ b/src/web/styles/partials/_article.scss @@ -0,0 +1,31 @@ +@import "../theme/post"; + +@mixin article-styling { + background-color: $postDefBackgroundColor; + min-width: 1150px; + width: 60%; + max-width: 1920px; + margin: 3em auto; + padding: 1em 2em; + border: 1px dotted $articleBorderColor; +} + +@mixin article-styling-1200px { + margin: 2em auto; + min-width: 780px; + width: 90%; +} + +@mixin article-styling-800px($val) { + min-width: 560px; + width: auto; + margin: calc($val * 1.5) $val; +} + +@mixin article-styling-600px($val) { + min-width: 0; + width: 100%; + margin: 0; + border: none; + padding: $val; +} diff --git a/src/web/styles/partials/_home.scss b/src/web/styles/partials/_home.scss new file mode 100644 index 0000000..462b67b --- /dev/null +++ b/src/web/styles/partials/_home.scss @@ -0,0 +1,27 @@ +@import "../theme/global"; + +@mixin home-body { + background-color: $defBackgroundColor; + min-width: 1150px; + width: 70%; + max-width: 1920px; + margin: 0em auto; + padding: 1em 2em; +} + +@mixin home-body-1200px { + margin: 2em auto; + min-width: 780px; + width: 90%; +} + +@mixin home-body-800px { + min-width: 560px; +} + +@mixin home-body-600px { + min-width: 0; + width: 100%; + margin: 0; + padding: 0; +} diff --git a/src/web/styles/partials/_navbar.scss b/src/web/styles/partials/_navbar.scss new file mode 100644 index 0000000..0b9c9b1 --- /dev/null +++ b/src/web/styles/partials/_navbar.scss @@ -0,0 +1,35 @@ +@import "../theme/global"; +@import "../theme/navbar"; + +#navbar { + height: $navbarHeight; + width: 100%; + background-color: $navbarBackgroundColor; + position: sticky; + top: 0; + box-shadow: $navbarShadow; + + ul { + list-style-type: none; + height: 100%; + min-width: 400px; + max-width: 500px; + margin: 0 auto; + padding: 0; + display: flex; + justify-content: space-around; + align-items: center; + + li { + padding: 0; + margin: 0 0.5em; + } + + a { + font-size: 1.3em; + font-weight: 500; + text-decoration: none; + color: $navbarForegroundColor; + } + } +} diff --git a/src/web/styles/partials/_tags_menu.scss b/src/web/styles/partials/_tags_menu.scss new file mode 100644 index 0000000..b74b139 --- /dev/null +++ b/src/web/styles/partials/_tags_menu.scss @@ -0,0 +1,122 @@ +@import "../theme/global"; +@import "../theme/post"; +@import "../theme/home"; + +$tagButtonBG: $altBackgroundColor; + +@mixin button { + display: flex; + justify-content: center; + align-items: center; + background-color: $tagButtonBG; + color: $defForegroundColor; + font-size: 1.1em; + padding: 0.5em 1.3em; + border-radius: 2em; + border: 1px solid $buttonBorderColor; + transition: background-color 400ms, top ease 400ms; + position: relative; + top: 0; +} + +@mixin button-hover { + transition: background-color 250ms, top ease 250ms; + top: -3px; +} + +.tags-menu { + display: flex; + flex-wrap: wrap; + flex-direction: column; + justify-content: center; + align-items: center; + max-width: 1920px; + width: 100%; + margin: auto; + + .tags-switcher::before { + content: "Filter By Tags: "; + font-size: 1.5rem; + margin: 0.5rem 0; + color: $tagsMenuLabelFG; + } + + .tags-switcher { + min-width: 1000px; + width: 50%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: space-around; + .options, .menu { + margin: 0.5em auto; + } + .options { + display: flex; + flex-direction: row; + justify-content: space-around; + flex-wrap: wrap; + min-width: 80%; + .tag-label { + justify-self: center; + margin: 0.1em 1em; + .tag { + @include button; + .active { + border: 1px solid green; + background-color: blue; + } + } + .tag.active { + border-color: $tagButtonActiveBG; + } + input { + display: none; + } + input:checked + .tag { + background-color: $tagButtonActiveBG; + @include button-hover; + } + } + } + .menu { + input { + @include button; + background-color: rgba($tagButtonActiveBG, 0.9); + margin: 0.1em 1em; + } + input:hover { + @include button-hover; + background-color: $tagButtonActiveBG; + } + display: flex; + justify-content: center; + align-items: center; + } + } +} + +@media screen and (max-width: 1200px) { + .tags-menu { + min-width: 700px; + + .tags-switcher { + min-width: 0; + width: 100%; + } + } +} + +@media screen and (max-width: 800px) { + .tags-menu { + min-width: 0; + .tags-switcher { + // for some reason it won't work unless I do .1 .2 .3 thing + .options .tag-label .tag, + .menu input { + font-size: 1em; + } + } + } +} diff --git a/src/web/styles/post/post.scss b/src/web/styles/post/post.scss new file mode 100644 index 0000000..80301d4 --- /dev/null +++ b/src/web/styles/post/post.scss @@ -0,0 +1,166 @@ +@import "../theme/global"; +@import "../theme/post"; +@import "../partials/article"; + +article { + @include article-styling; + .post-header { + .post-title { + font-size: $postTitleFontSize; + text-align: $postTitleAlignment; + color: $postTitleColor; + word-break: break-word; + } + .post-info { + color: $postInfoForegroundColor; + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + } + + .header-seperator { + margin: 1.1em 0; + } + + img { + object-fit: contain; + min-width: 300px; + max-width: 50%; + min-height: 300px; + max-height: 600px; + height: auto; + } + + img.root-img { + min-width: 400px; + width: 60%; + // max-height: 600px; + } + + img.centered { + display: block; + margin-left: auto; + margin-right: auto; + } + + .image-flexbox { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; + + img { + all: initial; + max-height: 25em; + margin: 0.5em; + } + } + + li { + color: $listItemForeground; + } + + .post-content { + h1 { color: $fg1; } + h2 { color: $fg2; } + h3 { color: $fg3; } + h4 { color: $fg4; } + h5 { color: $fg5; } + h6 { color: $fg6; } + + .code-block { + color: $codeBlockForegroundColor; + padding: $codeBlockPadding; + background-color: $codeBlockBackgroundColor; + border-radius: $codeBlockBorderRadius; + @include selectionColors ( + $codeBlockHighlightBackground, + $codeBlockHighlightForeground + ); + + em { + all: unset; + color: $codeCommentForegroundColor; + } + } + } +} + +.centered { + text-align: center; +} + +@media screen and (max-width: 1200px) { + article { + @include article-styling-1200px; + .header-seperator { margin: 1em -2em; } + .post-header { .post-title { font-size: 2.2em; } } + } +} + +@media screen and (max-width: 800px) { + article { + $side-margin: $post-800px-padding; + @include article-styling-800px($side-margin); + .post-header { .post-title { font-size: 2em; } } + .header-seperator { margin: 1em (-$side-margin * 2); } + + $img-width: 95%; + img { + min-width: auto; + max-width: $img-width; + min-height: auto; + max-height: auto; + } + + .image-flexbox { + img { + all: initial; + max-height: 600px; + max-width: $img-width; + margin: 0.5em; + } + } + + ul { + width: 100%; + li { + width: 100%; + .image-flexbox { + width: $img-width; + img { + max-width: 100%; + } + } + } + } + } +} + +@media screen and (max-width: 600px) { + article { + $padding: $post-600px-padding; + @include article-styling-600px($padding); + + img.root-img { + min-width: 300px; + width: 80%; + // max-height: 600px; + } + + .header-seperator { + margin: 1em (-$padding); + } + .post-header { + .post-title { font-size: 1.5em; } + // NOTE: might need to be modified i.e + // content goes to next line instead of overflowing + .post-info { + justify-content: center; + } + } + } +} diff --git a/src/web/styles/post/posts.scss b/src/web/styles/post/posts.scss new file mode 100644 index 0000000..1272d1d --- /dev/null +++ b/src/web/styles/post/posts.scss @@ -0,0 +1,94 @@ +@import "../theme/global"; +@import "../theme/post"; +@import "../partials/article"; +@import "../partials/tags_menu"; + +article { + @include article-styling; + .options { + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + + .limit-options { + a { + color: $defForegroundColor; + } + .active { + color: $defLinkForeground; + font-weight: 600; + } + } + + .paging-options { + width: 16em; + display: flex; + justify-content: space-evenly; + } + } + + #options-footer { + justify-content: center; + } + + .posts { + .post { + padding: 0.5em 0; + font-size: 1.4em; + + .post-title-tags { + .post-title { + font-size: 1em; + color: $posts_postTitleColor; + } + + .post-title:hover { + color: $posts_postHighlightedTitleColor; + } + + .post-tag { + font-size: 0.8em; + color: $posts_postTagForegroundColor; + } + + .post-tag:hover { + color: $defLinkForeground; + } + } + + .post-info { + font-size: 0.8em; + .post-createdat { + color: $posts_postInfoForegroundColor; + } + } + } + } +} + +@media screen and (max-width: 1200px) { + article { + @include article-styling-1200px; + .post { + a { + font-size: 1.2rem; + text-decoration: none; + } + } + } +} + +@media screen and (max-width: 800px) { + article { + $side-margin: 1em; + @include article-styling-800px($side-margin); + } +} + +@media screen and (max-width: 600px) { + article { + $padding: 1em; + @include article-styling-600px($padding); + } +} diff --git a/src/web/styles/styles.scss b/src/web/styles/styles.scss new file mode 100644 index 0000000..7a1b0c0 --- /dev/null +++ b/src/web/styles/styles.scss @@ -0,0 +1,30 @@ +@import "theme/global"; +@import "partials/navbar"; + +// TODO: If I like this font I'll host it myself +// @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500&display=swap'); + +* { + box-sizing: border-box; + + // font-family: 'Lato', sans-serif; + font-family: 'Open Sans', sans-serif; +} + +body { + margin: 0; + padding: 0; + background-color: $defBackgroundColor; + color: $defForegroundColor; +} + +@include selectionColors($selectionBackground, $selectionForeground); + +a { + color: $defLinkForeground; + text-decoration: none; +} + + + diff --git a/src/web/styles/theme/_global.scss b/src/web/styles/theme/_global.scss new file mode 100644 index 0000000..de77f99 --- /dev/null +++ b/src/web/styles/theme/_global.scss @@ -0,0 +1,39 @@ +// global color definitions +// background +// $defBackgroundColor: #061820; +$defBackgroundColor: #151718; +// $altBackgroundColor: #1a2a30; +// $defBackgroundColor: #383A59; +// $altBackgroundColor: #282A36; +$altBackgroundColor: #232627; +$selectionBackground: #8215D2; + +// foreground +$defForegroundColor: #dfdfdf; +$altForegroundColor: #FFFFFF; +$boringForeground: #b5c4c2; +$selectionForeground: #FFFFFF; +// $defLinkForeground: #3691b8; +$defLinkForeground: #6d8ee2; + +// colored foregrounds +$fg-purple0: #9c79c5; + +$fg-pink0: #e82884; + +$fg-green0: #9c79c5; + +$fg-yellow0: #FFFF99; + + +// apply text selection/highlight colors easily +@mixin selectionColors($background, $foreground) { + ::selection { + color: $foreground; + background-color: $background; + } + ::-moz-selection { + color: $foreground; + background-color: $background; + } +} diff --git a/src/web/styles/theme/_home.scss b/src/web/styles/theme/_home.scss new file mode 100644 index 0000000..037c2d3 --- /dev/null +++ b/src/web/styles/theme/_home.scss @@ -0,0 +1,17 @@ +@import "global"; +@import "post"; + +$buttonBackgroundColor: $altBackgroundColor; + +$buttonBorderColor: #000000; + +$welcomeHeadingFG: $fg-purple0; +$welcomeHeadingAltFG: $fg-yellow0; +$recentsLabelFG: $fg-pink0; + +$recentsItemBG: $altBackgroundColor; + +// $postTitleFG: #d28bf0; +$postTitleFG: $defForegroundColor; +// $postCreatedAtFG: #959495; +$postCreatedAtFG: #c2c1c2; diff --git a/src/web/styles/theme/_navbar.scss b/src/web/styles/theme/_navbar.scss new file mode 100644 index 0000000..1f01882 --- /dev/null +++ b/src/web/styles/theme/_navbar.scss @@ -0,0 +1,10 @@ +// color definitions +$navbarBackgroundColor: $defBackgroundColor; +// $navbarForegroundColor: #bbf2c0; +$navbarForegroundColor: #EDEDED; + +// $navbarShadow: 0 0.5em 1em $navbarBackgroundColor; +$navbarShadow: none; + +// size definitions +$navbarHeight: 3rem; diff --git a/src/web/styles/theme/_post.scss b/src/web/styles/theme/_post.scss new file mode 100644 index 0000000..3a05a74 --- /dev/null +++ b/src/web/styles/theme/_post.scss @@ -0,0 +1,62 @@ +@import "global"; + +// color definitions +// background +$postDefBackgroundColor: $altBackgroundColor; +$postAltBackgroundColor: #384044; +$codeBlockBackgroundColor: $postAltBackgroundColor; +$codeBlockHighlightBackground: pink; + +// foreground +$postDefForegroundColor: $defForegroundColor; +$postAltForegroundColor: $altForegroundColor; +$postInfoForegroundColor: $boringForeground; +$codeBlockForegroundColor: $postAltForegroundColor; +$codeCommentForegroundColor: gray; +$codeBlockHighlightForeground: $altBackgroundColor; + +// $fg1: #d305e8; +// $fg1: #AB47BC; +// $fg2: #28c7d4; +// $fg3: #F26413; +// $fg4: #23DEBA; +// $fg5: #A600FF; +// $fg6: #B623DE; + +$fg1: #FF79C6; +$fg2: #50FA7B; +$fg3: #E659A9; +$fg4: #8E5EBC; +$fg5: #23DEBA; +$fg6: #A600FF; + +$listItemForeground: $fg3; + +// other +$articleBorderColor: $defForegroundColor; + +// $postTitleColor: #2aa386; +// $postTitleColor: #dd237d; +// $postTitleColor: #ffbb00; +// $postTitleColor: #dea2c2; +// $postTitleColor: #BD93F9; +$postTitleColor: $fg-purple0; + +// size definitions +$postTitleFontSize: 2.5em; +$postTitleAlignment: center; + +$codeBlockBorderRadius: 0.4em; +$codeBlockPadding: 0.2em 1em; + +// responsive +$post-800px-padding: 1em; +$post-600px-padding: 1em; + +$posts_postTitleColor: $defForegroundColor; +$posts_postHighlightedTitleColor: $defLinkForeground; +$posts_postInfoForegroundColor: $postInfoForegroundColor; +$posts_postTagForegroundColor: $postInfoForegroundColor; + +$tagsMenuLabelFG: $postTitleColor; +$tagButtonActiveBG: $tagsMenuLabelFG; -- cgit v1.2.3