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

feat: add build step for docs, minor improvements

Browse Source
This commit is contained in:
Jonas Kuske
2019-05-31 00:15:50 +02:00
parent 234152f181
commit 033390881e
12 changed files with 1307 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
docs/index.html
View File

@@ -16,8 +16,26 @@
<meta name="msapplication-config" content="./icons/browserconfig.xml" />
<meta name="theme-color" content="#ffffff" />
<!-- Base styles of water.css, so styles don't have to wait until JS is loaded -->
<link rel="stylesheet" href="../dist/dark-legacy.standalone.css" />
<!-- Final, dynamic version of water.css, JS sets & updates href. Overwrites base styles -->
<link
rel="preload"
as="style"
href="https://cdn.jsdelivr.net/gh/kognise/water.css/dist/dark-legacy.standalone.min.css"
/>
<link
rel="preload"
as="style"
href="https://cdn.jsdelivr.net/gh/kognise/water.css/dist/dark-legacy.standalone.min.css"
media="(prefers-color-scheme: dark)"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/kognise/water.css/dist/dark-legacy.min.css"
/>
<!-- TODO: Remove once water.css v2 is hosted so the above links work -->
<link rel="stylesheet" href="../dark.min.css" />
<!-- Dynamic version of water.css, overwrites base styles. JavaScript sets & updates href. -->
<link rel="stylesheet" id="js-stylesheet" />
<!-- Custom styles for the documentation / version picker -->
<link rel="stylesheet" href="style.css" />
@@ -64,10 +82,11 @@
</a>
</div>
<!-- Start interactive version picker -->
<div id="installation" v-cloak>
<h2>Installation</h2>
<div>
<div style="overflow: hidden">
<header class="row">
<h3>Paste this into the <code>&lt;head&gt;</code> of your HTML:</h3>
<button type="button" @click="copyToClipboard">
@@ -85,13 +104,15 @@
<h3>Version options:</h3>
<form action="./" method="post" @submit.prevent>
<label>
<span class="emoji">🌙</span> Dark theme
<label title="Selected theme may be overwritten by theme settings on user's device">
<input type="radio" value="dark" v-model="versionOptions.theme" checked name="theme" />
Dark theme <span class="emoji">🌙</span>
<span class="emoji translucent" v-if="!versionOptions.isStandalone"> / ☀</span>
</label>
<label>
<span class="emoji">☀</span> Light theme
<label title="Selected theme may be overwritten by theme settings on user's device">
<input type="radio" value="light" v-model="versionOptions.theme" name="theme" />
Light theme <span class="emoji">☀</span>
<span class="emoji translucent" v-if="!versionOptions.isStandalone"> / 🌙</span>
</label>
<br /><br />
<label>
@@ -126,12 +147,14 @@
</template>
<template v-else>
<span class="emoji" v-if="versionOptions.theme === 'dark'">🌙 / ☀</span>
<span class="emoji" v-else>☀ / 🌙</span>
Defaults to {{ versionOptions.theme }}, but respects user-defined theme settings
if set.
<span class="emoji" v-if="versionOptions.theme === 'dark'">
🌙<span class="translucent"> / ☀</span>
</span>
<span class="emoji" v-else>☀ <span class="translucent"> / 🌙</span></span>
Defaults to {{ versionOptions.theme }}, but respects user-defined theme settings.
(detected via <code>prefers-color-scheme</code>)
<template v-if="preferedColorScheme">
Your device is currently set to {{ preferedColorScheme }} mode.
<br />Your device is currently set to {{ preferedColorScheme }} mode.
</template>
</template>
</td>
@@ -140,7 +163,7 @@
<th>Browser support</th>
<td>
<template v-if="versionOptions.isLegacy">
All browsers including Internet Explorer
All browsers (including Internet Explorer)
</template>
<template v-else>
All current browsers (<a href="https://caniuse.com/#feat=css-variables"
@@ -153,6 +176,7 @@
</table>
</div>
</div>
<!-- End interactive version picker -->
<h2 id="goals">Goals</h2>
<ul>