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;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
|
|
@ -56,20 +64,101 @@ h4,
|
|||
h5,
|
||||
h6 {
|
||||
overflow-wrap: break-word;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
table,
|
||||
th,
|
||||
tr,
|
||||
td {
|
||||
text-align: inherit;
|
||||
}
|
||||
|
||||
summary {
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
align-items: center;
|
||||
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 {
|
||||
margin-top: auto;
|
||||
margin-top: 4rem;
|
||||
padding: 1.5rem 0;
|
||||
margin-top: 1.5rem;
|
||||
border-top: 1px solid var(--border-color);
|
||||
color: hsl(0 0% 60%);
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.footer-nologo {
|
||||
display: inline-block;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
@ -116,13 +205,6 @@ body {
|
|||
background: hsl(0 0% 90%);
|
||||
}
|
||||
|
||||
table,
|
||||
th,
|
||||
tr,
|
||||
td {
|
||||
text-align: inherit;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
|
|
@ -160,6 +242,14 @@ td {
|
|||
border-color: transparent;
|
||||
}
|
||||
|
||||
.diff ins {
|
||||
text-decoration-color: hsl(120 50% 75% / 50%);
|
||||
}
|
||||
|
||||
.diff del {
|
||||
text-decoration-color: hsl(0 50% 40% / 50%);
|
||||
}
|
||||
|
||||
/* Index */
|
||||
|
||||
.filters {
|
||||
|
|
@ -168,6 +258,7 @@ td {
|
|||
top: 0;
|
||||
background-color: white;
|
||||
padding: 0.75rem 0;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.changeset {
|
||||
|
|
@ -228,6 +319,10 @@ td {
|
|||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.changeset table th {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
/* Article detail */
|
||||
|
||||
.diffs-list {
|
||||
|
|
|
|||
|
|
@ -22,16 +22,10 @@
|
|||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<h1>
|
||||
Headliner
|
||||
</h1>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
{% include "parts/header.html" %}
|
||||
<main class="main">
|
||||
{% block body %}{% endblock %}
|
||||
</main>
|
||||
{% include 'parts/footer.html' %}
|
||||
{% include "parts/footer.html" %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block body %}
|
||||
<div class="container">
|
||||
<div class="filters">
|
||||
<div class="filters">
|
||||
<div class="container">
|
||||
<form method="get">
|
||||
<div class="d-flex">
|
||||
<input
|
||||
|
|
@ -23,7 +23,9 @@
|
|||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
{% for diff in diffs %}
|
||||
<article class="changeset">
|
||||
<p class="changeset-actions">
|
||||
|
|
@ -40,16 +42,18 @@
|
|||
</p>
|
||||
<details>
|
||||
<summary class="changeset-title">
|
||||
{{ diff.diff_html|safe }}
|
||||
<h2 class="diff">{{ diff.diff_html|safe }}</h2>
|
||||
</summary>
|
||||
<p>
|
||||
<strong>Old</strong>:
|
||||
{{ diff.title_orig }}
|
||||
</p>
|
||||
<p>
|
||||
<strong>New</strong>:
|
||||
{{ diff.title_new }}
|
||||
</p>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Old</th>
|
||||
<td>{{ diff.title_orig }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>New</th>
|
||||
<td>{{ diff.title_new }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</details>
|
||||
</article>
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,16 @@
|
|||
<footer class="footer">
|
||||
<div class="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>
|
||||
<div class="container footer-container">
|
||||
<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>
|
||||
</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