aboutsummaryrefslogtreecommitdiff
path: root/static/scss/blog.scss
diff options
context:
space:
mode:
authorVidhu Kant Sharma <vidhukant@vidhukant.xyz>2022-09-20 22:35:52 +0530
committerVidhu Kant Sharma <vidhukant@vidhukant.xyz>2022-09-20 22:35:52 +0530
commitd26ecb989f5e5b9e06b34c106a3d391fd2910524 (patch)
tree5b2f2391eb682881c90930c040f260854b3f1936 /static/scss/blog.scss
First commit
Diffstat (limited to 'static/scss/blog.scss')
-rw-r--r--static/scss/blog.scss130
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;
+ }
+ }
+}