latest changes

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

css/main.css

@@ -0,0 +1,667 @@
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  font-family: "Roboto", sans-serif;
+}
+
+:root {
+  font-size: clamp(16px, 1.2vmax, 40px);
+}
+
+body {
+  --accent-color: #2e66ce;
+  --text-color: 17, 17, 17;
+  --text-color-light: 85, 85, 85;
+  --foreground-color: 255, 255, 255;
+  --background-color: rgba(var(--foreground-color), 1);
+  --dark-shade: #f4f4f4;
+  --error-color: #E53935;
+  background: rgba(var(--foreground-color), 1);
+  color: rgba(var(--text-color), 1);
+  background-size: cover;
+}
+
+body[data-theme=dark] {
+  --accent-color: #7eabff;
+  --text-color: 220, 220, 220;
+  --text-color-light: 170, 170, 170;
+  --foreground-color: 26, 26, 26;
+  --background-color: #111;
+  --dark-shade: #222;
+  --hue: 255;
+  --saturation: 39%;
+  --lightness: 70%;
+}
+
+a {
+  font-weight: 500;
+  text-decoration: none;
+  color: var(--accent-color);
+}
+
+.dark-text {
+  color: #111;
+}
+
+h1 {
+  font-size: 3.5rem;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+h3 {
+  font-size: 1.5rem;
+}
+
+h4 {
+  font-size: 1.1rem;
+}
+
+h5 {
+  font-size: 0.85rem;
+}
+
+p {
+  font-size: 1rem;
+  line-height: 1.5;
+  max-width: 60ch;
+  color: rgba(var(--text-color), 0.9);
+}
+
+strong {
+  font-weight: 500;
+}
+
+::-moz-focus-inner {
+  border: none;
+}
+
+.bottom-padding {
+  padding-bottom: 1.5rem;
+}
+
+.top-padding {
+  padding-top: 1rem;
+}
+
+.bottom-margin {
+  margin-bottom: 1.5rem;
+}
+
+.top-margin {
+  margin-top: 1.5rem;
+}
+
+.flex {
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.grid-2 {
+  grid-template-columns: auto auto;
+  gap: 1rem;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.direction-column {
+  flex-direction: column;
+}
+
+.justify-right {
+  margin-left: auto;
+}
+
+.space-between {
+  justify-content: space-between;
+}
+
+.label {
+  margin-bottom: 0.4rem;
+}
+
+.light-text {
+  opacity: 0.7;
+}
+
+.hide {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.hide-completely {
+  display: none !important;
+}
+
+.breakable {
+  word-break: break-all;
+}
+
+.separator {
+  padding: 0.1rem;
+}
+
+.no-transformations {
+  transform: none !important;
+}
+
+.capitalize {
+  text-transform: capitalize;
+}
+
+.icon {
+  width: 1.2rem;
+  height: 1.2rem;
+  stroke: rgba(var(--text-color), 1);
+  stroke-width: 6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  fill: none;
+  overflow: visible;
+}
+
+span.ripple {
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  background: rgba(var(--text-color), 0.2);
+  pointer-events: none;
+}
+
+.interact {
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.copy-row {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  gap: 0.5rem;
+  width: auto;
+}
+.copy-row h4 {
+  margin-bottom: 0 !important;
+  font-weight: 400;
+}
+.copy-row .icon {
+  cursor: pointer;
+  padding: 0.4rem;
+  height: 1.8rem;
+  width: 1.8rem;
+}
+.copy-row .copy {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-transform: capitalize;
+  padding: 0.6rem 1.2rem;
+  font-weight: 600;
+  cursor: pointer;
+  border-radius: 0.3rem;
+  color: var(--accent-color);
+  transition: transform 0.3s;
+  border: none;
+  background: rgba(var(--text-color), 0.1);
+  -webkit-tap-highlight-color: transparent;
+  font-family: "Poppins", sans-serif;
+}
+button:focus {
+  outline: thin solid rgba(var(--text-color-light), 0.4);
+}
+button:disabled {
+  cursor: default;
+  background: rgba(var(--text-color), 0.4);
+}
+
+.primary-btn {
+  padding: 0.6rem 1.2rem !important;
+  background: var(--accent-color);
+  justify-content: center;
+  color: rgba(var(--foreground-color), 1);
+}
+
+#sign_in_popup::part(popup-body) {
+  padding: 0;
+}
+#sign_in_popup #sign_in .left {
+  background-size: 60%;
+}
+
+.sign-in-box {
+  width: 100%;
+  margin: 0 -2rem;
+  z-index: 1;
+  justify-self: center;
+  padding: 1.5rem;
+  border-radius: 0.5rem;
+  background: rgba(var(--foreground-color), 1);
+}
+.sign-in-box sm-input {
+  text-align: left;
+}
+.sign-in-box sm-panel {
+  width: 100%;
+}
+.sign-in-box sm-tab-header {
+  margin: 0;
+  background: none;
+  align-self: flex-start;
+}
+.sign-in-box sm-tab-header::part(tab-header) {
+  padding-bottom: 0.4rem;
+  gap: 1.5rem;
+}
+.sign-in-box sm-tab::part(tab) {
+  padding: 0.4rem 0;
+}
+.sign-in-box sm-tab-panels {
+  margin-top: 3rem;
+}
+.sign-in-box form {
+  width: 100%;
+}
+.sign-in-box h2 {
+  margin-bottom: 0.5rem;
+}
+.sign-in-box h3 {
+  font-weight: 500;
+}
+.sign-in-box h4 {
+  font-weight: 500;
+  margin-bottom: 1.5rem;
+}
+.sign-in-box h5 {
+  opacity: 0.8;
+  font-weight: 500;
+}
+.sign-in-box .copy-row h4 {
+  max-width: 34ch;
+}
+.sign-in-box .copy-row:not(:last-of-type) {
+  margin-bottom: 1rem;
+}
+.sign-in-box button {
+  width: auto;
+  margin-top: 1rem;
+  padding: 0.6rem 1.6rem;
+}
+.sign-in-box p {
+  margin-bottom: 0.5rem;
+  max-width: 35ch;
+  margin-top: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+.sign-in-box #credentials_section {
+  border-top: 1px rgba(var(--text-color), 0.2) solid;
+  margin-top: 1rem;
+  padding-top: 1.5rem;
+  animation: slide-down 0.3s forwards;
+}
+
+@keyframes slide-down {
+  from {
+    transform: translateY(-1rem);
+  }
+  to {
+    transform: none;
+  }
+}
+#homepage, #settings_page {
+  display: grid;
+  grid-template-columns: 1.5rem 1fr 1.5rem;
+}
+#homepage > *, #settings_page > * {
+  grid-column: 2;
+}
+#homepage main, #settings_page main {
+  gap: 2rem;
+  display: grid;
+}
+
+#homepage_header {
+  position: relative;
+  gap: 1.5rem;
+  padding: 1rem 0;
+  margin-bottom: 1.5rem;
+}
+#homepage_header img {
+  height: 2.5rem;
+}
+#homepage_header h3 {
+  font-family: "Playfair display", serif;
+  font-size: 1.2rem;
+}
+
+#user_icon, .close {
+  cursor: pointer;
+  background: rgba(var(--text-color), 0.06);
+  height: 2.6rem;
+  width: 2.6rem;
+  padding: 0.7rem;
+  border-radius: 50%;
+}
+
+#right_drawer {
+  position: fixed;
+  overflow-y: auto;
+  width: 100%;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(var(--foreground-color), 1);
+  padding: 1.5rem;
+  z-index: 10;
+  transition: transform 0.3s, opacity 0.3s;
+  transform: translate(100%, 0);
+}
+#right_drawer section {
+  display: grid;
+  gap: 0.3rem;
+  grid-template-columns: 1fr auto;
+}
+#right_drawer section:first-of-type {
+  margin-top: 1.5rem;
+}
+#right_drawer section:not(:last-of-type) {
+  margin-bottom: 1.5rem;
+}
+#right_drawer section sm-switch {
+  grid-column: 2/3;
+  grid-row: 1/3;
+}
+#right_drawer section h4,
+#right_drawer section p {
+  grid-column: 1/2;
+}
+
+.close {
+  height: 2rem;
+  width: 2rem;
+  padding: 0.6rem;
+}
+
+.header {
+  position: sticky;
+  top: 0;
+  background: rgba(var(--foreground-color), 1);
+  z-index: 1;
+  padding: 1rem 0;
+  margin-bottom: 1.5rem;
+}
+
+#trending header h4 {
+  padding: 0 0.6rem;
+  color: var(--error-color);
+  border-left: solid 0.2em var(--error-color);
+}
+
+#trending_articles_container, #latest_articles_container {
+  gap: 3rem 2rem;
+  grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
+  margin-bottom: 4rem;
+}
+
+.article-card {
+  position: relative;
+  overflow: hidden;
+  display: grid;
+  gap: 0 1rem;
+  text-decoration: none;
+  cursor: pointer;
+  align-self: flex-start;
+  -webkit-tap-highlight-color: transparent;
+  text-decoration: none;
+  color: inherit;
+}
+.article-card .article-details {
+  margin-bottom: 0.3rem;
+}
+.article-card .article-heading {
+  font-size: 1.3em;
+  margin-bottom: 0.4em;
+}
+.article-card .article-preview {
+  line-height: 1.5;
+}
+.article-card h5:last-of-type {
+  margin-top: 0.5em;
+}
+.article-card.placeholder {
+  background: rgba(var(--text-color), 0.1);
+  animation: pulsate 1s alternate infinite;
+  height: 14em;
+  border-radius: 0.5em;
+}
+.article-card.placeholder:nth-of-type(2) {
+  animation-delay: 0.1s;
+}
+.article-card.placeholder:nth-of-type(3) {
+  animation-delay: 0.2s;
+}
+.article-card.placeholder:nth-of-type(4) {
+  animation-delay: 0.3s;
+}
+.article-card.placeholder:nth-of-type(5) {
+  animation-delay: 0.4s;
+}
+.article-card.placeholder:nth-of-type(6) {
+  animation-delay: 0.5s;
+}
+
+@keyframes pulsate {
+  from {
+    opacity: 0.4;
+  }
+  to {
+    opacity: 1;
+  }
+}
+#greetings_section {
+  margin-bottom: 3rem;
+}
+#greetings_section sm-input {
+  margin-top: 1rem;
+  width: min(100%, 24rem);
+}
+#greetings_section sm-input .icon {
+  stroke: rgba(var(--text-color), 0.6);
+  height: 1rem;
+  width: 1rem;
+}
+
+#greeting_illustration svg {
+  width: 4rem;
+}
+
+#greetings {
+  text-transform: lowercase;
+}
+#greetings::first-letter {
+  text-transform: capitalize;
+}
+
+.article {
+  display: grid;
+  grid-template-columns: 1.5rem 1fr 1.5rem;
+}
+.article > * {
+  grid-column: 2;
+}
+
+.full-bleed {
+  width: 100%;
+  grid-column: 1/4;
+}
+
+.article-details {
+  font-weight: 400;
+  opacity: 0.9;
+  margin-bottom: 0.3rem;
+}
+
+.article-heading {
+  font-size: 1.5em;
+  font-family: "Lora", serif;
+  margin-bottom: 0.8rem;
+  font-weight: 700;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.article-preview {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-size: 1.1em;
+}
+
+.para-heading {
+  font-family: "Lora", serif;
+  margin-bottom: 0.5em;
+  font-weight: 600;
+  font-size: 1.3em;
+  margin-top: 1rem;
+}
+
+.article-para {
+  line-height: 1.8;
+  font-size: 1.1em;
+}
+.article-para:not(:first-of-type) {
+  margin-top: 1.5rem;
+}
+
+.para-heading + .article-para {
+  margin-top: 0;
+}
+
+.article-para + .para-heading {
+  margin-top: 2rem;
+}
+
+.article-image {
+  object-position: top;
+  object-fit: cover;
+  border-radius: 1rem;
+  height: 16rem;
+  width: 100%;
+  margin-bottom: 2rem;
+  box-shadow: 0 0.4rem 1rem rgba(var(--text-color), 0.2);
+}
+
+#latest_articles h4 {
+  width: 100%;
+  display: flex;
+  position: relative;
+  align-items: center;
+  white-space: nowrap;
+}
+#latest_articles h4::after {
+  content: "";
+  height: 0.2rem;
+  background: rgba(var(--text-color), 0.9);
+  width: min(4rem, 100%);
+  margin-left: 1rem;
+}
+
+#article_page {
+  padding-bottom: 10rem;
+}
+#article_page .article-heading {
+  -webkit-line-clamp: 3;
+}
+
+.article-para, .article-preview {
+  color: rgba(var(--text-color), 0.9);
+  font-weight: 400;
+}
+
+@media all and (max-width: 800px) {
+  #sign_in {
+    grid-template-rows: 1fr 1fr;
+    max-height: 90vh;
+    background: url(sign-in-back.svg) no-repeat center 6rem;
+    background-size: 60%;
+  }
+  #sign_in .left {
+    border-radius: 0.5rem 0.5rem 0 0;
+  }
+}
+@media screen and (min-width: 800px) {
+  .hide-on-desktop {
+    display: none;
+  }
+
+  #sign_in {
+    grid-template-columns: 28rem 24rem;
+    height: max(28rem, 60vh);
+  }
+  #sign_in .left {
+    background: url(sign-in-back.svg) no-repeat center;
+    border-radius: 0.5rem 0 0 0.5rem;
+  }
+  #sign_in .sign-in-box {
+    padding-top: 2rem;
+  }
+
+  .article {
+    grid-template-columns: 1fr min(65ch, 100%) 1fr;
+  }
+
+  .article-heading {
+    font-size: 1.5em;
+  }
+
+  .para-heading {
+    font-size: 1.3em;
+  }
+
+  .article-para, .article-preview {
+    font-size: 1.15em;
+    white-space: line;
+  }
+
+  #right_drawer_container {
+    position: relative;
+  }
+
+  #right_drawer {
+    position: absolute;
+    top: calc(100% + 0.5rem);
+    width: 24rem;
+    max-height: 80vh;
+    bottom: auto;
+    border-radius: 0.5rem;
+    box-shadow: 0 0.5rem 1rem #00000016;
+    border: rgba(var(--text-color), 0.1) solid 1px;
+    transform: translate(0, -1.5rem);
+  }
+}
+@media screen and (min-width: 1280px) {
+  #homepage, #settings_page {
+    grid-template-columns: 1fr 80vw 1fr;
+  }
+  #homepage main, #settings_page main {
+    gap: 4rem;
+  }
+}

css/main.scss

@@ -0,0 +1,636 @@
+* {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    font-family: 'Roboto', sans-serif;
+}
+:root{
+    font-size: clamp(16px, 1.2vmax, 40px);
+}
+body {
+    --accent-color: #2e66ce;
+    --text-color: 17, 17, 17;
+    --text-color-light: 85, 85, 85;
+    --foreground-color: 255, 255, 255;
+    --background-color: rgba(var(--foreground-color), 1);
+    --dark-shade: #f4f4f4;
+    --error-color: #E53935;
+    background: rgba(var(--foreground-color), 1);
+    color: rgba(var(--text-color), 1);
+    background-size: cover;
+}
+body[data-theme="dark"]{
+    --accent-color: #7eabff;
+    --text-color: 220, 220, 220;
+    --text-color-light: 170, 170, 170;
+    --foreground-color: 26, 26, 26;
+    --background-color: #111;
+    --dark-shade: #222;
+    --hue: 255;
+    --saturation: 39%;
+    --lightness: 70%;
+}
+
+a {
+    font-weight: 500;
+    text-decoration: none;
+    color: var(--accent-color);
+}
+
+.dark-text {
+    color: #111;
+}
+
+h1 {
+    font-size: 3.5rem;
+}
+
+h2 {
+    font-size: 2rem;
+}
+
+h3 {
+    font-size: 1.5rem;
+}
+
+h4 {
+    font-size: 1.1rem;
+}
+
+h5 {
+    font-size: 0.85rem;
+}   
+
+p {
+    font-size: 1rem;
+    line-height: 1.5;
+    max-width: 60ch;
+    color: rgba(var(--text-color), 0.9);
+}
+strong{
+    font-weight: 500;
+}
+::-moz-focus-inner {
+    border: none;
+}
+.bottom-padding {
+    padding-bottom: 1.5rem;
+}
+
+.top-padding {
+    padding-top: 1rem;
+}
+
+.bottom-margin {
+    margin-bottom: 1.5rem;
+}
+
+.top-margin {
+    margin-top: 1.5rem;
+}
+
+.flex {
+    display: flex;
+}
+
+.grid {
+    display: grid;
+}
+
+.grid-2 {
+    grid-template-columns: auto auto;
+    gap: 1rem;
+}
+
+.align-center {
+    align-items: center;
+}
+
+.direction-column {
+    flex-direction: column;
+}
+
+.justify-right{
+    margin-left: auto;
+}
+
+.space-between {
+    justify-content: space-between;
+}
+
+.label {
+    margin-bottom: 0.4rem;
+}
+
+.light-text {
+    opacity: 0.7;
+}
+
+.hide {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.hide-completely {
+    display: none !important;
+}
+
+.breakable {
+    word-break: break-all;
+}
+
+.separator {
+    padding: .1rem;
+}
+
+.no-transformations {
+    transform: none !important;
+}
+.capitalize{
+    text-transform: capitalize;
+}
+.icon{
+    width: 1.2rem;
+    height: 1.2rem;
+    stroke: rgba(var(--text-color), 1);
+    stroke-width: 6;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    fill: none;
+    overflow: visible;
+}
+span.ripple{
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    background: rgba(var(--text-color), 0.2);
+    pointer-events: none;
+}
+.interact{
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+}
+.copy-row {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    gap: 0.5rem;
+    width: auto;
+    h4 {
+        margin-bottom: 0 !important;
+        font-weight: 400;
+    }
+
+    .icon {
+        cursor: pointer;
+        padding: 0.4rem;
+        height: 1.8rem;
+        width: 1.8rem;
+    }
+
+    .copy {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+button {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-transform: capitalize;
+    padding: 0.6rem 1.2rem;
+    font-weight: 600;
+    cursor: pointer;
+    border-radius: 0.3rem;
+    color: var(--accent-color);
+    transition: transform 0.3s;
+    border: none;
+    background: rgba(var(--text-color), 0.1);
+    -webkit-tap-highlight-color: transparent;
+    font-family: 'Poppins', sans-serif;
+    &:focus {
+        outline: thin solid rgba(var(--text-color-light), .4);
+    }
+
+    &:disabled {
+        cursor: default;
+        background: rgba(var(--text-color), 0.4);
+    }
+}
+.primary-btn {
+    padding: 0.6rem 1.2rem !important;
+    background: var(--accent-color);
+    justify-content: center;
+    color: rgba(var(--foreground-color), 1);
+}
+#sign_in_popup{
+    &::part(popup-body){
+        padding: 0;
+    }
+    #sign_in{
+        .left{
+            background-size: 60%;
+        }
+    }
+}
+.sign-in-box{
+    width: 100%;
+    margin: 0 -2rem;
+    z-index: 1;
+    justify-self: center;
+    padding: 1.5rem;
+    border-radius: 0.5rem;
+    background: rgba(var(--foreground-color), 1);
+    sm-input{
+        text-align: left;
+    }
+    sm-panel{
+        width: 100%;
+    }
+    sm-tab-header{
+        margin: 0;
+        background: none;
+        align-self: flex-start;
+        &::part(tab-header){
+            padding-bottom: 0.4rem;
+            gap: 1.5rem;
+        }
+    }
+    sm-tab::part(tab){
+        padding: 0.4rem 0;
+    }
+    sm-tab-panels{
+        margin-top: 3rem;
+    }
+    form{
+        width: 100%;
+    }
+    h2{
+        margin-bottom: 0.5rem;
+    }
+    h3{
+        font-weight: 500;
+    }
+    h4 {
+        font-weight: 500;
+        margin-bottom: 1.5rem;
+    }
+    h5{
+        opacity: 0.8;
+        font-weight: 500;
+    }
+    .copy-row{
+        h4{
+            max-width: 34ch;
+        }
+    }
+    .copy-row:not(:last-of-type){
+        margin-bottom: 1rem;
+    }
+    button {
+        width: auto;
+        margin-top: 1rem;
+        padding: 0.6rem 1.6rem;
+    }
+    p {
+        margin-bottom: 0.5rem;
+        max-width: 35ch;
+        margin-top: 0.5rem;
+        margin-bottom: 1.5rem;
+    }
+    #credentials_section{
+        border-top: 1px rgba(var(--text-color), 0.2) solid;
+        margin-top: 1rem;
+        padding-top: 1.5rem;
+        animation: slide-down 0.3s forwards;
+    }
+}
+@keyframes slide-down{
+    from{
+        transform: translateY(-1rem);
+    }
+    to{
+        transform: none;
+    }
+}
+
+#homepage, #settings_page{
+    display: grid;
+    grid-template-columns: 1.5rem 1fr 1.5rem;
+    & > *{
+        grid-column: 2;
+    }
+    main{
+        gap: 2rem;
+        display: grid;
+    }
+}
+#homepage_header{
+    position: relative;
+    gap: 1.5rem;
+    padding: 1rem 0;
+    margin-bottom: 1.5rem;
+    img{
+        height: 2.5rem;
+    }
+    h3{
+        font-family: 'Playfair display', serif;
+        font-size: 1.2rem;
+    }
+}
+#user_icon, .close{
+    cursor: pointer;
+    background: rgba(var(--text-color), 0.06);
+    height: 2.6rem;
+    width: 2.6rem;
+    padding: 0.7rem;
+    border-radius: 50%;
+}
+#right_drawer{
+    position: fixed;
+    overflow-y: auto;
+    width: 100%;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: rgba(var(--foreground-color), 1);
+    padding: 1.5rem;
+    z-index: 10;
+    transition: transform 0.3s, opacity 0.3s;
+    transform: translate(100%, 0);
+    section{
+        display: grid;
+        gap: .3rem;
+        grid-template-columns: 1fr auto;
+        &:first-of-type{
+            margin-top: 1.5rem;
+        }
+        &:not(:last-of-type){
+            margin-bottom: 1.5rem;
+        }
+        sm-switch{
+            grid-column: 2/3;
+            grid-row: 1/3;
+        }
+        h4,
+        p{
+            grid-column: 1/2;
+        }
+    }
+}
+.close{
+    height: 2rem;
+    width: 2rem;
+    padding: 0.6rem;
+}
+.header{
+    position: sticky;
+    top: 0;
+    background: rgba(var(--foreground-color), 1);
+    z-index: 1;
+    padding: 1rem 0;
+    margin-bottom: 1.5rem;
+}
+#trending{
+    header h4{
+        padding: 0 0.6rem;
+        color: var(--error-color);
+        border-left: solid 0.2em var(--error-color);
+    }
+}
+#trending_articles_container, #latest_articles_container{
+    gap: 3rem 2rem;
+    grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
+    margin-bottom: 4rem;
+}
+.article-card{
+    position: relative;
+    overflow: hidden;
+    display: grid;
+    gap: 0 1rem;
+    text-decoration: none;
+    cursor: pointer;
+    align-self: flex-start;
+    -webkit-tap-highlight-color: transparent;
+    text-decoration: none;
+    color: inherit;
+    .article-details{
+        margin-bottom: 0.3rem;
+    }
+    .article-heading{   
+        font-size: 1.3em;
+        margin-bottom: 0.4em;
+    }
+    .article-preview{
+        line-height: 1.5;
+    }
+    h5:last-of-type{
+        margin-top: 0.5em;
+    }
+    &.placeholder{
+        background: rgba(var(--text-color), 0.1);
+        animation: pulsate 1s alternate infinite;
+        height: 14em;
+        border-radius: 0.5em;
+        &:nth-of-type(2){
+            animation-delay: 0.1s;
+        }
+        &:nth-of-type(3){
+            animation-delay: 0.2s;
+        }
+        &:nth-of-type(4){
+            animation-delay: 0.3s;
+        }
+        &:nth-of-type(5){
+            animation-delay: 0.4s;
+        }
+        &:nth-of-type(6){
+            animation-delay: 0.5s;
+        }
+    }
+}
+@keyframes pulsate{
+    from{
+        opacity: 0.4;
+    }
+    to{
+        opacity: 1;
+    }
+}
+#greetings_section{
+    margin-bottom: 3rem;
+    sm-input{
+        margin-top: 1rem;
+        width: min(100%, 24rem);
+        .icon{
+            stroke: rgba(var(--text-color), 0.6);
+            height: 1rem;
+            width: 1rem;
+        }
+    }
+}
+#greeting_illustration svg{
+    width: 4rem;
+}
+#greetings{
+    text-transform: lowercase;
+    &::first-letter{
+        text-transform: capitalize;
+    }
+}
+.article{
+    display: grid;
+    grid-template-columns: 1.5rem 1fr 1.5rem;
+    & > *{
+        grid-column: 2;
+    }
+}
+.full-bleed{
+    width: 100%;
+    grid-column: 1/4;
+}
+.article-details{
+    font-weight: 400;
+    opacity: 0.9;
+    margin-bottom: 0.3rem;
+}
+.article-heading{
+    font-size: 1.5em;
+    font-family: 'Lora', serif;
+    margin-bottom: 0.8rem;
+    font-weight: 700;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;  
+    overflow: hidden;
+}
+.article-preview{
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;  
+    overflow: hidden;
+    font-size: 1.1em;
+}
+.para-heading{
+    font-family: 'Lora', serif;
+    margin-bottom: 0.5em;
+    font-weight: 600;
+    font-size: 1.3em;
+    margin-top: 1rem;
+}
+.article-para{
+    line-height: 1.8;
+    font-size: 1.1em;
+    &:not(:first-of-type){
+        margin-top: 1.5rem;
+    }
+}
+.para-heading + .article-para{
+    margin-top: 0;
+}
+.article-para + .para-heading{
+    margin-top: 2rem;
+}
+.article-image{
+    object-position: top;
+    object-fit: cover;
+    border-radius: 1rem;
+    height: 16rem;
+    width: 100%;
+    margin-bottom: 2rem;
+    box-shadow: 0 0.4rem 1rem rgba(var(--text-color), 0.2);
+}
+#latest_articles{
+    h4{
+        width: 100%;
+        display: flex;
+        position: relative;
+        align-items: center;
+        white-space: nowrap;
+        &::after{
+            content: '';
+            height: 0.2rem;
+            background: rgba(var(--text-color), 0.9);
+            width: min(4rem, 100%);
+            margin-left: 1rem;
+        }
+    }
+}
+#article_page{
+    padding-bottom: 10rem;
+    .article-heading{
+        -webkit-line-clamp: 3;
+    }
+}
+.article-para, .article-preview{
+    color: rgba(var(--text-color), 0.9);
+    font-weight: 400;
+}
+#settings_page{
+
+}
+@media all and (max-width: 800px){
+    #sign_in{
+        grid-template-rows: 1fr 1fr;
+        max-height: 90vh;
+        background: url(sign-in-back.svg) no-repeat center 6rem;
+        background-size: 60%;
+        .left{
+            border-radius: 0.5rem 0.5rem 0 0;
+        }
+    }
+}
+@media screen and (min-width: 800px){
+    .hide-on-desktop{
+        display: none;
+    }
+    #sign_in{
+        grid-template-columns: 28rem 24rem;
+        height: max(28rem, 60vh);
+        .left{
+            background: url(sign-in-back.svg) no-repeat center;
+            border-radius: 0.5rem 0 0 0.5rem;
+        }
+        .sign-in-box{
+            padding-top: 2rem;
+        }
+    }
+    .article{
+        grid-template-columns: 1fr min(65ch, 100%) 1fr;
+    }
+    .article-heading{
+        font-size: 1.5em;
+    }
+    .para-heading{
+        font-size: 1.3em;
+    }
+    .article-para, .article-preview{
+        font-size: 1.15em;
+        white-space: line;
+    }
+    #right_drawer_container{
+        position: relative;
+    }
+    #right_drawer{
+        position: absolute;
+        top: calc(100% + 0.5rem);
+        width: 24rem;
+        max-height: 80vh;
+        bottom: auto;
+        border-radius: 0.5rem;
+        box-shadow: 0 0.5rem 1rem #00000016;
+        border: rgba(var(--text-color), 0.1) solid 1px;
+        transform: translate(0, -1.5rem);
+    }
+}
+@media screen and (min-width: 1280px){
+    #homepage, #settings_page{
+        grid-template-columns: 1fr 80vw 1fr;
+        main{
+            gap: 4rem;
+        }
+    }
+}

