Style improvements

simonwep · Jan 6, 2025 · edea0a2 · edea0a2
1 parent cda878b
commit edea0a2
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 29 deletions.
diff --git a/index.html b/index.html
@@ -42,9 +42,6 @@
               content="Simple and lightweight library to realize visual DOM Selections, like on your Desktop. No jQuery. Supports any CSS library, e.g. Bootstrap. Including vertical & horizontal scroll support.">
         <meta property="twitter:image" content="st/favicon.png">
 
-        <!-- Analytics -->
-        <script async src="https://ackee.reinisch.io/tracker.js" data-ackee-server="https://ackee.reinisch.io" data-ackee-domain-id="c86e5a83-6487-4244-84c6-28b5bd66e588"></script>
-
         <title>Selection JS</title>
 
         <!-- Icons -->
@@ -83,11 +80,11 @@ <h1>Viselect</h1>
                     <p>Hold <span class="key">ctrl</span> / <span class="key">⌘</span> to make multiple selections.</p>
                 </div>
 
-                <h2>Define multiple boundaries at once</h2>
+                <h2>Define multiple boundaries at once 🪄</h2>
                 <section class="boxes green"></section>
                 <section class="boxes blue"></section>
 
-                <h2>Select while scrolling</h2>
+                <h2>Select while scrolling 🖱️</h2>
                 <section class="boxes red"></section>
             </section>
         </main>

diff --git a/main.mjs b/main.mjs
@@ -35,7 +35,7 @@ const selection = new SelectionArea({
 });
 
 // Prevent flickering
-document.body.style.display = 'unset';
+document.body.style.removeProperty('display');
 
 // Log version
 console.log(`Using Viselect v${SelectionArea.version}`);
diff --git a/styles.css b/styles.css
@@ -14,9 +14,9 @@
 }
 
 :root {
+    --font: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
     --c-text: #c2c5eb;
     --c-primary: #8d92ff;
-
     --cta-button-gradient: linear-gradient(137deg, #8708df, #2077db, #3cecd5);
 }
 
@@ -29,11 +29,13 @@
 html,
 body {
     height: 100%;
+    margin: 0;
+    padding: 0;
 }
 
 body {
     background: #0a0e21;
-    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+    font-family: var(--font);
     margin: 0 15px;
 }
 
@@ -94,30 +96,30 @@ header a:hover::before {
     transform: none;
 }
 
-h2 {
-    margin: 30px 0 15px;
-    font-weight: 400;
-    font-size: 17px;
-    text-align: center;
-    color: var(--c-text);
-}
-
 main {
     width: 100%;
     max-width: 830px;
     margin: 1.5em auto;
     padding-bottom: 10rem;
 }
 
-main section.demo .info {
+.demo h2 {
+    margin: 30px 0 15px;
+    font-weight: 400;
+    font-size: 17px;
+    text-align: center;
+    color: var(--c-text);
+}
+
+.demo .info {
     text-align: center;
     margin: 1em 0 2em 0;
     font-size: 13px;
     line-height: 2em;
     color: var(--c-text);
 }
 
-main .boxes {
+.demo .boxes {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-evenly;
@@ -127,12 +129,12 @@ main .boxes {
     user-select: none;
 }
 
-main .boxes.green,
-main .boxes.blue {
+.demo .boxes.green,
+.demo .boxes.blue {
     margin-bottom: 20px;
 }
 
-main .boxes.red {
+.demo .boxes.red {
     display: grid;
     grid-template-columns: repeat(28, 1fr);
     grid-gap: 0.4em;
@@ -143,11 +145,11 @@ main .boxes.red {
     padding: 10px;
 }
 
-main .boxes.red > div {
+.demo .boxes.red > div {
     margin: 0;
 }
 
-main .boxes div {
+.demo .boxes div {
     height: 50px;
     width: 50px;
     margin: 3px;
@@ -156,32 +158,32 @@ main .boxes div {
     cursor: pointer;
 }
 
-main .boxes.green div.selected {
+.demo .boxes.green div.selected {
     background: linear-gradient(45deg, #78b2ff, #218ad9);
 }
 
-main .boxes.blue div.selected {
+.demo .boxes.blue div.selected {
     background: linear-gradient(45deg, #9e91ef, #5c51b4);
 }
 
-main .boxes.red div.selected {
+.demo .boxes.red div.selected {
     background: linear-gradient(45deg, #ff74f0, #a114a5);
 }
 
-.selection-area {
+.demo .selection-area {
     background: rgba(46, 115, 252, 0.11);
     border: 1px solid rgba(98, 155, 255, 0.85);
     border-radius: 0.15em;
 }
 
-main section.demo .info p {
+.demo .info p {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
 }
 
-.key {
+.demo .key {
     display: inline-block;
     font-weight: bold;
     text-transform: uppercase;