[S] Title & styling

2024-12-16 19:21:20 -05:00
parent ae3da874c4
commit e35156c69e
6 changed files with 124 additions and 133 deletions
@@ -192,12 +192,12 @@
 </script>

 <main class:color-mode={mode === 'color'}>
-  <div class="heading">
-    <img src={viteLogo} class="logo" alt="Vite Logo" />
-    <span class="title">Slither Link</span>
-    <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
+  <div class="heading">Azalea's Colorful Slither Link</div>
+  <div class="sub-heading">
+    <img src={viteLogo} alt="Logo"/>
+    <span><a href="https://github.com/hykilpikonna/slither-link">GitHub</a> | <a href="https://aza.moe">Blog</a></span>
+    <img src={svelteLogo} alt="Logo"/>
  </div>
-  {#if editMode}<div class="edit-mode-banner">Edit Mode</div>{/if}

  <div class="puzzle-grid" style={`height: ${rows * cfg.totalW}px; width: ${cols * cfg.totalW}px;`}
       on:click={clickDiv} on:contextmenu={clickDiv} on:keypress={console.log} role="grid" tabindex="0"
@@ -271,57 +271,3 @@
    {#each ckpts as cp, i}<button on:click={() => restorePt(cp)}>{i + 1}</button>{/each}
  </div>
 </main>
-
-<style lang="sass">
-  main
-    display: flex
-    flex-direction: column
-    gap: 1em
-    padding: 1em
-    place-items: center
-
-  .heading
-    display: flex
-    justify-content: center
-    align-items: center
-    gap: 1em
-    will-change: filter
-    transition: filter 300ms
-
-    &:hover
-      filter: drop-shadow(0 0 2em #646cffaa)
-
-  .edit-mode-banner
-    font-size: 1.2em
-    text-align: center
-    color: #55c7e8
-
-  .title
-    font-size: 3em
-    line-height: 1.1
-
-  .logo
-    height: 3em
-    padding: 1.5em
-
-  .btn-div
-    display: flex
-    gap: 1em
-    flex-wrap: wrap
-    place-items: center
-
-  .color-picker
-    display: flex
-    flex-direction: column
-    padding: 1em 0 0 0
-    overflow: hidden
-    height: 42px
-    width: 30px
-
-    &.selected
-      border-color: #646cff
-
-    input
-      padding: 0
-      border: 0
-</style>
@@ -0,0 +1,109 @@
+@use "sass:color"
+@import "colors"
+  
+:root
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif
+  line-height: 1.5
+  font-weight: 400
+
+  color-scheme: dark
+  color: rgba(255, 255, 255, 0.758)
+  background-color: #242424
+
+  font-synthesis: none
+  text-rendering: optimizeLegibility
+  -webkit-font-smoothing: antialiased
+  -moz-osx-font-smoothing: grayscale
+
+a
+  font-weight: 500
+  color: $color-accent
+  text-decoration: inherit
+  &:hover
+    text-decoration: underline
+
+body
+  margin: 0
+  display: flex
+  place-items: center
+  min-width: 320px
+  min-height: 100vh
+
+#app
+  margin: 0 auto
+  padding: 2rem
+  text-align: center
+
+button
+  border-radius: 8px
+  border: 1px solid transparent
+  padding: 0.6em 1.2em
+  font-weight: 500
+  font-family: inherit
+  background-color: #1a1a1a
+  cursor: pointer
+  transition: all 0.25s
+
+  &:hover
+    color: $color-accent
+    transform: translateY(-2px)
+    filter: drop-shadow(0 0 0.5em color.scale($color-accent, $alpha: -90%))
+  
+  &:focus, &:focus-visible
+    outline: none
+
+main
+  display: flex
+  flex-direction: column
+  gap: 1em
+  padding: 1em
+  place-items: center
+
+.heading
+  font-family: "Caveat", cursive
+  font-size: 3em
+  background: $color-accent-strong
+  background: -webkit-linear-gradient(70deg, $color-accent-strong, $color-accent)
+  background: linear-gradient(70dge, $color-accent-strong, $color-accent)
+  -webkit-background-clip: text
+  -webkit-text-fill-color: transparent
+  line-height: 1
+
+  will-change: filter
+  transition: filter 300ms
+  filter: drop-shadow(0 0 1em color.scale($color-accent-strong, $alpha: -80%))
+  &:hover
+    filter: drop-shadow(0 0 2em color.scale($color-accent-strong, $alpha: -20%))
+
+.edit-mode-banner
+  font-size: 1.2em
+  text-align: center
+  color: $color-accent-strong
+
+.sub-heading
+  display: flex
+  place-items: center
+  gap: 10px
+  img
+    height: 1em
+
+.btn-div
+  display: flex
+  gap: 1em
+  flex-wrap: wrap
+  place-items: center
+
+.color-picker
+  display: flex
+  flex-direction: column
+  padding: 1em 0 0 0
+  overflow: hidden
+  height: 42px
+  width: 30px
+
+  &.selected
+    border-color: $color-accent
+
+  input
+    padding: 0
+    border: 0
@@ -1,69 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-#app {
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
@@ -0,0 +1,6 @@
+
+$color-dot: #aaa
+$color-line: #90A4AEFF
+$color-cross: #ff7f7f
+$color-accent-strong: #EF629F
+$color-accent: #EECDA3
@@ -1,12 +1,10 @@
@use "sass:color"
-
-$color-dot: #aaa
-$color-line: #90A4AEFF
-$color-cross: #ff7f7f
+@import "colors"

@debug color.scale($color-line, $alpha: -30%)

 .puzzle-grid
+  margin: 1em auto
  position: relative
  user-select: none

@@ -1,6 +1,7 @@
 import { mount } from 'svelte'
-import './app.scss'
+import './app.sass'
 import './global.sass'
+import './fonts/caveat.sass'
 import App from './App.svelte'

 const app = mount(App, {