mirror_css/css-water.css
1
0
Fork 0
mirror of https://github.com/kognise/water.css.git synced 2025-08-12 16:14:34 +02:00
Code Issues Releases Wiki Activity

Update docs pt.1

Browse Source
This commit is contained in:
Felix
2020-05-28 14:40:02 -05:00
parent 2c29269710
commit 7e4251f5c1
3 changed files with 289 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
docs/index.html
View File

@@ -10,7 +10,6 @@
content="A drop-in collection of CSS styles to make simple websites like this just a little bit nicer."
/>
<!-- Icons generated with https://realfavicongenerator.net -->
<link rel="apple-touch-icon" sizes="180x180" href="./icons/apple-touch-icon.png" />
<link rel="icon" id="icon-16" type="image/png" sizes="16x16" href="./icons/favicon-16x16.png" />
<link rel="icon" id="icon-32" type="image/png" sizes="32x32" href="./icons/favicon-32x32.png" />
@@ -24,17 +23,13 @@
<meta name="theme-color" content="#ffffff" />
<!-- Startup styles of water.css, so styles don't have to wait until JS is loaded -->
<link rel="preload" as="style" href="./water.css/dark-legacy.standalone.min.css" />
<link
rel="preload"
as="style"
media="(prefers-color-scheme: dark)"
href="./water.css/dark-legacy.standalone.min.css"
/>
<link rel="stylesheet" id="js-startup-stylesheet" href="./water.css/dark-legacy.min.css" />
<link rel="preload" as="style" href="./water.css/dark.min.css" />
<link rel="preload" as="style" href="./water.css/light.min.css" />
<link rel="stylesheet" id="js-startup-stylesheet" href="./water.css/water.min.css" />
<!-- Dynamic version of water.css, overwrites startup styles. JavaScript sets & updates href -->
<link rel="stylesheet" id="js-stylesheet" />
<!-- Custom styles for the documentation / version picker -->
<link rel="stylesheet" href="style.css" />
@@ -48,7 +43,7 @@
/>
<meta
property="og:image"
content="https://raw.githubusercontent.com/kognise/water.css/29afc6c80a1a38123e47c8a50779faae97cc2a8b/assets/logo.png"
content="https://raw.githubusercontent.com/kognise/water.css/master/logo.png"
/>
<meta property="og:image:width" content="1154" />
<meta property="og:image:height" content="444" />
@@ -87,16 +82,19 @@
<p>
Water.css is a drop-in collection of CSS styles to make simple websites like this just a
little bit nicer.
<br />
</p>
<p>
Now you can write your simple static site with nice semantic html, and Water.css will manage
the styling for you.
</p>
<div class="row">
<div>
<a href="#installation"><b>Get it already!</b></a>
<br />
<a href="https://github.com/kognise/water.css"><b>GitHub</b></a>
</div>
<a
href="https://www.producthunt.com/posts/water-css?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-water-css"
target="_blank"
@@ -113,7 +111,56 @@
</div>
<h2>Installation</h2>
<include src="./versionpicker.html"></include>
<div id="installation" class="version-select">
<header class="row version-select-snippet">
<h3>Paste this into the <code>&lt;head&gt;</code> of your HTML:</h3>
<button type="button" id="copy-snippet">
Copy to clipboard
</button>
</header>
<pre><code id="link-snippet">Oh noes, the JavaScript hasn't loaded!</code></pre>
<h3>Options</h3>
<form id="theme-form">
<input type="radio" value="auto" checked name="theme" id="theme-auto" />
<label for="theme-auto">Automatic <span class="emoji">🌙</span> / <span class="emoji">☀</span></label>
<input type="radio" value="dark" name="theme" id="theme-dark" />
<label for="theme-dark">Dark theme <span class="emoji">🌙</span></label>
<input type="radio" value="light" name="theme" id="theme-light" />
<label for="theme-light">Light theme <span class="emoji">☀</span></label>
</form>
<table id="version-info">
<caption>
<h3>Version info</h3>
</caption>
<tbody>
<tr>
<th scope="row">File</th>
<td id="table-file-name"></td>
</tr>
<tr>
<th scope="row">Size (min + gzip)</th>
<td id="table-file-size"></td>
</tr>
<tr>
<th scope="row">Theme</th>
<td id="table-theme"></td>
</tr>
<tr>
<th scope="row">Browser support</th>
<td id="table-browser-support"></td>
</tr>
</tbody>
</table>
</div>
<h2 id="goals">Goals</h2>
<ul>