Sass Update

README.md

@@ -20,8 +20,7 @@ Check out `app-release.apk` over at the [GitHub Releases](https://github.com/Win
 ### Windows
 Check out `dateapp-windows-x86_64-setup.exe ` over at the [GitHub Releases](https://github.com/WinsDominoes/dateapp/releases/) page. 
 ### MacOS
-Check out `
-dateapp-macos-universal.dmg` over at the [GitHub Releases](https://github.com/WinsDominoes/dateapp/releases/) page. 
+Check out `dateapp-macos-universal.dmg` over at the [GitHub Releases](https://github.com/WinsDominoes/dateapp/releases/) page. 
 ### Linux
 
 #### tar.gz
@@ -31,11 +30,11 @@ Check out `dateapp-linux-x64.tar.gz ` over at the [GitHub Releases](https://gith
 Check out Amy's [https://github.com/AtiusAmy/net.winscloud.DateCalculator](https://github.com/AtiusAmy/net.winscloud.DateCalculator) for Flatpak version.
 
 ### Web
-Check out [https://datecalculator.winscloud.net](https://datecalculator.winscloud.net)
+Check out [https://dateapp.winscloud.net](https://dateapp.winscloud.net)
 
 ## Build
 - Install [Flutter](https://docs.flutter.dev/get-started/install)
-- Clone repository `git clone https://github.com/WinsDominoes/dateapp.git`
+- Clone repository `git clone https://git.winscloud.net/winsdominoes/dateapp.git`
 - Install required dependencies `flutter pub get`
 - Run one of these commands for platforms
   
@@ -47,5 +46,5 @@ Check out [https://datecalculator.winscloud.net](https://datecalculator.winsclou
 | MacOS          | `flutter build macos`   |
 
 ## Credits
-- [WinsDominoes (Win)](https://github.com/WinsDominoes) - Developer
+- [WinsDominoes (Win)](https://git.winscloud.net/winsdominoes) Developer
 - [AtiusAmy (Amy)](https://github.com/AtiusAmy) - Research & Development / Quality Control

_sass/_colors.scss

@@ -0,0 +1,100 @@
+:root {
+    --strawberry-100: #ff8c82;
+    --strawberry-300: #ed5353;
+    --strawberry-500: #c6262e;
+    --strawberry-700: #a10705;
+    --strawberry-900: #7a0000;
+  
+    --orange-100: #ffc27d;
+    --orange-300: #ffa154;
+    --orange-500: #f37329;
+    --orange-700: #cc3b02;
+    --orange-900: #a62100;
+  
+    --banana-100: #fff394;
+    --banana-300: #ffe16b;
+    --banana-500: #f9c440;
+    --banana-700: #d48e15;
+    --banana-900: #ad5f00;
+  
+    --lime-100: #d1ff82;
+    --lime-300: #9bdb4d;
+    --lime-500: #68b723;
+    --lime-700: #3a9104;
+    --lime-900: #206b00;
+  
+    --blueberry-100: #006fff;
+    --blueberry-300: #006fff;
+    --blueberry-500: #006fff;
+    --blueberry-700: #006fff;
+    --blueberry-900: #006fff;
+  
+    --blue-100: #99c1f1;
+    --blue-300: #62a0ea;
+    --blue-500: #3584e4;
+    --blue-700: #1c71d8;
+    --blue-900: #1a5fb4;
+    
+    --grape-100: #e4c6fa;
+    --grape-300: #cd9ef7;
+    --grape-500: #a56de2;
+    --grape-700: #7239b3;
+    --grape-900: #452981;
+  
+    --cocoa-100: #a3907c;
+    --cocoa-300: #8a715e;
+    --cocoa-500: #715344;
+    --cocoa-700: #57392d;
+    --cocoa-900: #3d211b;
+  
+    --silver-100: #fafafa;
+    --silver-300: #d4d4d4;
+    --silver-500: #abacae;
+    --silver-700: #7e8087;
+    --silver-900: #555761;
+  
+    --slate-100: #95a3ab;
+    --slate-300: #667885;
+    --slate-500: #485a6c;
+    --slate-700: #273445;
+    --slate-900: #0e141f;
+  
+    --black-100: #666666;
+    --black-300: #4d4d4d;
+    --black-500: #333333;
+    --black-700: #1a1a1a;
+    --black-900: #000000;
+  
+    --solarized-base01: #586e75;
+    --solarized-base02: #073642;
+    --solarized-base03: #002b36;
+    --solarized-base1: #93a1a1;
+    --solarized-base2: #eee8d5;
+    --solarized-base3: #fdf6e3;
+    --solarized-blue: #268bd2;
+    --solarized-cyan: #2aa198;
+    --solarized-green: #859900;
+    --solarized-orange: #cb4b16;
+    --solarized-red: #dc322f;
+    --solarized-yellow: #b58900;
+  
+    --bg-color: white;
+    --fg-color: var(--black-500);
+    --accent-color: var(--blueberry-700);
+    --header-bg-color: var(--blueberry-300);
+    --header-fg-color: var(--silver-100);
+    --secondary-bg-color: #f5f5f5; // Instead of making up a Silver 200
+    --secondary-fg-color: var(--black-300);
+    --warning-bg-color: var(--banana-300);
+    --warning-fg-color: var(--black-900);
+  }
+  
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --bg-color: var(--black-700);
+      --fg-color: var(--silver-300);
+      --accent-color: var(--blueberry-300);
+      --secondary-bg-color: var(--black-500);
+      --secondary-fg-color: var(--silver-300);
+    }
+  }

css/main.scss

@@ -0,0 +1,26 @@
+@charset "utf-8";
+
+// Global
+@import "colors";
+
+:root {
+    color-scheme: light dark;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body,
+html {
+  background-color: var(--bg-color);
+  color: var(--fg-color);
+  fill: var(--fg-color);
+  margin: 0;
+  overflow-x: hidden;
+}
+
+html {
+  // To blend with the footer on short pages
+  background-color: var(--secondary-bg-color);
+}