first commit

sass/main.scss

@@ -0,0 +1,130 @@
+@font-face {
+  font-family: 'Inter';
+  src: url('/fonts/Inter.ttf');
+}
+@import 'parts/_cards.scss';
+@import 'parts/_code.scss';
+@import 'parts/_header.scss';
+@import 'parts/_image.scss';
+@import 'parts/misc.scss';
+@import 'parts/table.scss';
+@import 'parts/home-banner.scss';
+@import 'parts/footer.scss';
+@import 'parts/theme-switch.scss';
+
+:root {
+  --max-layout-width: 1000px;
+  --normal-layout-width: 600px;
+  --medium-layout-width: 350px;
+  --small-layout-width: 200px;
+  font-family: 'Inter', Arial, Helvetica, sans-serif;
+  line-height: 190%;
+
+  --bg-0: #818181;
+  --bg-1: rgba(255, 255, 255, 5%);
+  --bg-2: rgba(23, 23, 23, 100%);
+  --primary-color: #ef5350;
+  --hover-color: white;
+  --background-color: #1f1f1f;
+  // --navbar-color:#222226;
+  --secondary-color: #696969;
+  --highlights: #b35a5a;
+  --links: #d35d6e;
+  --text-color: #d3d3d3;
+  --code: #ef476f;
+  --border-color: rgb(0, 0, 0);
+  --light-border-color: rgba(255, 255, 255, 0.1);
+  --input-back: #4b4a4a;
+  --input-color: #294797;
+  --meta-color: rgb(198, 197, 197);
+  --accent-color: #ff9a8c;
+}
+
+[data-theme='light'] {
+  --bg-0: #fff;
+  --bg-1: #f2f2f2;
+  --bg-2: #fefefe;
+  --hover-color: white;
+  --background-color: #fff;
+  // --navbar-color:#e3e3e3;
+  --secondary-color: rgb(158, 158, 158);
+  --links: #799351;
+  --text-color: #222226;
+  --border-color: rgb(114, 114, 114);
+  --light-border-color: rgba(255, 255, 255, 0.1);
+  --input-back: #161616;
+  --input-color: #294797;
+  --input-back: rgb(158, 158, 158);
+  --input-color: #e0a615;
+  --meta-color: rgb(53, 53, 53);
+  --accent-color: #aacb73;
+}
+
+html {
+  background-color: var(--background-color);
+  color: var(--text-color);
+  line-height: 1.6em;
+}
+body {
+  margin: 0;
+  padding: 0;
+}
+.content {
+  max-width: var(--max-layout-width);
+  margin: 0 auto;
+  padding: 0 24px;
+  word-wrap: break-word;
+  min-height: 80vh;
+}
+h1 {
+  display: block;
+  font-size: 1.7em;
+  margin-top: 0.67em;
+  margin-bottom: 0em;
+  margin-left: 0;
+  margin-right: 0;
+  font-weight: 650;
+}
+
+h2 {
+  display: block;
+  font-size: 2em;
+  margin-top: 0.83em;
+  margin-bottom: 0em;
+  margin-left: 0;
+  margin-right: 0;
+  font-weight: bold;
+}
+
+@media only screen and (max-width: 1000px) {
+  .content {
+    max-width: var(--normal-layout-width);
+  }
+}
+@media only screen and (max-width: 600px) {
+  .content {
+    max-width: var(--medium-layout-width);
+  }
+}
+@media only screen and (max-width: 300px) {
+  .content {
+    max-width: var(--small-layout-width);
+  }
+}
+@media all and (min-width: 640px) {
+  html {
+    font-size: 16.5px;
+  }
+}
+
+@media all and (min-width: 720px) {
+  html {
+    font-size: 17px;
+  }
+}
+
+@media all and (min-width: 960px) {
+  html {
+    font-size: 20px;
+  }
+}

sass/parts/_cards.scss

