Skip to content

Commit

Permalink
button color dark mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@lerina
lerina committed Apr 27, 2024
1 parent e3ea4d4 commit 5323bb5
Show file tree
Hide file tree
Showing 5 changed files with 340 additions and 34 deletions.
19 changes: 12 additions & 7 deletions css/vpkely.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,22 @@
--border-console-radius: 10px;
--box-shadow: 2px 2px 10px;
--color-accent: #118bee15;
--color-bg: #f2f0ee;
/*
--color-bg: linear-gradient(45deg, #ffaf00, #c30000);
saffron&deep_orange. #f2f0ee; electric purple #bb02ff);
*/
-color-bg: linear-gradient(45deg, rgba(206,223,240, 0.4),rgba(239,222,205,0.7));
--color-bg-secondary: #c3c3c3; /*#e9e9e9;*/
--color-link: #49545f;
--color-link: #2c2d2f; /*#49545f;*/
--color-secondary: #e9920d; /*#920de9;*/
--color-secondary-accent: #920de90b;
--color-shadow: #f4f4f4;
--color-table: #118bee;
--color-text: #000;
--color-text-secondary: #999;
--color-text-secondary: #666;
--color-scrollbar: #cacae8;
--font-family: Ubuntu, Roboto, sans-serif;
--font-family-code: Inconsolata_local;
--font-family-code: Inconsolata_local, monospace;
--hover-brightness: 1.3;
--justify-important: center;
--justify-normal: left;
Expand Down Expand Up @@ -369,9 +373,9 @@ a b,
a strong,
button,
input[type="submit"] {
background-color: var(--color-link);
border: 2px solid var(--color-link);
color: var(--color-bg);
background-color: var(--color-accent); /*link);*/
border: 2px solid var(--color-shadow);
color: var(--color-link);
}

a em,
Expand Down Expand Up @@ -399,6 +403,7 @@ figure img {

figure figcaption {
color: var(--color-text-secondary);
padding-left:1em;
}

/* Forms */
Expand Down
189 changes: 185 additions & 4 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
</style>
<link rel="stylesheet" href="https://lerina.github.io/css/vpkely.css" />
<link rel="stylesheet" href="./vpkely.css" />
</head>
<body>
<header id="title-block-header">
Expand All @@ -32,19 +32,200 @@ <h1 class="title">The Demo Scene</h1>
</ul></li>
</ul>
</nav>
<style>:root{--color-bg: linear-gradient(45deg, rgba(255,228,113, 0.9),rgba(228,105,41,0.7));}</style>
<header>
<h1>
Page Heading with <i>Italics</i> and <u>Underline</u> not in the TOC
</h1>
<p>
Page Subheading with <mark>highlighting</mark>
</p>
<br>
<p>
<a href="#"><i>Italic Link Button</i></a> centered in header <a href="#"><b>Bold Link Button →</b></a>
</p>
</header>
<main>
<h1 class="collapse" id="home"><a href="../index.html">⇦ home</a></h1>
<h1 id="wasm-demo-in-beta-stage">Wasm demo in beta stage</h1>
<h2 id="wasm-bindgen-web-sys-html-canvas">wasm-bindgen, web-sys &amp; Html Canvas</h2>
<ul>
<li><a href="./invaders/index.html">Invaders</a></li>
</ul>
<table>
<thead>
<tr class="header">
<th style="text-align: center;">Demo</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td style="text-align: center;"><a href="./invaders/index.html">Invaders</a></td>
<td>invader with a twist</td>
</tr>
<tr class="even">
<td style="text-align: center;"></td>
<td></td>
</tr>
</tbody>
</table>
<div class="alt-pre">
<pre><code>Run the mouse
over here </code></pre>
<pre><code>This is
the Alternate text</code></pre>
</div>
<hr>
<section id="section-1">
<header>
<h2>
Section Heading
</h2>
<p>
Section Subheading
</p>
</header>
<aside>
<h3>
Card heading
</h3>
<p>
Card content*
</p>
<p>
<small>*with small content</small>
</p>
</aside>
<aside>
<h3>
Card heading
</h3>
<p>
Card content <sup>with notification</sup>
</p>
</aside>
<aside>
<h3>
Card heading
</h3>
<p>
Card content
</p>
</aside>
</section>
<hr>
<section>
<blockquote>
“Quote”
<footer>
<i>- Attribution</i>
</footer>
</blockquote>
</section>
<hr>
<section>
<table>
<thead>
<tr>
<th>
</th>
<th>
Col A
</th>
<th>
Col B
</th>
<th>
Col C
</th>
</tr>
</thead>
<tr>
<td>
Row 1
</td>
<td>
Cell A1
</td>
<td>
Cell B1
</td>
<td>
Cell C1
</td>
</tr>
<tr>
<td>
Row 2
</td>
<td>
Cell A2
</td>
<td>
Cell B2
</td>
<td>
Cell C2
</td>
</tr>
</table>
</section>
<hr>
<article>
<h2>
Left-aligned header
</h2>
<p>
Left-aligned paragraph
</p>
<aside>
<p>
Article callout
</p>
</aside>
<ul>
<li>
List item 1
</li>
<li>
List item 2
</li>
</ul>
<!--
<figure>
<img alt="Stock photo" src="https://via.placeholder.com/1080x500?text=Amazing+stock+photo">
<figcaption><i>Image caption</i></figcaption>
</figure>
-->
</main>
<figure>
<img src="../img/rain.jpg" title="Before the storm" style="width:100%;height:20rem;" alt="" /><figcaption>cyclone season</figcaption>
</figure>
<main>
</article>
<hr>
<div>
<details>
<summary>Expandable title</summary>
<p>
Revealed content
</p>
</details>
<details>
<summary>Another expandable title</summary>
<p>
More revealed content
</p>
</details>
<br>
<p>
Inline <code>code</code> snippets
</p>
<pre>
<code>
// preformatted code block
</code>
</pre>
</div>
<hr>
<p><a href="#TOC">Top</a></p>
</main>
<footer>
Expand Down
109 changes: 108 additions & 1 deletion demo/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,14 @@ author:
toc-depth: 3
keywords: [Rust, Wasm, Webassembly]
---
<style>:root{--color-bg: linear-gradient(45deg, rgba(255,228,113, 0.9),rgba(228,105,41,0.7));}</style>

<header>
<h1>Page Heading with <i>Italics</i> and <u>Underline</u> not in the TOC</h1>
<p>Page Subheading with <mark>highlighting</mark></p>
<br>
<p><a href="#"><i>Italic Link Button</i></a> centered in header <a href="#"><b>Bold Link Button &rarr;</b></a></p>
</header>
<main>

# <a href="../index.html">⇦ home</a> {.collapse}
Expand All @@ -15,7 +22,12 @@ keywords: [Rust, Wasm, Webassembly]

## wasm-bindgen, web-sys & Html Canvas

- [Invaders](./invaders/index.html)
| Demo | Description |
|:------:|-----------------------------|
| [Invaders](./invaders/index.html) | invader with a twist |
| | |



<div class="alt-pre">

Expand All @@ -31,6 +43,101 @@ This is
</div>


<hr>
<section id="section-1">
<header>
<h2>Section Heading</h2>
<p>Section Subheading</p>
</header>
<aside>
<h3>Card heading</h3>
<p>Card content*</p>
<p><small>*with small content</small></p>
</aside>
<aside>
<h3>Card heading</h3>
<p>Card content <sup>with notification</sup></p>
</aside>
<aside>
<h3>Card heading</h3>
<p>Card content</p>
</aside>
</section>
<hr>
<section>
<blockquote>
"Quote"
<footer><i>- Attribution</i></footer>
</blockquote>
</section>
<hr>
<section>
<table>
<thead>
<tr>
<th></th>
<th>Col A</th>
<th>Col B</th>
<th>Col C</th>
</tr>
</thead>
<tr>
<td>Row 1</td>
<td>Cell A1</td>
<td>Cell B1</td>
<td>Cell C1</td>
</tr>
<tr>
<td>Row 2</td>
<td>Cell A2</td>
<td>Cell B2</td>
<td>Cell C2</td>
</tr>
</table>
</section>
<hr>
<article>
<h2>Left-aligned header</h2>
<p>Left-aligned paragraph</p>
<aside>
<p>Article callout</p>
</aside>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<!--
<figure>
<img alt="Stock photo" src="https://via.placeholder.com/1080x500?text=Amazing+stock+photo">
<figcaption><i>Image caption</i></figcaption>
</figure>
-->
</main>

![cyclone season](../img/rain.jpg "Before the storm"){style="width:100%;height:20rem;"}

<main>
</article>
<hr>
<div>
<details>
<summary>Expandable title</summary>
<p>Revealed content</p>
</details>
<details>
<summary>Another expandable title</summary>
<p>More revealed content</p>
</details>
<br>
<p>Inline <code>code</code> snippets</p>
<pre>
<code>
// preformatted code block
</code>
</pre>
</div>
<hr>

[Top](#TOC)

</main>
Expand Down
Loading

0 comments on commit 5323bb5

Please sign in to comment.