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="webmention" href="/webmention/" />
|
||||||
<link rel="alternate" type="application/rss+xml" title="RSS" href="/index.xml">
|
<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'>
|
<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 }}
|
{{ .SiteConfig.HtmlHeadExtra }}
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header class="h-card">
|
||||||
<div class="header h-card">
|
{{ if .SiteConfig.AvatarUrl }}
|
||||||
{{ if .SiteConfig.AvatarUrl }}
|
<img class="u-photo u-logo avatar" src="{{ .SiteConfig.AvatarUrl }}" alt="{{ .SiteConfig.Title }}" />
|
||||||
<div class="header-profile">
|
{{ end }}
|
||||||
<img class="u-photo u-logo avatar" src="{{ .SiteConfig.AvatarUrl }}" alt="{{ .SiteConfig.Title }}" width="100" height="100" />
|
|
||||||
</div>
|
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
<div>
|
<hgroup>
|
||||||
<h2><a class="p-name u-url" href="/">{{ .SiteConfig.Title }}</a></h2>
|
<h1><a class="p-name u-url" href="/">{{ .SiteConfig.Title }}</a></h1>
|
||||||
<div class="p-note">{{ .SiteConfig.SubTitle }}</div>
|
<p class="p-note">{{ .SiteConfig.SubTitle }}</p>
|
||||||
</div>
|
</hgroup>
|
||||||
|
<nav>
|
||||||
<ul style="list-style: none;padding:0;flex-shrink: 0;">
|
<ul>
|
||||||
{{ range $me := .SiteConfig.Me }}
|
{{ range $link := .SiteConfig.HeaderMenu }}
|
||||||
<li><a href="{{$me.Url}}" rel="me">{{$me.Name}}</a>
|
{{ if $link.List }}
|
||||||
</li>
|
<li><a href="/lists/{{ $link.List }}">{{ $link.Title }}</a></li>
|
||||||
{{ end }}
|
{{ else if $link.Post }}
|
||||||
</ul>
|
<li><a href="/posts/{{ $link.Post }}">{{ $link.Title }}</a></li>
|
||||||
</div>
|
{{ else }}
|
||||||
<div>
|
<li><a href="{{ $link.Url }}">{{ $link.Title }}</a></li>
|
||||||
<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 }}
|
{{ end }}
|
||||||
</ul>
|
{{ end }}
|
||||||
</nav>
|
</ul>
|
||||||
</div>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
{{template "main" .Data}}
|
{{template "main" .Data}}
|
||||||
|
|
@ -80,16 +56,12 @@
|
||||||
<li><a href="{{ $link.Url }}">{{ $link.Title }}</a></li>
|
<li><a href="{{ $link.Url }}">{{ $link.Title }}</a></li>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
<li><a href="/admin/">Editor</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
{{ .SiteConfig.FooterExtra}}
|
<div>
|
||||||
<small>
|
{{ .SiteConfig.FooterExtra}}
|
||||||
<nav>
|
</div>
|
||||||
<ul>
|
|
||||||
<li><a href="/admin/">Editor</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</small>
|
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -89,7 +89,7 @@
|
||||||
|
|
||||||
|
|
||||||
<div class="grid">
|
<div class="grid">
|
||||||
<div style="margin-bottom:1em;">
|
<div>
|
||||||
<a style="width:100%;" href="/editor/edit/{{.Entry.ID}}/" role="button" class="">Edit</a>
|
<a style="width:100%;" href="/editor/edit/{{.Entry.ID}}/" role="button" class="">Edit</a>
|
||||||
</div>
|
</div>
|
||||||
<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 {
|
.row {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -194,18 +35,18 @@ nav.row {
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-tile {
|
.action-tile {
|
||||||
border: 1px solid var(--background-dark);
|
border: 1px solid var(--primary-l1);
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
flex: 1 1 0px;
|
flex: 1 1 0px;
|
||||||
margin: 6px;
|
margin: 6px;
|
||||||
min-width: 20%;
|
min-width: 20%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: var(--background);
|
background: var(--primary-l4);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-tile:hover {
|
.action-tile:hover {
|
||||||
background: var(--background-light);
|
background: var(--primary-l3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.danger {
|
.danger {
|
||||||
|
|
@ -260,28 +101,4 @@ nav.row {
|
||||||
border-width: 4px;
|
border-width: 4px;
|
||||||
border-color: #ff3e3e;
|
border-color: #ff3e3e;
|
||||||
animation: border-pulsate-error 1s 2;
|
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