mirror of
https://github.com/kognise/water.css.git
synced 2025-08-10 23:24:08 +02:00
Restructure everything
This commit is contained in:
Kognise
61
dist/water-dark.css → dist/dark.css
vendored
61
dist/water-dark.css → dist/dark.css
vendored
@@ -8,28 +8,8 @@ body {
|
||||
background: #202b38;
|
||||
text-rendering: optimizeLegibility; }
|
||||
|
||||
button,
|
||||
input[type='submit'],
|
||||
input[type='button'],
|
||||
input[type='checkbox'] {
|
||||
cursor: pointer; }
|
||||
|
||||
img {
|
||||
max-width: 100%; }
|
||||
|
||||
a, button, input, textarea {
|
||||
transition: background-color .1s linear,
border-color .1s linear,
color .1s linear,
box-shadow .1s linear,
transform .1s linear; }
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #41adff; }
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline; }
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid #dbdbdb; }
|
||||
button, input, textarea {
|
||||
transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s linear; }
|
||||
|
||||
h1 {
|
||||
font-size: 2.2em;
|
||||
@@ -38,16 +18,24 @@ h1 {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-bottom: 12px; }
|
||||
|
||||
h1, h2, h3, h4, h5, h6, strong {
|
||||
color: #ffffff; }
|
||||
|
||||
h1, h2, h3, h4, h5, h6, b, strong, th {
|
||||
font-weight: 600; }
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #ffffff; }
|
||||
button,
|
||||
input[type='submit'],
|
||||
input[type='button'],
|
||||
input[type='checkbox'] {
|
||||
cursor: pointer; }
|
||||
|
||||
input:not([type='checkbox']), select {
|
||||
display: block; }
|
||||
|
||||
input, select, button, textarea {
|
||||
color: #ffffff;
|
||||
background-color: #161f27;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
margin-right: 6px;
|
||||
@@ -57,14 +45,6 @@ input, select, button, textarea {
|
||||
border-radius: 6px;
|
||||
outline: none; }
|
||||
|
||||
input, select, textarea {
|
||||
color: #ffffff;
|
||||
background-color: #161f27; }
|
||||
|
||||
button {
|
||||
color: #ffffff;
|
||||
background-color: #161f27; }
|
||||
|
||||
input:not([type='checkbox']), select, button, textarea {
|
||||
-webkit-appearance: none; }
|
||||
|
||||
@@ -98,3 +78,20 @@ button:active {
|
||||
input:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .5; }
|
||||
|
||||
::placeholder {
|
||||
color: #a9a9a9; }
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #41adff; }
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline; }
|
||||
|
||||
img {
|
||||
max-width: 100%; }
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid #dbdbdb; }
|
||||
63
dist/water-light.css → dist/light.css
vendored
63
dist/water-light.css → dist/light.css
vendored
@@ -5,31 +5,11 @@ body {
|
||||
margin: 20px auto;
|
||||
padding: 0 10px;
|
||||
color: #363636;
|
||||
background: #fff;
|
||||
background: #ffffff;
|
||||
text-rendering: optimizeLegibility; }
|
||||
|
||||
button,
|
||||
input[type='submit'],
|
||||
input[type='button'],
|
||||
input[type='checkbox'] {
|
||||
cursor: pointer; }
|
||||
|
||||
img {
|
||||
max-width: 100%; }
|
||||
|
||||
a, button, input, textarea {
|
||||
transition: background-color .1s linear,
border-color .1s linear,
color .1s linear,
box-shadow .1s linear,
transform .1s linear; }
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #0076d1; }
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline; }
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid #dbdbdb; }
|
||||
button, input, textarea {
|
||||
transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s linear; }
|
||||
|
||||
h1 {
|
||||
font-size: 2.2em;
|
||||
@@ -38,16 +18,24 @@ h1 {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-bottom: 12px; }
|
||||
|
||||
h1, h2, h3, h4, h5, h6, strong {
|
||||
color: #000000; }
|
||||
|
||||
h1, h2, h3, h4, h5, h6, b, strong, th {
|
||||
font-weight: 600; }
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #000; }
|
||||
button,
|
||||
input[type='submit'],
|
||||
input[type='button'],
|
||||
input[type='checkbox'] {
|
||||
cursor: pointer; }
|
||||
|
||||
input:not([type='checkbox']), select {
|
||||
display: block; }
|
||||
|
||||
input, select, button, textarea {
|
||||
color: #000000;
|
||||
background-color: #efefef;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
margin-right: 6px;
|
||||
@@ -57,14 +45,6 @@ input, select, button, textarea {
|
||||
border-radius: 6px;
|
||||
outline: none; }
|
||||
|
||||
input, select, textarea {
|
||||
color: #000;
|
||||
background-color: #efefef; }
|
||||
|
||||
button {
|
||||
color: #000;
|
||||
background-color: #ddd; }
|
||||
|
||||
input:not([type='checkbox']), select, button, textarea {
|
||||
-webkit-appearance: none; }
|
||||
|
||||
@@ -98,3 +78,20 @@ button:active {
|
||||
input:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .5; }
|
||||
|
||||
::placeholder {
|
||||
color: #949494; }
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #0076d1; }
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline; }
|
||||
|
||||
img {
|
||||
max-width: 100%; }
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid #dbdbdb; }
|
||||
@@ -2,7 +2,7 @@
|
||||
<html lang='en'>
|
||||
<head>
|
||||
<title>Water.css</title>
|
||||
<link id='stylesheet' rel='stylesheet' href='dist/water-dark.css'>
|
||||
<link id='stylesheet' rel='stylesheet' href='dist/light.css'>
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
||||
|
||||
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-116663597-6'></script>
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
"description": "A just-add-css collection of styles to make simple websites just a little nicer.",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"build:dark": "node-sass ./src/water-dark.scss > ./dist/water-dark.css",
|
||||
"build:light": "node-sass ./src/water-light.scss > ./dist/water-light.css",
|
||||
"build": "yarn build:dark && yarn build:light"
|
||||
"build": "node-sass src/ --output dist/",
|
||||
"dev:build": "yarn build --watch",
|
||||
"dev:demo": "servor"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@@ -25,6 +25,7 @@
|
||||
},
|
||||
"homepage": "https://github.com/kognise/water.css",
|
||||
"devDependencies": {
|
||||
"node-sass": "^4.11.0"
|
||||
"node-sass": "^4.11.0",
|
||||
"servor": "^2.0.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
document.getElementById('switch').addEventListener('click', () => {
|
||||
const stylesheet = document.getElementById('stylesheet')
|
||||
if (stylesheet.getAttribute('href') === 'dist/water-dark.css') {
|
||||
stylesheet.setAttribute('href', 'dist/water-light.css')
|
||||
if (stylesheet.getAttribute('href') === 'dist/dark.css') {
|
||||
stylesheet.setAttribute('href', 'dist/light.css')
|
||||
} else {
|
||||
stylesheet.setAttribute('href', 'dist/water-dark.css')
|
||||
stylesheet.setAttribute('href', 'dist/dark.css')
|
||||
}
|
||||
})
|
||||
@@ -1,132 +0,0 @@
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
line-height: 1.4;
|
||||
|
||||
max-width: 800px;
|
||||
margin: 20px auto;
|
||||
padding: 0 10px;
|
||||
|
||||
color: $font-color;
|
||||
background: $background-color;
|
||||
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type='submit'],
|
||||
input[type='button'],
|
||||
input[type='checkbox'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
a, button, input, textarea {
|
||||
transition: background-color .1s linear,
|
||||
border-color .1s linear,
|
||||
color .1s linear,
|
||||
box-shadow .1s linear,
|
||||
transform .1s linear;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $link-color;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.2em;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, b, strong, th {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: $heading-color;
|
||||
}
|
||||
|
||||
input:not([type='checkbox']), select {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input, select, button, textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
|
||||
margin-right: 6px;
|
||||
margin-bottom: 6px;
|
||||
padding: 10px;
|
||||
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
color: $form-font-color;
|
||||
background-color: $form-background-color;
|
||||
|
||||
}
|
||||
|
||||
button {
|
||||
color: $button-font-color;
|
||||
background-color: $button-background-color
|
||||
}
|
||||
|
||||
input:not([type='checkbox']), select, button, textarea {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
button, input[type='submit'], input[type='button'] {
|
||||
padding-right: 30px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
input[type='submit']:hover,
|
||||
input[type='button']:hover {
|
||||
background: $button-hover-color;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus,
|
||||
button:focus,
|
||||
textarea:focus {
|
||||
box-shadow: 0 0 0 2px $focus-color;
|
||||
}
|
||||
|
||||
input[type='checkbox']:active,
|
||||
input[type='submit']:active,
|
||||
input[type='button']:active,
|
||||
button:active {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
input:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .5;
|
||||
}
|
||||
14
src/dark.scss
Normal file
14
src/dark.scss
Normal file
@@ -0,0 +1,14 @@
|
||||
$background: #202b38 !default;
|
||||
$text-main: #dbdbdb !default;
|
||||
$text-bright: #ffffff !default;
|
||||
|
||||
$links: #41adff !default;
|
||||
$focus: #0096bfab !default;
|
||||
$border: #dbdbdb !default;
|
||||
$button-hover: #324759 !default;
|
||||
|
||||
$form-background: #161f27 !default;
|
||||
$form-placeholder: #a9a9a9 !default;
|
||||
$form-text: #ffffff !default;
|
||||
|
||||
@import 'parts/core';
|
||||
14
src/light.scss
Normal file
14
src/light.scss
Normal file
@@ -0,0 +1,14 @@
|
||||
$background: #ffffff !default;
|
||||
$text-main: #363636 !default;
|
||||
$text-bright: #000000 !default;
|
||||
|
||||
$links: #0076d1 !default;
|
||||
$focus: #0096bfab !default;
|
||||
$border: #dbdbdb !default;
|
||||
$button-hover: #dddddd !default;
|
||||
|
||||
$form-background: #efefef !default;
|
||||
$form-placeholder: #949494 !default;
|
||||
$form-text: #000000 !default;
|
||||
|
||||
@import 'parts/core';
|
||||
21
src/parts/_base.scss
Normal file
21
src/parts/_base.scss
Normal file
@@ -0,0 +1,21 @@
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
line-height: 1.4;
|
||||
|
||||
max-width: 800px;
|
||||
margin: 20px auto;
|
||||
padding: 0 10px;
|
||||
|
||||
color: $text-main;
|
||||
background: $background;
|
||||
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
button, input, textarea {
|
||||
transition: background-color .1s linear,
|
||||
border-color .1s linear,
|
||||
color .1s linear,
|
||||
box-shadow .1s linear,
|
||||
transform .1s linear;
|
||||
}
|
||||
5
src/parts/_core.scss
Normal file
5
src/parts/_core.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
@import 'base';
|
||||
@import 'typography';
|
||||
@import 'forms';
|
||||
@import 'links';
|
||||
@import 'misc';
|
||||
71
src/parts/_forms.scss
Normal file
71
src/parts/_forms.scss
Normal file
@@ -0,0 +1,71 @@
|
||||
button,
|
||||
input[type='submit'],
|
||||
input[type='button'],
|
||||
input[type='checkbox'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input:not([type='checkbox']), select {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input, select, button, textarea {
|
||||
color: $form-text;
|
||||
background-color: $form-background;
|
||||
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
|
||||
margin-right: 6px;
|
||||
margin-bottom: 6px;
|
||||
padding: 10px;
|
||||
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input:not([type='checkbox']), select, button, textarea {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
button, input[type='submit'], input[type='button'] {
|
||||
padding-right: 30px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
input[type='submit']:hover,
|
||||
input[type='button']:hover {
|
||||
background: $button-hover;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus,
|
||||
button:focus,
|
||||
textarea:focus {
|
||||
box-shadow: 0 0 0 2px $focus;
|
||||
}
|
||||
|
||||
input[type='checkbox']:active,
|
||||
input[type='submit']:active,
|
||||
input[type='button']:active,
|
||||
button:active {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
input:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: $form-placeholder;
|
||||
}
|
||||
8
src/parts/_links.scss
Normal file
8
src/parts/_links.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $links;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
8
src/parts/_misc.scss
Normal file
8
src/parts/_misc.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid $border;
|
||||
}
|
||||
16
src/parts/_typography.scss
Normal file
16
src/parts/_typography.scss
Normal file
@@ -0,0 +1,16 @@
|
||||
h1 {
|
||||
font-size: 2.2em;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, strong {
|
||||
color: $text-bright;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, b, strong, th {
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
$background-color: #202b38;
|
||||
$font-color: #dbdbdb;
|
||||
$link-color: #41adff;
|
||||
|
||||
$heading-color: #ffffff;
|
||||
|
||||
$border-color: #dbdbdb;
|
||||
|
||||
$focus-color: #0096bfab;
|
||||
|
||||
$button-background-color: #161f27;
|
||||
$button-font-color: #ffffff;
|
||||
$button-hover-color: #324759;
|
||||
|
||||
$form-font-color: #ffffff;
|
||||
$form-background-color: #161f27;
|
||||
$form-placeholder-color: #a9a9a9;
|
||||
|
||||
@import 'water-core'
|
||||
@@ -1,19 +0,0 @@
|
||||
$background-color: #fff;
|
||||
$font-color: #363636;
|
||||
$link-color: #0076d1;
|
||||
|
||||
$heading-color: #000;
|
||||
|
||||
$border-color: #dbdbdb;
|
||||
|
||||
$focus-color: #0096bfab;
|
||||
|
||||
$button-background-color: #ddd;
|
||||
$button-font-color: #000;
|
||||
$button-hover-color: #dddddd;
|
||||
|
||||
$form-font-color: #000;
|
||||
$form-background-color: #efefef;
|
||||
$form-placeholder-color: #949494;
|
||||
|
||||
@import 'water-core'
|
||||
@@ -971,6 +971,11 @@ semver@~5.3.0:
|
||||
resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
|
||||
integrity sha1-myzl094C0XxgEq0yaqa00M9U+U8=
|
||||
|
||||
servor@^2.0.3:
|
||||
version "2.0.3"
|
||||
resolved "https://registry.yarnpkg.com/servor/-/servor-2.0.3.tgz#629c64b778639db8181276441a616942d1eb49af"
|
||||
integrity sha512-LuXdSg+1w/0LnnKjZrwFGcpnHpFLvAQj7t6Kes4h1LUVmeGKA6X/9NdcWnjj25nJDDHXdhRKusMf5ftG/2BGBQ==
|
||||
|
||||
set-blocking@^2.0.0, set-blocking@~2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
|
||||
|
||||
Reference in New Issue
Block a user