dark mode
This commit is contained in:
Yann Esposito (Yogsototh)
parent
42950af33f
commit
00841cfaf7
GPG key ID:
7B19A4C650D59646
28
README.md
28
README.md
|
|
@ -1,25 +1,33 @@
|
|||
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
|
||||
|
||||
MIT licensed.
|
||||
|
||||
### Building the latest Min
|
||||
### Building the latest BRUT
|
||||
|
||||
WARNING!
|
||||
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).
|
||||
If you have [`nix`](https://nixos.org/nix) installed.
|
||||
|
||||
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?
|
||||
|
||||
|
|
|
|||
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"/>
|
||||
<h2>Inside Grid</h2>
|
||||
<div class="row">
|
||||
<div class="block c4">
|
||||
<div class="c4">
|
||||
<div class="block">
|
||||
Inside a block.
|
||||
<img src="img/brutalisme.jpg" alt="brutalisme"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="c4"></div>
|
||||
<div class="card c4">
|
||||
<div class="c4">
|
||||
Direct in column:
|
||||
<img src="img/brutalisme.jpg" alt="brutalisme"/>
|
||||
</div>
|
||||
<div class="c4">
|
||||
<div class="card">
|
||||
Inside a card.
|
||||
<img src="img/brutalisme.jpg" alt="brutalisme"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,12 +12,21 @@
|
|||
.tb:active:before { content: "【"; }
|
||||
.tb:active:after { content: "】"; }
|
||||
|
||||
.tb-a { color: #08b; }
|
||||
.tb-b { color: #272; }
|
||||
.tb-c { color: #c22; }
|
||||
.tb-a { color: var(--ci0);
|
||||
&:hover { color: var(--ci1); }
|
||||
&: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 {
|
||||
background: #888;
|
||||
background: var(--cn0);
|
||||
border: solid 2px #000;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
|
|
@ -25,15 +34,15 @@
|
|||
display: inline-block; /* Enables non-inline-block elements like <div>s to be buttons */
|
||||
margin: 2px 0;
|
||||
padding: 1rem 2rem;
|
||||
box-shadow: 4px 4px rgba(0,0,0,0.75);
|
||||
box-shadow: 4px 4px var(--shadow);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #777;
|
||||
background: var(--cn1);
|
||||
}
|
||||
|
||||
.btn:active,.btn:focus {
|
||||
background: #666;
|
||||
background: var(--cn2);
|
||||
box-shadow: 1px 1px #000;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
|
|
@ -41,33 +50,33 @@
|
|||
}
|
||||
|
||||
.btn-a {
|
||||
background: #59d;
|
||||
background: var(--ci0);
|
||||
&:hover {
|
||||
background: #09d;
|
||||
background: var(--ci1);
|
||||
}
|
||||
|
||||
&:active, &:focus {
|
||||
background: #08b;
|
||||
background: var(--ci2);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-b {
|
||||
background: #494;
|
||||
background: var(--co0);
|
||||
&:hover {
|
||||
background: #090;
|
||||
background: var(--co1);
|
||||
}
|
||||
&:active, &:focus {
|
||||
background: #070;
|
||||
background: var(--co2);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-c {
|
||||
background: #d33;
|
||||
background: var(--ce0);
|
||||
&:hover {
|
||||
background: #d00;
|
||||
background: var(--ce1);
|
||||
}
|
||||
&: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; }
|
||||
body, textarea, input, select {
|
||||
background: 0;
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
border-radius: 0;
|
||||
font-family: Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
|
||||
font-size: 1rem;
|
||||
|
|
@ -40,7 +115,7 @@ body, textarea, input, select {
|
|||
}
|
||||
|
||||
.hero {
|
||||
background: #ddd;
|
||||
background: var(--bg2);
|
||||
padding: 2rem;
|
||||
outline-style: double;
|
||||
outline-width: 0.5rem;
|
||||
|
|
@ -54,11 +129,11 @@ body, textarea, input, select {
|
|||
}
|
||||
}
|
||||
|
||||
pre { background: #eee;
|
||||
pre { background: var(--bg2);
|
||||
padding: 10px;
|
||||
}
|
||||
code { background: rgba(0,0,0,0.1);
|
||||
border: solid 1px rgba(0,0,0,0.1);
|
||||
code { background: var(--darken);
|
||||
border: solid 1px var(--darken);
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.nav, .nav .current, .nav a:hover {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
background: var(--fg);
|
||||
color: var(--bg);
|
||||
}
|
||||
|
||||
.nav {
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
}
|
||||
|
||||
.nav a {
|
||||
color: #aaa;
|
||||
color: var(--navfg);
|
||||
padding-right: 1em;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
|
|
@ -25,7 +25,8 @@
|
|||
}
|
||||
|
||||
.btn.btn-close {
|
||||
background: #000;
|
||||
background: var(--fg);
|
||||
color: var(--bg);
|
||||
float: right;
|
||||
font-size: 25px;
|
||||
margin: -54px 7px;
|
||||
|
|
@ -51,7 +52,7 @@
|
|||
*/
|
||||
}
|
||||
.nav div:before {
|
||||
background: #000;
|
||||
background: var(--fg);
|
||||
border-bottom: 10px double;
|
||||
border-top: 3px solid;
|
||||
content: '';
|
||||
|
|
|
|||
|
|
@ -5,5 +5,5 @@
|
|||
|
||||
.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 */
|
||||
background: #ddd; /* Shade every other table row */
|
||||
background: var(--bg2); /* Shade every other table row */
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue