mirror of
https://github.com/kognise/water.css.git
synced 2025-08-19 11:21:22 +02:00
refactor: add HTML processing, picker as partial
This commit is contained in:
Jonas Kuske
121
docs/index.html
121
docs/index.html
@@ -82,125 +82,8 @@
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Start interactive version picker -->
|
||||
<div id="installation" v-cloak>
|
||||
<h2>Installation</h2>
|
||||
|
||||
<div style="overflow: hidden">
|
||||
<header class="row">
|
||||
<h3>Paste this into the <code><head></code> of your HTML:</h3>
|
||||
<button type="button" @click="copyToClipboard">
|
||||
<transition>
|
||||
<span v-if="copyStatus === 'success'" class="emoji">✔</span>
|
||||
<span v-else-if="copyStatus === 'failed'" class="emoji">❌</span>
|
||||
</transition>
|
||||
Copy to clipboard
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<transition mode="out-in">
|
||||
<pre :key="selectedVersion.fileSnippet"><code>{{selectedVersion.fileSnippet}}</code></pre>
|
||||
</transition>
|
||||
|
||||
<h3>Version options:</h3>
|
||||
<form action="./" method="post" @submit.prevent>
|
||||
<label>
|
||||
<input type="radio" value="dark" checked name="theme" v-model="versionOptions.theme" />
|
||||
Dark theme <span class="emoji">🌙</span>
|
||||
<span
|
||||
v-if="!versionOptions.isStandalone"
|
||||
class="emoji translucent"
|
||||
title="Selected theme may be overwritten by theme settings on user's device"
|
||||
>
|
||||
/ ☀</span
|
||||
>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" value="light" name="theme" v-model="versionOptions.theme" />
|
||||
Light theme <span class="emoji">☀</span>
|
||||
<span
|
||||
v-if="!versionOptions.isStandalone"
|
||||
class="emoji translucent"
|
||||
title="Selected theme may be overwritten by theme settings on user's device"
|
||||
>
|
||||
/ 🌙</span
|
||||
>
|
||||
</label>
|
||||
<br /><br />
|
||||
<label>
|
||||
<input type="checkbox" checked v-model="versionOptions.isStandalone" />
|
||||
Enforce theme? (ignore <code>prefers-color-scheme</code>)
|
||||
</label>
|
||||
<br /><br />
|
||||
<label>
|
||||
<input type="checkbox" v-model="versionOptions.isLegacy" />
|
||||
Support Internet Explorer and other legacy browsers?
|
||||
</label>
|
||||
</form>
|
||||
|
||||
<h3>Version info:</h3>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>File</th>
|
||||
<td>{{ selectedVersion.fileName }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Size (min+gzip)</th>
|
||||
<td>{{ selectedVersion.fileSize }}KB</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Theme</th>
|
||||
<td>
|
||||
<template v-if="versionOptions.isStandalone">
|
||||
<span v-if="versionOptions.theme === 'dark'" class="emoji">🌙</span>
|
||||
<span v-else class="emoji">☀</span>
|
||||
{{ versionOptions.theme | capitalize }}
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<span
|
||||
v-if="versionOptions.theme === 'dark'"
|
||||
class="emoji"
|
||||
title="Selected theme may be overwritten by theme settings on user's device"
|
||||
>
|
||||
🌙<span class="translucent"> / ☀</span>
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
class="emoji"
|
||||
title="Selected theme may be overwritten by theme settings on user's device"
|
||||
>
|
||||
☀ <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">
|
||||
<br />Your device is currently set to {{ preferedColorScheme }} mode.
|
||||
</template>
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Browser support</th>
|
||||
<td>
|
||||
<template v-if="versionOptions.isLegacy">
|
||||
All browsers (including Internet Explorer)
|
||||
</template>
|
||||
<template v-else>
|
||||
All current browsers (<a href="https://caniuse.com/#feat=css-variables"
|
||||
>support for CSS Custom Properties</a
|
||||
>)
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End interactive version picker -->
|
||||
<h2>Installation</h2>
|
||||
<include src="./versionpicker.html"></include>
|
||||
|
||||
<h2 id="goals">Goals</h2>
|
||||
<ul>
|
||||
|
||||
@@ -6,6 +6,9 @@ html {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
#installation {
|
||||
overflow: hidden;
|
||||
}
|
||||
#installation header > h3 {
|
||||
margin: 1rem 2.5rem 1rem 0;
|
||||
}
|
||||
@@ -53,7 +56,7 @@ body > footer {
|
||||
Helvetica Neue, sans-serif;
|
||||
}
|
||||
.translucent {
|
||||
opacity: 0.5;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
/* For the bounce transitions of code snippet and copy success Emoji */
|
||||
@@ -65,7 +68,7 @@ body > footer {
|
||||
.v-leave-active {
|
||||
transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
[v-cloak] > *:not(h2) {
|
||||
[v-cloak] > * {
|
||||
display: none;
|
||||
}
|
||||
[v-cloak]::after {
|
||||
|
||||
115
docs/versionpicker.html
Executable file
115
docs/versionpicker.html
Executable file
@@ -0,0 +1,115 @@
|
||||
<!-- Start interactive version picker -->
|
||||
<div id="installation" v-cloak>
|
||||
<header class="row">
|
||||
<h3>Paste this into the <code><head></code> of your HTML:</h3>
|
||||
<button type="button" @click="copyToClipboard">
|
||||
<transition>
|
||||
<span v-if="copyStatus === 'success'" class="emoji">✔</span>
|
||||
<span v-else-if="copyStatus === 'failed'" class="emoji">❌</span>
|
||||
</transition>
|
||||
Copy to clipboard
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<transition mode="out-in">
|
||||
<pre :key="selectedVersion.fileSnippet"><code>{{selectedVersion.fileSnippet}}</code></pre>
|
||||
</transition>
|
||||
|
||||
<h3>Version options:</h3>
|
||||
<form action="./" method="post" @submit.prevent>
|
||||
<label>
|
||||
<input type="radio" value="dark" checked name="theme" v-model="versionOptions.theme" />
|
||||
Dark theme <span class="emoji">🌙</span>
|
||||
<span
|
||||
v-if="!versionOptions.isStandalone"
|
||||
class="emoji translucent"
|
||||
title="Selected theme may be overwritten by theme settings on user's device"
|
||||
>
|
||||
/ ☀
|
||||
</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" value="light" name="theme" v-model="versionOptions.theme" />
|
||||
Light theme <span class="emoji">☀</span>
|
||||
<span
|
||||
v-if="!versionOptions.isStandalone"
|
||||
class="emoji translucent"
|
||||
title="Selected theme may be overwritten by theme settings on user's device"
|
||||
>
|
||||
/ 🌙
|
||||
</span>
|
||||
</label>
|
||||
<br /><br />
|
||||
<label>
|
||||
<input type="checkbox" checked v-model="versionOptions.isStandalone" />
|
||||
Enforce theme? (ignore <code>prefers-color-scheme</code>)
|
||||
</label>
|
||||
<br /><br />
|
||||
<label>
|
||||
<input type="checkbox" v-model="versionOptions.isLegacy" />
|
||||
Support Internet Explorer and other legacy browsers?
|
||||
</label>
|
||||
</form>
|
||||
|
||||
<h3>Version info:</h3>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>File</th>
|
||||
<td>{{ selectedVersion.fileName }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Size (min+gzip)</th>
|
||||
<td>{{ selectedVersion.fileSize }}KB</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Theme</th>
|
||||
<td>
|
||||
<template v-if="versionOptions.isStandalone">
|
||||
<span v-if="versionOptions.theme === 'dark'" class="emoji">🌙</span>
|
||||
<span v-else class="emoji">☀</span>
|
||||
{{ versionOptions.theme | capitalize }}
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<span
|
||||
v-if="versionOptions.theme === 'dark'"
|
||||
class="emoji"
|
||||
title="Selected theme may be overwritten by theme settings on user's device"
|
||||
>
|
||||
🌙<span class="translucent"> / ☀</span>
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
class="emoji"
|
||||
title="Selected theme may be overwritten by theme settings on user's device"
|
||||
>
|
||||
☀ <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">
|
||||
<br />Your device is currently set to {{ preferedColorScheme }} mode.
|
||||
</template>
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Browser support</th>
|
||||
<td>
|
||||
<template v-if="versionOptions.isLegacy">
|
||||
All browsers (including Internet Explorer)
|
||||
</template>
|
||||
<template v-else>
|
||||
All current browsers (<a href="https://caniuse.com/#feat=css-variables"
|
||||
>support for CSS Custom Properties</a
|
||||
>)
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- End interactive version picker -->
|
||||
Reference in New Issue
Block a user