~jan0sch/smederee

Showing details for patch 663c1c2ce728b1b2ccc2abc6cc94f6a4cfa1963c.
2023-05-08 (Mon), 12:53 PM - Jens Grassel - 663c1c2ce728b1b2ccc2abc6cc94f6a4cfa1963c

Adjust colours for more contrast.

- largely remove nord colour palette
- switch to generated monochromatic palette
- switch diff file indicator colour from white to nearly black
Summary of changes
4 files modified with 68 lines added and 50 lines removed
  • modules/hub/src/main/resources/assets/css/colours.css with 9 added and 0 removed lines
  • modules/hub/src/main/resources/assets/css/landingpage.css with 15 added and 11 removed lines
  • modules/hub/src/main/resources/assets/css/main.css with 40 added and 38 removed lines
  • modules/hub/src/main/scala/de/smederee/hub/VcsRepositoryRoutes.scala with 4 added and 1 removed lines
diff -rN -u old-smederee/modules/hub/src/main/resources/assets/css/colours.css new-smederee/modules/hub/src/main/resources/assets/css/colours.css
--- old-smederee/modules/hub/src/main/resources/assets/css/colours.css	2025-01-30 22:48:04.560803285 +0000
+++ new-smederee/modules/hub/src/main/resources/assets/css/colours.css	2025-01-30 22:48:04.560803285 +0000
@@ -1,4 +1,13 @@
 :root {
+  /* Monochromatic palette generated via
+   * https://venngage.com/tools/accessible-color-palette-generator
+   * Best with black foreground colour for text.
+   */
+  --background0: #F2F7FC;
+  --background1: #F0F4F9;
+  --background2: #ECEFF4;
+  --background3: #E2E5EA;
+  --background4: #D9DCE1;
   /* Colours from Nord CSS theme 0.2.0
    *
    * See https://www.nordtheme.com/docs/colors-and-palettes for details.
diff -rN -u old-smederee/modules/hub/src/main/resources/assets/css/landingpage.css new-smederee/modules/hub/src/main/resources/assets/css/landingpage.css
--- old-smederee/modules/hub/src/main/resources/assets/css/landingpage.css	2025-01-30 22:48:04.560803285 +0000
+++ new-smederee/modules/hub/src/main/resources/assets/css/landingpage.css	2025-01-30 22:48:04.560803285 +0000
@@ -5,7 +5,7 @@
 
 body {
   line-height: 1.7em;
-  color: var(--nord1);
+  color: black;
   font-size: 13px;
 }
 
@@ -16,7 +16,7 @@
 h5,
 h6,
 label {
-  color: var(--nord1);
+  color: black;
 }
 
 .pure-img-responsive {
@@ -57,7 +57,7 @@
 }
 
 .splash-container {
-  background: var(--nord3);
+  background: var(--background0);
   z-index: 1;
   overflow: hidden;
   /* The following styles are required for the "scroll-over" effect */
@@ -79,12 +79,16 @@
   text-transform: uppercase;
 }
 
