mirror of
https://git.nolog.cz/NoLog.cz/headline.git
synced 2025-01-31 11:53:35 +01:00
Style
This commit is contained in:
Ondřej Nývlt
parent
f5abb93df7
commit
ac2ca35a56
5 changed files with 154 additions and 37 deletions
|
|
@ -18,6 +18,14 @@ html {
|
||||||
font-family: "Inter", system-ui;
|
font-family: "Inter", system-ui;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
*,
|
*,
|
||||||
*::before,
|
*::before,
|
||||||
*::after {
|
*::after {
|
||||||
|
|
@ -56,20 +64,101 @@ h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
overflow-wrap: break-word;
|
overflow-wrap: break-word;
|
||||||
|
font-size: inherit;
|
||||||
|
font-weight: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
table,
|
||||||
min-height: 100vh;
|
th,
|
||||||
|
tr,
|
||||||
|
td {
|
||||||
|
text-align: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
summary {
|
||||||
|
cursor: pointer;
|
||||||
|
list-style: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
align-items: center;
|
||||||
align-items: stretch;
|
gap: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
summary::-webkit-details-marker {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
summary::before {
|
||||||
|
content: url('data:image/svg+xml,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.1714 12.0007L8.22168 7.05093L9.63589 5.63672L15.9999 12.0007L9.63589 18.3646L8.22168 16.9504L13.1714 12.0007Z"></path></svg>');
|
||||||
|
display: grid;
|
||||||
|
place-content: center;
|
||||||
|
transition: transform 120ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
details[open] summary::before {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
margin-top: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header nav {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header h1 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header h1 .del {
|
||||||
|
text-decoration: line-through;
|
||||||
|
text-decoration-thickness: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header h1 .ins {
|
||||||
|
text-decoration: underline;
|
||||||
|
text-decoration-thickness: 1px;
|
||||||
|
text-decoration-style: wavy;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
margin-bottom: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
margin-top: auto;
|
margin-top: 4rem;
|
||||||
padding: 1.5rem 0;
|
padding: 1.5rem 0;
|
||||||
margin-top: 1.5rem;
|
color: hsl(0 0% 60%);
|
||||||
border-top: 1px solid var(--border-color);
|
}
|
||||||
|
|
||||||
|
.footer a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-nologo {
|
||||||
|
display: inline-block;
|
||||||
|
fill: currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
|
|
@ -116,13 +205,6 @@ body {
|
||||||
background: hsl(0 0% 90%);
|
background: hsl(0 0% 90%);
|
||||||
}
|
}
|
||||||
|
|
||||||
table,
|
|
||||||
th,
|
|
||||||
tr,
|
|
||||||
td {
|
|
||||||
text-align: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pagination {
|
.pagination {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -160,6 +242,14 @@ td {
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.diff ins {
|
||||||
|
text-decoration-color: hsl(120 50% 75% / 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.diff del {
|
||||||
|
text-decoration-color: hsl(0 50% 40% / 50%);
|
||||||
|
}
|
||||||
|
|
||||||
/* Index */
|
/* Index */
|
||||||
|
|
||||||
.filters {
|
.filters {
|
||||||
|
|
@ -168,6 +258,7 @@ td {
|
||||||
top: 0;
|
top: 0;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
padding: 0.75rem 0;
|
padding: 0.75rem 0;
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.changeset {
|
.changeset {
|
||||||
|
|
@ -228,6 +319,10 @@ td {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.changeset table th {
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
/* Article detail */
|
/* Article detail */
|
||||||
|
|
||||||
.diffs-list {
|
.diffs-list {
|
||||||
|
|
|
||||||
|
|
@ -22,16 +22,10 @@
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet" />
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header class="header">
|
{% include "parts/header.html" %}
|
||||||
<div class="container">
|
<main class="main">
|
||||||
<h1>
|
|
||||||
Headliner
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<main>
|
|
||||||
{% block body %}{% endblock %}
|
{% block body %}{% endblock %}
|
||||||
</main>
|
</main>
|
||||||
{% include 'parts/footer.html' %}
|
{% include "parts/footer.html" %}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
{% block body %}
|
{% block body %}
|
||||||
<div class="container">
|
<div class="filters">
|
||||||
<div class="filters">
|
<div class="container">
|
||||||
<form method="get">
|
<form method="get">
|
||||||
<div class="d-flex">
|
<div class="d-flex">
|
||||||
<input
|
<input
|
||||||
|
|
@ -23,7 +23,9 @@
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
{% for diff in diffs %}
|
{% for diff in diffs %}
|
||||||
<article class="changeset">
|
<article class="changeset">
|
||||||
<p class="changeset-actions">
|
<p class="changeset-actions">
|
||||||
|
|
@ -40,16 +42,18 @@
|
||||||
</p>
|
</p>
|
||||||
<details>
|
<details>
|
||||||
<summary class="changeset-title">
|
<summary class="changeset-title">
|
||||||
{{ diff.diff_html|safe }}
|
<h2 class="diff">{{ diff.diff_html|safe }}</h2>
|
||||||
</summary>
|
</summary>
|
||||||
<p>
|
<table>
|
||||||
<strong>Old</strong>:
|
<tr>
|
||||||
{{ diff.title_orig }}
|
<th>Old</th>
|
||||||
</p>
|
<td>{{ diff.title_orig }}</td>
|
||||||
<p>
|
</tr>
|
||||||
<strong>New</strong>:
|
<tr>
|
||||||
{{ diff.title_new }}
|
<th>New</th>
|
||||||
</p>
|
<td>{{ diff.title_new }}</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
</details>
|
</details>
|
||||||
</article>
|
</article>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,16 @@
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
<div class="container">
|
<div class="container footer-container">
|
||||||
<span class="text-muted"> <a href="{{ url_for('index') }}">Headliner</a> | <a href="{{ url_for('feed_list') }}">Feed list</a> | <a href="{{ url_for('about') }}">About</a> | <a href="https://nolog.cz">NoLog.cz</a></span>
|
<span>created by</span>
|
||||||
|
<a href="https://nolog.cz">
|
||||||
|
<svg class="footer-nologo" width="120" viewBox="0 0 400 60" fill-rule="evenodd">
|
||||||
|
<title>NoLog</title>
|
||||||
|
<path d="M60,0l-60,0l0,60l20,0l0,-41l20,0l-0,41l20,0l-0,-60Z"></path>
|
||||||
|
<path d="M140,60l50,0l-0,-19l-30,0l0,-41l-20,0l0,60Z"></path>
|
||||||
|
<path d="M130,0l-60,0l0,60l60,0l0,-60Zm-40,19l0,22l20,0l0,-22l-20,0Z"></path>
|
||||||
|
<path d="M260,0l-60,0l-0,60l60,0l-0,-60Zm-40,19l-0,22l20,0l-0,-22l-20,0Z"></path>
|
||||||
|
<path d="M270,60l60,-0l-0,-35l-20,0l-0,16l-20,0l-0,-22l40,-0l-0,-19l-60,-0l-0,60Z"></path>
|
||||||
|
<path d="M372.164,2.865l6.571,20.729l21.265,0l-17.203,12.812l6.571,20.729l-17.204,-12.811l-17.203,12.811l6.571,-20.729l-17.204,-12.812l21.265,0l6.571,-20.729Z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
||||||
13
view/templates/parts/header.html
Normal file
13
view/templates/parts/header.html
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<header class="header">
|
||||||
|
<div class="container">
|
||||||
|
<a href="/">
|
||||||
|
<h1>
|
||||||
|
<span class="del"> Head</span><span class="ins">liner</span>
|
||||||
|
</h1>
|
||||||
|
</a>
|
||||||
|
<nav>
|
||||||
|
<a href="/about">About</a>
|
||||||
|
<a href="">Feeds</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
Loading…
Reference in a new issue