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

Add color emojis to the base stylesheet

Browse Source
This commit is contained in:
Felix
2020-05-29 23:23:08 -05:00
parent c940d74d10
commit 7a656de78e
3 changed files with 6 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docs/index.html
View File

@@ -125,7 +125,7 @@
Paste this into the <code>&lt;head&gt;</code> of your HTML: Paste this into the <code>&lt;head&gt;</code> of your HTML:
</h3> </h3>
<button type="button" id="copy-button"> <button type="button" id="copy-button">
<span id="copy-button-feedback" class="emoji"></span> <span id="copy-button-feedback"></span>
Copy to clipboard Copy to clipboard
</button> </button>
</header> </header>
@@ -139,13 +139,13 @@
<h3>Options</h3> <h3>Options</h3>
<form id="theme-form"> <form id="theme-form">
<input type="radio" value="auto" checked name="theme" id="theme-auto" /> <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> <label for="theme-auto">Automatic 🌙 / ☀</label>
<input type="radio" value="dark" name="theme" id="theme-dark" /> <input type="radio" value="dark" name="theme" id="theme-dark" />
<label for="theme-dark">Dark theme <span class="emoji">🌙</span></label> <label for="theme-dark">Dark theme 🌙</label>
<input type="radio" value="light" name="theme" id="theme-light" /> <input type="radio" value="light" name="theme" id="theme-light" />
<label for="theme-light">Light theme <span class="emoji">☀</span></label> <label for="theme-light">Light theme ☀</label>
</form> </form>
<table id="version-info"> <table id="version-info">
@@ -339,7 +339,7 @@
<h6>Heading 6</h6> <h6>Heading 6</h6>
<footer> <footer>
<a href="#">Back to top <span class="emoji">⬆</span></a> <a href="#">Back to top ⬆</a>
</footer> </footer>
<script src="script.js" defer></script> <script src="script.js" defer></script>

20
docs/style.css
View File

@@ -63,23 +63,3 @@ body > footer {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.emoji {
/* Use proper Emoji instead of plain Unicode chars */
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;
}

2
src/parts/_base.css
View File

@@ -1,5 +1,5 @@
body { body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',, 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
line-height: 1.4; line-height: 1.4;
max-width: 800px; max-width: 800px;
margin: 20px auto; margin: 20px auto;