diff options
author | Vidhu Kant Sharma <vidhukant@vidhukant.xyz> | 2022-09-20 22:35:52 +0530 |
---|---|---|
committer | Vidhu Kant Sharma <vidhukant@vidhukant.xyz> | 2022-09-20 22:35:52 +0530 |
commit | d26ecb989f5e5b9e06b34c106a3d391fd2910524 (patch) | |
tree | 5b2f2391eb682881c90930c040f260854b3f1936 /static/scss/blog.scss |
First commit
Diffstat (limited to 'static/scss/blog.scss')
-rw-r--r-- | static/scss/blog.scss | 130 |
1 files changed, 130 insertions, 0 deletions
diff --git a/static/scss/blog.scss b/static/scss/blog.scss new file mode 100644 index 0000000..a9e7b94 --- /dev/null +++ b/static/scss/blog.scss @@ -0,0 +1,130 @@ +@import "footer"; +@import "roboto"; +@import "sourcecodepro"; + +$bgColor: #1d1f21; +$fgColor: #c5c8c6; + +$bgColorAlt: #373b41; +$fgColorAlt: #ffffff; + +$headingColor0: #bf87d0; +$headingColor1: $headingColor0; +$headingColor2: #ff7070; +$headingColor3: #76d674; +$headingColor4: #9c80f4; +$headingColor5: #ef7b7a; + +// $linkColor: #a64ce2; +$linkColor: #2ed19b; +// $linkColor: #eda74a; +// $linkColor: #c682f5; +// +//$linkColor: #db4b91; +$linkColorAlt: pink; + +* { + font-family: 'Roboto', sans-serif; +} + +@mixin selectionColor($fgColor, $bgColor) { + color: $fgColor; + background: $bgColor; +} + +::selection { @include selectionColor($bgColor, $headingColor0) } +::-moz-selection { @include selectionColor($bgColor, $headingColor0) } + +html, body { + line-height: 1.5; + background-color: $bgColor; + color: $fgColor; + padding: 0rem 0.8rem; + max-width: 1000px; + margin-left: auto; + margin-right: auto; +} + +main .single { + h1, h3, h5 { + text-align: center; + } +} + +code { + background-color: $bgColorAlt; + padding: 2px 5px; + border-radius: 4px; + font-family: 'Source Sans Pro', sans-serif; +} + +pre code { + overflow: scroll; + display: block; +} + +img { + display: block; + margin-left: auto; + margin-right: auto; + max-width: 90%; +} + +h1 { + color: $headingColor0; +} + +h2 { + color: $headingColor1; +} + +h3 { + color: $headingColor2; +} + +h4 { + color: $headingColor3; +} + +h5 { + color: $headingColor4; +} + +h6 { + color: $headingColor5; +} + +a { + text-decoration: none; + color: $linkColor; +} + +// the year/tag heading of the blog +.list { + .section { color: $headingColor1; } + li::marker { color: $linkColor; } +} + +main { + ul, ol { + line-height: 1.8; + } +} + +nav { + ul { + list-style: none; + padding: 0; + display: flex; + justify-content: center; + a { + color: $linkColorAlt; + margin: 0 0.3rem; + padding: 2px 4px; + } + a.selected { + background-color: $headingColor0; + color: $bgColor; + } + } +} |