Skip to content

Commit

Permalink
Merge pull request #168 from krymtkts/feature/bulma-v1
Browse files Browse the repository at this point in the history 
Update customized style style.scss to suit Bulma 1.0.0
  • Loading branch information
@krymtkts
krymtkts authored Mar 24, 2024
2 parents b51df81 + 62a751e commit 37cb0b7
Show file tree
Hide file tree
Showing 7 changed files with 283 additions and 159 deletions.
49 changes: 26 additions & 23 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
},
"version": "1.0.0",
"devDependencies": {
"bulma": "^0.9.4",
"bulma": "^1.0.0",
"sass": "^1.72.0",
"ts2fable": "^0.7.1"
},
Expand Down
225 changes: 142 additions & 83 deletions sass/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,86 +1,144 @@
@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;

// // NOTE: Solarized Light.
// $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,
// $background: $base3,
// $code: $base01,
// $tag-background-color: $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;
$background: $base03;
$code: $base0;
$tag-background-color: $base03;
$hr-background-color: $base01;

$orange: $orange;
$yellow: $yellow;
$green: $green;
$turquoise: $cyan;
$cyan: $cyan;
$blue: $blue;
$purple: $violet;
$red: $red;

$code-size: 1em;
$link-hover: $violet;
$section-padding: 1.5rem;
$section-padding-desktop: 1.5rem;
$body-line-height: 1.7;

@import "../node_modules/bulma/sass/utilities/_all.sass";
@import "../node_modules/bulma/sass/base/_all.sass";
@import "../node_modules/bulma/sass/components/navbar.sass";
@import "../node_modules/bulma/sass/components/tabs.sass";
@import "../node_modules/bulma/sass/elements/button.sass";
@import "../node_modules/bulma/sass/elements/container.sass";
@import "../node_modules/bulma/sass/elements/content.sass";
@import "../node_modules/bulma/sass/elements/image.sass";
@import "../node_modules/bulma/sass/elements/tag.sass";
@import "../node_modules/bulma/sass/elements/title.sass";
@import "../node_modules/bulma/sass/form/shared.sass";
@import "../node_modules/bulma/sass/form/checkbox-radio.sass";
@import "../node_modules/bulma/sass/layout/footer.sass";
@import "../node_modules/bulma/sass/layout/section.sass";
$sl-base03: #002b36;
$sl-base02: #073642;
$sl-base01: #586e75;
$sl-base00: #657b83;
$sl-base0: #839496;
$sl-base1: #93a1a1;
$sl-base2: #eee8d5;
$sl-base3: #fdf6e3;
$sl-yellow: #b58900;
$sl-orange: #cb4b16;
$sl-red: #dc322f;
$sl-magenta: #d33682;
$sl-violet: #6c71c4;
$sl-blue: #268bd2;
$sl-cyan: #2aa198;
$sl-green: #859900;

@use "../node_modules/bulma/sass" as * with (
$orange: $sl-orange,
$yellow: $sl-yellow,
$green: $sl-green,
$turquoise: $sl-cyan,
$cyan: $sl-cyan,
$blue: $sl-blue,
$purple: $sl-violet,
$red: $sl-red,

$code-size: 1em,

$body-line-height: 1.7,

$section-padding: 1.5rem,
$section-padding-desktop: 1.5rem
);

