From d26ecb989f5e5b9e06b34c106a3d391fd2910524 Mon Sep 17 00:00:00 2001 From: Vidhu Kant Sharma Date: Tue, 20 Sep 2022 22:35:52 +0530 Subject: First commit --- static/scss/_footer.scss | 20 ++++++ static/scss/_roboto.scss | 44 ++++++++++++ static/scss/_sourcecodepro.scss | 15 ++++ static/scss/blog.scss | 130 ++++++++++++++++++++++++++++++++++ static/scss/docs.scss | 139 +++++++++++++++++++++++++++++++++++++ static/scss/index.scss | 150 ++++++++++++++++++++++++++++++++++++++++ static/scss/lists.scss | 91 ++++++++++++++++++++++++ 7 files changed, 589 insertions(+) create mode 100644 static/scss/_footer.scss create mode 100644 static/scss/_roboto.scss create mode 100644 static/scss/_sourcecodepro.scss create mode 100644 static/scss/blog.scss create mode 100644 static/scss/docs.scss create mode 100644 static/scss/index.scss create mode 100644 static/scss/lists.scss (limited to 'static/scss') diff --git a/static/scss/_footer.scss b/static/scss/_footer.scss new file mode 100644 index 0000000..29d0e51 --- /dev/null +++ b/static/scss/_footer.scss @@ -0,0 +1,20 @@ +footer { + #gifs { + max-width: 800px; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + margin: 0.8rem auto; + + img { + margin: auto 0.5rem; + } + } + #copyright { + text-align: center; + line-height: 1.1; + font-size: 1rem; + } +} + diff --git a/static/scss/_roboto.scss b/static/scss/_roboto.scss new file mode 100644 index 0000000..ecab587 --- /dev/null +++ b/static/scss/_roboto.scss @@ -0,0 +1,44 @@ +/* roboto-300 - latin */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url('/fonts/roboto-v30-latin-300.eot'); /* IE9 Compat Modes */ + src: local(''), + url('/fonts/roboto-v30-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('/fonts/roboto-v30-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ + url('/fonts/roboto-v30-latin-300.woff') format('woff'), /* Modern Browsers */ + url('/fonts/roboto-v30-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ + url('/fonts/roboto-v30-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */ +} + +/* roboto-regular - latin */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('/fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */ + src: local(''), + url('/fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('/fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ + url('/fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */ + url('/fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ + url('/fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */ +} + +/* roboto-500 - latin */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url('/fonts/roboto-v30-latin-500.eot'); /* IE9 Compat Modes */ + src: local(''), + url('/fonts/roboto-v30-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('/fonts/roboto-v30-latin-500.woff2') format('woff2'), /* Super Modern Browsers */ + url('/fonts/roboto-v30-latin-500.woff') format('woff'), /* Modern Browsers */ + url('/fonts/roboto-v30-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ + url('/fonts/roboto-v30-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */ +} diff --git a/static/scss/_sourcecodepro.scss b/static/scss/_sourcecodepro.scss new file mode 100644 index 0000000..3ea3259 --- /dev/null +++ b/static/scss/_sourcecodepro.scss @@ -0,0 +1,15 @@ +/* source-code-pro-regular - latin */ +@font-face { + font-family: 'Source Code Pro'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('/fonts/source-code-pro-v21-latin-regular.eot'); /* IE9 Compat Modes */ + src: local(''), + url('/fonts/source-code-pro-v21-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('/fonts/source-code-pro-v21-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ + url('/fonts/source-code-pro-v21-latin-regular.woff') format('woff'), /* Modern Browsers */ + url('/fonts/source-code-pro-v21-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ + url('/fonts/source-code-pro-v21-latin-regular.svg#SourceCodePro') format('svg'); /* Legacy iOS */ +} + 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; + } + } +} diff --git a/static/scss/docs.scss b/static/scss/docs.scss new file mode 100644 index 0000000..a995b33 --- /dev/null +++ b/static/scss/docs.scss @@ -0,0 +1,139 @@ +@import "footer"; +@import "roboto"; +@import "sourcecodepro"; + +$bgColor: #232627; +$fgColor: #c5c8c6; + +$bgColorAlt: #444445; +$fgColorAlt: #ffffff; + +$headingColor0: #2ed19b; +$headingColor1: #db4b91; +$headingColor2: #638dcf; + +$linkColor: #eda74a; +$linkColorAlt: #db4b91; + +* { + 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; +} + +code { + background-color: $bgColorAlt; + padding: 2px 5px; + border-radius: 4px; + * {font-family: 'Source Code Pro', sans-serif;} +} + +pre code { + overflow: scroll; + display: block; +} + +img { + display: block; + margin-left: auto; + margin-right: auto; + max-width: 90%; +} + +// page title (in single.html) +.title { + padding-left: 0.5rem; + color: $bgColor; + background-color: $headingColor0; +} + +h1, h2 { + color: $headingColor0; +} + +h3, h4 { + color: $headingColor1; +} + +h5, h6 { + color: $headingColor2; +} + +a { + text-decoration: none; + color: $linkColor; +} + +.table-wrapper { + overflow-x: scroll; + table { + width: 100%; + margin-bottom: 1rem; + white-space: nowrap; + th { + text-align: left; + font-size: 1.2em; + border-bottom: 2px solid $headingColor0; + } + tr:last-child td { + border-bottom: 2px solid $headingColor1; + } + tr:nth-child(even) { + background-color: rgba($bgColorAlt, 0.3); + } + } +} + +.range li::marker { + color: $linkColor; +} + +main { + ul, ol { + line-height: 1.8; + } +} + +.page-nav { + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + a { + text-decoration: underline; + } +} + +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; + } + } +} diff --git a/static/scss/index.scss b/static/scss/index.scss new file mode 100644 index 0000000..d40b68b --- /dev/null +++ b/static/scss/index.scss @@ -0,0 +1,150 @@ +@import "footer"; +@import "roboto"; + +* { + // font-family: 'Source Code Pro', monospace; + font-family: 'Roboto', sans-serif; +} + +@mixin selection { + color: #ffffff; + background: #955ee6; +} +::selection {@include selection;} +::-moz-selection {@include selection;} + +body { + line-height: 1.5; + margin: 0; + padding: 0; + background-color: #232627; + color: #ffffff; +} + +.section { + width: 100vw; + height: auto; + p { + line-height: 2; + } +} + +#section-1 { + background-color: #56355D; + + // Indian flag theme + // color: #232627; + // background: linear-gradient(118deg, rgba(255,147,0,1) 0%, rgba(255,255,255,1) 50%, rgba(10,199,40,1) 100%); +} + +.img-l, .img-r { + max-width: 300px; + img { + max-width: 100%; + } + margin: auto; + text-align: center; +} + +a { + color: #00ff8c; +} + +.section-child { + box-sizing: border-box; + max-width: 1920px; + padding: 20px 25px 20px 25px; + width: 100%; + height: 100%; + margin: auto; +} + +img { + display: block; +} + +#image-and-links { + $width: 18rem; + width: $width; + margin: auto; + + img { + border-radius: 50%; + max-width: $width; + } + + #my-links { + list-style: none; + padding: 0; + display: flex; + // justify-content: space-between; + justify-content: center; + flex-wrap: wrap; + width: $width; + li { + margin: 5px; // only for justify-content: center; + font-size: 1.2rem; + } + a { + color: white; + // color: #232627; // Indian flag theme + } + } +} + +nav { + ul { + list-style: none; + padding: 0; + display: flex; + justify-content: center; + a { + margin: 0 0.3rem; + text-decoration: none; + padding: 2px 4px; + } + a.selected { + background-color: #00ff8c; + color: #232627; + } + } +} + +@media only screen and (min-width: 1300px) { + .section { + min-height: 100vh; + .section-child { + width: 95%; + min-height: 100vh; + display: flex; + align-items: center; + flex-direction: row-reverse; + justify-content: space-between; + } + } + $img-margin: 6rem; + .img-l { + margin-right: $img-margin; + margin-left: 0; + } + .img-r { + margin-left: $img-margin; + margin-right: 0; + } + #image-and-links { + margin-left: 4rem; + $width: 24rem; + width: $width; + + img { + max-width: $width; + } + + #my-links { + width: $width; + } + a { + font-size: 1.5rem; + } + } +} diff --git a/static/scss/lists.scss b/static/scss/lists.scss new file mode 100644 index 0000000..ddfa53e --- /dev/null +++ b/static/scss/lists.scss @@ -0,0 +1,91 @@ +@import "footer"; +@import "roboto"; + +$bgColor: #232728; +$fgColor: #dfdfdf; + +$markerColor: $fgColor; + +$navInactiveColor: #90e7e7; +$navActiveColor: #e790c4; +// #a623db <- nice color might use + +* { + font-family: 'Roboto', sans-serif; +} + +@mixin selectionColor($fgColor, $bgColor) { + color: $fgColor; + background: $bgColor; +} +::selection { @include selectionColor($bgColor, $navActiveColor) } +::-moz-selection { @include selectionColor($bgColor, $navActiveColor) } + +h1 {color: #e15f99;} +h2 {color: #47c58d;} +h3 {color: #e0c45e;} +// h4 {color: #47c58d;} +// h5 {color: #47c58d;} +// h6 {color: #47c58d;} + +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 { + // it's main ul not just ul so + // it doesn't affect the navbar + ul { + line-height: 1.8; + li::marker { + color: $markerColor; + } + } + .filled { + li, li::marker { + color: $navInactiveColor; + } + } + .two-column ul { + columns: 2; + -webkit-columns: 2; + -moz-columns: 2; + } +} + +a { + text-decoration: none; + color: $navActiveColor; +} + +nav { + ul { + list-style: none; + padding: 0; + display: flex; + justify-content: center; + a { + color: $navInactiveColor; + margin: 0 0.3rem; + padding: 2px 4px; + } + a.selected { + background-color: $navActiveColor; + color: $bgColor; + } + } +} + +@media only screen and (max-width: 600px) { + main .two-column ul { + columns: 1; + -webkit-columns: 1; + -moz-columns: 1; + } +} -- cgit v1.2.3