@@ -0,0 +1,75 @@
+.cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    grid-template-rows: auto;
+    gap: 24px;
+    padding: 12px 0;
+}
+
+.card {
+    min-height: 100px;
+    background: var(--bg-2);
+    border: 2px solid var(--border-color);
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+.card-info {
+    padding: 0 24px 24px 24px;
+}
+
+.card-title {
+    margin-top: 0.7em;
+}
+
+.card-image {
+    border: unset;
+    width: 100%;
+}
+
+.card-image-placeholder {
+    height: 12px;
+    width: 100%;
+}
+
+.card-description {
+    margin-top: 0.5em;
+    overflow: hidden;
+}
+
+@media all and (max-width:720px) {
+    .cards {
+        gap: 18px;
+    }
+}
+
+.bloglist-table-row{
+    padding:2%;
+    background-color:var(--navbar-color);
+    border-radius: 5px;
+    transition: 300ms;
+    width: 28%;
+    margin-right:1%;
+    margin-top:3%;
+}
+.bloglist-container{
+    display:flex;
+    flex-wrap: wrap;
+}
+.bloglist-table-row:hover{
+    box-shadow: 10px 10px 0px var(--border-color);
+}
+.bloglist-links{
+    text-decoration:none;
+}
+.bloglist-table-row-data{
+    padding:10px;
+}
+.bloglist-table-row-date{
+    font-size:12px;
+}
+@media only screen and (max-width:600px) {
+    .bloglist-table-row{
+      width:100%;
+    }
+  }

sass/parts/_code.scss

@@ -0,0 +1,112 @@
+code {
+  background-color: var(--bg-1);
+  padding: 0.1em 0.2em;
+  border-radius: 5px;
+  border: 1px solid var(--border-color);
+}
+
+pre {
+  /* Rounded border */
+  border-radius: 5px;
+  border: 1px solid var(--border-color);
+
+  line-height: 1.4;
+  overflow-x: auto;
+  padding: 1em;
+}
+
+pre code {
+  background-color: transparent;
+  color: inherit;
+  font-size: 100%;
+  padding: 0;
+
+  // We only want a border around `code` and not `pre code` blocks.
+  border: 0;
+}
+
+pre {
+  font-family: var(--code-font);
+  position: relative;
+  -webkit-overflow-scrolling: touch;
+}
+
+pre code[class*="language-"] {
+  -webkit-overflow-scrolling: touch;
+}
+
+pre code[class*="language-"]::before {
+  background: black;
+  border-radius: 0 0 0.25rem 0.25rem;
+  color: white;
+  font-size: 12px;
+  letter-spacing: 0.025rem;
+  padding: 0.1rem 0.5rem;
+  position: absolute;
+  right: 0.1rem;
+  margin-top: 0.1rem;
+  text-align: right;
+  text-transform: uppercase;
+  top: 0;
+}
+
+pre code[class="language-javaScript"]::before,
+pre code[class="language-js"]::before {
+  content: "js";
+  background: #f7df1e;
+  color: black;
+}
+
+pre code[class*="language-yml"]::before,
+pre code[class*="language-yaml"]::before {
+  content: "yaml";
+  background: #f71e6a;
+  color: white;
+}
+
+pre code[class*="language-shell"]::before,
+pre code[class*="language-bash"]::before,
+pre code[class*="language-sh"]::before {
+  content: "shell";
+  background: green;
+  color: white;
+}
+
+pre code[class*="language-json"]::before {
+  content: "json";
+  background: dodgerblue;
+  color: #000000;
+}
+
+pre code[class*="language-python"]::before,
+pre code[class*="language-py"]::before {
+  content: "py";
+  background: blue;
+  color: yellow;
+}
+
+pre code[class*="language-css"]::before {
+  content: "css";
+  background: cyan;
+  color: black;
+}
+
+pre code[class*="language-go"]::before {
+  content: "Go";
+  background: cyan;
+  color: royalblue;
+}
+
+pre code[class*="language-md"]::before,
+pre code[class*="language-md"]::before {
+  content: "Markdown";
+  background: royalblue;
+  color: whitesmoke;
+}
+
+pre code[class*="language-rust"]::before,
+pre code[class*="language-rs"]::before {
+  content: "rust";
+  background: #fff8f6;
+  color: #ff4647;
+}

sass/parts/_footer.scss

@@ -0,0 +1,44 @@
+footer {
+    padding: 10px;
+    font-family: var(--post-font-family);
+  }
+  
+  footer section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0rem;
+  }
+  
+  footer nav {
+    display: flex;
+    gap: 0rem;
+      margin: 0 0rem;
+    }
+    
+    .socials {
+      justify-content: center;
+      /* flex-child */
+      flex-grow: 0;
+      /* flex-container */
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-end;
+      // gap: 0px;
+    }
+    
+    .social {
+      background-image: unset;
+      padding: 2px;
+    }
+    
+    .social>img {
+      width: 32px;
+      height: 32px;
+      padding: 18px;
+      filter: invert(1);
+    }
+    
+    [data-theme="light"] .social>img {
+      filter: invert(0);
+    }