@mixin light-theme {
// NOTE: Solarized Light.
--bulma-black: #{$sl-base03};
--bulma-black-bis: #{$sl-base02};
--bulma-black-ter: #{$sl-base02};
--bulma-grey-darker: #{$sl-base00};
--bulma-grey-dark: #{$sl-base00};
--bulma-grey: #{$sl-base01};
--bulma-grey-light: #{$sl-base0};
--bulma-grey-lighter: #{$sl-base1};
--bulma-grey-lightest: #{$sl-base1};
--bulma-white-ter: #{$sl-base2};
--bulma-white-bis: #{$sl-base2};
--bulma-white: #{$sl-base3};

--bulma-text: #{$sl-base01};
--bulma-text-strong: #{$sl-base01};

--bulma-scheme-main: #{$sl-base3};
--bulma-scheme-main-bis: #{$sl-base2};
--bulma-scheme-main-ter: #{$sl-base2};

--bulma-scheme-h: 44;
--bulma-scheme-s: 87%;
--bulma-scheme-l: 94%;

--bulma-background-l: 94%;

--bulma-scheme-main-s: 87%;
--bulma-scheme-main-bis-s: 87%;
--bulma-scheme-main-ter-s: 87%;
--bulma-scheme-main-l: 94%;
--bulma-scheme-main-bis-l: 94%;
--bulma-scheme-main-ter-l: 94%;

--bulma-code: #{$sl-base00};

--bulma-hr-background-color: #{$sl-base1};

--bulma-border: #{$sl-base1};
}

@mixin dark-theme {
// NOTE: Solarized Dark.
--bulma-black: #{$sl-base3};
--bulma-black-bis: #{$sl-base2};
--bulma-black-ter: #{$sl-base2};
--bulma-grey-darker: #{$sl-base1};
--bulma-grey-dark: #{$sl-base1};
--bulma-grey: #{$sl-base0};
--bulma-grey-light: #{$sl-base00};
--bulma-grey-lighter: #{$sl-base01};
--bulma-grey-lightest: #{$sl-base01};
--bulma-white-ter: #{$sl-base02};
--bulma-white-bis: #{$sl-base02};
--bulma-white: #{$sl-base03};

--bulma-text: #{$sl-base1};
--bulma-text-strong: #{$sl-base1};

--bulma-scheme-main: #{$sl-base03};
--bulma-scheme-main-bis: #{$sl-base02};
--bulma-scheme-main-ter: #{$sl-base02};

--bulma-scheme-h: 192;
--bulma-scheme-s: 100%;
--bulma-scheme-l: 11%;

--bulma-background-l: 11%;

--bulma-scheme-main-s: 100%;
--bulma-scheme-main-bis-s: 100%;
--bulma-scheme-main-ter-s: 100%;
--bulma-scheme-main-l: 11%;
--bulma-scheme-main-bis-l: 11%;
--bulma-scheme-main-ter-l: 11%;

--bulma-code: #{$sl-base0};

--bulma-hr-background-color: #{$sl-base01};

--bulma-border: #{$sl-base01};
}

@media (prefers-color-scheme: light) {
:root {
@include light-theme();
}

[data-theme="dark"] {
@include dark-theme();
}
}

@media (prefers-color-scheme: dark) {
:root {
@include dark-theme();
}

[data-theme="light"] {
@include light-theme();
}
}

// NOTE: adjust non-parameterized styles.
.content a {
Expand All @@ -100,8 +158,9 @@ code {
}
code,
pre,
.tag:not(body) {
border: 1px solid $grey-lighter;
.tag:not(body),
a.button {
border: 1px solid $sl-base01;
border-radius: $radius;
}
pre code {
Expand All @@ -114,7 +173,7 @@ pre code {
}
}
.date {
color: $base01;
color: $sl-base01;
}
.prev a:before {
content: "\2190";
Expand Down
2 changes: 2 additions & 0 deletions src/App.fsproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,14 @@
<Compile Include="Node.Extra.fs" />
<Compile Include="Common.fs" />
<Compile Include="Dev.fs" />
<Compile Include="Handler.fs" />
<Compile Include="Generator.fs" />
<Compile Include="App.fs" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="Fable.Browser.Dom" Version="2.16.0" />
<PackageReference Include="Fable.Browser.WebSocket" Version="1.3.0" />
<PackageReference Include="Fable.Browser.WebStorage" Version="1.2.0" />
<PackageReference Include="Fable.Core" Version="4.3.0" />
<PackageReference Include="Fable.Node" Version="1.2.0" />
<PackageReference Include="Fable.Promise" Version="3.2.0" />
Expand Down
Loading

0 comments on commit 37cb0b7

Please sign in to comment.