From b8526ac8a5d582d68c83c93ab8ea31c4150a4d47 Mon Sep 17 00:00:00 2001
From: Daniele Tonon <tonon@vitamino.it>
Date: Mon, 29 May 2023 20:48:15 +0200
Subject: [PATCH] Improve visual of links and toggles

---
 static/styles.css   | 47 ++++++++++++++++++++++++++++++++++++++++++---
 static/styles.scss  | 30 ++++++++++++++++++++++++++---
 templates/head.html |  2 +-
 3 files changed, 72 insertions(+), 7 deletions(-)

diff --git a/static/styles.css b/static/styles.css
index da39ef1..8657aa0 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -285,6 +285,18 @@ h1, h2 {
 .container .column_content .field {
   margin-bottom: 1.5rem;
 }
+.container .column_content .field a {
+  padding-bottom: 0.05rem;
+  text-decoration: none;
+}
+.theme--default .container .column_content .field a {
+  color: #373737;
+  border-bottom: 1px solid rgba(55, 55, 55, 0.24);
+}
+.theme--dark .container .column_content .field a {
+  color: #fafafa;
+  border-bottom: 1px solid rgba(250, 250, 250, 0.24);
+}
 .container .column_content .field .label {
   font-size: 0.8rem;
 }
@@ -330,6 +342,7 @@ h1, h2 {
 .container .column_content .field.last_notes a {
   display: block;
   text-decoration: none;
+  border-bottom: none;
 }
 .container .column_content .field.last_notes a.note {
   margin-bottom: 1rem;
@@ -376,12 +389,17 @@ h1, h2 {
   text-indent: -9999px;
   width: 2.6rem;
   height: 1.2rem;
-  background: #9a9a9a;
   display: inline-block;
   border-radius: 100px;
   position: relative;
   margin-right: 0.5rem;
 }
+.theme--default .container .column_content .field.advanced-switch-wrapper label:first-of-type {
+  background: #f3f3f3;
+}
+.theme--dark .container .column_content .field.advanced-switch-wrapper label:first-of-type {
+  background: #2d2d2d;
+}
 @media (max-width: 580px) {
   .container .column_content .field.advanced-switch-wrapper label:first-of-type {
     width: 3rem;
@@ -395,10 +413,15 @@ h1, h2 {
   left: 2px;
   width: 1rem;
   height: 1rem;
-  background: #fff;
   border-radius: 1rem;
   transition: 0.2s;
 }
+.theme--default .container .column_content .field.advanced-switch-wrapper label:first-of-type:after {
+  background: #373737;
+}
+.theme--dark .container .column_content .field.advanced-switch-wrapper label:first-of-type:after {
+  background: #fafafa;
+}
 @media (max-width: 580px) {
   .container .column_content .field.advanced-switch-wrapper label:first-of-type:after {
     width: 1.2rem;
@@ -415,9 +438,27 @@ h1, h2 {
   left: calc(100% - 2px);
   transform: translateX(-100%);
 }
+.theme--default .container .column_content .field.advanced-switch-wrapper input:checked + label:first-of-type:after {
+  background: #ffffff;
+}
+.theme--dark .container .column_content .field.advanced-switch-wrapper input:checked + label:first-of-type:after {
+  background: #373737;
+}
 .container .column_content .field.advanced-switch-wrapper label:first-of-type:active:after {
   width: 2rem;
 }
+.container .column_content .field.advanced-switch-wrapper label:last-of-type {
+  cursor: pointer;
+  font-size: 0.8rem;
+}
+.theme--default .container .column_content .field.advanced-switch-wrapper label:last-of-type {
+  border-bottom: 1px solid rgba(55, 55, 55, 0.24);
+  padding-bottom: 0.1rem;
+}
+.theme--dark .container .column_content .field.advanced-switch-wrapper label:last-of-type {
+  border-bottom: 1px solid rgba(250, 250, 250, 0.24);
+  padding-bottom: 0.1rem;
+}
 .container .column_content .field.content {
   line-height: 1.4rem;
 }
@@ -489,7 +530,7 @@ h1, h2 {
 }
 .container .column_clients {
   flex-basis: 25%;
-  margin-top: 2rem;
+  margin-top: 1rem;
 }
 @media (max-width: 580px) {
   .container .column_clients {
diff --git a/static/styles.scss b/static/styles.scss
index 4bc5aa9..590579a 100644
--- a/static/styles.scss
+++ b/static/styles.scss
@@ -320,6 +320,14 @@ a {
     }
     .field {
       margin-bottom: 1.5rem;
+      a {
+        padding-bottom: 0.05rem;
+        text-decoration: none;
+        @include themed() {
+          color: t($base7);
+          border-bottom: 1px solid rgba( t($base7), .24 );
+        }
+      }
       .label {
         font-size: 0.8rem;
         @include themed() {
@@ -354,6 +362,7 @@ a {
         a {
           display: block;
           text-decoration: none;
+          border-bottom: none;
           &.note {
             margin-bottom: 1rem;
             .published_at {
@@ -396,7 +405,9 @@ a {
           text-indent: -9999px;
           width: 2.6rem;
           height: 1.2rem;
-          background: $color-base5;
+          @include themed() {
+            background: t($over-bg);
+          }
           display: inline-block;
           border-radius: 100px;
           position: relative;
@@ -414,7 +425,9 @@ a {
           left: 2px;
           width: 1rem;
           height: 1rem;
-          background: #fff;
+          @include themed() {
+            background: t($base7);
+          }
           border-radius: 1rem;
           transition: 0.2s;
           @media (max-width: 580px) {
@@ -432,11 +445,22 @@ a {
         input:checked + label:first-of-type:after {
           left: calc(100% - 2px);
           transform: translateX(-100%);
+          @include themed() {
+            background: t($base1);
+          }
         }
 
         label:first-of-type:active:after {
           width: 2rem;
         }
+        label:last-of-type {
+          cursor: pointer;
+          font-size: 0.8rem;
+          @include themed() {
+            border-bottom: 1px solid rgba( t($base7), .24 );
+            padding-bottom: 0.1rem;
+          }
+        }
       }
       &.content {
         line-height: 1.4rem;
@@ -491,7 +515,7 @@ a {
 
   .column_clients {
     flex-basis: 25%;
-    margin-top: 2rem;
+    margin-top: 1rem;
     @media (max-width: 580px) {
       position: fixed;
       // top: calc(100vh - 4.6rem);
diff --git a/templates/head.html b/templates/head.html
index aafae05..4e5f943 100644
--- a/templates/head.html
+++ b/templates/head.html
@@ -62,5 +62,5 @@
   {{end}}
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link rel="stylesheet" href="/njump/static/styles.css?v=20230529" />
+  <link rel="stylesheet" href="/njump/static/styles.css?v=20230530" />
 </head>