sass/parts/_header.scss

@@ -0,0 +1,114 @@
+header {
+  width: 100%;
+  // background-color: var(--navbar-color);
+  .main {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 12px;
+    font-size: 1.5rem;
+    /* Otherwise header and menu is too close on small screens*/
+    margin-bottom: 10px;
+  }
+}
+
+.page-header {
+  font-size: 3em;
+  line-height: 100%;
+  font-family: var(--header-font);
+  margin: 4rem 0px 1rem 0px;
+}
+
+.centered-header {
+  font-family: var(--header-font);
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  font-size: 1em;
+}
+
+.navbar {
+  max-width: var(--max-layout-width);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1em 0;
+  margin: 0 auto;
+  margin-bottom: 0.2rem;
+}
+
+.nav-navs {
+  display: flex;
+  gap: 5px;
+  img {
+    border: none;
+  }
+}
+
+.nav-links {
+  font-size: 1em;
+  font-weight: 340;
+  text-decoration: none;
+  justify-content: right;
+  color: var(--text-color);
+  padding: 5px;
+  border-radius: 5px;
+  transition: 100ms;
+  &:hover {
+    color: var(--links);
+    justify-content: right;
+    background-color: var(--secondary-color);
+  }
+}
+
+.home-title {
+  font-size: 1.7em;
+  font-weight: 600;
+  border: none;
+  color: var(--accent-color);
+  text-decoration: none;
+}
+
+.meta {
+  color: var(--meta-color);
+  letter-spacing: -0.5px;
+}
+
+@media only screen and (max-width: 1000px) {
+  .navbar {
+    max-width: 100%;
+    justify-content: right;
+  }
+
+  .nav-title {
+    margin: 0 auto;
+  }
+
+  .nav-navs {
+    margin: 0 auto;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .nav-title {
+    margin: 0;
+  }
+
+  .navbar {
+    max-width: var(--medium-layout-width);
+  }
+}
+
+@media only screen and (max-width: 300px) {
+  .navbar {
+    max-width: var(--small-layout-width);
+  }
+}

sass/parts/_home-banner.scss

@@ -0,0 +1,53 @@
+#banner-container-home {
+    display: flex;
+    width: 100%;
+    margin: 10px auto;
+    align-items: center;
+    justify-content: center;
+}
+
+.image-container-home {
+    position: relative;
+    width: 22%;
+    overflow: hidden;
+    border-radius: 10px;
+}
+
+#home-banner-text {
+    width: 78%;
+        margin-bottom: 30px;
+        font-size: 1.875rem;
+        line-height: 3rem;
+        color: var(--accent-color);
+    }
+    
+    #banner-home-subtitle {
+        width: 95%;
+    padding-right: 5%;
+    font-size: 1rem;
+        font-weight: 250;
+        line-height: 1.75rem;
+        color: var(--text-color);
+}
+.banner-home-img {
+    border-radius: 50%;
+    max-height: 80%;
+    border: none;
+}
+
+@media only screen and (max-width: 600px) {
+    #banner-container-home {
+        display: block;
+        margin: 0 auto;
+    }
+
+    .image-container-home {
+        width: 95%;
+        height: 50vh;
+    }
+
+    #home-banner-text {
+        width: 95%;
+
+    }
+}

