h4kor/owl-blogs
h4kor
/
owl-blogs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

using owl styling

This commit is contained in:
Niko Abeler 2024-05-11 16:33:29 +02:00
parent d7e5df2a95
commit 390a58b404
6 changed files with 951 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
avatar.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

48
render/templates/base.tmpl
View File

@ -12,43 +12,20 @@
<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 }}
<div class="header-profile"> <img class="u-photo u-logo avatar" src="{{ .SiteConfig.AvatarUrl }}" alt="{{ .SiteConfig.Title }}" />
<img class="u-photo u-logo avatar" src="{{ .SiteConfig.AvatarUrl }}" alt="{{ .SiteConfig.Title }}" width="100" height="100" />
</div>
{{ end }} {{ 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>
<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>
{{ end }}
</ul>
</div>
<div>
<nav> <nav>
<ul> <ul>
{{ range $link := .SiteConfig.HeaderMenu }} {{ range $link := .SiteConfig.HeaderMenu }}
@ -62,7 +39,6 @@
{{ end }} {{ end }}
</ul> </ul>
</nav> </nav>
</div>
</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 }}
</ul>
</nav>
{{ .SiteConfig.FooterExtra}}
<small>
<nav>
<ul>
<li><a href="/admin/">Editor</a></li> <li><a href="/admin/">Editor</a></li>
</ul> </ul>
</nav> </nav>
</small> <div>
{{ .SiteConfig.FooterExtra}}
</div>
</footer> </footer>
</body> </body>
</html> </html>

2
render/templates/views/entry.tmpl
View File

@ -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>

451
testbed.html Normal file
View File

@ -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>&lt;a&gt;</code>
</p>
<p>
<abbr>Abbr.</abbr><code>&lt;abbr&gt;</code>
</p>
<p>
<strong>Bold</strong>
<code>&lt;strong&gt;</code>
<code>&lt;b&gt;</code>
</p>
<p>
<em>Italic</em>
<code>&lt;i&gt;</code>
<code>&lt;em&gt;</code>
<code>&lt;cite&gt;</code>
</p>
<p>
<del>Deleted</del>
<code>&lt;del&gt;</code>
</p>
<p>
<ins>Inserted</ins>
<code>&lt;ins&gt;</code>
</p>
<p>
<kbd>Ctrl + S</kbd>
<code>&lt;kbd&gt;</code>
</p>
<p>
<mark>Highlighted</mark>
<code>&lt;mark&gt;</code>
</p>
<p>
<s>Strikethrough</s>
<code>&lt;s&gt;</code>
</p>
<p>
<small>Small</small>
<code>&lt;small&gt;</code>
</p>
<p>
Text <sub>Sub</sub>
<code>&lt;sub&gt;</code>
</p>
<p>
Text <sup>Sup</sup>
<code>&lt;sup&gt;</code>
</p>
<p>
<u>Underline</u>
<code>&lt;u&gt;</code>
</p>
<p>
<code>Code</code>
<code>&lt;code&gt;</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>

470
web/static/owl.css Normal file
View File

@ -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);
}

189
web/static/style.css
View File

@ -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 {
@ -261,27 +102,3 @@ nav.row {
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;
}