initial commit

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