From 7a8487ec011b161716280d46a3b2b1765cc40b85 Mon Sep 17 00:00:00 2001
From: Jan-Lukas Else <mail@jlelse.de>
Date: Thu, 20 May 2021 19:49:10 +0200
Subject: [PATCH] Improve CSS styles

---
 original-assets/styles/styles.scss | 16 +++++++++++++++-
 templates/assets/css/styles.css    | 19 ++++++++++++++++++-
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/original-assets/styles/styles.scss b/original-assets/styles/styles.scss
index 94b6928..d7aff3b 100644
--- a/original-assets/styles/styles.scss
+++ b/original-assets/styles/styles.scss
@@ -56,6 +56,11 @@ body {
   * {
     @include color(color, primary);
     max-width: 100%;
+
+    &::selection {
+      @include color(color, background);
+      @include color(background, primary);
+    }
   }
 }
 
@@ -88,6 +93,11 @@ button, input, textarea, select {
   text-decoration: none;
   font-size: 1rem;
   line-height: 1.5;
+  outline: none;
+
+  &:focus {
+    @include color-border(outline, 3px, solid, primary);
+  }
 }
 
 .button {
@@ -125,11 +135,15 @@ pre {
   white-space: pre-wrap;
 }
 
-:not(pre) > code {
+mark, :not(pre) > code {
   font-size: 1rem;
   // Invert
   @include color(color, background);
   @include color(background, primary);
+  &::selection {
+    @include color(color, primary);
+    @include color(background, background);
+  }
 }
 
 code {
diff --git a/templates/assets/css/styles.css b/templates/assets/css/styles.css
index fa19b96..c3c470a 100644
--- a/templates/assets/css/styles.css
+++ b/templates/assets/css/styles.css
@@ -35,6 +35,12 @@ body * {
   color: var(--primary, #000);
   max-width: 100%;
 }
+body *::selection {
+  color: #fff;
+  color: var(--background, #fff);
+  background: #000;
+  background: var(--primary, #000);
+}
 
 header {
   padding: 10px 0;
@@ -65,6 +71,11 @@ button, .button, input, textarea, select {
   text-decoration: none;
   font-size: 1rem;
   line-height: 1.5;
+  outline: none;
+}
+button:focus, .button:focus, input:focus, textarea:focus, select:focus {
+  outline: 3px solid #000;
+  outline: 3px solid var(--primary, #000);
 }
 
 form input, form textarea, form select {
@@ -85,13 +96,19 @@ pre {
   white-space: pre-wrap;
 }
 
-:not(pre) > code {
+mark, :not(pre) > code {
   font-size: 1rem;
   color: #fff;
   color: var(--background, #fff);
   background: #000;
   background: var(--primary, #000);
 }
+mark::selection, :not(pre) > code::selection {
+  color: #000;
+  color: var(--primary, #000);
+  background: #fff;
+  background: var(--background, #fff);
+}
 
 code {
   font-family: monospace;