css/sign-in-back.svg

@@ -0,0 +1,47 @@
+<svg width="991" height="623" viewBox="0 0 991 623" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M902.36 622.86H46.8199C34.5245 622.86 22.7326 617.976 14.0385 609.281C5.34427 600.587 0.459961 588.795 0.459961 576.5C0.459961 574.569 1.22696 572.717 2.59222 571.352C3.95749 569.987 5.80915 569.22 7.73993 569.22H941.42C943.351 569.22 945.202 569.987 946.568 571.352C947.933 572.717 948.7 574.569 948.7 576.5C948.701 582.587 947.504 588.614 945.176 594.238C942.847 599.862 939.435 604.972 935.131 609.277C930.828 613.582 925.719 616.997 920.097 619.328C914.474 621.659 908.447 622.859 902.36 622.86Z" fill="#CCCCCC"/>
+<path d="M617.73 592H331.48C328.49 592.001 325.529 591.414 322.767 590.27C320.004 589.127 317.494 587.451 315.38 585.337C313.265 583.224 311.588 580.714 310.443 577.952C309.299 575.19 308.71 572.23 308.71 569.24H640.49C640.49 575.276 638.092 581.065 633.824 585.334C629.555 589.602 623.766 592 617.73 592Z" fill="#B3B3B3"/>
+<path d="M860.025 0H88.9746C72.4201 0 59 13.5412 59 30.2451V530.755C59 547.459 72.4201 561 88.9746 561H860.025C876.58 561 890 547.459 890 530.755V30.2451C890 13.5412 876.58 0 860.025 0Z" fill="black"/>
+<path d="M848 25.58H101.21C92.7766 25.58 85.9399 32.4166 85.9399 40.85V519.88C85.9399 528.313 92.7766 535.15 101.21 535.15H848C856.433 535.15 863.27 528.313 863.27 519.88V40.85C863.27 32.4166 856.433 25.58 848 25.58Z" fill="#1A1A1A"/>
+<path d="M474.6 21.66C479.173 21.66 482.88 17.9529 482.88 13.38C482.88 8.80709 479.173 5.10001 474.6 5.10001C470.027 5.10001 466.32 8.80709 466.32 13.38C466.32 17.9529 470.027 21.66 474.6 21.66Z" fill="#333333"/>
+<path d="M474.6 19.33C477.886 19.33 480.55 16.6661 480.55 13.38C480.55 10.0939 477.886 7.42999 474.6 7.42999C471.314 7.42999 468.65 10.0939 468.65 13.38C468.65 16.6661 471.314 19.33 474.6 19.33Z" fill="#1A1A1A"/>
+<g filter="url(#filter0_d)">
+<path d="M255.27 151.38H681.22V445.48H243.62V163.03C243.62 161.5 243.921 159.985 244.507 158.572C245.092 157.158 245.95 155.874 247.032 154.792C248.114 153.71 249.398 152.852 250.812 152.267C252.225 151.681 253.74 151.38 255.27 151.38Z" fill="#B3B3B3"/>
+<path d="M279.64 117.15H693.93C697.02 117.15 699.983 118.377 702.168 120.562C704.353 122.747 705.58 125.71 705.58 128.8V445.48H267.98V128.81C267.979 127.278 268.279 125.762 268.865 124.346C269.45 122.931 270.309 121.645 271.392 120.562C272.475 119.479 273.761 118.62 275.176 118.035C276.592 117.449 278.108 117.149 279.64 117.15Z" fill="#F2F2F2"/>
+<path d="M705.58 445.48C705.58 455.02 699.96 462.76 693.03 462.76H255.42C262.36 462.76 267.98 455.02 267.98 445.48H705.58Z" fill="url(#paint0_linear)"/>
+<path d="M255.82 462.75C262.552 462.75 268.01 455.018 268.01 445.48C268.01 435.942 262.552 428.21 255.82 428.21C249.088 428.21 243.63 435.942 243.63 445.48C243.63 455.018 249.088 462.75 255.82 462.75Z" fill="#B3B3B3"/>
+<path d="M428.06 162.23H307.45V282.84H428.06V162.23Z" fill="#E6E6E6"/>
+<path d="M515.1 162.23H442.74V174.81H515.1V162.23Z" fill="#E6E6E6"/>
+<path d="M628.11 184.25H442.74V208.37H628.11V184.25Z" fill="#E6E6E6"/>
+<path d="M666.12 219.44H442.74V281.32H666.12V219.44Z" fill="#E6E6E6"/>
+<path d="M666.12 298.43H545.51V419.04H666.12V298.43Z" fill="#E6E6E6"/>
+<path d="M462.93 298.43H307.45V309.32H462.93V298.43Z" fill="#E6E6E6"/>
+<path d="M509.33 316.29H307.45V344.18H509.33V316.29Z" fill="#E6E6E6"/>
+<path d="M532.93 355.33H307.45V419.04H532.93V355.33Z" fill="#E6E6E6"/>
+</g>
+<path d="M701.73 506.81C721.397 506.81 737.34 490.867 737.34 471.2C737.34 451.533 721.397 435.59 701.73 435.59C682.063 435.59 666.12 451.533 666.12 471.2C666.12 490.867 682.063 506.81 701.73 506.81Z" fill="#FBB03B"/>
+<rect x="788" y="224" width="203" height="399" rx="28" fill="black"/>
+<rect x="797" y="234" width="185" height="379" rx="19" fill="white"/>
+<path d="M873.45 276.9H814.03C813.207 276.9 812.54 277.567 812.54 278.39V283.93C812.54 284.753 813.207 285.42 814.03 285.42H873.45C874.273 285.42 874.94 284.753 874.94 283.93V278.39C874.94 277.567 874.273 276.9 873.45 276.9Z" fill="#E6E6E6"/>
+<path d="M962.01 290.91H815.95C814.067 290.91 812.54 292.437 812.54 294.32V305.76C812.54 307.643 814.067 309.17 815.95 309.17H962.01C963.893 309.17 965.42 307.643 965.42 305.76V294.32C965.42 292.437 963.893 290.91 962.01 290.91Z" fill="#E6E6E6"/>
+<path d="M910.8 313.65H815.32C813.784 313.65 812.54 314.895 812.54 316.43V329.13C812.54 330.665 813.784 331.91 815.32 331.91H910.8C912.335 331.91 913.58 330.665 913.58 329.13V316.43C913.58 314.895 912.335 313.65 910.8 313.65Z" fill="#E6E6E6"/>
+<path d="M958.44 348.85H819.52C815.665 348.85 812.54 351.975 812.54 355.83V418.23C812.54 422.085 815.665 425.21 819.52 425.21H958.44C962.295 425.21 965.42 422.085 965.42 418.23V355.83C965.42 351.975 962.295 348.85 958.44 348.85Z" fill="#E6E6E6"/>
+<path d="M959.37 437.38H818.59C815.249 437.38 812.54 440.089 812.54 443.43V488.65C812.54 491.991 815.249 494.7 818.59 494.7H959.37C962.711 494.7 965.42 491.991 965.42 488.65V443.43C965.42 440.089 962.711 437.38 959.37 437.38Z" fill="#E6E6E6"/>
+<path d="M958.56 506.86H821.24C816.943 506.86 813.46 510.343 813.46 514.64V593.96C813.46 598.257 816.943 601.74 821.24 601.74H958.56C962.857 601.74 966.34 598.257 966.34 593.96V514.64C966.34 510.343 962.857 506.86 958.56 506.86Z" fill="#E6E6E6"/>
+<circle cx="820.5" cy="251.5" r="7.5" fill="#1B1B1B"/>
+<defs>
+<filter id="filter0_d" x="233.62" y="117.15" width="481.96" height="373.61" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="18"/>
+<feGaussianBlur stdDeviation="5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear" x1="480.5" y1="462.76" x2="480.5" y2="445.48" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CCCCCC"/>
+<stop offset="1" stop-color="#F2F2F2"/>
+</linearGradient>
+</defs>
+</svg>

loader.svg

@@ -0,0 +1,19 @@
+<svg width="128" height="256" viewBox="0 0 128 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="128" height="256" fill="white"/>
+<rect x="41" y="10" width="39" height="8" rx="2" fill="#DEDEDE"/>
+<rect x="41" y="21" width="79" height="13" rx="2" fill="#DEDEDE"/>
+<rect x="41" y="39" width="79" height="20" rx="2" fill="#DEDEDE"/>
+<rect x="8" y="10" width="27" height="27" rx="2" fill="#DEDEDE"/>
+<rect x="41" y="72" width="39" height="8" rx="2" fill="#DEDEDE"/>
+<rect x="41" y="83" width="79" height="13" rx="2" fill="#DEDEDE"/>
+<rect x="41" y="101" width="79" height="20" rx="2" fill="#DEDEDE"/>
+<rect x="8" y="72" width="27" height="27" rx="2" fill="#DEDEDE"/>
+<rect x="41" y="134" width="39" height="8" rx="2" fill="#DEDEDE"/>
+<rect x="41" y="145" width="79" height="13" rx="2" fill="#DEDEDE"/>
+<rect x="41" y="163" width="79" height="20" rx="2" fill="#DEDEDE"/>
+<rect x="8" y="134" width="27" height="27" rx="2" fill="#DEDEDE"/>
+<rect x="41" y="196" width="39" height="8" rx="2" fill="#DEDEDE"/>
+<rect x="41" y="207" width="79" height="13" rx="2" fill="#DEDEDE"/>
+<rect x="41" y="225" width="79" height="20" rx="2" fill="#DEDEDE"/>
+<rect x="8" y="196" width="27" height="27" rx="2" fill="#DEDEDE"/>
+</svg>

