0.0.1

css/banner-bg1.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="80" viewBox="0 0 120 80"><defs><style>.a{fill:none;stroke:#1b1464;stroke-miterlimit:10;stroke-width:11px;opacity:0.1;}</style></defs><title>banner-bg1</title><circle class="a" cx="112.37" cy="9.76" r="30.24"/></svg>

css/banner-bg2.svg

@@ -0,0 +1 @@
+<svg id="efc17a0a-3253-4ddc-ab04-f1266939853b" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="908.72" height="593.16" viewBox="0 0 908.72 593.16"><defs><linearGradient id="9524657f-a5be-401f-9afa-21595579ad39" x1="623.41" y1="835.81" x2="623.41" y2="62.24" gradientTransform="translate(1039.26 -172.82) rotate(90)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-opacity="0.12"/><stop offset="0.55" stop-opacity="0.09"/><stop offset="1" stop-opacity="0.02"/></linearGradient><linearGradient id="48b6f8c1-7ad6-4b23-961c-36b9d10d8c20" x1="600" y1="746.58" x2="600" y2="153.42" gradientTransform="translate(0.61 -0.81) rotate(0.08)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0.54" stop-color="gray" stop-opacity="0.12"/><stop offset="1" stop-color="gray" stop-opacity="0.1"/></linearGradient></defs><title>spreadsheets</title><rect x="203.45" y="183.42" width="773.57" height="534.35" transform="translate(-146.25 -152.63) rotate(-0.08)" fill="url(#9524657f-a5be-401f-9afa-21595579ad39)"/><g opacity="0.7"><rect x="146" y="153.99" width="908" height="592.01" rx="28.33" ry="28.33" transform="translate(-146.25 -152.61) rotate(-0.08)" fill="url(#48b6f8c1-7ad6-4b23-961c-36b9d10d8c20)"/></g><rect x="154.11" y="158.92" width="893.37" height="581.1" rx="28.33" ry="28.33" transform="translate(-146.24 -152.61) rotate(-0.08)" fill="#535461"/><circle cx="192.71" cy="452.44" r="20.68" transform="translate(-146.25 -153.16) rotate(-0.08)" fill="#535461"/><g opacity="0.1"><circle cx="192.71" cy="452.44" r="20.68" transform="translate(-146.25 -153.16) rotate(-0.08)"/></g><circle cx="1011.51" cy="363.1" r="6.89" transform="translate(-146.13 -152.06) rotate(-0.08)" fill="#535461"/><rect x="1008.86" y="397.57" width="6.89" height="89.61" rx="1.43" ry="1.43" transform="translate(-146.24 -152.06) rotate(-0.08)" fill="#535461"/><g opacity="0.1"><rect x="1008.86" y="397.57" width="6.89" height="89.61" rx="1.43" ry="1.43" transform="translate(-146.24 -152.06) rotate(-0.08)"/></g><g opacity="0.1"><circle cx="1011.51" cy="363.1" r="6.89" transform="translate(-146.13 -152.06) rotate(-0.08)"/></g><polygon points="725 547.58 84.37 547.58 84.37 49.58 832.06 49.58 832.06 479.74 831.63 546.86 725 547.58" fill="#fff"/><g opacity="0.7"><rect x="84.37" y="221.97" width="747.69" height="6.86" fill="#e0e0e0"/></g><g opacity="0.7"><rect x="84.37" y="184.97" width="747.69" height="6.86" fill="#e0e0e0"/></g><g opacity="0.7"><rect x="84.37" y="147.97" width="747.69" height="6.86" fill="#e0e0e0"/></g><g opacity="0.7"><rect x="84.37" y="110.97" width="747.69" height="6.86" fill="#e0e0e0"/></g><g opacity="0.7"><rect x="84.37" y="73.97" width="747.69" height="6.86" fill="#e0e0e0"/></g><g opacity="0.7"><rect x="84.37" y="258.98" width="747.69" height="6.86" fill="#e0e0e0"/></g><g opacity="0.7"><rect x="84.37" y="296" width="747.69" height="6.86" fill="#e0e0e0"/></g><g opacity="0.7"><rect x="84.37" y="333.02" width="747.69" height="6.86" fill="#e0e0e0"/></g><g opacity="0.7"><rect x="84.37" y="370.04" width="747.69" height="6.86" fill="#e0e0e0"/></g><g opacity="0.7"><rect x="84.37" y="407.05" width="747.69" height="6.86" fill="#e0e0e0"/></g><g opacity="0.7"><rect x="84.37" y="444.07" width="747.69" height="6.86" fill="#e0e0e0"/></g><g opacity="0.7"><rect x="84.36" y="481.09" width="747.57" height="6.86" fill="#e0e0e0"/></g><g opacity="0.7"><rect x="84.37" y="518.11" width="746.99" height="6.86" fill="#e0e0e0"/></g><rect x="174.16" y="80.8" width="5.18" height="466.78" fill="#e0e0e0"/><rect x="288.56" y="80.8" width="5.18" height="466.78" fill="#e0e0e0"/><rect x="402.96" y="80.8" width="5.18" height="466.78" fill="#e0e0e0"/><rect x="517.36" y="80.8" width="5.18" height="466.78" fill="#e0e0e0"/><rect x="631.76" y="80.8" width="5.18" height="466.78" fill="#e0e0e0"/><polygon points="751.34 547.58 746.16 547.58 746.16 80.8 751.34 80.58 751.34 547.58" fill="#e0e0e0"/><circle cx="101.09" cy="61.08" r="6.73" fill="#ff5252"/><circle cx="120.36" cy="61.08" r="6.73" fill="#ff0"/><circle cx="139.63" cy="61.08" r="6.73" fill="#69f0ae"/><rect x="293.36" y="339.58" width="110" height="30" fill="#6c63ff"/><rect x="408.36" y="487.58" width="110" height="30" fill="#6c63ff"/><rect x="522.36" y="447.58" width="110" height="30" fill="#6c63ff"/><rect x="522.36" y="228.58" width="110" height="30" fill="#6c63ff"/><rect x="637.36" y="376.58" width="110" height="30" fill="#6c63ff"/><rect x="178.36" y="117.58" width="110" height="30" fill="#6c63ff"/><rect x="408.36" y="192.58" width="110" height="30" fill="#6c63ff"/><rect x="178.36" y="265.58" width="110" height="30" fill="#6c63ff"/></svg>

css/card-bg2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="80" viewBox="0 0 120 80"><defs><style>.a{opacity:0.16;}</style></defs><title>card-bg2</title><g class="a"><rect x="60" y="23.64" width="15.35" height="6"/><rect x="25.82" y="23.64" width="30.71" height="6"/><rect x="60" y="32.55" width="15.35" height="6"/><rect x="25.82" y="32.55" width="30.71" height="6"/><rect x="60" y="41.45" width="15.35" height="6"/><rect x="25.82" y="41.45" width="30.71" height="6"/><rect x="60" y="50.36" width="15.35" height="6"/><rect x="25.82" y="50.36" width="30.71" height="6"/><rect x="78.83" y="23.64" width="15.35" height="6"/><rect x="78.83" y="32.55" width="15.35" height="6"/><rect x="78.83" y="41.45" width="15.35" height="6"/><rect x="78.83" y="50.36" width="15.35" height="6"/></g></svg>

css/main.css

@@ -0,0 +1,752 @@
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  font-family: "Roboto", sans-serif;
+}
+
+body {
+  --accent-color:#169685;
+  --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: #f8f8f8;
+  --hue: 255;
+  --saturation: 61%;
+  --lightness: 39%;
+  color: rgba(var(--text-color), 1);
+  font-size: 16px;
+  background: var(--dark-shade);
+  background-size: cover;
+}
+
+body[data-theme=dark] {
+  --accent-color: #00BFA6;
+  --text-color: 238, 238, 238;
+  --text-color-light: 170, 170, 170;
+  --foreground-color: 26, 26, 26;
+  --background-color: #111;
+  --dark-shade: #080808;
+  --hue: 255;
+  --saturation: 39%;
+  --lightness: 70%;
+}
+
+a {
+  font-weight: 600;
+  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: 1rem;
+}
+
+h5 {
+  font-size: 0.8rem;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  font-family: "Poppins", sans-serif;
+  font-weight: 600;
+}
+
+p {
+  line-height: 1.5;
+  max-width: 65ch;
+  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: 1em;
+}
+
+.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: 1em;
+}
+
+.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;
+}
+
+.overflow-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.separator {
+  padding: 0.1em;
+}
+
+.no-transformations {
+  transform: none !important;
+}
+
+.capitalize {
+  text-transform: capitalize;
+}
+
+.icon {
+  height: 1.2rem;
+  width: 1.2rem;
+  overflow: visible;
+  stroke: rgba(var(--text-color), 1);
+  opacity: 0.8;
+  fill: none;
+  stroke-width: 6;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+sm-popup sm-input:not(:last-of-type) {
+  margin-bottom: 1rem;
+}
+sm-popup sm-textarea {
+  margin-top: 1rem;
+}
+sm-popup sm-textarea::part(textarea) {
+  border-radius: 0.4rem;
+}
+sm-popup p {
+  margin-block-end: 1rem;
+}
+
+.popup-header {
+  padding: 1.5rem;
+  padding-bottom: 0;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+.popup-header .icon {
+  margin-right: 1rem;
+  padding: 0.2rem;
+  stroke-width: 10;
+  cursor: pointer;
+}
+.popup-header sm-button {
+  width: auto;
+  margin-left: auto;
+}
+
+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 {
+  background: var(--accent-color);
+  justify-content: center;
+  color: rgba(var(--foreground-color), 1);
+}
+
+#confirmation {
+  flex-direction: column;
+}
+#confirmation h4 {
+  font-weight: 500;
+  margin-bottom: 1.5rem;
+}
+#confirmation .flex sm-button:first-of-type {
+  margin-right: 0.6em;
+  margin-left: auto;
+}
+
+#sign_in_popup::part(background) {
+  background: rgba(var(--foreground-color), 1);
+}
+#sign_in_popup h3 {
+  margin-top: 2rem;
+}
+#sign_in_popup h4 {
+  font-weight: 500;
+  margin-bottom: 3rem;
+}
+#sign_in_popup button {
+  margin: 1rem 0;
+}
+#sign_in_popup p {
+  margin-top: 1rem;
+  margin-bottom: 0 !important;
+}
+
+.copy-row {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  gap: 0.5rem;
+  width: auto;
+}
+.copy-row h4 {
+  margin-bottom: 0;
+  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;
+}
+
+#main_loader {
+  text-align: center;
+  place-content: center;
+  height: 100vh;
+  width: 100vw;
+  position: fixed;
+  left: 0;
+}
+#main_loader sm-button {
+  margin-left: 0;
+  margin-top: 1rem;
+  width: max-content;
+  justify-self: center;
+}
+#main_loader svg {
+  height: 2rem;
+  width: 2rem;
+  stroke: var(--accent-color);
+  stroke-width: 6;
+  fill: none;
+  overflow: visible;
+  stroke-linecap: round;
+  stroke-dashoffset: 210;
+  stroke-dasharray: 210;
+  justify-self: center;
+  align-self: center;
+  margin-bottom: 2rem;
+}
+#main_loader h3 {
+  width: 100%;
+  font-weight: 400;
+  word-spacing: 0.16em;
+}
+
+.loader {
+  fill: none;
+  stroke-width: 10;
+  stroke: var(--accent-color);
+  height: 2rem;
+  width: 2rem;
+  overflow: visible;
+  stroke-dashoffset: 230;
+  stroke-dasharray: 230;
+  padding: 2px;
+  justify-self: center;
+}
+
+.animate-loader {
+  animation: load 2.6s infinite, rotate 1s infinite linear;
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes load {
+  50% {
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dashoffset: -210;
+  }
+}
+#main_header {
+  padding: 1rem;
+  box-shadow: 0 0.1rem 0.2rem #00000010;
+  background: rgba(var(--foreground-color), 1);
+}
+#main_header h5 {
+  font-weight: 500;
+  font-family: "Roboto", sans-serif;
+  opacity: 0.8;
+}
+#main_header h4 {
+  font-size: 1.2rem;
+}
+
+#home_page {
+  padding: 1rem 1.5rem;
+}
+
+.section-header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--dark-shade);
+  padding: 1rem 0;
+  margin-bottom: 1rem;
+}
+.section-header h4 {
+  font-size: 1.2rem;
+  opacity: 0.8;
+  font-weight: 500;
+}
+
+#user_icon {
+  width: 2.4rem;
+  height: 2.4rem;
+  padding: 0.6rem;
+  cursor: pointer;
+  background: rgba(var(--text-color), 0.1);
+  border-radius: 2rem;
+}
+
+sm-input::part(input) {
+  border-radius: 0.4rem;
+}
+
+#sheets_container {
+  gap: 2rem 1.5rem;
+  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+  margin-bottom: 3rem;
+  animation: slide-up 0.6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+@keyframes slide-up {
+  from {
+    transform: translateY(2rem);
+  }
+  to {
+    transform: none;
+  }
+}
+#add_new_sheet .icon {
+  height: 2rem;
+  width: 2rem;
+  stroke-width: 10;
+  stroke: #fff;
+  stroke-linecap: square;
+  opacity: 1;
+  top: 50%;
+  transform: translateY(-50%);
+  position: absolute;
+}
+#add_new_sheet .card {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  background: url(card-bg1.svg), #A7003E;
+  background-size: cover;
+}
+
+.sheet-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+}
+.sheet-card:active .card {
+  transform: scale(0.95);
+}
+.sheet-card .card {
+  border-radius: 0.8rem;
+  background: url(card-bg2.svg) center, rgba(var(--text-color), 0.06);
+  background-size: contain;
+  padding: 1rem;
+  padding-top: 66%;
+  width: 100%;
+  transition: box-shadow 0.3s, transform 0.3s;
+}
+.sheet-card h4 {
+  font-family: "Roboto", sans-serif;
+  font-weight: 400;
+  opacity: 0.9;
+  margin-top: 0.8rem;
+  text-align: center;
+  max-width: 90%;
+}
+
+#sheet_page {
+  width: 100vw;
+  height: 100vh;
+  overflow-x: hidden;
+}
+
+#sheet_heading {
+  font-weight: 600;
+  opacity: 0.9;
+}
+
+#sheet_description {
+  margin-top: 0.8rem;
+  opacity: 0.8;
+}
+
+#sheet_editors {
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  color: rgba(var(--text-color), 0.7);
+  font-size: 0.9rem;
+}
+#sheet_editors .editor {
+  padding: 0.4rem 0.6rem;
+  border-radius: 0.4rem;
+  background: rgba(var(--text-color), 0.06);
+}
+
+#toggle_details, #go_to_home {
+  height: 2.4rem;
+  width: 2.4rem;
+  padding: 0.7rem;
+  cursor: pointer;
+}
+
+#go_to_home, #go_to_home + h5 {
+  transform: translateX(-1rem);
+  cursor: pointer;
+}
+
+#go_to_home + h5 {
+  font-weight: 500;
+  opacity: 0.9;
+}
+
+#toggle_details {
+  transform: rotateX(180deg);
+  transition: transform 0.3s;
+}
+
+#sheet_details {
+  padding: 1rem;
+  margin-bottom: 1rem;
+}
+#sheet_details .flex:first-of-type {
+  margin-bottom: 1rem;
+}
+#sheet_details .flex:not(:first-of-type) {
+  margin-bottom: 0.3rem;
+}
+#sheet_details.collapse {
+  padding: 0.5rem 1rem;
+  margin-bottom: 0;
+}
+#sheet_details.collapse .flex {
+  margin-bottom: 0;
+}
+#sheet_details.collapse #toggle_details {
+  transform: none;
+}
+#sheet_details.collapse #sheet_heading {
+  font-size: 1.2rem;
+  font-weight: 600;
+  opacity: 0.9;
+}
+#sheet_details.collapse #sheet_description,
+#sheet_details.collapse #sheet_editors {
+  display: none;
+}
+
+#sheet_container {
+  position: relative;
+  overflow: auto;
+  max-height: 100%;
+  bottom: 0;
+  max-width: 100%;
+}
+
+table {
+  position: relative;
+}
+table input {
+  padding: 0.4rem;
+  border: thin solid rgba(var(--text-color), 0.3);
+  font-size: 1rem;
+  width: 100%;
+  border-radius: 0.3rem;
+  background: rgba(var(--text-color), 0.06);
+}
+table input:disabled {
+  border: transparent;
+}
+
+thead {
+  background-color: rgba(var(--text-color), 0.1);
+}
+
+th {
+  position: sticky;
+  top: 0;
+  background: linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)), rgba(var(--foreground-color), 1);
+  text-align: left;
+  line-height: 1;
+  font-weight: 500;
+  z-index: 1;
+  padding: 1rem 0.8rem;
+  white-space: nowrap;
+  box-shadow: 0 0.2rem 0.4rem #00000020;
+}
+
+tr:nth-of-type(2n) {
+  background-color: rgba(var(--text-color), 0.04);
+}
+
+td {
+  padding: 0.4rem 0.8rem;
+  opacity: 0.9;
+}
+
+.grade-input {
+  width: 10ch;
+}
+
+#side_bar {
+  position: fixed;
+  transform: translateX(-100%);
+  background: var(--dark-shade);
+}
+#side_bar .section-header {
+  padding: 1rem;
+  margin-bottom: 0;
+  background: inherit;
+}
+
+#right {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  max-height: 100vh;
+  background: rgba(var(--foreground-color), 1);
+  animation: slide-right 0.6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+@keyframes slide-right {
+  from {
+    transform: translateX(-2rem);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+#people_container {
+  overflow: auto;
+  max-height: calc(100vh - 3.6rem);
+  gap: 1.5rem;
+}
+
+.person-card {
+  display: grid;
+  align-items: center;
+  grid-template-columns: auto 1fr;
+  grid-template-areas: "initials ." "initials .";
+  cursor: pointer;
+  padding: 0 1rem;
+  transition: transform 0.3s;
+  -webkit-tap-highlight-color: transparent;
+}
+.person-card:active {
+  transform: scale(0.95);
+}
+.person-card:first-of-type {
+  margin-top: 1.5rem;
+}
+.person-card:last-of-type {
+  margin-bottom: 2rem;
+}
+
+.person-initials {
+  grid-area: initials;
+  display: flex;
+  justify-content: center;
+  height: 2.6rem;
+  width: 2.6rem;
+  font-size: 1.2rem !important;
+  font-weight: 500;
+  align-items: center;
+  border-radius: 2rem;
+  margin-right: 1rem;
+  text-transform: uppercase;
+  opacity: 1 !important;
+  color: var(--accent-color);
+  background: rgba(var(--text-color), 0.06);
+}
+
+.person-name {
+  font-size: 0.9rem;
+  opacity: 0.9;
+  font-weight: 500;
+  text-transform: capitalize;
+}
+
+.person-flo-id {
+  opacity: 0.7;
+  font-weight: 400;
+}
+
+@media screen and (min-width: 640px) {
+  sm-popup::part(popup) {
+    width: 24rem;
+  }
+
+  #main_header {
+    padding: 1.2rem 3rem;
+  }
+
+  #home_page, #main_header {
+    grid-template-columns: 1fr 80vw 1fr;
+    grid-template-areas: ". main .";
+  }
+
+  #main_section,
+#main_header > div {
+    grid-area: main;
+  }
+
+  #sheets_container {
+    gap: 2rem;
+    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
+  }
+
+  #sheet_page {
+    grid-template-columns: 19rem 1fr;
+  }
+
+  #side_bar {
+    position: relative;
+    transform: none;
+  }
+}
+@media (any-hover: hover) {
+  :root {
+    scrollbar-width: thin;
+  }
+
+  ::-webkit-scrollbar {
+    width: 0.7rem;
+    height: 0.7rem;
+  }
+
+  ::-webkit-scrollbar-track {
+    border-radius: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: rgba(var(--text-color), 0.2);
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: rgba(var(--text-color), 0.4);
+  }
+
+  #people_container::-webkit-scrollbar {
+    width: 0.4rem;
+  }
+
+  #right {
+    z-index: 1;
+    box-shadow: -0.5rem 0 0.5rem #00000010;
+  }
+}

css/main.scss

@@ -0,0 +1,735 @@
+* {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    font-family: 'Roboto', sans-serif;
+}
+body {
+    --accent-color:#169685;
+    --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: #f8f8f8;
+    --hue: 255;
+    --saturation: 61%;
+    --lightness: 39%;
+    color: rgba(var(--text-color), 1);
+    font-size: 16px;
+    background: var(--dark-shade);
+    background-size: cover;
+}
+body[data-theme="dark"]{
+    --accent-color: #00BFA6;
+    --text-color: 238, 238, 238;
+    --text-color-light: 170, 170, 170;
+    --foreground-color: 26, 26, 26;
+    --background-color: #111;
+    --dark-shade: #080808;
+    --hue: 255;
+    --saturation: 39%;
+    --lightness: 70%;
+}
+
+a {
+    font-weight: 600;
+    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: 1rem;
+}
+
+h5 {
+    font-size: 0.8rem;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+    font-family: 'Poppins', sans-serif;
+    font-weight: 600;
+}
+
+p {
+    line-height: 1.5;
+    max-width: 65ch;
+    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: 1em;
+}
+
+.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: 1em;
+}
+
+.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;
+}
+
+.overflow-ellipsis{
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.separator {
+    padding: .1em;
+}
+
+.no-transformations {
+    transform: none !important;
+}
+.capitalize{
+    text-transform: capitalize;
+}
+
+.icon{
+    height: 1.2rem;
+    width: 1.2rem;
+    overflow: visible;
+    stroke: rgba(var(--text-color), 1);
+    opacity: 0.8;
+    fill: none;
+    stroke-width: 6;
+    stroke-linejoin: round;
+    stroke-linecap: round;
+}
+
+sm-popup{  
+    sm-input:not(:last-of-type) {
+        margin-bottom: 1rem;
+    }
+    sm-textarea{
+        margin-top: 1rem;
+        &::part(textarea){
+            border-radius: 0.4rem;
+        }
+    }
+    p{
+        margin-block-end: 1rem;
+    }
+}
+
+.popup-header{
+    padding: 1.5rem;
+    padding-bottom: 0;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    .icon{
+        margin-right: 1rem;
+        padding: 0.2rem;
+        stroke-width: 10;
+        cursor: pointer;
+    }
+    sm-button{
+        width: auto;
+        margin-left: auto;
+    }
+}
+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 {
+    background: var(--accent-color);
+    justify-content: center;
+    color: rgba(var(--foreground-color), 1);
+}
+#confirmation{
+    flex-direction: column;
+    h4 {
+        font-weight: 500;
+        margin-bottom: 1.5rem;
+    }
+
+    .flex {
+        sm-button:first-of-type {
+            margin-right: 0.6em;
+            margin-left: auto;
+        }
+    }
+}
+#sign_in_popup {
+    &::part(background){
+        background: rgba(var(--foreground-color), 1);
+    }
+    h3 {
+        margin-top: 2rem;
+    }
+
+    h4 {
+        font-weight: 500;
+        margin-bottom: 3rem;
+    }
+
+    button {
+        margin: 1rem 0;
+    }
+
+    p {
+        margin-top: 1rem;
+        margin-bottom: 0 !important;
+    }
+}
+.copy-row {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    gap: 0.5rem;
+    width: auto;
+    h4 {
+        margin-bottom: 0;
+        font-weight: 400;
+    }
+
+    .icon {
+        cursor: pointer;
+        padding: 0.4rem;
+        height: 1.8rem;
+        width: 1.8rem;
+    }
+
+    .copy {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
+#main_loader {
+    text-align: center;
+    place-content: center;
+    height: 100vh;
+    width: 100vw;
+    position: fixed;
+    left: 0;
+    sm-button {
+        margin-left: 0;
+        margin-top: 1rem;
+        width: max-content;
+        justify-self: center;
+    }
+
+    svg {
+        height: 2rem;
+        width: 2rem;
+        stroke: var(--accent-color);
+        stroke-width: 6;
+        fill: none;
+        overflow: visible;
+        stroke-linecap: round;
+        stroke-dashoffset: 210;
+        stroke-dasharray: 210;
+        justify-self: center;
+        align-self: center;
+        margin-bottom: 2rem;
+    }
+
+    h3 {
+        width: 100%;
+        font-weight: 400;
+        word-spacing: 0.16em;
+    }
+}
+
+.loader {
+    fill: none;
+    stroke-width: 10;
+    stroke: var(--accent-color);
+    height: 2rem;
+    width: 2rem;
+    overflow: visible;
+    stroke-dashoffset: 230;
+    stroke-dasharray: 230;
+    padding: 2px;
+    justify-self: center;
+}
+
+.animate-loader {
+    animation: load 2.6s infinite, rotate 1s infinite linear;
+}
+
+@keyframes rotate {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes load {
+    50% {
+        stroke-dashoffset: 0;
+    }
+
+    100% {
+        stroke-dashoffset: -210;
+    }
+}
+
+#main_header{
+    padding: 1rem;
+    box-shadow: 0 0.1rem 0.2rem #00000010;
+    background: rgba(var(--foreground-color), 1);
+    h5{
+        font-weight: 500;
+        font-family: 'Roboto', sans-serif;
+        opacity: 0.8;
+    }
+    h4{
+        font-size: 1.2rem;
+    }
+}
+#home_page{
+    padding: 1rem 1.5rem;
+}
+.section-header{
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background: var(--dark-shade);
+    padding: 1rem 0;
+    margin-bottom: 1rem;
+    h4{
+        font-size: 1.2rem;
+        opacity: 0.8;
+        font-weight: 500;
+    }
+}
+
+#user_icon{
+    width: 2.4rem;
+    height: 2.4rem;
+    padding: 0.6rem;
+    cursor: pointer;
+    background: rgba(var(--text-color), 0.1);
+    border-radius: 2rem;
+}
+
+sm-input::part(input){
+    border-radius: 0.4rem;
+}
+
+#sheets_container{
+    gap: 2rem 1.5rem;
+    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+    margin-bottom: 3rem;
+    animation: slide-up 0.6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+@keyframes slide-up{
+    from{
+        transform: translateY(2rem);
+    }
+    to{
+        transform: none;
+    }
+}
+
+#add_new_sheet{
+    .icon{
+        height: 2rem;
+        width: 2rem;
+        stroke-width: 10;
+        stroke: #fff;
+        stroke-linecap: square;
+        opacity: 1;
+        top: 50%;
+        transform: translateY(-50%);
+        position: absolute;
+    }
+    .card{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        background: url(card-bg1.svg), #A7003E;
+        background-size: cover;
+    }
+}
+
+.sheet-card{
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+    &:active .card{
+        transform: scale(0.95);
+    }
+    .card{
+        border-radius: 0.8rem;
+        background: url(card-bg2.svg) center, rgba(var(--text-color), 0.06);
+        background-size: contain;
+        padding: 1rem;
+        padding-top: 66%;
+        width: 100%;
+        transition: box-shadow 0.3s, transform 0.3s;
+    }
+    h4{
+        font-family: 'Roboto', sans-serif;
+        font-weight: 400;
+        opacity: 0.9;
+        margin-top: 0.8rem;
+        text-align: center;
+        max-width: 90%;
+    }
+}
+
+#sheet_page{
+    width: 100vw;
+    height: 100vh;
+    overflow-x: hidden;
+}
+#sheet_heading{
+    font-weight: 600;
+    opacity: 0.9;
+}
+#sheet_description{
+    margin-top: 0.8rem;
+    opacity: 0.8;
+}
+#sheet_editors{
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    color: rgba(var(--text-color), 0.7);
+    font-size: 0.9rem;
+    .editor{
+        padding: 0.4rem 0.6rem;
+        border-radius: 0.4rem;
+        background: rgba(var(--text-color), 0.06);
+    }
+}
+#toggle_details, #go_to_home{
+    height: 2.4rem;
+    width: 2.4rem;
+    padding: 0.7rem;
+    cursor: pointer;
+}
+#go_to_home, #go_to_home + h5{
+    transform: translateX(-1rem);
+    cursor: pointer;
+}
+#go_to_home + h5{
+    font-weight: 500;
+    opacity: 0.9;
+}
+#toggle_details{
+    transform: rotateX(180deg);
+    transition: transform 0.3s;
+}
+#sheet_details{
+    padding: 1rem;
+    margin-bottom: 1rem;
+    .flex:first-of-type{
+        margin-bottom: 1rem;
+    }
+    .flex:not(:first-of-type){
+        margin-bottom: 0.3rem;
+    }
+    &.collapse{
+        padding: 0.5rem 1rem;
+        margin-bottom: 0;
+        .flex{
+            margin-bottom: 0;
+        }
+        #toggle_details{
+            transform: none;
+        }
+        #sheet_heading{
+            font-size: 1.2rem;
+            font-weight: 600;
+            opacity: 0.9;
+        }
+        #sheet_description,
+        #sheet_editors{
+            display: none;
+        }
+    }
+}
+#sheet_container{
+    position: relative;
+    overflow: auto;
+    max-height: 100%;
+    bottom: 0;
+    max-width: 100%;
+}
+table{
+    position: relative;
+    input{
+        padding: 0.4rem;
+        border: thin solid rgba(var(--text-color), 0.3);
+        font-size: 1rem;
+        width: 100%;
+        border-radius: 0.3rem;
+        background: rgba(var(--text-color), 0.06);
+        &:disabled{
+            border: transparent;
+        }
+    }
+}
+thead{
+    background-color: rgba(var(--text-color), 0.1);
+}
+th{
+    position: sticky;
+    top: 0;
+    background: linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)), rgba(var(--foreground-color), 1);
+    text-align: left;
+    line-height: 1;
+    font-weight: 500;
+    z-index: 1;
+    padding: 1rem 0.8rem;
+    white-space: nowrap;
+    box-shadow: 0 0.2rem 0.4rem #00000020;
+}
+tr{
+    &:nth-of-type(2n){
+        background-color: rgba(var(--text-color), 0.04);
+    }
+}
+td{
+    padding: 0.4rem 0.8rem;
+    opacity: 0.9;
+}
+.grade-input{
+    width: 10ch;
+}
+
+#side_bar{
+    position: fixed;
+    transform: translateX(-100%);
+    background: var(--dark-shade);
+    .section-header{
+        padding: 1rem;
+        margin-bottom: 0;
+        background: inherit;
+    }
+}
+#right{
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    max-height: 100vh;
+    background: rgba(var(--foreground-color), 1);
+    animation: slide-right 0.6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275); 
+}
+
+@keyframes slide-right{
+    from{
+        transform: translateX(-2rem);
+    }
+    to{
+        transform: translateX(0);
+    }
+}
+
+#people_container{
+    overflow: auto;
+    max-height: calc(100vh - 3.6rem);
+    gap: 1.5rem;
+}
+
+.person-card{
+    display: grid;
+    align-items: center;
+    grid-template-columns: auto 1fr;
+    grid-template-areas: 'initials .' 'initials .';
+    cursor: pointer;
+    padding: 0 1rem;
+    transition: transform 0.3s;
+    -webkit-tap-highlight-color: transparent;
+    &:active{
+        transform: scale(0.95);
+    }
+    &:first-of-type{
+        margin-top: 1.5rem;
+    }
+    &:last-of-type{
+        margin-bottom: 2rem;
+    }
+}
+.person-initials{
+    grid-area: initials;
+    display: flex;
+    justify-content: center;
+    height: 2.6rem;
+    width: 2.6rem;
+    font-size: 1.2rem !important;
+    font-weight: 500;
+    align-items: center;
+    border-radius: 2rem;
+    margin-right: 1rem;
+    text-transform: uppercase;
+    opacity: 1 !important;
+    color: var(--accent-color);
+    background: rgba(var(--text-color), 0.06);
+}
+.person-name{
+    font-size: 0.9rem;
+    opacity: 0.9;
+    font-weight: 500;
+    text-transform: capitalize;
+}
+.person-flo-id{
+    opacity: 0.7;
+    font-weight: 400;
+}
+
+@media screen and (min-width: 640px){
+    sm-popup::part(popup){
+        width: 24rem;
+    }
+    #main_header{
+        padding: 1.2rem 3rem;
+    }
+    #home_page, #main_header{
+        grid-template-columns: 1fr 80vw 1fr;
+        grid-template-areas: '. main .';
+    }
+    #main_section,
+    #main_header > div{
+        grid-area: main;
+    }
+
+    #sheets_container{
+        gap: 2rem;
+        grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
+    }
+    #sheet_page{
+        grid-template-columns: 19rem 1fr;
+    }
+    #side_bar{
+        position: relative;
+        transform: none;
+    }
+}
+@media (any-hover: hover){
+    :root{
+        scrollbar-width: thin;
+    }
+    ::-webkit-scrollbar {
+        width: 0.7rem;
+        height: 0.7rem;
+    }
+     
+    ::-webkit-scrollbar-track {
+        border-radius: 10px;
+    }
+     
+    ::-webkit-scrollbar-thumb {
+        border-radius: 10px;
+        background: rgba(var(--text-color), 0.2);
+        &:hover{
+            background: rgba(var(--text-color), 0.4);
+        }
+    }
+    #people_container::-webkit-scrollbar{
+        width: 0.4rem;
+    }
+    #right{
+        z-index: 1;
+        box-shadow: -0.5rem 0 0.5rem #00000010;
+    }
+}