aboutsummaryrefslogtreecommitdiff
path: root/static/scss
diff options
context:
space:
mode:
Diffstat (limited to 'static/scss')
-rw-r--r--static/scss/_footer.scss20
-rw-r--r--static/scss/_roboto.scss44
-rw-r--r--static/scss/_sourcecodepro.scss15
-rw-r--r--static/scss/blog.scss130
-rw-r--r--static/scss/docs.scss139
-rw-r--r--static/scss/index.scss150
-rw-r--r--static/scss/lists.scss91
7 files changed, 589 insertions, 0 deletions
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;
+ }
+}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-22 02:27:14 +0000