initial commit

src/assets/fonts/fonts.css

@@ -0,0 +1,19 @@
+
+@font-face {
+    font-family: 'bebas_neueregular';
+    src: url('./bebasneue-regular-webfont.woff2') format('woff2'),
+         url('./bebasneue-regular-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+@font-face {
+    font-family: 'yorkwhiteletterregular';
+    src: url('./yorkwhiteletter-webfont.woff2') format('woff2'),
+    url('./yorkwhiteletter-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}

src/assets/scripts/lenisSmoothScroll.js

@@ -0,0 +1,13 @@
+import "@styles/lenis.css";
+
+import Lenis from "lenis";
+
+// Script to handle Lenis library settings for smooth scrolling
+const lenis = new Lenis();
+
+function raf(time) {
+  lenis.raf(time);
+  requestAnimationFrame(raf);
+}
+
+requestAnimationFrame(raf);

src/assets/styles/global.css

@@ -0,0 +1,222 @@
+@import "tailwindcss";
+@import "primereact/resources/themes/nano/theme.css";
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+@plugin "@tailwindcss/typography";
+
+@theme {
+  /* Font families */
+  --font-sans: "Geist Sans", system-ui, sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, monospace;
+}
+
+::selection {
+  background-color: #47a3f3;
+  color: #fefefe;
+}
+
+/* Dark theme colors */
+[data-theme="dark"] {
+  background-color: #121212;
+}
+
+html {
+  min-width: 360px;
+}
+
+.prose {
+  @apply text-[#333333] dark:text-[#D4D4D4];
+}
+
+.prose .anchor {
+  @apply absolute invisible no-underline;
+  margin-left: -1em;
+  padding-right: 0.5em;
+  width: 80%;
+  max-width: 700px;
+  cursor: pointer;
+}
+
+.anchor:hover {
+  @apply visible;
+}
+
+.prose a {
+  @apply transition-all decoration-neutral-400 dark:decoration-neutral-600 underline-offset-2 decoration-[0.1em] font-normal text-[#333333] dark:text-[#D4D4D4];
+}
+
+.prose a:hover {
+  @apply dark:decoration-neutral-400 decoration-neutral-600;
+}
+
+.prose .anchor:after {
+  @apply text-neutral-300 dark:text-neutral-700;
+  content: "#";
+}
+
+.prose *:hover > .anchor {
+  @apply visible;
+}
+
+.prose pre {
+  @apply !bg-[#F7F7F7] dark:bg-[#181818] rounded-lg overflow-x-auto;
+}
+
+.prose code {
+  @apply px-1 py-0.5 rounded-lg;
+}
+
+.prose pre code {
+  @apply p-0;
+  border: initial;
+  line-height: 1.5;
+}
+
+.prose code span {
+  @apply font-medium;
+}
+
+.prose img {
+  /* Don't apply styles to next/image */
+  @apply m-0;
+}
+
+.prose h2,
+h3,
+h4,
+h5,
+h6 {
+  @apply font-medium! tracking-tight!;
+}
+
+.prose strong {
+  @apply font-medium;
+}
+
+.prose > :first-child {
+  /* Override removing top margin, causing layout shift */
+  margin-top: 1.25em !important;
+  margin-bottom: 1.25em !important;
+}
+
+pre::-webkit-scrollbar {
+  display: none;
+}
+
+pre {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+/* Remove Safari input shadow on mobile */
+input[type="text"],
+input[type="email"] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.prose .tweet a {
+  text-decoration: inherit;
+  font-weight: 500;
+}
+
+table {
+  display: block;
+  max-width: fit-content;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+.prose .callout > p {
+  margin: 0 !important;
+}
+
+blockquote p:first-of-type::before {
+  content: none;
+}
+
+blockquote p:first-of-type::after {
+  content: none;
+}
+
+.title {
+  text-wrap: balance;
+}
+
+.hidden {
+  display: none;
+}
+
+[data-theme="dark"] .astro-code,
+[data-theme="dark"] .astro-code span {
+  color: var(--shiki-dark) !important;
+  background-color: var(--shiki-dark-bg) !important;
+  /* Optional, if you also want font styles */
+  font-style: var(--shiki-dark-font-style) !important;
+  font-weight: var(--shiki-dark-font-weight) !important;
+  text-decoration: var(--shiki-dark-text-decoration) !important;
+}
+
+/**
+Custom
+*/
+
+.header-text, .footer-text {
+  font-family: "bebas_neueregular";
+}
+
+.footer-text {
+  margin-top: 25px;
+  bottom: 0%;
+}
+
+.btn {
+  margin-top: 1.5% !important;
+}
+
+.hr {
+  transform: rotate(90deg);
+}
+
+#alert {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+#spinner { 
+  margin-top: 5%;
+  margin-left: 50%;
+}
+
+#exclude-checkboxes {
+  margin-left: 5.5%;
+}
+
+#lyric-search-input {
+  margin-right: 1.5%;
+}
+
+#lyrics-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-weight: bold;
+  word-wrap: break-word !important;
+  overflow: auto !important;
+  margin-bottom: 5px;
+}
+
+.lyrics-card {
+  border: 1px solid grey;
+  border-radius: 5px;
+  line-height: 2.0;
+}
+
+.lyrics-card-dark {
+  background-color: oklch(from rgba(18, 18, 18, 2.0) calc(l + 0.05) c h);
+}
+
+.lyrics-card-light {
+  background-color: oklch(from rgba(255, 255, 255, 2.0) calc(l - 0.02) c h);
+}
+

src/assets/styles/lenis.css

@@ -0,0 +1,20 @@
+html.lenis,
+html.lenis body {
+    height: auto;
+}
+
+.lenis.lenis-smooth {
+    scroll-behavior: auto !important;
+}
+
+.lenis.lenis-smooth [data-lenis-prevent] {
+    overscroll-behavior: contain;
+}
+
+.lenis.lenis-stopped {
+    overflow: hidden;
+}
+
+.lenis.lenis-scrolling iframe {
+    pointer-events: none;
+}

src/assets/styles/player.css

@@ -0,0 +1,258 @@
+div > img {
+    transition: 300ms;
+}
+div > img:hover {
+    opacity: 0.7;
+    cursor: pointer;
+}
+
+div {
+    box-sizing: border-box;
+}
+
+img {
+    width: 100%;
+    height: 100%;
+}
+
+.album-cover > img {
+    height: 100% !important;
+    width: 100% !important;
+    object-fit: cover;
+    aspect-ratio: 1;
+}
+
+p {
+    margin-top: 0;
+    margin-bottom: 0.3em;
+}
+
+body {
+    font-family: "Mukta", sans-serif;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    min-width: 100vw;
+    min-height: 100vh;
+    /* background: linear-gradient(-45deg, #FFCDD2 50%, #B2EBF2 50%); */
+}
+
+div,
+section {
+    box-sizing: border-box;
+}
+
+.c-containter {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 30vh;
+    padding: 1em;
+}
+
+.music-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    /* top: 20%;
+    left: 30%; */
+    width: 40%;
+    max-width: 700px;
+    box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.3);
+    max-height: 290px;
+}
+
+.album-cover {
+    flex: 1 0 30%;
+}
+.album-cover img {
+    width: 100%;
+    height: 100%;
+}
+
+.arrow {
+    position: absolute;
+    top: calc(50% - 2.5em);
+    background: rgba(255, 255, 255, 0.3);
+    border: 0;
+    width: 5em;
+    height: 5em;
+    cursor: pointer;
+}
+.arrow:hover {
+    background: rgba(255, 255, 255, 0.5);
+}
+.arrow img {
+    display: block;
+    width: 20px;
+    margin: 0 auto;
+}
+.arrow.left {
+    left: -5em;
+}
+.arrow.right {
+    right: -5em;
+}
+
+.music-player {
+    display: flex;
+    flex-flow: column wrap;
+    justify-content: center;
+    background: inherit;
+    padding: 1em;
+    text-align: center;
+    width: 500px;
+    max-width: 500px;
+}
+.music-player__title {
+    color: inherit;
+    font-size: 0.9rem;
+    margin: 0 0 0.1em 0;
+}
+.music-player__header {
+    color: inherit;
+    font-size: 1rem;
+    margin: 1 0 0.1em 0;
+}
+.music-player__author {
+    color: inherit;
+    font-size: 0.9rem;
+    margin: 0 0 0.5em 0;
+}
+
+.music-player__genre {
+    color: inherit;
+    font-size: 0.9rem;
+    margin: 0 0 0.5em 0;
+}
+
+.music-player__genre:before {
+    font-weight: bold;
+    content: "Genre: "
+}
+
+
+.music-bar {
+    background: #efefef;
+    stroke-width: 1;
+    height: 8px;
+    width: 100%;
+}
+.music-bar:hover {
+    cursor: pointer;
+}
+.music-bar #length {
+    width: 0%;
+    background: #2196F3;
+    height: 100%;
+    transition: width linear 200ms;
+}
+
+.music-time {
+    display: flex;
+    flex-flow: row wrap;
+}
+.music-time__last {
+    margin-left: auto;
+}
+
+.music-order {
+    display: flex;
+    flex-flow: row wrap;
+}
+.music-order__shuffle, .music-order__loop {
+    width: 1.2em;
+    height: 1.2em;
+    opacity: 0.2;
+    margin: 0.3em 0;
+}
+.music-order__shuffle.is-loop, .music-order__loop.is-loop {
+    opacity: 1 !important;
+}
+.music-order__shuffle.is-loop-one, .music-order__loop.is-loop-one {
+    opacity: 1 !important;
+}
+.music-order__shuffle {
+    margin-left: auto;
+}
+
+.music-control {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+    align-items: center;
+    height: 2em;
+}
+.music-control__play {
+    width: 3em;
+    height: 3em;
+    margin: 0 1em;
+}
+.music-control__backward, .music-control__forward {
+    width: 1.5em;
+    height: 1.5em;
+}
+
+@media all and (max-width: 960px) {
+    .c-containter {
+        display: block;
+        overflow: auto;
+        max-height: inherit;
+        max-width: 90%;
+    }
+    
+    .music-container {
+        display: flex;
+        justify-content: center;
+        flex-flow: column wrap;
+        margin: 0 auto;
+        padding-left: 25%;
+        overflow: auto;
+    }
+
+    .music-player__author {
+        font-size: 0.4rem;
+    }
+
+    .music-player__title {
+        font-size: 0.6rem;
+    }
+
+    .music-player__genre {
+        display: none;
+    }
+    
+    .music-player {
+        width: 100%;
+        max-width: 100%;
+    }
+    
+    .album-cover {
+        position: relative;
+        flex: 1 1 100%;
+        max-width: 200px;
+        max-height: 200px;
+    }
+    
+    .arrow {
+        position: absolute;
+        top: calc(50% - 1.5em);
+        width: 3em;
+        height: 3em;
+    }
+    .arrow.left {
+        left: 0;
+    }
+    .arrow.right {
+        right: 0;
+    }
+    
+    .music-control__play {
+        width: 2.2em;
+        height: 2.2em;
+    }
+}