Skip to content

Commit

Permalink
Added an open props page and fixed some theming bugs
Browse files Browse the repository at this point in the history
  • Loading branch information
@dutchcelt
dutchcelt committed Jan 7, 2024
1 parent ebdba2b commit 366f94a
Show file tree
Hide file tree
Showing 11 changed files with 465 additions and 77 deletions.
3 changes: 2 additions & 1 deletion index.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@layer --system, --theme;
@import url('src/system-properties.css');
@import url('src/system-colors.css');
@import url('src/system-typography.css');
Expand All @@ -7,4 +8,4 @@
@import url('src/system-radi.css');
@import url('src/system-custom-colors.css');

@import url("src/system-selectors.css");
@import url('src/system-selectors.css');
37 changes: 34 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
</head>
<body>
<header>
<p>Demo: system.css</p>
<h3>system.css</h3>
<nav><a href="index.html" aria-current="page">Home</a> <a href="openprops.html">Open props theme</a></nav>
</header>
<main>
<h1>The quick brown fox jumps over the lazy dog</h1>
Expand Down Expand Up @@ -61,14 +62,44 @@ <h6>Heading 6</h6>

<ul>
<li>List item</li>
<li>List item</li>
<li>
List item
<ul>
<li>List item</li>
<li>List item</li>
<li>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil vel nemo deleniti, ipsam
inventore voluptate, tempora quae obcaecati aut voluptatum non? Dignissimos numquam aut
commodi odit quae ipsa quaerat enim.
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</li>
<li>List item</li>
</ul>
</li>
<li>List item</li>
<li>List item</li>
</ul>

<ol>
<li>Step 1</li>
<li>Step 2</li>
<li>
Step 2
<ul>
<li>List item</li>
<li>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, dolore enim? Magnam
provident, alias ab libero molestiae minus, quibusdam velit quo laboriosam at dolorum
possimus repellendus optio nam aut vitae.
</li>
<li>List item</li>
<li>List item</li>
</ul>
</li>
<li>????</li>
<li>PROFIT!!!</li>
</ol>
Expand Down
308 changes: 308 additions & 0 deletions openprops.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,308 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>system.css</title>
<meta name="description" content="A classless CSS base stylesheet to write modern websites using only HTML." />
<meta name="keywords" content="system, css, framework,classless css" />
<link rel="stylesheet" href="index.css" />
<link rel="stylesheet" href="theme/openprops/index.css" />
</head>
<body>
<header>
<h3>system.css</h3>
<nav><a href="index.html">Home</a> <a href="openprops.html" aria-current="page">Open props theme</a></nav>
</header>
<main>
<h1>The quick brown fox jumps over the lazy dog</h1>
<p>
This paragraph text is using
<a href="https://github.com/dutchcelt/system.css/blob/main/system.css">system.css</a>. Lorem ipsum dolor
sit amet consectetur adipisicing elit.
</p>
<p>
This is more paragraph text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At consequatur
delectus dolore enim error id, magni numquam obcaecati quam quas quos rerum sunt suscipit temporibus
totam. Blanditiis fuga maxime quae.
</p>
<h2>Heading 2</h2>
<p>This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<h3>Heading 3</h3>
<p>This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<h4>Heading 4</h4>
<p>
This is paragraph text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At consectetur cumque
eligendi enim harum placeat quidem sint tempora voluptas voluptates! Pariatur quam, sed. Cumque deleniti
dicta eum facere hic tempore!
</p>
<h5>Heading 5</h5>
<p>This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>
This is more paragraph text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet
architecto aspernatur atque aut consequuntur dicta dolore eligendi fugit harum labore maxime, nulla
optio pariatur possimus provident quibusdam quos vel.
</p>
<h6>Heading 6</h6>
<p>This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

<hr />

<p>
Lorem <mark>ipsum</mark> dolor sit amet <strong>consectetur</strong> adipisicing elit. Aut
<i>harum molestias</i> labore amet possimus <s>exercitationem aperiam</s> earum, doloribus
<u>nobis ducimus</u> maiores quia voluptates quis omnis molestiae quisquam.
<a href="#">Voluptatibus, officiis laudantium?</a>
</p>

<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. <code>Hic culpa, nobis doloremque</code> veniam
non, nihil cupiditate odit repellat est <kbd>ALT + F4</kbd> expedita facilis. Fuga aspernatur, alias
debitis eveniet totam minima vel.
</p>

<ul>
<li>List item</li>
<li>
List item
<ul>
<li>List item</li>
<li>List item</li>
<li>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil vel nemo deleniti, ipsam
inventore voluptate, tempora quae obcaecati aut voluptatum non? Dignissimos numquam aut
commodi odit quae ipsa quaerat enim.
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</li>
<li>List item</li>
</ul>
</li>
<li>List item</li>
<li>List item</li>
</ul>

<ol>
<li>Step 1</li>
<li>
Step 2
<ul>
<li>List item</li>
<li>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, dolore enim? Magnam
provident, alias ab libero molestiae minus, quibusdam velit quo laboriosam at dolorum
possimus repellendus optio nam aut vitae.
</li>
<li>List item</li>
<li>List item</li>
</ul>
</li>
<li>????</li>
<li>PROFIT!!!</li>
</ol>