+.splash a:hover {
+  background-color: var(--background4);
+}
+
 /* This is the main heading that appears on the blue section */
 .splash-head {
   font-size: 20px;
   font-weight: bold;
-  color: var(--nord5);
-  border: 3px solid var(--nord5);
+  color: black;
+  border: 3px solid black;
   padding: 1em 1.6em;
   font-weight: 100;
   border-radius: 5px;
@@ -93,14 +97,14 @@
 
 /* This is the subheading that appears on the blue section */
 .splash-subhead {
-  color: var(--nord5);
+  color: black;
   letter-spacing: 0.05em;
   opacity: 0.8;
 }
 
 .content-wrapper {
   /* These styles are required for the "scroll-over" effect */
-  background: var(--nord5);
+  background: var(--background4);
   min-height: 12%;
   position: absolute;
   top: 87%;
@@ -120,19 +124,19 @@
 }
 
 .content-head-ribbon {
-  color: var(--nord5);
+  color: black;
 }
 
 .content-subhead {
-  color: var(--nord10);
+  color: black;
 }
 .content-subhead i {
   margin-right: 7px;
 }
 
 .ribbon {
-  background: var(--nord0);
-  color: var(--nord7);
+  background: var(--background0);
+  color: black;
 }
 
 @media (min-width: 48em) {
diff -rN -u old-smederee/modules/hub/src/main/resources/assets/css/main.css new-smederee/modules/hub/src/main/resources/assets/css/main.css
--- old-smederee/modules/hub/src/main/resources/assets/css/main.css	2025-01-30 22:48:04.560803285 +0000
+++ new-smederee/modules/hub/src/main/resources/assets/css/main.css	2025-01-30 22:48:04.560803285 +0000
@@ -7,16 +7,16 @@
 }
 
 html, body {
-  background-color: var(--nord6);
-  color: var(--nord1);
+  background-color: var(--background0);
+  color: black;
 }
 
 html a {
-  color: var(--nord9);
+  color: black;
 }
 
 html a:hover {
-  background-color: var(--nord4);
+  background-color: var(--background0);
 }
 
 html a.pure-menu-heading:hover {
@@ -24,8 +24,8 @@
 }
 
 main {
-  background-color: var(--nord6);
-  color: var(--nord1);
+  background-color: var(--background0);
+  color: black;
   /*margin-left: 1em;*/
   /*margin-right: 1em;*/
 }
@@ -92,7 +92,7 @@
 .alert {
   border: 1px solid;
   border-radius: 0.375rem;
-  color: var(--nord5);
+  color: black;
   padding: 5px;
   position: relative;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
@@ -103,7 +103,7 @@
 }
 
 .alert-info {
-  background-color: var(--nord8);
+  background-color: var(--background4);
 }
 
 .alert-secondary {
@@ -130,7 +130,7 @@
 }
 
 .footer {
-  background: var(--nord0);
+  background: var(--background0);
   /*position: fixed;*/
   bottom: 0;
   width: 100%;
@@ -138,7 +138,7 @@
 }
 
 .footer .pure-menu .pure-menu-link {
-  color: var(--nord7);
+  color: black;
 }
 
 .home-menu {
@@ -146,10 +146,10 @@
   box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
 }
 .home-menu {
-  background-color: var(--nord10);
+  background-color: var(--background4);
 }
 .home-menu .pure-menu-heading {
-  color: var(--nord5);
+  color: black;
   font-weight: 400;
   font-size: 120%;
 }
@@ -157,20 +157,21 @@
   padding: 0.5em 0.25em;
 }
 .home-menu .pure-menu-selected a {
-  color: var(--nord5);
+  color: black;
 }
 .home-menu a {
-  color: var(--nord4);
+  color: black;
 }
 .home-menu li a:hover,
 .home-menu li a:focus {
   background: none;
   border: none;
-  color: var(--nord6);
+  color: black;
+  text-decoration: underline;
 }
 
 .repo-summary-description {
-  background-color: var(--nord4);
+  background-color: var(--background2);
   padding: 0em 0.5em 0em 0.5em;
 }
 
@@ -179,7 +180,7 @@
 }
 
 .account-settings-description {
-  background-color: var(--nord4);
+  background-color: var(--background2);
   padding: 0em 0.5em 0em 0.5em;
 }
 
@@ -226,7 +227,7 @@
 }
 
 .patch {
-  background-color: var(--nord4);
+  background-color: var(--background2);
   margin: 0em 0em 1em 0em;
   padding: 0em 0.25em 0em 0.25em;
 }
@@ -274,15 +275,16 @@
 }
 
 .pure-button {
-  background-color: var(--nord4);
+  background-color: var(--background2);
+  color: black;
 }
 
 .pure-button-primary {
-  background-color: var(--nord8);
+  background-color: var(--background2);
 }
 
 .pure-button-secondary {
-  background-color: var(--nord9);
+  background-color: var(--background2);
 }
 
 .pure-button-success {
@@ -299,29 +301,29 @@
 }
 
 .pure-menu-link {
-  color: var(--nord3);
+  color: black;
 }
 
 .pure-menu-active > .pure-menu-link, .pure-menu-link:focus, .pure-menu-link:hover {
-  background-color: var(--nord4);
-  color: var(--nord3);
+  background-color: var(--background2);
+  color: black;
 }
 
 .pure-table {
-  border: 1px solid var(--nord4);
+  border: 1px solid var(--background2);
 }
 
 .pure-table thead {
-  background-color: var(--nord5);
-  color: var(--nord1);
+  background-color: var(--background4);
+  color: black;
 }
 
 .pure-table td, .pure-table th {
-  border-left: 1px solid var(--nord4);
+  border-left: 1px solid var(--background2);
 }
 
 .pure-table-horizontal td, .pure-table-horizontal th {
-  border-bottom: 1px solid var(--nord4);
+  border-bottom: 1px solid var(--background2);
 }
 
 .todo-default {
@@ -370,13 +372,13 @@
   display: block;
   overflow-x: auto;
   padding: 0.5em;
-  color: var(--nord1);
-  background: var(--nord4) none repeat scroll 0% 0%;
+  color: black;
+  background: var(--background2) none repeat scroll 0% 0%;
 }
 
 pre.repository-patch-content {
-  background: var(--nord4) none repeat scroll 0% 0%;
-  color: var(--nord1);
+  background: var(--background2) none repeat scroll 0% 0%;
+  color: black;
   display: block;
   overflow-x: auto;
   padding: 0.5em;
@@ -396,19 +398,19 @@
 }
 
 tbody.repository-file-content {
-  color: var(--nord1);
-  background: var(--nord4) none repeat scroll 0% 0%;
+  color: black;
+  background: var(--background2) none repeat scroll 0% 0%;
 }
 
 .repository-markdown-file-content code {
-  background: var(--nord4);
+  background: var(--background2);
   white-space: pre-wrap;
   word-break: break-all;
   word-wrap: break-word;
 }
 
 .repository-markdown-file-content pre {
-  background: var(--nord4);
+  background: var(--background2);
   padding: 0.25em 0.5em;
 }
 
@@ -428,7 +430,7 @@
 
 td.code-line-number a:hover {
   cursor: pointer;
-  background: var(--nord6);
+  background: var(--background4);
 }
 
 tr.code-line {
diff -rN -u old-smederee/modules/hub/src/main/scala/de/smederee/hub/VcsRepositoryRoutes.scala new-smederee/modules/hub/src/main/scala/de/smederee/hub/VcsRepositoryRoutes.scala
--- old-smederee/modules/hub/src/main/scala/de/smederee/hub/VcsRepositoryRoutes.scala	2025-01-30 22:48:04.560803285 +0000
+++ new-smederee/modules/hub/src/main/scala/de/smederee/hub/VcsRepositoryRoutes.scala	2025-01-30 22:48:04.564803291 +0000
@@ -692,6 +692,9 @@
       cleanedPatchDiff <- Sync[F].delay(darcsDiff.stdout.toList.mkString.split(patchCutMarker)(0))
       patchDetails     <- Sync[F].delay(cleanedPatchDiff)
       htmlPatchDetails <- Sync[F].delay(new UtilsAnsiHtml().convertAnsiToHtml(patchDetails))
+      cleanedHtmlPatchDetails <- Sync[F].delay(
+        htmlPatchDetails.replaceAll("""style="color: white;"""", """style="color: #121212;"""")
+      )
       branches <- repoAndId.map(_._2) match {
         case Some(repoId) => vcsMetadataRepo.findVcsRepositoryBranches(repoId).compile.toList
         case _            => Sync[F].delay(List.empty)
@@ -712,7 +715,7 @@
             views.html
               .showRepositoryPatch(baseUri, lang = language)(actionBaseUri, csrf, patch.map(_.name.toString), user)(
                 patch,
-                htmlPatchDetails,
+                cleanedHtmlPatchDetails,
                 repo,
                 branches
               )