sass/parts/_image.scss

@@ -0,0 +1,35 @@
+img {
+  border: 3px solid #ececec;
+  max-width: 100%;
+}
+
+figure {
+  box-sizing: border-box;
+  display: inline-block;
+  margin: 0;
+  max-width: 100%;
+}
+
+figure img {
+  max-height: 500px;
+}
+
+@media screen and (min-width: 600px) {
+  figure {
+    padding: 0 40px;
+  }
+}
+
+figure h4 {
+  font-size: 1rem;
+  margin: 0;
+  margin-bottom: 1em;
+}
+
+figure h4::before {
+  content: "↳ ";
+}
+
+svg {
+  max-height: 15px;
+}

sass/parts/_misc.scss

@@ -0,0 +1,63 @@
+.primary-color {
+  color: var(--primary-color);
+}
+
+.draft-label {
+  color: var(--hover-color);
+  text-decoration: none;
+  padding: 2px 4px;
+  border-radius: 4px;
+  margin-left: 6px;
+  background-color: var(--primary-color);
+}
+
+.title-container {
+  border-bottom: var(--secondary-color) solid 0.5px;
+  padding-bottom: 15px;
+}
+
+::-moz-selection {
+  background: var(--primary-color);
+  color: var(--hover-color);
+  text-shadow: none;
+}
+
+::selection {
+  background: var(--primary-color);
+  color: var(--hover-color);
+}
+
+p {
+  line-height: 1.5;
+}
+
+hr {
+  border: 0;
+  border-top: 3px solid var(--border-color);
+  margin: 1em 0;
+}
+
+blockquote {
+  border-left: 3px solid var(--border-color);
+  color: #737373;
+  margin: 0;
+  padding-left: 1em;
+}
+
+a {
+  color: var(--text-color);
+  text-decoration-color: var(--links);
+  font-weight: 1000;
+}
+
+a:hover {
+  background-color: var(--primary-color);
+  color: var(--hover-color);
+}
+/* Remove post list padding */
+@media screen and (max-width: 600px) {
+  .list > ul {
+    margin: 0;
+    padding: 0;
+  }
+}

sass/parts/_table.scss

@@ -0,0 +1,15 @@
+table {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+table th {
+  padding: 6px 13px;
+  border: 1px solid #dfe2e5;
+  font-size: large;
+}
+
+table td {
+  padding: 6px 13px;
+  border: 1px solid #dfe2e5;
+}

sass/parts/_theme-switch.scss

@@ -0,0 +1,45 @@
+.theme-switcher {
+  align-self: center;
+  margin-left: 5px;
+  width: 20px;
+  height: 20px;
+  position: relative;
+  cursor: pointer;
+
+  .switch {
+    height: 20px;
+    width: 20px;
+    position: absolute;
+    // top: -30px;
+    left: 0px;
+    border-radius: 50%;
+    transition: all 0.3s ease-in-out;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    img {
+      width: 100%;
+      height: auto;
+      position: absolute;
+      transition: all 0.2s ease-in-out;
+      border: none;
+    }
+    .sun {
+      opacity: 1;
+    }
+    .moon {
+      opacity: 0;
+    }
+  }
+  input {
+    display: none;
+    &:checked + .switch {
+      .sun {
+        opacity: 0;
+      }
+      .moon {
+        opacity: 1;
+      }
+    }
+  }
+}