dark mode
This commit is contained in:
parent
42950af33f
commit
00841cfaf7
7 changed files with 141 additions and 41 deletions
28
README.md
28
README.md
|
@ -1,25 +1,33 @@
|
||||||
brut
|
brut
|
||||||
=====
|
=====
|
||||||
|
|
||||||
a tiny framework that makes websites brut
|
a tiny framework that makes websites *brut*
|
||||||
|
|
||||||
Written in LESS and Sass, compiled to CSS.
|
Written in LESS, compiled to CSS.
|
||||||
|
|
||||||
|
Forked from [Min](http://mincss.com)
|
||||||
|
|
||||||
### License
|
### License
|
||||||
|
|
||||||
MIT licensed.
|
MIT licensed.
|
||||||
|
|
||||||
### Building the latest Min
|
### Building the latest BRUT
|
||||||
|
|
||||||
WARNING!
|
If you have [`nix`](https://nixos.org/nix) installed.
|
||||||
This will build the latest, pre-release version of Min.
|
|
||||||
It may be broken.
|
|
||||||
If you want to use an already-built Min, it's available in the file entireframework.min.css as well as
|
|
||||||
through the [downloads page](http://mincss.com/download.html).
|
|
||||||
|
|
||||||
You must have lessc (to compile the LESS, obviously) and Java (to run YUI compressor) installed.
|
```
|
||||||
|
nix develop
|
||||||
|
```
|
||||||
|
|
||||||
|
Then
|
||||||
|
|
||||||
|
```
|
||||||
|
./build.sh
|
||||||
|
```
|
||||||
|
|
||||||
|
If you don't have `nix` you need to manually install [`lessc`](https://lesscss.org)
|
||||||
|
and [`minify`](https://www.minifier.org).
|
||||||
|
|
||||||
bash build.sh
|
|
||||||
|
|
||||||
### World's smallest? Really?
|
### World's smallest? Really?
|
||||||
|
|
||||||
|
|
2
brut.min.css
vendored
2
brut.min.css
vendored
File diff suppressed because one or more lines are too long
13
h/docs.html
13
h/docs.html
|
@ -28,14 +28,21 @@
|
||||||
<img src="img/brutalisme.jpg" alt="brutalisme"/>
|
<img src="img/brutalisme.jpg" alt="brutalisme"/>
|
||||||
<h2>Inside Grid</h2>
|
<h2>Inside Grid</h2>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="block c4">
|
<div class="c4">
|
||||||
|
<div class="block">
|
||||||
Inside a block.
|
Inside a block.
|
||||||
<img src="img/brutalisme.jpg" alt="brutalisme"/>
|
<img src="img/brutalisme.jpg" alt="brutalisme"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c4"></div>
|
<div class="c4">
|
||||||
<div class="card c4">
|
Direct in column:
|
||||||
|
<img src="img/brutalisme.jpg" alt="brutalisme"/>
|
||||||
|
</div>
|
||||||
|
<div class="c4">
|
||||||
|
<div class="card">
|
||||||
Inside a card.
|
Inside a card.
|
||||||
<img src="img/brutalisme.jpg" alt="brutalisme"/>
|
<img src="img/brutalisme.jpg" alt="brutalisme"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -12,12 +12,21 @@
|
||||||
.tb:active:before { content: "【"; }
|
.tb:active:before { content: "【"; }
|
||||||
.tb:active:after { content: "】"; }
|
.tb:active:after { content: "】"; }
|
||||||
|
|
||||||
.tb-a { color: #08b; }
|
.tb-a { color: var(--ci0);
|
||||||
.tb-b { color: #272; }
|
&:hover { color: var(--ci1); }
|
||||||
.tb-c { color: #c22; }
|
&:active { color: var(--ci2); }
|
||||||
|
}
|
||||||
|
.tb-b { color: var(--co1);
|
||||||
|
&:hover { color: var(--co1); }
|
||||||
|
&:active { color: var(--co2); }
|
||||||
|
}
|
||||||
|
.tb-c { color: var(--ce2);
|
||||||
|
&:hover { color: var(--ce1); }
|
||||||
|
&:active { color: var(--ce2); }
|
||||||
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
background: #888;
|
background: var(--cn0);
|
||||||
border: solid 2px #000;
|
border: solid 2px #000;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
@ -25,15 +34,15 @@
|
||||||
display: inline-block; /* Enables non-inline-block elements like <div>s to be buttons */
|
display: inline-block; /* Enables non-inline-block elements like <div>s to be buttons */
|
||||||
margin: 2px 0;
|
margin: 2px 0;
|
||||||
padding: 1rem 2rem;
|
padding: 1rem 2rem;
|
||||||
box-shadow: 4px 4px rgba(0,0,0,0.75);
|
box-shadow: 4px 4px var(--shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn:hover {
|
.btn:hover {
|
||||||
background: #777;
|
background: var(--cn1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn:active,.btn:focus {
|
.btn:active,.btn:focus {
|
||||||
background: #666;
|
background: var(--cn2);
|
||||||
box-shadow: 1px 1px #000;
|
box-shadow: 1px 1px #000;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 3px;
|
top: 3px;
|
||||||
|
@ -41,33 +50,33 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-a {
|
.btn-a {
|
||||||
background: #59d;
|
background: var(--ci0);
|
||||||
&:hover {
|
&:hover {
|
||||||
background: #09d;
|
background: var(--ci1);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active, &:focus {
|
&:active, &:focus {
|
||||||
background: #08b;
|
background: var(--ci2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-b {
|
.btn-b {
|
||||||
background: #494;
|
background: var(--co0);
|
||||||
&:hover {
|
&:hover {
|
||||||
background: #090;
|
background: var(--co1);
|
||||||
}
|
}
|
||||||
&:active, &:focus {
|
&:active, &:focus {
|
||||||
background: #070;
|
background: var(--co2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-c {
|
.btn-c {
|
||||||
background: #d33;
|
background: var(--ce0);
|
||||||
&:hover {
|
&:hover {
|
||||||
background: #d00;
|
background: var(--ce1);
|
||||||
}
|
}
|
||||||
&:active, &:focus {
|
&:active, &:focus {
|
||||||
background: #b00;
|
background: var(--ce2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,81 @@
|
||||||
|
@neutral: #888;
|
||||||
|
@info: #59d;
|
||||||
|
@ok: #494;
|
||||||
|
@warn: #d93;
|
||||||
|
@err: #d33;
|
||||||
|
|
||||||
|
@dark-neutral: darken(@neutral,10%);
|
||||||
|
@dark-info: darken(@info,10%) ;
|
||||||
|
@dark-ok: darken(@ok,10%);
|
||||||
|
@dark-warn: darken(@warn,10%);
|
||||||
|
@dark-err: darken(@err,10%);
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--bg: #fff;
|
||||||
|
--fg: #000;
|
||||||
|
--navfg: #aaa;
|
||||||
|
--bg2: #eee;
|
||||||
|
--darken: rgba(0,0,0,0.1);
|
||||||
|
|
||||||
|
--cn0: @neutral;
|
||||||
|
--cn1: darken(@neutral,5%);
|
||||||
|
--cn2: darken(@neutral,10%);
|
||||||
|
|
||||||
|
--ci0: @info;
|
||||||
|
--ci1: darken(@info,5%);
|
||||||
|
--ci2: darken(@info,10%);
|
||||||
|
|
||||||
|
--co0: @ok;
|
||||||
|
--co1: darken(@ok,5%);
|
||||||
|
--co2: darken(@ok,10%);
|
||||||
|
|
||||||
|
--cw0: @warn;
|
||||||
|
--cw1: darken(@warn,5%);
|
||||||
|
--cw2: darken(@warn,10%);
|
||||||
|
|
||||||
|
--ce0: @err;
|
||||||
|
--ce1: darken(@err,5%);
|
||||||
|
--ce2: darken(@err,10%);
|
||||||
|
|
||||||
|
--shadow: rgba(0,0,0,0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--bg: #000;
|
||||||
|
--fg: #aaa;
|
||||||
|
--navfg: #555;
|
||||||
|
--bg2: #333;
|
||||||
|
--darken: rgba(255,255,255,0.1);
|
||||||
|
|
||||||
|
--cn0: @dark-neutral;
|
||||||
|
--cn1: lighten(@dark-neutral,5%);
|
||||||
|
--cn2: lighten(@dark-neutral,10%);
|
||||||
|
|
||||||
|
--ci0: @dark-info;
|
||||||
|
--ci1: lighten(@dark-info,5%);
|
||||||
|
--ci2: saturate(lighten(@dark-info,10%),10%);
|
||||||
|
|
||||||
|
--co0: @dark-ok;
|
||||||
|
--co1: lighten(@dark-ok,5%);
|
||||||
|
--co2: saturate(lighten(@dark-ok,10%),10%);
|
||||||
|
|
||||||
|
--cw0: @dark-warn;
|
||||||
|
--cw1: lighten(@dark-warn,5%);
|
||||||
|
--cw2: saturate(lighten(@dark-warn,10%),10%);
|
||||||
|
|
||||||
|
--ce0: @dark-err;
|
||||||
|
--ce1: lighten(@dark-err,5%);
|
||||||
|
--ce2: saturate(lighten(@dark-err,10%),10%);
|
||||||
|
|
||||||
|
--shadow: rgba(128,128,128,0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
html { font-size: 12px; }
|
html { font-size: 12px; }
|
||||||
body, textarea, input, select {
|
body, textarea, input, select {
|
||||||
background: 0;
|
background: var(--bg);
|
||||||
|
color: var(--fg);
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
font-family: Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
|
font-family: Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
|
@ -40,7 +115,7 @@ body, textarea, input, select {
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero {
|
.hero {
|
||||||
background: #ddd;
|
background: var(--bg2);
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
outline-style: double;
|
outline-style: double;
|
||||||
outline-width: 0.5rem;
|
outline-width: 0.5rem;
|
||||||
|
@ -54,11 +129,11 @@ body, textarea, input, select {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
pre { background: #eee;
|
pre { background: var(--bg2);
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
code { background: rgba(0,0,0,0.1);
|
code { background: var(--darken);
|
||||||
border: solid 1px rgba(0,0,0,0.1);
|
border: solid 1px var(--darken);
|
||||||
padding: 1px;
|
padding: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
.nav, .nav .current, .nav a:hover {
|
.nav, .nav .current, .nav a:hover {
|
||||||
background: #000;
|
background: var(--fg);
|
||||||
color: #fff;
|
color: var(--bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
|
@ -13,7 +13,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav a {
|
.nav a {
|
||||||
color: #aaa;
|
color: var(--navfg);
|
||||||
padding-right: 1em;
|
padding-right: 1em;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -1px;
|
top: -1px;
|
||||||
|
@ -25,7 +25,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn.btn-close {
|
.btn.btn-close {
|
||||||
background: #000;
|
background: var(--fg);
|
||||||
|
color: var(--bg);
|
||||||
float: right;
|
float: right;
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
margin: -54px 7px;
|
margin: -54px 7px;
|
||||||
|
@ -51,7 +52,7 @@
|
||||||
*/
|
*/
|
||||||
}
|
}
|
||||||
.nav div:before {
|
.nav div:before {
|
||||||
background: #000;
|
background: var(--fg);
|
||||||
border-bottom: 10px double;
|
border-bottom: 10px double;
|
||||||
border-top: 3px solid;
|
border-top: 3px solid;
|
||||||
content: '';
|
content: '';
|
||||||
|
|
|
@ -5,5 +5,5 @@
|
||||||
|
|
||||||
.table tbody>:nth-child(2n-1) {
|
.table tbody>:nth-child(2n-1) {
|
||||||
/* We use tbody to ensure that we don't shade the heading - this preserves the order of the shading */
|
/* We use tbody to ensure that we don't shade the heading - this preserves the order of the shading */
|
||||||
background: #ddd; /* Shade every other table row */
|
background: var(--bg2); /* Shade every other table row */
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue