mirror of
https://github.com/kognise/water.css.git
synced 2025-08-09 22:57:00 +02:00
feat: add new installation guide, move to docs/
This commit is contained in:
Jonas Kuske
@@ -1,6 +1,6 @@
|
||||
# Water.css
|
||||
|
||||
[](https://watercss.netlify.com/)
|
||||
[](https://watercss.netlify.com/)
|
||||
|
||||
_A just-add-css collection of styles to make simple websites just a little nicer_
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 6.5 KiB |
12
docs/icons/browserconfig.xml
Executable file
12
docs/icons/browserconfig.xml
Executable file
@@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<browserconfig>
|
||||
<msapplication>
|
||||
<tile>
|
||||
<square70x70logo src="./mstile-70x70.png"/>
|
||||
<square150x150logo src="./mstile-150x150.png"/>
|
||||
<square310x310logo src="./mstile-310x310.png"/>
|
||||
<wide310x150logo src="./mstile-310x150.png"/>
|
||||
<TileColor>#00aba9</TileColor>
|
||||
</tile>
|
||||
</msapplication>
|
||||
</browserconfig>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 7.5 KiB After Width: | Height: | Size: 7.5 KiB |
|
Before Width: | Height: | Size: 8.1 KiB After Width: | Height: | Size: 8.1 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
@@ -3,12 +3,12 @@
|
||||
"short_name": "Water.css",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/icons/android-chrome-192x192.png",
|
||||
"src": "./android-chrome-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/icons/android-chrome-512x512.png",
|
||||
"src": "./android-chrome-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
318
docs/index.html
Normal file
318
docs/index.html
Normal file
@@ -0,0 +1,318 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Water.css</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<!-- Icons generated with https://realfavicongenerator.net -->
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="./icons/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="./icons/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="./icons/favicon-16x16.png" />
|
||||
<link rel="manifest" href="./icons/site.webmanifest" />
|
||||
<link rel="mask-icon" href="./icons/safari-pinned-tab.svg" color="#5bbad5" />
|
||||
<link rel="shortcut icon" href="./icons/favicon.ico" />
|
||||
<meta name="apple-mobile-web-app-title" content="Water.css" />
|
||||
<meta name="application-name" content="Water.css" />
|
||||
<meta name="msapplication-TileColor" content="#00aba9" />
|
||||
<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="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>
|
||||
|
||||
<div id="installation" v-cloak>
|
||||
<h2>Installation</h2>
|
||||
|
||||
<div>
|
||||
<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>
|
||||
<span class="emoji">🌙</span> Dark theme
|
||||
<input type="radio" value="dark" v-model="versionOptions.theme" checked name="theme" />
|
||||
</label>
|
||||
<label>
|
||||
<span class="emoji">☀</span> Light theme
|
||||
<input type="radio" value="light" v-model="versionOptions.theme" name="theme" />
|
||||
</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>
|
||||
<span class="emoji" v-else>☀ / 🌙</span>
|
||||
Defaults to {{ versionOptions.theme }}, but respects user-defined theme settings
|
||||
if set.
|
||||
<template v-if="preferedColorScheme">
|
||||
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>
|
||||
|
||||
<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="https://unpkg.com/favicon-mode-switcher@^1.0.0" defer></script>
|
||||
<script src="script.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 45 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 108 KiB |
138
docs/script.js
Normal file
138
docs/script.js
Normal file
@@ -0,0 +1,138 @@
|
||||
/**
|
||||
* Type definition for the version object used throughout the code
|
||||
* @typedef {Object} VersionOptions
|
||||
* @prop {'dark' | 'light'} theme
|
||||
* @prop {boolean} isLegacy
|
||||
* @prop {boolean} isStandalone
|
||||
*/
|
||||
|
||||
/** The base URI from where 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. */
|
||||
const FILE_SIZES = {
|
||||
'dark.min.css': 1.4,
|
||||
'dark.standalone.min.css': 1.31,
|
||||
'dark-legacy.min.css': 0.177 + 1.16 + 1.15,
|
||||
'dark-legacy.standalone.min.css': 1.16,
|
||||
'light.min.css': 1.4,
|
||||
'light.standalone.min.css': 1.3,
|
||||
'light-legacy.min.css': 0.178 + 1.16 + 1.15,
|
||||
'light-legacy.standalone.min.css': 1.15,
|
||||
}
|
||||
|
||||
/** @param {VersionOptions} options */
|
||||
const getFileName = ({ theme, isLegacy, isStandalone }) => {
|
||||
return `${theme}${isLegacy ? '-legacy' : ''}${isStandalone ? '.standalone' : ''}.min.css`
|
||||
}
|
||||
|
||||
/** @param {VersionOptions} options */
|
||||
const getFileSize = options => {
|
||||
return FILE_SIZES[getFileName(options)] || '...'
|
||||
}
|
||||
|
||||
const getFilePreloadSnippet = (mainFileName, altFileName, altTheme) => {
|
||||
return `
|
||||
<!-- Preload the required stylesheets (optional) -->
|
||||
<link rel="preload" as="style" href="${CDN_BASE}${mainFileName}">
|
||||
<link rel="preload" as="style" href="${CDN_BASE}${altFileName}" media="(prefers-color-scheme: ${altTheme})">`
|
||||
}
|
||||
|
||||
/** @param {VersionOptions} options */
|
||||
const getFileSnippet = ({ theme, isLegacy, isStandalone }) => {
|
||||
const fileName = getFileName({ theme, isLegacy, isStandalone })
|
||||
const stylesheetSnippet = `<link rel="stylesheet" href="${CDN_BASE}${fileName}">`
|
||||
|
||||
if (!isLegacy || isStandalone) return stylesheetSnippet
|
||||
|
||||
const altTheme = theme === 'dark' ? 'dark' : 'light'
|
||||
const mainStandaloneFile = getFileName({ theme, isLegacy: true, isStandalone: true })
|
||||
const altStandaloneFile = getFileName({ theme: altTheme, isLegacy: true, isStandalone: true })
|
||||
const preloadSnippet = getFilePreloadSnippet(mainStandaloneFile, altStandaloneFile, altTheme)
|
||||
|
||||
return (preloadSnippet + '\n\n' + stylesheetSnippet).trim()
|
||||
}
|
||||
|
||||
const externalElements = {
|
||||
_phImage: document.querySelector('#js-producthunt'),
|
||||
_stylesheet: document.querySelector('#js-stylesheet'),
|
||||
|
||||
/** @param {VersionOptions} options @param {'dark' | 'light'} [preferedColorScheme] */
|
||||
update(options, preferedColorScheme) {
|
||||
const { theme, isStandalone } = options
|
||||
const href = '../dist/' + getFileName(options)
|
||||
const visibleTheme = isStandalone ? theme : preferedColorScheme || theme
|
||||
|
||||
this._stylesheet.href = href
|
||||
this._phImage.src = this._phImage.src.replace(/dark|light/, visibleTheme)
|
||||
},
|
||||
}
|
||||
|
||||
const createColorSchemeListener = (theme, queryHandler) => {
|
||||
const mediaQuery = matchMedia(`(prefers-color-scheme: ${theme})`)
|
||||
mediaQuery.addListener(query => queryHandler(query.matches))
|
||||
queryHandler(mediaQuery.matches)
|
||||
}
|
||||
|
||||
new Vue({
|
||||
el: '#installation',
|
||||
filters: { capitalize: str => str.charAt(0).toUpperCase() + str.slice(1) },
|
||||
data: {
|
||||
versionOptions: { theme: 'dark', isStandalone: true, isLegacy: false },
|
||||
preferedColorScheme: null,
|
||||
copyStatus: null,
|
||||
},
|
||||
computed: {
|
||||
selectedVersion() {
|
||||
return {
|
||||
fileName: getFileName(this.versionOptions),
|
||||
fileSize: getFileSize(this.versionOptions),
|
||||
fileSnippet: getFileSnippet(this.versionOptions),
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
externalElements.update(this.versionOptions, this.preferedColorScheme)
|
||||
|
||||
createColorSchemeListener('dark', match => match && (this.preferedColorScheme = 'dark'))
|
||||
createColorSchemeListener('light', match => match && (this.preferedColorScheme = 'light'))
|
||||
},
|
||||
methods: {
|
||||
async copyToClipboard() {
|
||||
try {
|
||||
await clipboard.writeText(this.selectedVersion.fileSnippet)
|
||||
this.copyStatus = 'success'
|
||||
} catch (error) {
|
||||
this.copyStatus = 'failed'
|
||||
}
|
||||
setTimeout(() => (this.copyStatus = undefined), 1000)
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
preferedColorScheme(nextScheme) {
|
||||
externalElements.update(this.versionOptions, nextScheme)
|
||||
},
|
||||
versionOptions: {
|
||||
deep: true,
|
||||
handler(nextOptions) {
|
||||
externalElements.update(nextOptions, this.preferedColorScheme)
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
const iconModeSwitcher = faviconModeSwitcher.default
|
||||
iconModeSwitcher([
|
||||
{
|
||||
element: 'link[rel="shortcut icon"]',
|
||||
href: { dark: '/icons/light-favicon.ico' },
|
||||
},
|
||||
{
|
||||
element: 'link[rel="icon"][sizes="16x16"]',
|
||||
href: { dark: '/icons/light-favicon-16x16.png' },
|
||||
},
|
||||
{
|
||||
element: 'link[rel="icon"][sizes="32x32"]',
|
||||
href: { dark: '/icons/light-favicon-32x32.png' },
|
||||
},
|
||||
])
|
||||
63
docs/style.css
Executable file
63
docs/style.css
Executable file
@@ -0,0 +1,63 @@
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
#js-producthunt {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
#installation header > h3 {
|
||||
margin: 1rem 2.5rem 1rem 0;
|
||||
}
|
||||
/* Make the ✔ / ❌ Emoji appear next to the button */
|
||||
#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);
|
||||
}
|
||||
/* Fixed layout so columns don't jump when content changes */
|
||||
#installation table {
|
||||
table-layout: fixed;
|
||||
}
|
||||
#installation table th {
|
||||
border: none;
|
||||
vertical-align: top;
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
/* Used for (Links / ProductHunt) and (Installation / Copy-Button) rows */
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Use proper Emoji instead of plain Unicode chars */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* For the bounce transitions of code snippet and copy success Emoji */
|
||||
.v-enter,
|
||||
.v-leave-to {
|
||||
transform: scale(0);
|
||||
}
|
||||
.v-enter-active,
|
||||
.v-leave-active {
|
||||
transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
[v-cloak] > * {
|
||||
display: none;
|
||||
}
|
||||
[v-cloak]::before {
|
||||
content: 'Version picker is loading...';
|
||||
}
|
||||
@@ -19,7 +19,7 @@ const postcssColorModFunction = require('postcss-color-mod-function').bind(null,
|
||||
|
||||
const paths = {
|
||||
srcDir: 'src/*',
|
||||
docsDir: '*',
|
||||
docsDir: 'docs/*',
|
||||
styles: { src: 'src/builds/*.css', dest: 'dist' },
|
||||
}
|
||||
|
||||
@@ -114,10 +114,8 @@ function watch() {
|
||||
style()
|
||||
|
||||
browserSync.init({
|
||||
server: {
|
||||
baseDir: './',
|
||||
},
|
||||
startPath: 'index.html',
|
||||
server: { baseDir: './' },
|
||||
startPath: 'docs/index.html',
|
||||
})
|
||||
|
||||
gulp.watch(paths.srcDir, style)
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<browserconfig>
|
||||
<msapplication>
|
||||
<tile>
|
||||
<square70x70logo src="/icons/mstile-70x70.png"/>
|
||||
<square150x150logo src="/icons/mstile-150x150.png"/>
|
||||
<square310x310logo src="/icons/mstile-310x310.png"/>
|
||||
<wide310x150logo src="/icons/mstile-310x150.png"/>
|
||||
<TileColor>#00aba9</TileColor>
|
||||
</tile>
|
||||
</msapplication>
|
||||
</browserconfig>
|
||||
216
index.html
216
index.html
@@ -1,216 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang='en'>
|
||||
|
||||
<head>
|
||||
<title>Water.css</title>
|
||||
<link id='stylesheet' rel='stylesheet' href='../dist/dark.css'>
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
||||
<!-- Icons generated with https://realfavicongenerator.net -->
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png" />
|
||||
<link rel="manifest" href="/icons/site.webmanifest" />
|
||||
<link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#5bbad5" />
|
||||
<link rel="shortcut icon" href="/icons/favicon.ico" />
|
||||
<meta name="apple-mobile-web-app-title" content="Water.css" />
|
||||
<meta name="application-name" content="Water.css" />
|
||||
<meta name="msapplication-TileColor" content="#00aba9" />
|
||||
<meta name="msapplication-config" content="/icons/browserconfig.xml" />
|
||||
<meta name="theme-color" content="#ffffff" />
|
||||
|
||||
<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.
|
||||
<a href='https://github.com/kognise/water.css'>Get it already!</a>
|
||||
</p>
|
||||
<p>
|
||||
Now you can write your simple static site with nice semantic html, and Water.css will manage
|
||||
the styling for you.
|
||||
</p>
|
||||
<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='ph'
|
||||
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>
|
||||
|
||||
<h2>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>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>
|
||||
<button type="button" id='switch'>Switch theme</button>
|
||||
|
||||
<h2>Element demos</h2>
|
||||
<p>
|
||||
This is supposed to be a demo page so we need more elements!
|
||||
</p>
|
||||
|
||||
<h3>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>Code</h3>
|
||||
<p>
|
||||
Below is some code, with a variable, you can copy it with <kbd>Ctrl-C</kbd>.
|
||||
Did you know, <code>alert(1)</code> can show an alert in JavaScript!
|
||||
</p>
|
||||
<code>var <var>myNumber</var> = 0;</code>
|
||||
<pre><code>// This logs a message to the console and check out the scrollbar.<br>console.log('Hello, world!')</code></pre>
|
||||
|
||||
<p>Here are some more keyboard buttons</p>
|
||||
<p>Press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Print Screen</kbd> to take a selected area screenshot on Linux.</p>
|
||||
<h3>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>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>
|
||||
|
||||
<q>Quotes (<q>) share the same style as blockquotes.</q>
|
||||
|
||||
<p>Use <mark> to <mark>highlight the important stuff</mark>.</p>
|
||||
|
||||
<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>
|
||||
|
||||
<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/favicon-mode-switcher@^1.0.0" defer></script>
|
||||
<script src="script.js" defer></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
114
script.js
114
script.js
@@ -1,114 +0,0 @@
|
||||
!(function() {
|
||||
const iconModeSwitcher = window.faviconModeSwitcher && faviconModeSwitcher.default
|
||||
if (!iconModeSwitcher) return
|
||||
iconModeSwitcher([
|
||||
{
|
||||
element: 'link[rel="shortcut icon"]',
|
||||
href: { dark: '/icons/light-favicon.ico' }
|
||||
},
|
||||
{
|
||||
element: 'link[rel="icon"][sizes="16x16"]',
|
||||
href: { dark: '/icons/light-favicon-16x16.png' }
|
||||
},
|
||||
{
|
||||
element: 'link[rel="icon"][sizes="32x32"]',
|
||||
href: { dark: '/icons/light-favicon-32x32.png' }
|
||||
}
|
||||
])
|
||||
})()
|
||||
;(function (ThemeSwitcher) {
|
||||
const themeSwitcher = new ThemeSwitcher('stylesheet');
|
||||
const themeSwitchBtn = document.getElementById('switch');
|
||||
const themes = {
|
||||
dark: 'dark',
|
||||
darkStandalone: 'dark.standalone',
|
||||
light: 'light',
|
||||
lightStandalone: 'light.standalone'
|
||||
};
|
||||
const getSwitchThemeName = function () {
|
||||
// Case: switch to "light.standalone.css"
|
||||
if (
|
||||
(themeSwitcher.current === themes.dark) && themeSwitcher.isDark ||
|
||||
(themeSwitcher.current === themes.light) && themeSwitcher.isDark ||
|
||||
themeSwitcher.current === themes.darkStandalone
|
||||
) {
|
||||
return themes.lightStandalone
|
||||
|
||||
// Case: switch to "dark.standalone.css"
|
||||
} else if (
|
||||
(themeSwitcher.current === themes.dark) && themeSwitcher.isLight ||
|
||||
(themeSwitcher.current === themes.light) && themeSwitcher.isLight ||
|
||||
themeSwitcher.current === themes.lightStandalone
|
||||
) {
|
||||
return themes.darkStandalone;
|
||||
|
||||
// Case: switch to "light.css"
|
||||
} else if (themeSwitcher.current === themes.dark) {
|
||||
return themes.light;
|
||||
|
||||
// Case: switch to "dark.css"
|
||||
} else if (themeSwitcher.current === themes.light) {
|
||||
return themes.dark;
|
||||
|
||||
// Case: switch destination is unknown
|
||||
} else {
|
||||
return themeSwitcher.current;
|
||||
}
|
||||
};
|
||||
const getGeneralThemeName = function () {
|
||||
return themeSwitcher.current.replace(/\.standalone/g, '');
|
||||
};
|
||||
|
||||
themeSwitchBtn.addEventListener('click', function() {
|
||||
themeSwitcher.switch(getSwitchThemeName());
|
||||
});
|
||||
|
||||
themeSwitcher.onChangeDark = function () {
|
||||
themeSwitcher.switch(getGeneralThemeName());
|
||||
};
|
||||
|
||||
themeSwitcher.onChangeLight = function () {
|
||||
themeSwitcher.switch(getGeneralThemeName());
|
||||
};
|
||||
})(
|
||||
(function () {
|
||||
const ThemeSwitcher = function(stylesheet) {
|
||||
const darkSchemeMql = matchMedia('(prefers-color-scheme: dark)');
|
||||
const lightSchemeMql = matchMedia('(prefers-color-scheme: light)');
|
||||
const that = this;
|
||||
|
||||
this.themeDir = '../dist/';
|
||||
this.stylesheet = document.getElementById(stylesheet);
|
||||
this.current = this.getThemeName(this.stylesheet.href);
|
||||
this.isDark = darkSchemeMql.matches;
|
||||
this.isLight = lightSchemeMql.matches;
|
||||
|
||||
darkSchemeMql.addListener(function (mql) {
|
||||
if (mql.matches && typeof that.onChangeDark === 'function') {
|
||||
that.onChangeDark()
|
||||
}
|
||||
});
|
||||
|
||||
lightSchemeMql.addListener(function (mql) {
|
||||
if (mql.matches && typeof that.onChangeLight === 'function') {
|
||||
that.onChangeLight()
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
ThemeSwitcher.prototype = {
|
||||
switch: function (themeName) {
|
||||
this.stylesheet.href = this.themeDir + themeName + '.css';
|
||||
this.current = themeName;
|
||||
},
|
||||
getThemeName: function () {
|
||||
const reg = new RegExp(this.themeDir + '(|.+?).css');
|
||||
return stylesheet.getAttribute('href').replace(reg, '$1');
|
||||
},
|
||||
onChangeDark: null,
|
||||
onChangeLight: null
|
||||
};
|
||||
|
||||
return ThemeSwitcher;
|
||||
})()
|
||||
);
|
||||
Reference in New Issue
Block a user