using owl styling
This commit is contained in:
parent
d7e5df2a95
commit
390a58b404
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
|
|
@ -12,57 +12,33 @@
|
|||
<link rel="webmention" href="/webmention/" />
|
||||
<link rel="alternate" type="application/rss+xml" title="RSS" href="/index.xml">
|
||||
|
||||
<link rel='stylesheet' href='/static/owl.css'>
|
||||
<link rel='stylesheet' href='/static/style.css'>
|
||||
<style>
|
||||
:root {
|
||||
--primary: {{.SiteConfig.PrimaryColor}};
|
||||
--primary-hover: color-mix(in srgb,var(--primary),#000 20%);
|
||||
--primary-focus: color-mix(in srgb,var(--primary),#fff 40%);
|
||||
--primary-inverse: #FFF;
|
||||
--background: {{.SiteConfig.HeaderColor}};
|
||||
--background-dark: color-mix(in srgb,var(--background),#000 50%);
|
||||
--background-light: color-mix(in srgb,var(--background),#fff 50%);
|
||||
|
||||
}
|
||||
</style>
|
||||
{{ .SiteConfig.HtmlHeadExtra }}
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="header h-card">
|
||||
{{ if .SiteConfig.AvatarUrl }}
|
||||
<div class="header-profile">
|
||||
<img class="u-photo u-logo avatar" src="{{ .SiteConfig.AvatarUrl }}" alt="{{ .SiteConfig.Title }}" width="100" height="100" />
|
||||
</div>
|
||||
{{ end }}
|
||||
<header class="h-card">
|
||||
{{ if .SiteConfig.AvatarUrl }}
|
||||
<img class="u-photo u-logo avatar" src="{{ .SiteConfig.AvatarUrl }}" alt="{{ .SiteConfig.Title }}" />
|
||||
{{ end }}
|
||||
|
||||
<div>
|
||||
<h2><a class="p-name u-url" href="/">{{ .SiteConfig.Title }}</a></h2>
|
||||
<div class="p-note">{{ .SiteConfig.SubTitle }}</div>
|
||||
</div>
|
||||
|
||||
<ul style="list-style: none;padding:0;flex-shrink: 0;">
|
||||
{{ range $me := .SiteConfig.Me }}
|
||||
<li><a href="{{$me.Url}}" rel="me">{{$me.Name}}</a>
|
||||
</li>
|
||||
<hgroup>
|
||||
<h1><a class="p-name u-url" href="/">{{ .SiteConfig.Title }}</a></h1>
|
||||
<p class="p-note">{{ .SiteConfig.SubTitle }}</p>
|
||||
</hgroup>
|
||||
<nav>
|
||||
<ul>
|
||||
{{ range $link := .SiteConfig.HeaderMenu }}
|
||||
{{ if $link.List }}
|
||||
<li><a href="/lists/{{ $link.List }}">{{ $link.Title }}</a></li>
|
||||
{{ else if $link.Post }}
|
||||
<li><a href="/posts/{{ $link.Post }}">{{ $link.Title }}</a></li>
|
||||
{{ else }}
|
||||
<li><a href="{{ $link.Url }}">{{ $link.Title }}</a></li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<nav>
|
||||
<ul>
|
||||
{{ range $link := .SiteConfig.HeaderMenu }}
|
||||
{{ if $link.List }}
|
||||
<li><a href="/lists/{{ $link.List }}">{{ $link.Title }}</a></li>
|
||||
{{ else if $link.Post }}
|
||||
<li><a href="/posts/{{ $link.Post }}">{{ $link.Title }}</a></li>
|
||||
{{ else }}
|
||||
<li><a href="{{ $link.Url }}">{{ $link.Title }}</a></li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
{{template "main" .Data}}
|
||||
|
|
@ -80,16 +56,12 @@
|
|||
<li><a href="{{ $link.Url }}">{{ $link.Title }}</a></li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<li><a href="/admin/">Editor</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{{ .SiteConfig.FooterExtra}}
|
||||
<small>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/admin/">Editor</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</small>
|
||||
<div>
|
||||
{{ .SiteConfig.FooterExtra}}
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@
|
|||
|
||||
|
||||
<div class="grid">
|
||||
<div style="margin-bottom:1em;">
|
||||
<div>
|
||||
<a style="width:100%;" href="/editor/edit/{{.Entry.ID}}/" role="button" class="">Edit</a>
|
||||
</div>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,451 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Stylesheet Test</title>
|
||||
<link rel="stylesheet" href="/web/static/style2.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<img src="avatar.jpg" alt="Page Logo" />
|
||||
<hgroup>
|
||||
<h1>Page Title</h1>
|
||||
<p>Short description of waht the blog is about. Catchy phrase to remember the blog by!</p>
|
||||
</hgroup>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>Navigation 1</li>
|
||||
<li>Navigation 2</li>
|
||||
<li>Navigation 3</li>
|
||||
<li>Navigation 4</li>
|
||||
<li>Navigation 5</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<h1>Structure</h1>
|
||||
|
||||
<footer>Footer</footer>
|
||||
|
||||
<h1>Text</h1>
|
||||
|
||||
<h2>Headings</h2>
|
||||
|
||||
<h1>Heading 1</h1>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales felis pulvinar auctor
|
||||
convallis.
|
||||
Maecenas luctus nec magna quis convallis. Donec vestibulum risus nec metus consectetur, at rhoncus arcu
|
||||
lobortis.
|
||||
Nam et turpis a leo commodo imperdiet.
|
||||
</p>
|
||||
|
||||
<h2>Heading 2</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales felis pulvinar auctor
|
||||
convallis.
|
||||
Maecenas luctus nec magna quis convallis. Donec vestibulum risus nec metus consectetur, at rhoncus arcu
|
||||
lobortis.
|
||||
Nam et turpis a leo commodo imperdiet.
|
||||
</p>
|
||||
|
||||
<h3>Heading 3</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales felis pulvinar auctor
|
||||
convallis.
|
||||
Maecenas luctus nec magna quis convallis. Donec vestibulum risus nec metus consectetur, at rhoncus arcu
|
||||
lobortis.
|
||||
Nam et turpis a leo commodo imperdiet.
|
||||
</p>
|
||||
|
||||
<h4>Heading 4</h4>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales felis pulvinar auctor
|
||||
convallis.
|
||||
Maecenas luctus nec magna quis convallis. Donec vestibulum risus nec metus consectetur, at rhoncus arcu
|
||||
lobortis.
|
||||
Nam et turpis a leo commodo imperdiet.
|
||||
</p>
|
||||
|
||||
<h5>Heading 5</h5>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales felis pulvinar auctor
|
||||
convallis.
|
||||
Maecenas luctus nec magna quis convallis. Donec vestibulum risus nec metus consectetur, at rhoncus arcu
|
||||
lobortis.
|
||||
Nam et turpis a leo commodo imperdiet.
|
||||
</p>
|
||||
|
||||
<h6>Heading 6</h6>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales felis pulvinar auctor
|
||||
convallis.
|
||||
Maecenas luctus nec magna quis convallis. Donec vestibulum risus nec metus consectetur, at rhoncus arcu
|
||||
lobortis.
|
||||
Nam et turpis a leo commodo imperdiet.
|
||||
</p>
|
||||
|
||||
<h2>Inline text elements</h2>
|
||||
<p>
|
||||
<a href="#">Link</a><code><a></code>
|
||||
</p>
|
||||
<p>
|
||||
<abbr>Abbr.</abbr><code><abbr></code>
|
||||
</p>
|
||||
<p>
|
||||
<strong>Bold</strong>
|
||||
<code><strong></code>
|
||||
<code><b></code>
|
||||
</p>
|
||||
<p>
|
||||
<em>Italic</em>
|
||||
<code><i></code>
|
||||
<code><em></code>
|
||||
<code><cite></code>
|
||||
</p>
|
||||
<p>
|
||||
<del>Deleted</del>
|
||||
<code><del></code>
|
||||
</p>
|
||||
<p>
|
||||
<ins>Inserted</ins>
|
||||
<code><ins></code>
|
||||
</p>
|
||||
<p>
|
||||
<kbd>Ctrl + S</kbd>
|
||||
<code><kbd></code>
|
||||
</p>
|
||||
<p>
|
||||
<mark>Highlighted</mark>
|
||||
<code><mark></code>
|
||||
</p>
|
||||
<p>
|
||||
<s>Strikethrough</s>
|
||||
<code><s></code>
|
||||
</p>
|
||||
<p>
|
||||
<small>Small</small>
|
||||
<code><small></code>
|
||||
</p>
|
||||
<p>
|
||||
Text <sub>Sub</sub>
|
||||
<code><sub></code>
|
||||
</p>
|
||||
<p>
|
||||
Text <sup>Sup</sup>
|
||||
<code><sup></code>
|
||||
</p>
|
||||
<p>
|
||||
<u>Underline</u>
|
||||
<code><u></code>
|
||||
</p>
|
||||
<p>
|
||||
<code>Code</code>
|
||||
<code><code></code>
|
||||
</p>
|
||||
|
||||
<h1>List</h1>
|
||||
|
||||
<h2>Unordered List</h2>
|
||||
|
||||
<ul>
|
||||
<li>Unordered List 1</li>
|
||||
<ul>
|
||||
<li>Sub List 1</li>
|
||||
<li>Sub List 2</li>
|
||||
<li>Sub List 3</li>
|
||||
<li>Sub List 4</li>
|
||||
<ul>
|
||||
<li>Sub Sub List 1</li>
|
||||
<li>Sub Sub List 2</li>
|
||||
<li>Sub Sub List 3</li>
|
||||
<li>Sub Sub List 4</li>
|
||||
</ul>
|
||||
</ul>
|
||||
<li>Unordered List 2</li>
|
||||
<li>Unordered List 3</li>
|
||||
<li>Unordered List 4</li>
|
||||
</ul>
|
||||
|
||||
<h2>Ordered List</h2>
|
||||
|
||||
<ol>
|
||||
<li>Ordered List 1</li>
|
||||
<ol>
|
||||
<li>Sub List 1</li>
|
||||
<li>Sub List 2</li>
|
||||
<li>Sub List 3</li>
|
||||
<li>Sub List 4</li>
|
||||
<ol>
|
||||
<li>Sub Sub List 1</li>
|
||||
<li>Sub Sub List 2</li>
|
||||
<li>Sub Sub List 3</li>
|
||||
<li>Sub Sub List 4</li>
|
||||
</ol>
|
||||
</ol>
|
||||
<li>Ordered List 2</li>
|
||||
<li>Ordered List 3</li>
|
||||
<li>Ordered List 4</li>
|
||||
</ol>
|
||||
|
||||
<h1>Quote</h1>
|
||||
|
||||
<blockquote>
|
||||
“Design is a funny word. Some people think
|
||||
design means how it looks. But of course, if
|
||||
you dig deeper, it's really how it works.”
|
||||
<footer>
|
||||
<cite>— Steve Jobs</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
|
||||
<h1>Horizontal rule</h1>
|
||||
|
||||
<hr />
|
||||
|
||||
<h1>Table</h1>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Column 1</th>
|
||||
<th>Column 2</th>
|
||||
<th>Column 3</th>
|
||||
<th>Column 4</th>
|
||||
<th>Column 5</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Cell 1</td>
|
||||
<td>Cell 2</td>
|
||||
<td>Cell 3</td>
|
||||
<td>Cell 4</td>
|
||||
<td>Cell 5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cell 1</td>
|
||||
<td>Cell 2</td>
|
||||
<td>Cell 3</td>
|
||||
<td>Cell 4</td>
|
||||
<td>Cell 5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cell 1</td>
|
||||
<td>Cell 2</td>
|
||||
<td>Cell 3</td>
|
||||
<td>Cell 4</td>
|
||||
<td>Cell 5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cell 1</td>
|
||||
<td>Cell 2</td>
|
||||
<td>Cell 3</td>
|
||||
<td>Cell 4</td>
|
||||
<td>Cell 5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cell 1</td>
|
||||
<td>Cell 2</td>
|
||||
<td>Cell 3</td>
|
||||
<td>Cell 4</td>
|
||||
<td>Cell 5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cell 1</td>
|
||||
<td>Cell 2</td>
|
||||
<td>Cell 3</td>
|
||||
<td>Cell 4</td>
|
||||
<td>Cell 5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cell 1</td>
|
||||
<td>Cell 2</td>
|
||||
<td>Cell 3</td>
|
||||
<td>Cell 4</td>
|
||||
<td>Cell 5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cell 1</td>
|
||||
<td>Cell 2</td>
|
||||
<td>Cell 3</td>
|
||||
<td>Cell 4</td>
|
||||
<td>Cell 5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cell 1</td>
|
||||
<td>Cell 2</td>
|
||||
<td>Cell 3</td>
|
||||
<td>Cell 4</td>
|
||||
<td>Cell 5</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h1>Buttons</h1>
|
||||
<button>Button</button>
|
||||
<button disabled="disabled">Button disabled</button>
|
||||
|
||||
<h2>Classes for buttons</h2>
|
||||
<button type="button" class="primary">Primary</button>
|
||||
<button type="button" class="secondary">Secondary</button>
|
||||
<button type="button" class="success">Success</button>
|
||||
<button type="button" class="danger">Danger</button>
|
||||
<button type="button" class="warning">Warning</button>
|
||||
<br><br>
|
||||
<button type="button" disabled="disabled" class="primary">Primary</button>
|
||||
<button type="button" disabled="disabled" class="secondary">Secondary</button>
|
||||
<button type="button" disabled="disabled" class="success">Success</button>
|
||||
<button type="button" disabled="disabled" class="danger">Danger</button>
|
||||
<button type="button" disabled="disabled" class="warning">Warning</button>
|
||||
|
||||
<h1>Forms</h1>
|
||||
|
||||
<h2>Inputs</h2>
|
||||
|
||||
<h3>Inputs</h3>
|
||||
<div>
|
||||
<label>Button</label>
|
||||
<input type="button" value="Button" />
|
||||
</div>
|
||||
<div>
|
||||
<label>Submit</label>
|
||||
<input type="submit" value="Submit" />
|
||||
</div>
|
||||
<div>
|
||||
<label>Checkbox</label>
|
||||
<input type="checkbox" />
|
||||
</div>
|
||||
<div>
|
||||
<label>Color</label>
|
||||
<input type="color" />
|
||||
</div>
|
||||
<div>
|
||||
<label>Password</label>
|
||||
<input type="password" />
|
||||
</div>
|
||||
<div>
|
||||
<label>Date</label>
|
||||
<input type="date" />
|
||||
</div>
|
||||
<div>
|
||||
<label>Datetime</label>
|
||||
<input type="datetime-local" />
|
||||
</div>
|
||||
<div>
|
||||
<label>Radio</label>
|
||||
<input type="radio" />
|
||||
</div>
|
||||
<div>
|
||||
<label>Text</label>
|
||||
<input type="text" />
|
||||
</div>
|
||||
<div>
|
||||
<label>Password</label>
|
||||
<input type="password" />
|
||||
</div>
|
||||
<div>
|
||||
<label>Time</label>
|
||||
<input type="time" />
|
||||
</div>
|
||||
<div>
|
||||
<label>Range</label>
|
||||
<input type="range" />
|
||||
</div>
|
||||
<div>
|
||||
<label>Textarea</label>
|
||||
<textarea placeholder="Write a professional short bio...">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales felis pulvinar auctor convallis.
|
||||
Maecenas luctus nec magna quis convallis. Donec vestibulum risus nec metus consectetur, at rhoncus arcu
|
||||
lobortis.
|
||||
Nam et turpis a leo commodo imperdiet.
|
||||
</textarea>
|
||||
</div>
|
||||
|
||||
<h3>Inline Inputs</h3>
|
||||
<div>
|
||||
<label>Inline Button<input type="button" value="Button" /></label>
|
||||
</div>
|
||||
<div>
|
||||
<label>Inline Submit<input type="submit" value="Submit" /></label>
|
||||
</div>
|
||||
<div>
|
||||
<label>Inline Checkbox<input type="checkbox" /></label>
|
||||
</div>
|
||||
<div>
|
||||
<label>Inline Color<input type="color" /></label>
|
||||
</div>
|
||||
<div>
|
||||
<label>Inline Password<input type="password" /></label>
|
||||
</div>
|
||||
<div>
|
||||
<label>Inline Date<input type="date" /></label>
|
||||
</div>
|
||||
<div>
|
||||
<label>Inline Datetime<input type="datetime-local" /></label>
|
||||
</div>
|
||||
<div>
|
||||
<label>Inline Radio<input type="radio" /></label>
|
||||
</div>
|
||||
<div>
|
||||
<label>Inline Text<input type="text" /></label>
|
||||
</div>
|
||||
<div>
|
||||
<label>Inline Password<input type="password" /></label>
|
||||
</div>
|
||||
<div>
|
||||
<label>Inline Time<input type="time" /></label>
|
||||
</div>
|
||||
<div>
|
||||
<label>Inline Range<input type="range" /></label>
|
||||
</div>
|
||||
|
||||
<h1>Navigation</h1>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">Nav 1</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Nav 2</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Nav 3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Nav 4</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<h1>Detail</h1>
|
||||
|
||||
<details>
|
||||
<summary>Summary</summary>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales felis pulvinar auctor
|
||||
convallis.
|
||||
Maecenas luctus nec magna quis convallis. Donec vestibulum risus nec metus consectetur, at rhoncus arcu
|
||||
lobortis.
|
||||
Nam et turpis a leo commodo imperdiet.</p>
|
||||
</details>
|
||||
|
||||
<h1>Pre</h1>
|
||||
<pre>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales felis pulvinar auctor convallis.
|
||||
Maecenas luctus nec magna quis convallis. Donec vestibulum risus nec metus consectetur, at rhoncus arculobortis.
|
||||
Nam et turpis a leo commodo imperdiet.
|
||||
</pre>
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,470 @@
|
|||
:root {
|
||||
/* font sizes (fs) */
|
||||
/*
|
||||
0 base
|
||||
lX large
|
||||
sX small
|
||||
*/
|
||||
--fs-scale: 1.125;
|
||||
--fs0: 1rem;
|
||||
|
||||
--fsl1: calc(var(--fs0) * var(--fs-scale));
|
||||
--fsl2: calc(var(--fsl1) * var(--fs-scale));
|
||||
--fsl3: calc(var(--fsl2) * var(--fs-scale));
|
||||
--fsl4: calc(var(--fsl3) * var(--fs-scale));
|
||||
|
||||
--fss1: calc(var(--fs0) / var(--fs-scale));
|
||||
--fss2: calc(var(--fss1) / var(--fs-scale));
|
||||
--fss3: calc(var(--fss2) / var(--fs-scale));
|
||||
--fss4: calc(var(--fss3) / var(--fs-scale));
|
||||
|
||||
/* font weight */
|
||||
--fw: 400;
|
||||
--fwb: 700;
|
||||
--fwl: 100;
|
||||
|
||||
/* font color */
|
||||
/* fonts */
|
||||
--font: Arial, Helvetica, sans-serif;
|
||||
--font-h: 'Courier New', Courier, monospace;
|
||||
--font-code: 'Courier New', Courier, monospace;
|
||||
|
||||
|
||||
/* spacings */
|
||||
--spacing-scale: 1.5;
|
||||
--max-spacing: 4rem;
|
||||
--s5: var(--max-spacing);
|
||||
--s4: calc(var(--s5) / var(--spacing-scale));
|
||||
--s3: calc(var(--s4) / var(--spacing-scale));
|
||||
--s2: calc(var(--s3) / var(--spacing-scale));
|
||||
--s1: calc(var(--s2) / var(--spacing-scale));
|
||||
--s0: calc(var(--s1) / var(--spacing-scale));
|
||||
|
||||
/* content-width */
|
||||
--cw: 620px;
|
||||
|
||||
/* colors */
|
||||
--text: hsl(0, 0%, 17%);
|
||||
|
||||
--primary: hsl(200, 25%, 50%);
|
||||
--primary-l1: color-mix(in srgb, var(--primary), #fff 20%);
|
||||
--primary-l2: color-mix(in srgb, var(--primary), #fff 40%);
|
||||
--primary-l3: color-mix(in srgb, var(--primary), #fff 60%);
|
||||
--primary-l4: color-mix(in srgb, var(--primary), #fff 80%);
|
||||
--primary-d1: color-mix(in srgb, var(--primary), #000 20%);
|
||||
--primary-d2: color-mix(in srgb, var(--primary), #000 40%);
|
||||
--primary-d3: color-mix(in srgb, var(--primary), #000 60%);
|
||||
--primary-d4: color-mix(in srgb, var(--primary), #000 80%);
|
||||
|
||||
--secondary: color-mix(in hsl longer hue, var(--primary), var(--primary) 50%);
|
||||
--secondary-l1: color-mix(in srgb, var(--secondary), #fff 20%);
|
||||
--secondary-l2: color-mix(in srgb, var(--secondary), #fff 40%);
|
||||
--secondary-l3: color-mix(in srgb, var(--secondary), #fff 60%);
|
||||
--secondary-l4: color-mix(in srgb, var(--secondary), #fff 80%);
|
||||
--secondary-d1: color-mix(in srgb, var(--secondary), #000 20%);
|
||||
--secondary-d2: color-mix(in srgb, var(--secondary), #000 40%);
|
||||
--secondary-d3: color-mix(in srgb, var(--secondary), #000 60%);
|
||||
--secondary-d4: color-mix(in srgb, var(--secondary), #000 80%);
|
||||
|
||||
--text-primary: color-mix(in srgb, var(--primary), #fff 90%);
|
||||
--text-secondary: color-mix(in srgb, var(--secondary), #fff 90%);
|
||||
}
|
||||
|
||||
/* Styling of main page elements */
|
||||
|
||||
* {
|
||||
/* global properties*/
|
||||
font-family: var(--font);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
html {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
max-width: var(--cw);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
:is(h1, h2, h3, h4, h5, h6) {
|
||||
font-family: var(--font-h);
|
||||
margin-top: var(--s4);
|
||||
margin-bottom: var(--s0);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--fsl4);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--fsl3);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--fsl2);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: var(--fsl1);
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: var(--fs0);
|
||||
font-weight: var(--fwb);
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: var(--fsl4);
|
||||
}
|
||||
|
||||
hr {
|
||||
color: var(--primary);
|
||||
border-style: dashed;
|
||||
border-bottom: none;
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: var(--font-code);
|
||||
background-color: var(--primary-l4);
|
||||
padding: var(--s0);
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
main img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* inline elements */
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
color: var(--primary-d2);
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dashed;
|
||||
text-decoration: none;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
kbd {
|
||||
background-color: var(--primary-d3);
|
||||
color: var(--text-primary);
|
||||
padding: 0 var(--s0);
|
||||
border-radius: var(--s0);
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: var(--secondary-l3);
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: var(--font-code);
|
||||
background-color: var(--primary-l4);
|
||||
padding: 0 var(--s0);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* lists */
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: var(--s3);
|
||||
}
|
||||
|
||||
li {
|
||||
padding-bottom: var(--s0);
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: square;
|
||||
}
|
||||
|
||||
/* Quote */
|
||||
|
||||
blockquote {
|
||||
margin-left: 0;
|
||||
padding-left: var(--s4);
|
||||
border-left: solid var(--primary) 3px;
|
||||
}
|
||||
|
||||
blockquote>footer {
|
||||
width: initial;
|
||||
margin: initial;
|
||||
background-color: initial;
|
||||
color: initial;
|
||||
padding-bottom: initial;
|
||||
}
|
||||
|
||||
/* Table */
|
||||
|
||||
:where(table) {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: inherit;
|
||||
padding: var(--s0);
|
||||
border-bottom: solid var(--primary) 1px;
|
||||
}
|
||||
|
||||
tr:nth-child(2n) {
|
||||
background: var(--primary-l4);
|
||||
}
|
||||
|
||||
td {
|
||||
margin: 0;
|
||||
padding: var(--s0);
|
||||
border-bottom: solid var(--primary-l3) 1px;
|
||||
}
|
||||
|
||||
/* buttons */
|
||||
a[role='button'] {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a[role='button']:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type='button'],
|
||||
input[type='submit'],
|
||||
a[role='button'] {
|
||||
background-color: var(--primary);
|
||||
color: var(--text-primary);
|
||||
padding: var(--s1);
|
||||
border: none;
|
||||
border-radius: var(--s0);
|
||||
font-size: var(--fs0);
|
||||
}
|
||||
|
||||
button:hover,
|
||||
input[type='button']:hover,
|
||||
input[type='submit']:hover,
|
||||
a[role='button']:hover {
|
||||
background-color: var(--primary-d1);
|
||||
}
|
||||
|
||||
button:disabled,
|
||||
input[type='button']:disabled,
|
||||
input[type='submit']:disabled,
|
||||
a[role='button']:disabled {
|
||||
background-color: var(--primary-l2);
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked,
|
||||
input[type=radio]:checked,
|
||||
input[type=range] {
|
||||
accent-color: var(--primary);
|
||||
}
|
||||
|
||||
/* forms */
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
padding-bottom: var(--s0);
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
margin-bottom: var(--s3);
|
||||
padding: var(--s1);
|
||||
box-sizing: border-box;
|
||||
border: solid var(--primary-l2) 1px;
|
||||
border-radius: var(--s0);
|
||||
}
|
||||
|
||||
input[type='color'] {
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
label {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
label>input {
|
||||
display: inherit;
|
||||
width: initial;
|
||||
margin-left: var(--s1);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
label>input[type='color'] {
|
||||
min-width: 170px;
|
||||
}
|
||||
|
||||
/* button classes */
|
||||
|
||||
button.secondary,
|
||||
input[type='button'].secondary,
|
||||
input[type='submit'].secondary {
|
||||
background-color: var(--secondary);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
button.secondary:hover,
|
||||
input[type='button'].secondary:hover,
|
||||
input[type='submit'].secondary:hover {
|
||||
background-color: var(--secondary-d1);
|
||||
}
|
||||
|
||||
button.secondary:disabled,
|
||||
input[type='button'].secondary:disabled,
|
||||
input[type='submit'].secondary:disabled {
|
||||
background-color: var(--secondary-l2);
|
||||
}
|
||||
|
||||
|
||||
/* Header specific styling */
|
||||
|
||||
header {
|
||||
width: 100vw;
|
||||
margin: 0;
|
||||
margin-bottom: var(--s4);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
background-color: var(--primary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
header img {
|
||||
max-height: var(--s5);
|
||||
margin-right: var(--s1);
|
||||
margin-left: var(--s1);
|
||||
}
|
||||
|
||||
header>hgroup {
|
||||
flex: 1;
|
||||
min-width: calc(var(--cw) / 2);
|
||||
margin-right: var(--s5);
|
||||
}
|
||||
|
||||
header>hgroup>h1 {
|
||||
margin-top: var(--s0);
|
||||
margin-bottom: var(--s0);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
header>hgroup>h1>a {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
header>hgroup>h1>a:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
header>hgroup>p {
|
||||
font-size: var(--fsl1);
|
||||
margin-top: var(--s0);
|
||||
margin-bottom: var(--s0);
|
||||
font-family: var(--font);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
header>nav>ul {
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
padding-top: var(--s1);
|
||||
padding-bottom: var(--s1);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header>nav>ul>li {
|
||||
float: left;
|
||||
margin-right: var(--s1);
|
||||
padding: var(--s1);
|
||||
color: var(--text-primary);
|
||||
list-style-type: none;
|
||||
|
||||
}
|
||||
|
||||
header>nav>ul>li>a {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
header>nav>ul>li>a:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Footer specific styling */
|
||||
|
||||
footer {
|
||||
width: 100vw;
|
||||
margin: 0;
|
||||
background-color: var(--primary);
|
||||
color: var(--text-primary);
|
||||
padding-bottom: var(--s5);
|
||||
}
|
||||
|
||||
footer>div {
|
||||
max-width: var(--cw);
|
||||
margin: 0 auto;
|
||||
color: var(--text-primary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer>nav {
|
||||
margin: 0 auto;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
footer>nav>ul {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
padding-top: var(--s1);
|
||||
padding-bottom: var(--s1);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
footer>nav>ul>li {
|
||||
float: left;
|
||||
margin-right: var(--s1);
|
||||
padding: var(--s1);
|
||||
color: var(--text-primary);
|
||||
list-style-type: none;
|
||||
|
||||
}
|
||||
|
||||
footer>nav>ul>li>a {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
footer>nav>ul>li>a:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
|
@ -1,162 +1,3 @@
|
|||
body {
|
||||
font-family: sans-serif;
|
||||
max-width: 800px;
|
||||
margin: 0 auto 0 auto;
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 1rem;
|
||||
background-color: var(--background);
|
||||
/* background: linear-gradient(180deg, var(--background) 0%, rgba(255, 255, 255, 0) 100%); */
|
||||
|
||||
padding-bottom: 1rem !important;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: dashed 2px;
|
||||
border-color: #ccc;
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
input, textarea, a[role='button'] {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 0.75rem;
|
||||
padding: 0.25rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input[type='submit'], a[role='button'] {
|
||||
background-color: var(--primary);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
input[type='submit']:hover, a[role='button']:hover {
|
||||
background-color: var(--primary-hover);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
input[type='submit']:focus, a[role='button']:focus {
|
||||
background-color: var(--primary-focus);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
input[type='submit'].secondary {
|
||||
background-color: #5d6b89;
|
||||
}
|
||||
|
||||
input[type='submit'].secondary:hover {
|
||||
background-color: #48536b;
|
||||
}
|
||||
|
||||
input[type='submit'].secondary:focus {
|
||||
background-color: rgba(93, 107, 137, 0.25);
|
||||
}
|
||||
|
||||
/* for checkboxes */
|
||||
label > input {
|
||||
display: inherit;
|
||||
width: initial;
|
||||
}
|
||||
|
||||
/* from pico.css */
|
||||
mark {
|
||||
padding: 0.125rem 0.25rem;
|
||||
background-color: #fde7c0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
main img {
|
||||
max-width: 100%;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--primary-hover);
|
||||
}
|
||||
|
||||
a:focus {
|
||||
color: var(--primary-focus);
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
nav > ul > li {
|
||||
float: left;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 3rem
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
h4, h5, h6 {
|
||||
font-size: 1.0rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: #eee;
|
||||
padding: 0.5rem;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
th {
|
||||
border-bottom: solid #888 1px;
|
||||
}
|
||||
|
||||
tr:nth-child(2n) {
|
||||
background: #f0f0f1;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
}
|
||||
|
||||
.header-profile {
|
||||
padding-right: 0.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
|
|
@ -194,18 +35,18 @@ nav.row {
|
|||
}
|
||||
|
||||
.action-tile {
|
||||
border: 1px solid var(--background-dark);
|
||||
border: 1px solid var(--primary-l1);
|
||||
padding: 20px;
|
||||
flex: 1 1 0px;
|
||||
margin: 6px;
|
||||
min-width: 20%;
|
||||
text-align: center;
|
||||
background: var(--background);
|
||||
background: var(--primary-l4);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.action-tile:hover {
|
||||
background: var(--background-light);
|
||||
background: var(--primary-l3);
|
||||
}
|
||||
|
||||
.danger {
|
||||
|
|
@ -261,27 +102,3 @@ nav.row {
|
|||
border-color: #ff3e3e;
|
||||
animation: border-pulsate-error 1s 2;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
float: left;
|
||||
margin-right: 1rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.photo-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.photo-grid-item {
|
||||
flex: 1 0 25%;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.photo-grid-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue