Merge pull request #43 from krymtkts:feature/color-theme

Set color schema to Solaried Dark

NOTICE.md

@@ -55,3 +55,29 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ```
+
+## Solarized
+
+**Source**: [altercation/solarized: precision color scheme for multiple applications (terminal, vim, etc.) with both dark/light modes](https://github.com/altercation/solarized?tab=MIT-1-ov-file#readme)
+
+```txt
+Copyright (c) 2011 Ethan Schoonover
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+```

README.md

@@ -19,6 +19,7 @@ GitHub Pages deployment is [here](https://krymtkts.github.io/blog-fable/index.ht
 - [x] RSS feed
 - [x] Sitemap
 - [x] Dev server
+- [x] Color scheme
 
 ## Building and running the app
 
@@ -31,6 +32,7 @@ GitHub Pages deployment is [here](https://krymtkts.github.io/blog-fable/index.ht
 
 This repository incorporates parts of the following open source software:
 
-- project based on [fable-compiler/static-web-generator: Simple Fable Node.js app to generate static pages](https://github.com/fable-compiler/static-web-generator)
+- The project based on [fable-compiler/static-web-generator: Simple Fable Node.js app to generate static pages](https://github.com/fable-compiler/static-web-generator)
 - `Node.Extra.fs` is originally written in [MangelMaxime/Nacara](https://github.com/MangelMaxime/Nacara)
 - `dev-server.fsx` based on [sergey-tihon/suave-angular2-demo: Demo site for Suave 1.0 + Angular 2.0.0-beta.0](https://github.com/sergey-tihon/suave-angular2-demo)
+- Color schema based on [Solarized](https://ethanschoonover.com/solarized/).

package.json

@@ -3,19 +3,23 @@
   "type": "module",
   "scripts": {
     "postinstall": "dotnet tool restore",
+    "build-css": "sass --style=compressed --no-source-map ./sass/style.scss ./docs/blog-fable/css/style.css",
     "serve": "dotnet fsi ./dev-server.fsx",
-    "build": "dotnet fable src --runScript",
+    "build-fable": "dotnet fable src --runScript",
+    "build": "npm run build-css && npm run build-fable",
     "dev": "npm run build dev && npm run serve"
   },
   "version": "1.0.0",
   "devDependencies": {
     "@types/highlightjs": "^9.12.2",
     "@types/marked": "^4.3.0",
+    "bulma": "^0.9.4",
     "highlight.js": "^11.7.0",
     "marked": "^4.3.0",
     "marked-highlight": "^1.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "sass": "^1.66.1",
     "ts2fable": "^0.7.1",
     "yaml": "^2.2.2"
   }

sass/style.scss

@@ -0,0 +1,52 @@
+@charset "utf-8";
+
+// NOTE: based on https://ethanschoonover.com/solarized/
+$base03    :#002b36;
+$base02    :#073642;
+$base01    :#586e75;
+$base00    :#657b83;
+$base0     :#839496;
+$base1     :#93a1a1;
+$base2     :#eee8d5;
+$base3     :#fdf6e3;
+$yellow    :#b58900;
+$orange    :#cb4b16;
+$red       :#dc322f;
+$magenta   :#d33682;
+$violet    :#6c71c4;
+$blue      :#268bd2;
+$cyan      :#2aa198;
+$green     :#859900;
+
+@use "../node_modules/bulma/bulma.sass" with (
+    // NOTE: Solarized.
+    // $black: $base03,
+    // $black-bis: $base02,
+    // $black-ter: $base02,
+    // $grey-darker: $base00,
+    // $grey-dark: $base00,
+    // $grey: $base01,
+    // $grey-light: $base0,
+    // $grey-lighter: $base1,
+    // $grey-lightest: $base1,
+    // $white-ter: $base2,
+    // $white-bis: $base2,
+    // $white: $base3,
+    // NOTE: Solarized Dark.
+    $black: $base3,
+    $black-bis: $base2,
+    $black-ter: $base2,
+    $grey-darker: $base1,
+    $grey-dark: $base1,
+    $grey: $base0,
+    $grey-light: $base00,
+    $grey-lighter: $base01,
+    $grey-lightest: $base01,
+    $white-ter: $base02,
+    $white-bis: $base02,
+    $white: $base03,
+
+    // NOTE: set alternative colors.
+    $turquoise: $cyan,
+    $purple: $violet,
+);