Initial project port over to sourcehut
This commit is contained in:
Bradley Taunt
commit
1349b0f59e
|
|
@ -0,0 +1,21 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2018 Bradley Taunt
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
# Vanilla CSS
|
||||
|
||||
Vanilla CSS is a <b>minimal baseline stylesheet</b> for any web project. It includes a basic reset and default styling for all HTML5 elements (which you can see live at <a href="https://vanillacss.com">vanillacss.com</a>).
|
||||
|
||||
## Usage
|
||||
|
||||
If you want to use this CSS directly in your project, simply download the stylesheet below and include the following in your HTML `head` section:
|
||||
|
||||
```
|
||||
<link rel="stylesheet" href="vanilla.css">
|
||||
```
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<svg id="emoji" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="color">
|
||||
<path fill="#FFFFFF" stroke="none" d="M53.9354,36v4H18.3685v-4H19.37c-0.02-0.34,0.01-0.68,0.1-1c0.3-1.05,1.17-1.92,2.33-2.18l3.77-0.87 c-1.5,0.11-2.88-0.84-3.21-2.3c-0.37-1.61,0.68-3.23,2.36-3.62l3.77-0.87c-1.5,0.1-2.88-0.85-3.21-2.3 c-0.37-1.61,0.69-3.23,2.37-3.62l3.79-0.87c-1.51,0.13-2.9-0.82-3.23-2.29c-0.38-1.61,0.68-3.24,2.36-3.62l1.26-0.29h0.01 C33.86,11.67,36,7,34,5h3c1.66,0,3,1.34,3,3s-1,2.52-2.69,2.9l2.77-0.64c1.68-0.39,3.34,0.61,3.71,2.22 c0.34,1.45-0.47,2.89-1.84,3.46L43,15.7c1.68-0.39,3.35,0.6,3.72,2.22c0.33,1.44-0.48,2.88-1.85,3.45l1.06-0.24 c1.68-0.38,3.34,0.61,3.71,2.23c0.34,1.46-0.5,2.92-1.9,3.48l1.11-0.26c1.68-0.39,3.34,0.61,3.71,2.22 c0.38,1.62-0.68,3.24-2.36,3.63l-2.39,0.55L50,33c1.31,0,2.42,0.83,2.82,2C52.94,35.31,53.9354,35.65,53.9354,36z"/>
|
||||
<rect x="17" y="40" width="38" height="10" fill="#fcea2b" stroke="none"/>
|
||||
<path fill="#fcea2b" stroke="none" d="M52,50l-4,12c-0.873,2.6191-2.2393,5-5,5H29c-2.7607,0-4.127-2.3809-5-5l-4-12"/>
|
||||
<rect x="42.333" y="40" width="12.667" height="10" fill="#f1b31c" stroke="none"/>
|
||||
<path fill="#f1b31c" stroke="none" d="M43.3564,50L40,63.0303c-0.374,1.4541-0.8408,2.8486-1.4678,3.9697H43c2.7607,0,4.127-2.3809,5-5l4-12 H43.3564z"/>
|
||||
</g>
|
||||
<g id="hair"/>
|
||||
<g id="skin"/>
|
||||
<g id="skin-shadow"/>
|
||||
<g id="line">
|
||||
<rect x="17" y="40" width="38" height="10" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
|
||||
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M53,36c0-1.6562-1.3428-3-3-3l-2.2187-0.0156"/>
|
||||
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2.0397" d="M30.5713,12.4556c-1.6797,0.3877-2.7383,2.0112-2.3662,3.6255c0.373,1.6142,2.0361,2.6084,3.7158,2.2207l9.5088-2.1954 c1.6797-0.3876,2.7383-2.0107,2.3652-3.625c-0.372-1.6142-2.0351-2.6088-3.7148-2.2211L30.5713,12.4556z"/>
|
||||
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2.0397" d="M27.6475,19.2402c-1.6797,0.3877-2.7383,2.0103-2.3653,3.6245c0.3721,1.6143,2.0352,2.6094,3.7149,2.2217l15.3554-3.5449 c1.6788-0.3877,2.7383-2.0112,2.3653-3.6255c-0.3721-1.6142-2.0362-2.6084-3.7158-2.2207L27.6475,19.2402z"/>
|
||||
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2.0397" d="M49.6406,23.3555c-0.373-1.6143-2.0351-2.6094-3.7148-2.2212l-21.2012,4.8945c-1.6797,0.3877-2.7383,2.0112-2.3662,3.6255 c0.373,1.6143,2.0361,2.6084,3.7158,2.2207l21.2012-4.8945C48.9551,26.5928,50.0137,24.9697,49.6406,23.3555z"/>
|
||||
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2.0397" d="M35.9424,35.7168l14.2568-3.291c1.6787-0.3877,2.7383-2.0108,2.3653-3.625c-0.3731-1.6143-2.0362-2.6094-3.7149-2.2217 l-27.0478,6.2451c-1.5225,0.3506-2.5352,1.7168-2.4327,3.1729"/>
|
||||
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.9999" d="M34,5h3c1.6572,0,3,1.3433,3,3s-1,2.521-2.6875,2.896"/>
|
||||
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.9999" d="M34,5c2,2-0.1455,6.6875-2.167,7.1665"/>
|
||||
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M52,50l-4,12c-0.873,2.6191-2.2393,5-5,5H29c-2.7607,0-4.127-2.3809-5-5l-4-12"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
|
|
@ -0,0 +1,277 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vanilla CSS | A minimal baseline stylesheet for any web project</title>
|
||||
<link rel="stylesheet" href="vanilla.css">
|
||||
<link rel="icon" href="favicon.svg" type="image/svg">
|
||||
</head>
|
||||
<body>
|
||||
<div id="top" class="page" role="document">
|
||||
<header role="banner">
|
||||
<h1>Vanilla CSS</h1>
|
||||
<p>Vanilla CSS is a <b>minimal baseline stylesheet</b> for any web project. It includes a basic reset and default styling for all HTML5 elements (which you can see live below).</p>
|
||||
<ul>
|
||||
<li>Built-in variables</li>
|
||||
<li>Easy to extend</li>
|
||||
<li>Only 5KB</li>
|
||||
</ul>
|
||||
<h3>Usage:</h3>
|
||||
<p>Copy and paste the following inside your <code>head</code> element:</p>
|
||||
<pre><link rel="stylesheet" href="https://vanillacss.com/vanilla.css"></pre>
|
||||
<p>Or import directly in your own CSS:</p>
|
||||
<pre>@import url('https://vanillacss.com/vanilla.css');</pre>
|
||||
<p><i>This project is completely free and open source.</i> Check it out on <a href="https://github.com/bradleytaunt/vanilla-css">Github</a>.</p>
|
||||
</header>
|
||||
<nav role="navigation">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#text">Text</a>
|
||||
<ul>
|
||||
<li><a href="#text__typeface">Typeface</a></li>
|
||||
<li><a href="#text__headings">Headings</a></li>
|
||||
<li><a href="#text__paragraphs">Paragraphs</a></li>
|
||||
<li><a href="#text__blockquotes">Blockquotes</a></li>
|
||||
<li><a href="#text__lists">Lists</a></li>
|
||||
<li><a href="#text__hr">Horizontal rules</a></li>
|
||||
<li><a href="#text__tables">Tabular data</a></li>
|
||||
<li><a href="#text__code">Code</a></li>
|
||||
<li><a href="#text__inline">Inline elements</a></li>
|
||||
<li><a href="#text__comments">HTML Comments</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#embedded">Embedded content</a>
|
||||
</li>
|
||||
<li><a href="#inputs">Basic inputs</a></li>
|
||||
<li>
|
||||
<a href="#forms">Detailed form elements</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main role="main">
|
||||
<section id="text">
|
||||
<header><h1>Text</h1></header>
|
||||
<article id="text__typeface">
|
||||
<header>
|
||||
<h1>Typeface</h1>
|
||||
<p>Vanilla CSS will use whatever default system fonts are available for faster speed and optimization.</p>
|
||||
</header>
|
||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||
</article>
|
||||
<article id="text__headings">
|
||||
<header>
|
||||
<h1>Headings</h1>
|
||||
</header>
|
||||
<div>
|
||||
<h1>Heading 1</h1>
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Heading 3</h3>
|
||||
<h4>Heading 4</h4>
|
||||
<h5>Heading 5</h5>
|
||||
<h6>Heading 6</h6>
|
||||
</div>
|
||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||
</article>
|
||||
<article id="text__paragraphs">
|
||||
<header><h1>Paragraphs</h1></header>
|
||||
<div>
|
||||
<p>A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
|
||||
</div>
|
||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||
</article>
|
||||
<article id="text__blockquotes">
|
||||
<header><h1>Blockquotes</h1></header>
|
||||
<div>
|
||||
<blockquote>
|
||||
<p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.</p>
|
||||
<p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
|
||||
<cite><a href="#!">Said no one, ever.</a></cite>
|
||||
</blockquote>
|
||||
</div>
|
||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||
</article>
|
||||
<article id="text__lists">
|
||||
<header><h1>Lists</h1></header>
|
||||
<div>
|
||||
<h3>Definition list</h3>
|
||||
<dl>
|
||||
<dt>Definition List Title</dt>
|
||||
<dd>This is a definition list division.</dd>
|
||||
</dl>
|
||||
<h3>Ordered List</h3>
|
||||
<ol>
|
||||
<li>List Item 1</li>
|
||||
<li>List Item 2</li>
|
||||
<li>List Item 3</li>
|
||||
</ol>
|
||||
<h3>Unordered List</h3>
|
||||
<ul>
|
||||
<li>List Item 1</li>
|
||||
<li>List Item 2</li>
|
||||
<li>List Item 3</li>
|
||||
</ul>
|
||||
<h3>Parent with Children List</h3>
|
||||
<ul>
|
||||
<li>List Item 1</li>
|
||||
<li>List Item 2
|
||||
<ul>
|
||||
<li>Child Item 1</li>
|
||||
<li>Child Item 2</li>
|
||||
<li>Child Item 3</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>List Item 3</li>
|
||||
</ul>
|
||||
</div>
|
||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||
</article>
|
||||
<article id="text__hr">
|
||||
<header><h1>Horizontal rules</h1></header>
|
||||
<div>
|
||||
<hr>
|
||||
</div>
|
||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||
</article>
|
||||
<article id="text__tables">
|
||||
<header><h1>Tabular data</h1></header>
|
||||
<table>
|
||||
<caption>Table Caption</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Table Heading 1</th>
|
||||
<th>Table Heading 2</th>
|
||||
<th>Table Heading 3</th>
|
||||
<th>Table Heading 4</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Table Cell 1</td>
|
||||
<td>Table Cell 2</td>
|
||||
<td>Table Cell 3</td>
|
||||
<td>Table Cell 4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Table Cell 1</td>
|
||||
<td>Table Cell 2</td>
|
||||
<td>Table Cell 3</td>
|
||||
<td>Table Cell 4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Table Cell 1</td>
|
||||
<td>Table Cell 2</td>
|
||||
<td>Table Cell 3</td>
|
||||
<td>Table Cell 4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Table Cell 1</td>
|
||||
<td>Table Cell 2</td>
|
||||
<td>Table Cell 3</td>
|
||||
<td>Table Cell 4</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Table Footer 1</th>
|
||||
<th>Table Footer 2</th>
|
||||
<th>Table Footer 3</th>
|
||||
<th>Table Footer 4</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||
</article>
|
||||
<article id="text__code">
|
||||
<header><h1>Code</h1></header>
|
||||
<div>
|
||||
<p><strong>Keyboard input:</strong> <kbd>Cmd</kbd></p>
|
||||
<p><strong>Inline code:</strong> <code><div>code</div></code></p>
|
||||
<p><strong>Sample output:</strong> <samp>This is sample output from a computer program.</samp></p>
|
||||
<h2>Pre-formatted text</h2>
|
||||
<pre>P R E F O R M A T T E D T E X T
|
||||
! " # $ % & ' ( ) * + , - . /
|
||||
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
|
||||
@ A B C D E F G H I J K L M N O
|
||||
P Q R S T U V W X Y Z [ \ ] ^ _
|
||||
` a b c d e f g h i j k l m n o
|
||||
p q r s t u v w x y z { | } ~ </pre>
|
||||
</div>
|
||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||
</article>
|
||||
<article id="text__inline">
|
||||
<header><h1>Inline elements</h1></header>
|
||||
<div>
|
||||
<p><a href="#!">This is a text link</a>.</p>
|
||||
<p><strong>Strong is used to indicate strong importance.</strong></p>
|
||||
<p><em>This text has added emphasis.</em></p>
|
||||
<p>The <b>b element</b> is stylistically different text from normal text, without any special importance.</p>
|
||||
<p>The <i>i element</i> is text that is offset from the normal text.</p>
|
||||
<p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation.</p>
|
||||
<p><del>This text is deleted</del> and <ins>This text is inserted</ins>.</p>
|
||||
<p><s>This text has a strikethrough</s>.</p>
|
||||
<p>Superscript<sup>®</sup>.</p>
|
||||
<p>Subscript for things like H<sub>2</sub>O.</p>
|
||||
<p><small>This small text is small for fine print, etc.</small></p>
|
||||
<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
|
||||
<p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation.</q></p>
|
||||
<p><cite>This is a citation.</cite></p>
|
||||
<p>The <dfn>dfn element</dfn> indicates a definition.</p>
|
||||
<p>The <mark>mark element</mark> indicates a highlight.</p>
|
||||
<p>The <var>variable element</var>, such as <var>x</var> = <var>y</var>.</p>
|
||||
<p>The time element: <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></p>
|
||||
</div>
|
||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||
</article>
|
||||
<article id="text__comments">
|
||||
<header><h1>HTML Comments</h1></header>
|
||||
<div>
|
||||
<p>There is comment here: <!--This comment should not be displayed--></p>
|
||||
<p>There is a comment spanning multiple tags and lines below here.</p>
|
||||
<!--<p><a href="#!">This is a text link. But it should not be displayed in a comment</a>.</p>
|
||||
<p><strong>Strong is used to indicate strong importance. But, it should not be displayed in a comment</strong></p>
|
||||
<p><em>This text has added emphasis. But, it should not be displayed in a comment</em></p>-->
|
||||
</div>
|
||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||
</article>
|
||||
</section>
|
||||
<section id="embedded">
|
||||
<header><h1>Embedded content</h1></header>
|
||||
<article id="embedded__images">
|
||||
<header><h2>Images</h2></header>
|
||||
<div>
|
||||
<h3>No <code><figure></code> element</h3>
|
||||
<p><img src="https://placekitten.com/480/480" alt="Image alt text"></p>
|
||||
<h3>Wrapped in a <code><figure></code> element, no <code><figcaption></code></h3>
|
||||
<figure><img src="https://placekitten.com/420/420" alt="Image alt text"></figure>
|
||||
<h3>Wrapped in a <code><figure></code> element, with a <code><figcaption></code></h3>
|
||||
<figure>
|
||||
<img src="https://placekitten.com/420/420" alt="Image alt text">
|
||||
<figcaption>Here is a caption for this image.</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||
</article>
|
||||
</section>
|
||||
<section id="inputs">
|
||||
<header><h1>Basic inputs</h1></header>
|
||||
<p>Very basic input styling is also supported:</p>
|
||||
<input type="text" placeholder="I'm a text input field">
|
||||
<input type="email" placeholder="I'm an email input field">
|
||||
<input type="password" placeholder="I'm a password input field">
|
||||
</section>
|
||||
<section id="forms">
|
||||
<header><h1>Form elements</h1></header>
|
||||
<p>Looking for custom form styling?</p>
|
||||
<h4>Check out <a href="https://normform.netlify.com">Normform</a> for beautiful and lightweight form CSS</h4>
|
||||
</section>
|
||||
</main>
|
||||
<footer role="contentinfo">
|
||||
<hr>
|
||||
<p><small>Created by <a href="https://bradleytaunt.com">Bradley Taunt</a>. Source on <a href="https://github.com/bradleytaunt/vanilla-css">Github</a>.
|
||||
<br>HTML5 element example page by <a href="https://twitter.com/cbracco">@cbracco</a>. Code on <a href="https://github.com/cbracco/html5-test-page">GitHub</a>.</small></p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,187 @@
|
|||
/* Reset */
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Variables */
|
||||
:root {
|
||||
--desktop-font-size: 1.2rem/1.55;
|
||||
--mobile-font-size: 1rem/1.45;
|
||||
--text-color: #2d2d2d;
|
||||
--link-color: blue;
|
||||
--link-color-alt: darkblue;
|
||||
--primary-color: lightsteelblue;
|
||||
--secondary-color: aliceblue;
|
||||
--tertiary-color: whitesmoke;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
body {
|
||||
color: var(--text-color);
|
||||
margin: 0 auto;
|
||||
max-width: 75ch;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
body, input {
|
||||
font: var(--desktop-font-size) -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto, Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6,p,blockquote,dl,img,figure {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 { font-weight: bold; line-height: 1.2; }
|
||||
h1 { font-size: 200%; }
|
||||
h2 { font-size: 150%; }
|
||||
h3 { font-size: 120%; }
|
||||
h4,h5,h6 { font-size: 100%; }
|
||||
h5, h6 { text-transform: uppercase; }
|
||||
|
||||
header h1 { border-bottom: 1px solid; }
|
||||
|
||||
a,a:visited { color: var(--link-color); }
|
||||
a:hover,a:focus { color: var(--link-color-alt); }
|
||||
|
||||
strong, time, b { font-weight: bold; }
|
||||
em, dfn, i { font-style: italic; }
|
||||
sub { font-size: 60%; vertical-align: bottom; }
|
||||
small { font-size: 80%; }
|
||||
|
||||
blockquote, q {
|
||||
background: var(--secondary-color);
|
||||
border-left: 10px solid var(--primary-color);
|
||||
display: block;
|
||||
font-family: "Georgia", serif;
|
||||
padding: 1rem;
|
||||
}
|
||||
blockquote p:first-child { margin-top: 0; }
|
||||
blockquote p:last-child { margin-bottom: 0; }
|
||||
cite {
|
||||
font-family: "Georgia", serif;
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
kbd,code,samp,pre,var { font: var(--mobile-font-size) monospace; }
|
||||
code, pre {
|
||||
background: var(--tertiary-color);
|
||||
border: 1px solid;
|
||||
overflow: auto;
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
code pre , pre code { border: 0; padding: 0; }
|
||||
|
||||
/* Elements */
|
||||
hr {
|
||||
background: var(--text-color);
|
||||
border: 0;
|
||||
height: 1px;
|
||||
margin: 4rem 0;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
figure {
|
||||
border: 1px solid var(--primary-color);
|
||||
display: inline-block;
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
figure img { margin: 0 auto; }
|
||||
figure figcaption { font-size: 80%; margin-top: 0.5rem; text-align: center; }
|
||||
|
||||
ul, ol { margin: 2rem 0; padding: 0 0 0 2rem; }
|
||||
ul li, ol li { margin-bottom: 1rem; }
|
||||
li > ul, li > ol { margin: 0.25rem 0 0.5rem; padding: 0 0 0 2rem; }
|
||||
li > ul li, li > ol li { margin-bottom: 0.5rem; }
|
||||
|
||||
dl dd { padding-left: 2rem; }
|
||||
|
||||
table {
|
||||
border: 1px solid var(--primary-color);
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
table caption { margin: 2rem 0; }
|
||||
table tr { border-bottom: 1px solid var(--primary-color); }
|
||||
table thead { position: sticky; top: 0; }
|
||||
table tbody tr:nth-child(even) { background: var(--tertiary-color); }
|
||||
table th { background: var(--secondary-color); font-weight: bold; }
|
||||
table th, table td { padding: 0.5rem; }
|
||||
|
||||
input {
|
||||
appearance: none;
|
||||
border: 1px solid var(--text-color);
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
padding: 0.8rem;
|
||||
}
|
||||
input:focus, input:active { background-color: var(--secondary-color); border-color: var(--link-color); }
|
||||
|
||||
sup { font-size: 80%; vertical-align: top; }
|
||||
|
||||
/* Mobile Styling */
|
||||
@media screen and (max-width: 75ch) {
|
||||
body, input {
|
||||
font: var(--mobile-font-size) -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto, Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
|
||||
}
|
||||
table { table-layout: auto; }
|
||||
}
|
||||
|
||||
/* Dark mode support */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background: #191919;
|
||||
}
|
||||
input:focus, input:active {
|
||||
background-color: var(--text-color);
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
table,
|
||||
table tr,
|
||||
table th:not(:last-of-type),
|
||||
table td:not(:last-of-type) {
|
||||
border-color: var(--text-color);
|
||||
}
|
||||
table thead th,
|
||||
table tfoot th {
|
||||
background-color: var(--primary-color-light);
|
||||
}
|
||||
:root {
|
||||
--text-color: #fff;
|
||||
--link-color: orange;
|
||||
--link-color-alt: yellow;
|
||||
--primary-color: orange;
|
||||
--primary-color-light: dimgrey;
|
||||
--secondary-color: black;
|
||||
--tertiary-color: #2d2d2d;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue