search

andybrewer / mvp

MVP.css — Minimalist classless CSS stylesheet for HTML elements
https://andybrewer.github.io/mvp/
MIT License
4.98k stars 192 forks source link

Solarized MVP #89

Closed szepeviktor closed 1 year ago

szepeviktor commented 1 year ago

Thank you for this CSS! I like the class-less demo page :)

Could you help me with two sentences how to create a Solarized version of it? https://github.com/altercation/solarized

andybrewer commented 1 year ago

Sure thing. The easiest way to do it would be to redefine the root CSS variables:

:root {
    --active-brightness: 0.85;
    --border-radius: 5px;
    --box-shadow: 2px 2px 10px;
    --color-accent: #118bee15;
    --color-bg: #fff;
    --color-bg-secondary: #e9e9e9;
    --color-link: #118bee;
    --color-secondary: #920de9;
    --color-secondary-accent: #920de90b;
    --color-shadow: #f4f4f4;
    --color-table: #118bee;
    --color-text: #000;
    --color-text-secondary: #999;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --hover-brightness: 1.2;
    --justify-important: center;
    --justify-normal: left;
    --line-height: 1.5;
    --width-card: 285px;
    --width-card-medium: 460px;
    --width-card-wide: 800px;
    --width-content: 1080px;
}

So, for example, change all the variables that start with color to the solarized color pallet of your preference.