mirror of
https://github.com/kognise/water.css.git
synced 2025-08-13 16:44:58 +02:00
feat: add build step for docs, minor improvements
This commit is contained in:
329
dist/docs/index.html
vendored
Normal file
329
dist/docs/index.html
vendored
Normal file
@@ -0,0 +1,329 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Water.css</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<!-- Base styles of water.css, so styles don't have to wait until JS is loaded -->
|
||||
<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" />
|
||||
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-116663597-6"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || []
|
||||
function gtag() {
|
||||
dataLayer.push(arguments)
|
||||
}
|
||||
gtag('js', new Date())
|
||||
gtag('config', 'UA-116663597-6')
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Water.css</h1>
|
||||
|
||||
<p>
|
||||
Water.css is a just-add-css collection of styles to make simple websites like this just a
|
||||
little bit nicer.
|
||||
<br />
|
||||
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"
|
||||
>
|
||||
<img
|
||||
id="js-producthunt"
|
||||
src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=150490&theme=dark&period=daily"
|
||||
alt="Water.css - Make your tiny website just a little nicer | Product Hunt Embed"
|
||||
style="width: 250px; height: 54px;"
|
||||
width="250px"
|
||||
height="54px"
|
||||
/>
|
||||
</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 class="emoji" v-if="copyStatus === 'success'">✔</span>
|
||||
<span class="emoji" v-else-if="copyStatus === 'failed'">❌</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 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 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>
|
||||
<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 class="emoji" v-if="versionOptions.theme === 'dark'">🌙</span>
|
||||
<span class="emoji" v-else>☀</span>
|
||||
{{ versionOptions.theme | capitalize }}
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<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">
|
||||
<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 id="goals">Goals</h2>
|
||||
<ul>
|
||||
<li>Responsive</li>
|
||||
<li>Good code quality</li>
|
||||
<li>Good browser support</li>
|
||||
<li>Small size (< 2kb)</li>
|
||||
<li>Beautiful</li>
|
||||
<li>No classes</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="responsive">Is it responsive?</h2>
|
||||
<p>
|
||||
<strong>Heck yeah!</strong> It doesn't include any fancy styles so it's easily mobile
|
||||
responsive. Just add the famous
|
||||
<a href="https://www.w3schools.com/css/css_rwd_viewport.asp">responsive viewport tag</a> and
|
||||
you'll be good to go!
|
||||
</p>
|
||||
<p>In fact, try resizing this page. Everything flows super nicely as you'll see.</p>
|
||||
|
||||
<h2 id="demo">Element demos</h2>
|
||||
<p>This is supposed to be a demo page so we need more elements!</p>
|
||||
|
||||
<h3 id="form-elements">Form elements</h3>
|
||||
<form>
|
||||
<label for="email">Email</label>
|
||||
<input type="email" name="email" id="email" placeholder="john.doe@gmail.com" />
|
||||
|
||||
<label for="id">User id (read only)</label>
|
||||
<input readonly name="id" id="id" value="04D6H89Z" />
|
||||
|
||||
<label for="disabled">Random disabled input</label>
|
||||
<input disabled name="disabled" id="disabled" placeholder="Because why not?" />
|
||||
|
||||
<label for="about">About me</label>
|
||||
<textarea name="about" id="about" placeholder="I am a textarea..."></textarea>
|
||||
|
||||
<label>Choose a Doe:</label>
|
||||
<div>
|
||||
<input type="radio" id="john" name="drone" value="john" checked />
|
||||
<label for="john">John Doe</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" id="jane" name="drone" value="jane" checked />
|
||||
<label for="jane">Jane Doe</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" id="johnny" name="drone" value="johnny" checked />
|
||||
<label for="johnny">Johnny Doe</label>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<input type="checkbox" name="remember" id="remember" checked />
|
||||
<label for="remember">Remember me</label>
|
||||
|
||||
<input type="submit" />
|
||||
</form>
|
||||
|
||||
<h3 id="code">Code</h3>
|
||||
<p>
|
||||
Below is some code, you can copy it with <kbd>Ctrl-C</kbd>. Did you know,
|
||||
<code>alert(1)</code> can show an alert in JavaScript!
|
||||
</p>
|
||||
<pre><code>// This logs a message to the console and check out the scrollbar.<br>console.log('Hello, world!')</code></pre>
|
||||
|
||||
<h3 id="other">Other</h3>
|
||||
<p>Here's a horizontal rule and image because I don't know where else to put them.</p>
|
||||
<img src="https://placekitten.com/408/287" alt="Example kitten" />
|
||||
<hr />
|
||||
|
||||
<p>And here's a nicely marked up table!</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Quantity</th>
|
||||
<th>Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Godzilla</td>
|
||||
<td>2</td>
|
||||
<td>$299.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mozilla</td>
|
||||
<td>10</td>
|
||||
<td>$100,000.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quesadilla</td>
|
||||
<td>1</td>
|
||||
<td>$2.22</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 id="typography">Typography</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis
|
||||
ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis
|
||||
ornare accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius
|
||||
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu
|
||||
felis feugiat, eu mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui
|
||||
aliquet dui, non fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora
|
||||
torquent per conubia nostra, per inceptos himenaeos.
|
||||
<strong>This is strong,</strong> this is normal, <b>this is just bold,</b>
|
||||
<em>and this is emphasized!</em> And heck, <a href="/">here</a>'s a link.
|
||||
</p>
|
||||
|
||||
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
|
||||
"The HTML blockquote Element (or HTML Block Quotation Element) indicates that the enclosed
|
||||
text is an extended quotation. Usually, this is rendered visually by indentation (see
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote#Usage_notes"
|
||||
>Notes</a
|
||||
>
|
||||
for how to change it). A URL for the source of the quotation may be given using the
|
||||
<code>cite</code> attribute, while a text representation of the source can be given using the
|
||||
<code><cite></code> cite element."
|
||||
|
||||
<footer>
|
||||
<cite>MDN, "The Block Quotation element"</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
|
||||
<ul>
|
||||
<li>Unordered list item 1</li>
|
||||
<li>Unordered list item 2</li>
|
||||
<li>Unordered list item 3</li>
|
||||
</ul>
|
||||
<ol>
|
||||
<li>Ordered list item 1</li>
|
||||
<li>Ordered list item 2</li>
|
||||
<li>Ordered list item 3</li>
|
||||
</ol>
|
||||
|
||||
<p>Addresses are also styled to be <strong>awesome</strong>!</p>
|
||||
<address>
|
||||
<a href="mailto:john.doe@example.com">john.doe@example.com</a><br />
|
||||
<a href="tel:778-330-2389">778-330-2389</a><br />
|
||||
<a href="sms:666-666-6666">666-666-6666</a><br />
|
||||
</address>
|
||||
|
||||
<br />
|
||||
|
||||
<h1>Heading 1</h1>
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Heading 3</h3>
|
||||
<h4>Heading 4</h4>
|
||||
<h5>Heading 5</h5>
|
||||
<h6>Heading 6</h6>
|
||||
|
||||
<script
|
||||
src="https://unpkg.com/clipboard-polyfill@2.8.0/build/clipboard-polyfill.promise.js"
|
||||
defer
|
||||
></script>
|
||||
<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js" defer></script>
|
||||
<script src="script.js" defer></script>
|
||||
</body>
|
||||
</html>
|
BIN
dist/docs/logo.png
vendored
Normal file
BIN
dist/docs/logo.png
vendored
Normal file
Binary file not shown.
After Width: | Height: | Size: 52 KiB |
1
dist/docs/logo.svg
vendored
Normal file
1
dist/docs/logo.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 14 KiB |
BIN
dist/docs/screenshot.jpg
vendored
Normal file
BIN
dist/docs/screenshot.jpg
vendored
Normal file
Binary file not shown.
After Width: | Height: | Size: 108 KiB |
1
dist/docs/script.js
vendored
Normal file
1
dist/docs/script.js
vendored
Normal file
@@ -0,0 +1 @@
|
||||
"use strict";var e="https://cdn.jsdelivr.net/gh/kognise/water.css/dist/",t={"dark.min.css":1.4,"dark.standalone.min.css":1.31,"dark-legacy.min.css":2.487,"dark-legacy.standalone.min.css":1.16,"light.min.css":1.4,"light.standalone.min.css":1.3,"light-legacy.min.css":.178+1.16+1.15,"light-legacy.standalone.min.css":1.15},n=function(e){var t=e.theme,n=e.isLegacy,r=e.isStandalone;return"".concat(t).concat(n?"-legacy":"").concat(r?".standalone":"",".min.css")},r=function(t){var r=t.theme,s=t.isLegacy,i=t.isStandalone,a=n({theme:r,isLegacy:s,isStandalone:i}),c='<link rel="stylesheet" href="'.concat(e).concat(a,'">');if(!s||i)return c;var o="dark"===r?"dark":"light";return(function(t,n,r){return'\n\x3c!-- Preload the required stylesheets (optional) --\x3e\n<link rel="preload" as="style" href="'.concat(e).concat(t,'">\n<link rel="preload" as="style" href="').concat(e).concat(n,'" media="(prefers-color-scheme: ').concat(r,')">')}(n({theme:r,isLegacy:!0,isStandalone:!0}),n({theme:o,isLegacy:!0,isStandalone:!0}),o)+"\n\n"+c).trim()},s={_phImage:document.querySelector("#js-producthunt"),_stylesheet:document.querySelector("#js-stylesheet"),updateStylesheet:function(e){this._stylesheet.href=e},updateProductHunt:function(e){this._phImage.src=this._phImage.src.replace(/dark|light/,e)},update:function(e,t){var r=e.theme,s=e.isStandalone,i="../"+n(e),a=s?r:t||r;this.updateStylesheet(i),this.updateProductHunt(a)}},i=function(e,t){var n=matchMedia("(prefers-color-scheme: ".concat(e,")"));n.addListener(function(e){return t(e.matches)}),t(n.matches)};new Vue({el:"#installation",filters:{capitalize:function(e){return e.charAt(0).toUpperCase()+e.slice(1)}},data:{versionOptions:{theme:"dark",isStandalone:!1,isLegacy:!1},preferedColorScheme:null,copyStatus:null},computed:{selectedVersion:function(){return{fileName:n(this.versionOptions),fileSize:(e=this.versionOptions,t[n(e)]||"..."),fileSnippet:r(this.versionOptions)};var e}},created:function(){var e=this;i("dark",function(t){return t&&(e.preferedColorScheme="dark")}),i("light",function(t){return t&&(e.preferedColorScheme="light")}),this.preferedColorScheme&&s.updateProductHunt(this.preferedColorScheme)},methods:{copyToClipboard:function(){var e=this;Promise.resolve().then(function(){return clipboard.writeText(e.selectedVersion.fileSnippet)}).then(function(){return e.copyStatus="success"}).catch(function(){return e.copyStatus="failed"}),setTimeout(function(){return e.copyStatus=void 0},1e3)}},watch:{preferedColorScheme:function(e){s.update(this.versionOptions,e)},versionOptions:{deep:!0,handler:function(e){s.update(e,this.preferedColorScheme)}}}});
|
1
dist/docs/style.css
vendored
Executable file
1
dist/docs/style.css
vendored
Executable file
@@ -0,0 +1 @@
|
||||
html{scroll-behavior:smooth}#js-producthunt{margin-top:1rem}#installation header>h3{margin:1rem 2.5rem 1rem 0}#installation header button{position:relative;margin-left:auto;overflow:visible}#installation header button span{position:absolute;left:-2rem;display:inline-block;transform:scale(1.3)}#installation table{table-layout:fixed}#installation table th{border:none;vertical-align:top;width:35%}.row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}.emoji{font-family:Segoe UI Emoji,Apple Color Emoji,Noto Color Emoji,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.translucent{opacity:.5}.v-enter,.v-leave-to{transform:scale(0)}.v-enter-active,.v-leave-active{transition:transform .22s cubic-bezier(.175,.885,.32,1.275)}[v-cloak]>*{display:none}[v-cloak]:before{content:"Version picker is loading..."}
|
@@ -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><head></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>
|
||||
|
@@ -6,7 +6,9 @@
|
||||
* @prop {boolean} isStandalone
|
||||
*/
|
||||
|
||||
/** The base URI from where to load the CSS files. */
|
||||
/** The base URI from where the docs page loads the CSS files. */
|
||||
const DEV_BASE = '../'
|
||||
/** The base URI from where instructions show to load the CSS files. */
|
||||
const CDN_BASE = 'https://cdn.jsdelivr.net/gh/kognise/water.css/dist/'
|
||||
|
||||
/** An object mapping the (minified + gzipped) fileSize in KB to a fileName. */
|
||||
@@ -57,14 +59,20 @@ const externalElements = {
|
||||
_phImage: document.querySelector('#js-producthunt'),
|
||||
_stylesheet: document.querySelector('#js-stylesheet'),
|
||||
|
||||
updateStylesheet(href) {
|
||||
this._stylesheet.href = href
|
||||
},
|
||||
updateProductHunt(theme) {
|
||||
this._phImage.src = this._phImage.src.replace(/dark|light/, theme)
|
||||
},
|
||||
/** @param {VersionOptions} options @param {'dark' | 'light'} [preferedColorScheme] */
|
||||
update(options, preferedColorScheme) {
|
||||
const { theme, isStandalone } = options
|
||||
const href = '../dist/' + getFileName(options)
|
||||
const href = DEV_BASE + getFileName(options)
|
||||
const visibleTheme = isStandalone ? theme : preferedColorScheme || theme
|
||||
|
||||
this._stylesheet.href = href
|
||||
this._phImage.src = this._phImage.src.replace(/dark|light/, visibleTheme)
|
||||
this.updateStylesheet(href)
|
||||
this.updateProductHunt(visibleTheme)
|
||||
},
|
||||
}
|
||||
|
||||
@@ -78,7 +86,7 @@ new Vue({
|
||||
el: '#installation',
|
||||
filters: { capitalize: str => str.charAt(0).toUpperCase() + str.slice(1) },
|
||||
data: {
|
||||
versionOptions: { theme: 'dark', isStandalone: true, isLegacy: false },
|
||||
versionOptions: { theme: 'dark', isStandalone: false, isLegacy: false },
|
||||
preferedColorScheme: null,
|
||||
copyStatus: null,
|
||||
},
|
||||
@@ -92,19 +100,17 @@ new Vue({
|
||||
},
|
||||
},
|
||||
created() {
|
||||
externalElements.update(this.versionOptions, this.preferedColorScheme)
|
||||
|
||||
createColorSchemeListener('dark', match => match && (this.preferedColorScheme = 'dark'))
|
||||
createColorSchemeListener('light', match => match && (this.preferedColorScheme = 'light'))
|
||||
|
||||
if (this.preferedColorScheme) externalElements.updateProductHunt(this.preferedColorScheme)
|
||||
},
|
||||
methods: {
|
||||
async copyToClipboard() {
|
||||
try {
|
||||
await clipboard.writeText(this.selectedVersion.fileSnippet)
|
||||
this.copyStatus = 'success'
|
||||
} catch (error) {
|
||||
this.copyStatus = 'failed'
|
||||
}
|
||||
copyToClipboard() {
|
||||
Promise.resolve()
|
||||
.then(() => clipboard.writeText(this.selectedVersion.fileSnippet))
|
||||
.then(() => (this.copyStatus = 'success'))
|
||||
.catch(() => (this.copyStatus = 'failed'))
|
||||
setTimeout(() => (this.copyStatus = undefined), 1000)
|
||||
},
|
||||
},
|
||||
|
@@ -45,6 +45,9 @@ html {
|
||||
BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
|
||||
Helvetica Neue, sans-serif;
|
||||
}
|
||||
.translucent {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* For the bounce transitions of code snippet and copy success Emoji */
|
||||
.v-enter,
|
||||
|
39
gulpfile.js
39
gulpfile.js
@@ -9,6 +9,8 @@ const chalk = require('chalk')
|
||||
const rename = require('gulp-rename')
|
||||
const filter = require('gulp-filter')
|
||||
const flatten = require('gulp-flatten')
|
||||
const babel = require('gulp-babel')
|
||||
const terser = require('gulp-terser')
|
||||
const sizereport = require('gulp-sizereport')
|
||||
const postcssCssVariables = require('postcss-css-variables')
|
||||
const postcssImport = require('postcss-import')
|
||||
@@ -19,7 +21,7 @@ const postcssColorModFunction = require('postcss-color-mod-function').bind(null,
|
||||
|
||||
const paths = {
|
||||
srcDir: 'src/*',
|
||||
docsDir: 'docs/*',
|
||||
docs: { src: 'docs/*', dest: 'dist/docs' },
|
||||
styles: { src: 'src/builds/*.css', dest: 'dist' },
|
||||
}
|
||||
|
||||
@@ -110,17 +112,32 @@ function style() {
|
||||
)
|
||||
}
|
||||
|
||||
function watch() {
|
||||
style()
|
||||
function docs() {
|
||||
const jsOnly = filter('**/*.js', { restore: true })
|
||||
const cssOnly = filter('**/*.css', { restore: true })
|
||||
|
||||
browserSync.init({
|
||||
server: { baseDir: './' },
|
||||
startPath: 'docs/index.html',
|
||||
})
|
||||
|
||||
gulp.watch(paths.srcDir, style)
|
||||
gulp.watch([paths.srcDir, paths.docsDir], browserSync.reload)
|
||||
return gulp
|
||||
.src(paths.docs.src)
|
||||
.pipe(jsOnly)
|
||||
.pipe(babel({ presets: ['@babel/preset-env'] }))
|
||||
.pipe(terser({ toplevel: true }))
|
||||
.pipe(jsOnly.restore)
|
||||
.pipe(cssOnly)
|
||||
.pipe(postcss([cssnano()]))
|
||||
.pipe(cssOnly.restore)
|
||||
.pipe(gulp.dest(paths.docs.dest))
|
||||
}
|
||||
|
||||
module.exports.style = style
|
||||
const browserReload = done => (browserSync.reload(), done())
|
||||
const startDevServer = () => {
|
||||
browserSync.init({ server: { baseDir: './dist' }, startPath: 'docs/index.html' })
|
||||
|
||||
gulp.watch(paths.srcDir, gulp.series(style, browserReload))
|
||||
gulp.watch(paths.docs.src, gulp.series(docs, browserReload))
|
||||
}
|
||||
|
||||
const build = gulp.parallel(style, docs)
|
||||
const watch = gulp.series(build, startDevServer)
|
||||
|
||||
module.exports.build = build
|
||||
module.exports.watch = watch
|
||||
|
@@ -4,7 +4,7 @@
|
||||
"description": "A just-add-css collection of styles to make simple websites just a little nicer.",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"build": "gulp style",
|
||||
"build": "gulp build",
|
||||
"dev": "gulp watch"
|
||||
},
|
||||
"repository": {
|
||||
@@ -24,11 +24,14 @@
|
||||
},
|
||||
"homepage": "https://github.com/kognise/water.css",
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.4.5",
|
||||
"@babel/preset-env": "^7.4.5",
|
||||
"autoprefixer": "^9.5.1",
|
||||
"browser-sync": "^2.26.3",
|
||||
"chalk": "^2.4.2",
|
||||
"cssnano": "^4.1.10",
|
||||
"gulp": "^4.0.0",
|
||||
"gulp-babel": "^8.0.0",
|
||||
"gulp-bytediff": "^1.0.0",
|
||||
"gulp-filter": "^5.1.0",
|
||||
"gulp-flatten": "^0.4.0",
|
||||
@@ -36,6 +39,7 @@
|
||||
"gulp-rename": "^1.4.0",
|
||||
"gulp-sizereport": "^1.2.1",
|
||||
"gulp-sourcemaps": "^2.6.5",
|
||||
"gulp-terser": "^1.2.0",
|
||||
"postcss-color-mod-function": "^3.0.3",
|
||||
"postcss-css-variables": "^0.12.0",
|
||||
"postcss-import": "^12.0.1"
|
||||
@@ -43,4 +47,4 @@
|
||||
"browserslist": [
|
||||
"defaults AND not android 4.4.3"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user