logo.svg

@@ -0,0 +1,11 @@
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="128" height="128" fill="white"/>
+<rect width="128" height="128" fill="black"/>
+<path d="M55.4923 70L44.2958 54.2795C50.5234 52.1179 54.6311 46.8777 54.6311 40.1965C54.6311 31.2882 47.3433 25 37.4718 25H17V70H26.739V55.393H33.9605L44.362 70H55.4923ZM26.739 33.8428H36.4118C41.2482 33.8428 44.5608 36.3319 44.5608 40.1965C44.5608 44.0611 41.2482 46.5502 36.4118 46.5502H26.739V33.8428Z" fill="white"/>
+<path d="M62.2987 70H72.0377V41.9651L86.1493 67.3799L100.195 41.9651V70H110V25H100.195L86.1493 50.4148L72.0377 25H62.2987V70Z" fill="white"/>
+<path d="M23.713 102.629H28.3556V85.4866H35.0685V81.3713H17V85.4866H23.713V102.629Z" fill="white"/>
+<path d="M38.2265 102.629H42.8691V81.3713H38.2265V102.629Z" fill="white"/>
+<path d="M47.3583 102.629H51.9695V89.3854L58.6511 101.391L65.3013 89.3854V102.629H69.9439V81.3713H65.3013L58.6511 93.3769L51.9695 81.3713H47.3583V102.629Z" fill="white"/>
+<path d="M90.967 85.4866V81.3713H74.3728V102.629H90.967V98.5134H79.0154V93.8411H89.8377V89.7257H79.0154V85.4866H90.967Z" fill="white"/>
+<path d="M102.624 103C107.894 103 111 100.308 111 96.2546C111 92.3249 107.926 90.9634 103.283 89.9423C99.9581 89.1997 98.672 88.7046 98.672 87.1575C98.672 85.8889 99.864 84.8678 101.84 84.8678C103.911 84.8678 106.075 85.7032 107.989 87.2194L110.404 83.9395C108.208 82.083 105.479 81 101.966 81C97.2604 81 93.998 83.692 93.998 87.6217C93.998 91.737 97.229 93.0056 101.778 94.0267C105.071 94.7693 106.326 95.2335 106.326 96.7496C106.326 98.0802 105.134 99.1322 102.813 99.1322C100.084 99.1322 97.7623 98.0802 95.7233 96.3474L93.057 99.4726C95.5665 101.762 98.8916 103 102.624 103Z" fill="white"/>
+</svg>

