First commit

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;
+  }
+}