2 Commits

  1. 9
      CHANGELOG.md
  2. 65
      assets/css/_colors.scss
  3. 44
      assets/css/app.scss
  4. 2
      mix.exs

9
CHANGELOG.md

@ -5,6 +5,15 @@ See [Conventional Commits](Https://conventionalcommits.org) for commit guideline
<!-- changelog -->
## [v0.29.0](https://git.inhji.de/inhji/mirage/compare/v0.28.1...v0.29.0) (2021-02-13)
### Features:
* simple wip dark/light mode
## [v0.28.1](https://git.inhji.de/inhji/mirage/compare/v0.28.0...v0.28.1) (2021-02-13)

65
assets/css/_colors.scss

@ -0,0 +1,65 @@
// @include https://github.com/hadalin/dark-mode-sass
$colors: (
light: (
background: #eee,
background-content: #fff,
primary-400: #acacac,
primary-500: #505050,
primary-600: #3c3c3c,
accent-500: #007bff,
accent-600: #0056b3,
),
dark: (
background: #222,
background-content: #111,
primary-400: #757575,
primary-500: #ccc,
primary-600: #e6e6e6,
accent-500: #1e8ad6,
accent-600: #3ba0e6,
)
);
$color-placeholder: 'here';
@function compose-color-variable($color-key) {
@return '--color-#{$color-key}';
}
:root {
@each $key, $value in map-get($colors, 'light') {
#{compose-color-variable($key)}: #{$value};
}
}
@media (prefers-color-scheme: dark) {
:root {
@each $key, $value in map-get($colors, 'dark') {
#{compose-color-variable($key)}: #{$value};
}
}
}
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if not $index {
@return $string;
}
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@function color-get($palette, $color-key) {
@return map-get(map-get($colors, $palette), $color-key);
}
@mixin color-assign($property, $color-key, $template: '') {
$fallback: #{color-get("light", $color-key)};
$var: var(#{compose-color-variable($color-key)});
#{$property}: if(str-length($template) == 0, $fallback, #{str-replace($template, $color-placeholder, $fallback)});
#{$property}: if(str-length($template) == 0, $var, #{str-replace($template, $color-placeholder, $var)});
}

44
assets/css/app.scss

@ -21,7 +21,6 @@ $color-warning: #fcf8e3;
$bg-danger: #a94442;
$color-danger: #f2dede;
$color-text: #ddd;
$border-base: #666;
/* === Fonts ===*/
@ -37,6 +36,7 @@ $border-base: #666;
@import "./phoenix";
@import "./nprogress";
@import "./colors";
/* === Base === */
@ -45,8 +45,8 @@ html {
}
body {
background: $bg-base;
color: $color-text;
@include color-assign(background-color, background-content);
@include color-assign(color, primary-500);
font-family: $font-content;
font-size: 1rem;
line-height: 1.5rem;
@ -69,7 +69,7 @@ h3 {
}
a {
color: $color-text;
@include color-assign(color, primary-500);
}
/* === Layout === */
@ -80,12 +80,12 @@ a {
main[role=main] {
padding: 0 2rem 2rem 2rem;
background: $bg-base;
@include color-assign(background-color, background);
}
footer {
padding: 2rem;
background: $bg-content;
@include color-assign(background-color, background-content);
}
.width-full {
@ -106,7 +106,7 @@ div + section {
/* === Navigation === */
nav[role=navigation] {
background: $bg-content;
@include color-assign(background-color, background-content);
line-height: 1.5em;
&:before {
@ -142,7 +142,7 @@ nav[role=navigation] {
transition: all 0.3s;
&:hover {
background: #3a3a3a;
@include color-assign(background-color, accent-500);
}
}
}
@ -152,9 +152,9 @@ aside.menu {
ul {
li {
@include color-assign(background-color, background-content);
padding-left: 2rem;
margin: 0 -2rem 0 -4rem;
background: $bg-content;
a {
display: inline-block;
@ -164,7 +164,7 @@ aside.menu {
text-decoration: none;
&:hover {
background: #3a3a3a;
@include color-assign(background-color, background);
}
}
}
@ -174,25 +174,27 @@ aside.menu {
/* === Styling === */
button[type=submit], a.button {
@include color-assign(background-color, background-content);
@include color-assign(color, primary-500);
display: inline-block;
color: white;
font-size: 1rem;
text-decoration: none;
border: 1px solid $border-base;
background: $bg-content;
@include color-assign(border-color, primary-400);
padding: 0.5rem 1rem;
margin: 0;
&:hover {
@include color-assign(color, primary-500);
background: $rainbow;
color: white;
border: 1px solid white;
@include color-assign(border-color, primary-400);
}
}
header.hero {
@include color-assign(background-color, background);
margin: 0 -2rem 0;
background: $bg-base;
padding: 2rem;
h1 {
@ -262,7 +264,7 @@ kbd {
display: flex;
padding: 1rem;
border: 1px solid $border-base;
background: $bg-content;
@include color-assign(background-color, background-content);
margin-bottom: 1rem;
a {
@ -303,7 +305,7 @@ kbd {
#modal {
padding: 2rem;
background: $bg-content;
@include color-assign(background-color, background-content);
position: absolute;
width: 60%;
}
@ -323,8 +325,8 @@ form {
input[type=url],
input[type=email],
input[type=password] {
background: $bg-content;
color: white;
@include color-assign(background-color, background-content);
@include color-assign(color, primary-500);
border: 1px solid $border-base;
margin-bottom: 1rem;
@ -359,6 +361,7 @@ article {
header {
border-bottom: 1px solid $border-base;
@include color-assign(border-color, background);
.title {
font-family: $font-heading;
@ -372,6 +375,7 @@ article {
footer {
border-top: 1px solid $border-base;
@include color-assign(border-color, background);
}
&:last-child {
@ -486,5 +490,5 @@ article {
/* === Helpers === */
.bg-content { background: $bg-content; }
.bg-base { background: $bg-base; }
.bg-content { @include color-assign(background-color, background-content); }
.bg-base { @include color-assign(background-color, background); }

2
mix.exs

@ -1,7 +1,7 @@
defmodule Mirage.MixProject do
use Mix.Project
@version "0.28.1"
@version "0.29.0"
def project do
[

Loading…
Cancel
Save