morning.svg

@@ -0,0 +1,20 @@
+<svg width="93" height="93" viewBox="0 0 93 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<path d="M46.3 80.6C67.4525 80.6 84.6 63.4525 84.6 42.3C84.6 21.1475 67.4525 4 46.3 4C25.1475 4 8 21.1475 8 42.3C8 63.4525 25.1475 80.6 46.3 80.6Z" fill="url(#paint0_linear)"/>
+</g>
+<defs>
+<filter id="filter0_d" x="0" y="0" width="92.6" height="92.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="4"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.603922 0 0 0 0 0.121569 0 0 0 0.32 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear" x1="46.3" y1="3.988" x2="46.3" y2="80.612" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFD95B"/>
+<stop offset="1" stop-color="#FF9419"/>
+</linearGradient>
+</defs>
+</svg>

night.svg

@@ -0,0 +1,38 @@
+<svg width="99" height="99" viewBox="0 0 99 99" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<path d="M73.7 62.2C55.8 62.2 41.3 47.7 41.3 29.8C41.3 22.5 43.7 15.8 47.7 10.4C27.9 11.5 12.2 28 12.2 48C12.2 68.8 29.1 85.7 49.9 85.7C66.6 85.7 80.7 74.9 85.7 59.9C82 61.4 77.9 62.2 73.7 62.2Z" fill="url(#paint0_linear)"/>
+</g>
+<path d="M3.79999 7.6C5.89867 7.6 7.59999 5.89868 7.59999 3.8C7.59999 1.70132 5.89867 0 3.79999 0C1.70131 0 0 1.70132 0 3.8C0 5.89868 1.70131 7.6 3.79999 7.6Z" fill="url(#paint1_linear)"/>
+<path d="M96.8 95.7C97.8493 95.7 98.7 94.8493 98.7 93.8C98.7 92.7507 97.8493 91.9 96.8 91.9C95.7506 91.9 94.9 92.7507 94.9 93.8C94.9 94.8493 95.7506 95.7 96.8 95.7Z" fill="url(#paint2_linear)"/>
+<path d="M86.7 23.4C87.5837 23.4 88.3 22.6837 88.3 21.8C88.3 20.9163 87.5837 20.2 86.7 20.2C85.8163 20.2 85.1 20.9163 85.1 21.8C85.1 22.6837 85.8163 23.4 86.7 23.4Z" fill="url(#paint3_linear)"/>
+<path d="M12.4 81.1C13.3941 81.1 14.2 80.2941 14.2 79.3C14.2 78.3059 13.3941 77.5 12.4 77.5C11.4059 77.5 10.6 78.3059 10.6 79.3C10.6 80.2941 11.4059 81.1 12.4 81.1Z" fill="#4253B7"/>
+<path d="M19.4 99C20.8359 99 22 97.8359 22 96.4C22 94.9641 20.8359 93.8 19.4 93.8C17.9641 93.8 16.8 94.9641 16.8 96.4C16.8 97.8359 17.9641 99 19.4 99Z" fill="#4253B7"/>
+<path d="M90.7 2.1C91.2523 2.1 91.7 1.65228 91.7 1.1C91.7 0.547714 91.2523 0.0999985 90.7 0.0999985C90.1477 0.0999985 89.7 0.547714 89.7 1.1C89.7 1.65228 90.1477 2.1 90.7 2.1Z" fill="#4253B7"/>
+<defs>
+<filter id="filter0_d" x="3.2" y="5.4" width="91.5" height="93.3" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="4.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.121569 0 0 0 0 0.0431373 0 0 0 0 0.219608 0 0 0 0.24 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear" x1="18.049" y1="79.8901" x2="70.0209" y2="27.889" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0E0319"/>
+<stop offset="1" stop-color="#6D30C6"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="0.558399" y1="7.1335" x2="6.8166" y2="0.871708" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0E0319"/>
+<stop offset="1" stop-color="#6D30C6"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="95.1481" y1="95.4429" x2="98.3268" y2="92.2623" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0E0319"/>
+<stop offset="1" stop-color="#6D30C6"/>
+</linearGradient>
+<linearGradient id="paint3_linear" x1="85.3272" y1="23.2212" x2="87.9825" y2="20.5644" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0E0319"/>
+<stop offset="1" stop-color="#6D30C6"/>
+</linearGradient>
+</defs>
+</svg>

noon.svg

@@ -0,0 +1,36 @@
+<svg width="112" height="93" viewBox="0 0 112 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<path d="M65.5 80.6C86.6525 80.6 103.8 63.4525 103.8 42.3C103.8 21.1475 86.6525 4 65.5 4C44.3475 4 27.2 21.1475 27.2 42.3C27.2 63.4525 44.3475 80.6 65.5 80.6Z" fill="url(#paint0_linear)"/>
+</g>
+<g filter="url(#filter1_d)">
+<path d="M61.2 63C61.2 54.2 54.1 47.1 45.3 47.1C44.7 47.1 44.1 47.1 43.4 47.2C39.7 41.7 33.5 38.1 26.4 38.1C15.1 38.1 6 47.2 6 58.5C6 69.8 15.1 78.9 26.4 78.9H45.7C54.3 78.6 61.2 71.6 61.2 63Z" fill="url(#paint1_linear)"/>
+</g>
+<defs>
+<filter id="filter0_d" x="19.2" y="0" width="92.6" height="92.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="4"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.933333 0 0 0 0 0.141177 0 0 0 0 0.137255 0 0 0 0.32 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<filter id="filter1_d" x="0" y="36.1" width="67.2" height="52.8" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="3"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear" x1="65.52" y1="3.988" x2="65.52" y2="80.612" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F7931E"/>
+<stop offset="1" stop-color="#ED1C24"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="17.1779" y1="76.823" x2="46.1452" y2="46.9915" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+</defs>
+</svg>