<dl>
<dt><abbr title="World Wide Web">WWW</abbr></dt>
<dd>The part of the Internet that contains websites and web pages</dd>
<dt><abbr title="Hypertext Markup Language">HTML</abbr></dt>
<dd>A markup language for creating web pages</dd>
<dt><abbr title="Cascading Style Sheets">CSS</abbr></dt>
<dd>A technology to make HTML look better</dd>
</dl>

<blockquote cite="https://en.wikiquote.org/wiki/Edward_Snowden">
<p>
If you think privacy is unimportant for you because you have nothing to hide, you might as well say
free speech is unimportant for you because you have nothing useful to say.
</p>
<p>– Edward Snowden</p>
</blockquote>

<pre>
&#x3C;!DOCTYPE html&#x3E;
&#x3C;html&#x3E;
&#x3C;head&#x3E;
&#x3C;title&#x3E;Hello World&#x3C;/title&#x3E;
&#x3C;/head&#x3E;
&#x3C;body&#x3E;
&#x3C;p&#x3E;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&#x3C;/p&#x3E;
&#x3C;/body&#x3E;
&#x3C;/html&#x3E;</pre
>

<hr />

<table>
<caption>
Ho-kago Tea Time
</caption>
<thead>
<tr>
<th>Name</th>
<th>Instrument</th>
</tr>
</thead>
<tbody>
<tr>
<td>Yui Hirasawa</td>
<td>Lead Guitar</td>
</tr>
<tr>
<td>Mio Akiyama</td>
<td>Bass</td>
</tr>
<tr>
<td>Ritsu Tainaka</td>
<td>Drums</td>
</tr>
<tr>
<td>Tsumugi Kotobuki</td>
<td>Keyboard</td>
</tr>
<tr>
<td>Azusa Nakano</td>
<td>Rhythm Guitar</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Instrument</th>
</tr>
</tfoot>
</table>

<hr />

<form id="form" action="/">
<fieldset title="Full Name">
<div>
<label for="firstname">First name</label>
<input id="firstname" type="text" placeholder="First name" name="firstname" required="true" />
</div>
<div>
<label for="lastname">Last name</label>
<input id="lastname" type="text" placeholder="Last name" name="lastname" required="true" />
</div>
</fieldset>
<fieldset>
<legend>Gender (optional)</legend>
<fieldset>
<input type="radio" name="gender" id="gender_male" value="Male" />
<label for="gender_male">Male</label>
<input type="radio" name="gender" id="gender_female" value="Female" />
<label for="gender_female">Female</label>
<input type="radio" name="gender" id="gender_other" value="other-none-na" />
<label for="gender_other">Non-binary</label>
<input type="radio" name="gender" id="gender_unknown" value="unknown" />
<label for="gender_unknown">None of your business</label>
</fieldset>
</fieldset>
<fieldset title="Contact information">
<div>
<label for="email">E-mail</label>
<input type="email" id="email" required />
</div>
<div>
<label for="tel">Phone number</label>
<input type="tel" id="tel" required />
</div>
<div>
<label for="select">Country</label>
<select id="select" required="required">
<option>China</option>
<option>India</option>
<option>United States</option>
<option>Indonesia</option>
<option>Brazil</option>
</select>
</div>
</fieldset>
<fieldset>
<div>
<label for="password">password</label>
<input
type="password"
id="password"
pattern=".{8,24}"
required="required"
title="This must be a valid password. Minimum of 8 characters with a max of 24."
/>
</div>
</fieldset>
<fieldset>
<div>
<label for="textarea">Comments (optional)</label>
<textarea id="textarea"></textarea>
</div>
</fieldset>
<fieldset>
<div>
<input type="checkbox" name="terms" id="terms" required />
<label for="terms">
I agree to the
<a href="https://dutchcelt.github.io/system.css/">terms and conditions</a></label
>
</div>
</fieldset>
<div>
<button disabled="disabled">Disabled</button>
<button type="button">Cancel</button>
<button type="submit">Submit form</button>
</div>
<p>
<small
><em><strong>Note</strong>: Try to avoid the use of disabled items.</em></small
>
</p>
</form>
<hr />
<details>
<summary>This is the details summary text</summary>
<h4>Heading 5</h4>
<p>This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<svg viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg">
<rect width="800" height="450" fill="var(--system-surface-color)"></rect>
<text
x="50%"
y="50%"
dominant-baseline="middle"
text-anchor="middle"
font-family="system-ui"
font-size="72px"
fill="var(--system-gray-text)"
>
Aspect Ratio 16:9
</text>
</svg>
<p>
This is more paragraph text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet
architecto aspernatur atque aut consequuntur dicta dolore eligendi fugit harum labore maxime, nulla
optio pariatur possimus provident quibusdam quos vel.
</p>
</details>
<hr />
<figure>
<svg viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg">
<rect width="800" height="450" fill="var(--system-surface-color)"></rect>
<text
x="50%"
y="50%"
dominant-baseline="middle"
text-anchor="middle"
font-family="system-ui"
font-size="72px"
fill="var(--system-gray-text)"
>
Aspect Ratio 16:9
</text>
</svg>
</figure>
</main>
<footer></footer>
</body>
</html>
Loading

0 comments on commit 366f94a

Please sign in to comment.