Style typography
This commit is contained in:
parent
1c159a4207
commit
8bdd8a6bae
11 changed files with 215 additions and 72 deletions
|
|
@ -39,19 +39,87 @@ html {
|
|||
|
||||
/* Typography */
|
||||
|
||||
.prose p {
|
||||
.prose :is(p, h1, h2, h3, h4, h5, h6, ul, ol, li, pre) {
|
||||
@apply mb-4;
|
||||
}
|
||||
|
||||
.prose :is(h1, h2, h3, h4, h5, h6) {
|
||||
@apply mt-8;
|
||||
}
|
||||
|
||||
.link,
|
||||
.prose a {
|
||||
color: theme("colors.red.900");
|
||||
border-bottom: 4px solid theme("colors.red.100");
|
||||
transition: border-color 200ms;
|
||||
transition: color 200ms;
|
||||
}
|
||||
|
||||
.link:hover,
|
||||
.prose a:hover {
|
||||
color: theme("colors.red.700");
|
||||
border-bottom: 4px solid theme("colors.red.200");
|
||||
color: theme("colors.red.600");
|
||||
}
|
||||
|
||||
.dark .link,
|
||||
.dark .prose a {
|
||||
color: theme("colors.red.200");
|
||||
border-bottom: 4px solid theme("colors.red.800");
|
||||
}
|
||||
|
||||
.dark .link:hover,
|
||||
.dark .prose a:hover {
|
||||
color: theme("colors.red.400");
|
||||
}
|
||||
|
||||
:is(.list, .prose ul) li {
|
||||
position: relative;
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
|
||||
:is(.list, .prose ul) li::before {
|
||||
content: "–";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 1.5em;
|
||||
left: -1.5em;
|
||||
}
|
||||
|
||||
.subheading,
|
||||
.prose h3 {
|
||||
@apply text-sm font-bold;
|
||||
color: theme("colors.red.800");
|
||||
}
|
||||
|
||||
:is(.subheading, .prose h3)::before {
|
||||
content: "★";
|
||||
font-weight: 500;
|
||||
margin-right: 0.75em;
|
||||
}
|
||||
|
||||
.subsubheading,
|
||||
.prose h4 {
|
||||
@apply text-sm;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.code-block,
|
||||
pre {
|
||||
@apply bg-gray-100;
|
||||
padding: 1em;
|
||||
border-radius: 0.25em;
|
||||
overflow-x: auto;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
.code-inline,
|
||||
p > code {
|
||||
@apply bg-gray-100;
|
||||
padding: 0.125em 0.25em;
|
||||
border-radius: 0.25em;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
/* Background */
|
||||
|
||||
.clip-wedge {
|
||||
clip-path: polygon(0 5%, 100% 0, 100% 95%, 0% 100%);
|
||||
}
|
||||
|
|
|
|||
127
assets/style.css
127
assets/style.css
|
|
@ -616,18 +616,14 @@ video {
|
|||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mt-12 {
|
||||
margin-top: 3rem;
|
||||
.mt-6 {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.mb-6 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.mt-6 {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
|
@ -656,6 +652,10 @@ video {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.max-w-screen-lg {
|
||||
max-width: 1024px;
|
||||
}
|
||||
|
||||
.max-w-screen-md {
|
||||
max-width: 768px;
|
||||
}
|
||||
|
|
@ -664,10 +664,6 @@ video {
|
|||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid-cols-3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -686,6 +682,15 @@ video {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.border-t {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.bg-red-700 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(185 28 28 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.px-6 {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
|
|
@ -696,6 +701,11 @@ video {
|
|||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.py-24 {
|
||||
padding-top: 6rem;
|
||||
padding-bottom: 6rem;
|
||||
}
|
||||
|
||||
.pt-4 {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
|
@ -714,15 +724,20 @@ video {
|
|||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
.text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.text-gray-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-white {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: Spline Sans;
|
||||
font-size: 1.5rem;
|
||||
|
|
@ -760,21 +775,95 @@ html {
|
|||
|
||||
/* Typography */
|
||||
|
||||
.prose p {
|
||||
.prose :is(p, h1, h2, h3, h4, h5, h6, ul, ol, li, pre) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.prose :is(h1, h2, h3, h4, h5, h6) {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.link,
|
||||
.prose a {
|
||||
color: #7f1d1d;
|
||||
border-bottom: 4px solid #fee2e2;
|
||||
transition: border-color 200ms;
|
||||
transition: color 200ms;
|
||||
}
|
||||
|
||||
.link:hover,
|
||||
.prose a:hover {
|
||||
color: #b91c1c;
|
||||
border-bottom: 4px solid #fecaca;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.dark .link,
|
||||
.dark .prose a {
|
||||
color: #fecaca;
|
||||
border-bottom: 4px solid #991b1b;
|
||||
}
|
||||
|
||||
.dark .link:hover,
|
||||
.dark .prose a:hover {
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
:is(.list, .prose ul) li {
|
||||
position: relative;
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
|
||||
:is(.list, .prose ul) li::before {
|
||||
content: "–";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 1.5em;
|
||||
left: -1.5em;
|
||||
}
|
||||
|
||||
.subheading,
|
||||
.prose h3 {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
:is(.subheading, .prose h3)::before {
|
||||
content: "★";
|
||||
font-weight: 500;
|
||||
margin-right: 0.75em;
|
||||
}
|
||||
|
||||
.subsubheading,
|
||||
.prose h4 {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.code-block,
|
||||
pre {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
|
||||
padding: 1em;
|
||||
border-radius: 0.25em;
|
||||
overflow-x: auto;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
.code-inline,
|
||||
p > code {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
|
||||
padding: 0.125em 0.25em;
|
||||
border-radius: 0.25em;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
/* Background */
|
||||
|
||||
.clip-wedge {
|
||||
-webkit-clip-path: polygon(0 5%, 100% 0, 100% 95%, 0% 100%);
|
||||
clip-path: polygon(0 5%, 100% 0, 100% 95%, 0% 100%);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
|
|
|||
|
|
@ -24,10 +24,10 @@ Anglický pojem *warrant canary* označuje pravidelně aktualizované prohláše
|
|||
|
||||
Pro tento účel využíváme zprávu podepsanou naším PGP klíčem. Tato zpráva je aktualizována čtyřikrát ročně a to vždy:
|
||||
|
||||
* 1. února
|
||||
* 1. května
|
||||
* 1. srpna
|
||||
* 1. listopadu
|
||||
* února
|
||||
* května
|
||||
* srpna
|
||||
* listopadu
|
||||
|
||||
V případě, že k aktualizování níže uvedené zprávy v termínu nedojde, lze předpokládat, že používání služeb NoLog.cz již není bezpečné a byla nám z nějakého důvodu nařízena mlčenlivost. V takovém případě prosím do vyjasnění situace naše služby nepoužívejte a upozorněte na tuto skutečnost své přátele.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "Individuální služby"
|
||||
weight: 100
|
||||
weight: 200
|
||||
---
|
||||
|
||||
Pro jednotlivce i organizace se kterými sdílíme [společné hodnoty](/about) dokážeme po individuální domluvě provozovat služby pro interní i veřejnou komunikaci.
|
||||
|
|
|
|||
|
|
@ -8,9 +8,6 @@ logowidth: 45px
|
|||
|
||||
Tyto služby provozujeme veřejně, to znamená, že je může využít kdokoli, bez registrace, anonymně.
|
||||
|
||||
**Vyhrazujeme si právo omezit přístup k našim službám těm, kteří je zneužijí k veřejnému sdílení sexistických, homofobních, rasistických a podobných útoků.**
|
||||
|
||||
{{< services >}}
|
||||
|
||||
---
|
||||
|
||||
_Vyhrazujeme si právo omezit přístup k našim službám těm, kteří je zneužijí k veřejnému sdílení sexistických, homofobních, rasistických a podobných útoků._
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
|
||||
{{ if $.Param "sidebar" }}{{ partial "sidebar.html" . }}{{ end -}}
|
||||
|
||||
<footer class="mt-12">
|
||||
<footer class="mt-6 text-gray-500">
|
||||
<div class="container mx-auto px-6 py-6">
|
||||
{{ if $.Param "feedlinks" }}
|
||||
{{ partial "feedlinks.html" . }}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
{{ define "main" -}}
|
||||
<main class="container mx-auto px-6">
|
||||
<article>
|
||||
<header>
|
||||
<h1 class="title {{ if $.Param "submitted" | default false }}title-submitted{{ end }}">{{ .Title }}</h1>
|
||||
<main>
|
||||
<article class="border-t pt-4">
|
||||
<header class="container mx-auto px-6 mb-6">
|
||||
<h1 class="font-bold {{ if $.Param "submitted" | default false }}title-submitted{{ end }}">{{ .Title }}</h1>
|
||||
{{ if $.Param "submitted" | default false }}{{ partial "submitted.html" . }}{{ end -}}
|
||||
{{ if .Params.tags }}{{ partial "tags.html" . }}{{ end -}}
|
||||
</header>
|
||||
|
||||
<div class="prose">
|
||||
{{ .Content }}
|
||||
<div class="container mx-auto px-6 prose">
|
||||
<div class="max-w-screen-lg">{{ .Content }}</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
|
|
|||
16
layouts/partials/services.html
Normal file
16
layouts/partials/services.html
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<ul class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{{ range (where site.RegularPages.ByWeight "Type" "service") }}
|
||||
<li>
|
||||
<article>
|
||||
{{ .Params.iconSvg | safeHTML }}
|
||||
{{ if isset .Params "icon" }}
|
||||
<i class="ri-{{ .Params.icon }} block text-3xl mb-2"></i>
|
||||
{{ end }}
|
||||
<h4 class="inline mr-1"><a href="{{ .Params.href }}" class="font-bold link">{{ .Title }}</a></h4>
|
||||
<div class="inline prose">
|
||||
{{ .Params.description | safeHTML }} →
|
||||
</div>
|
||||
</article>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Spline+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Spline+Sans:ital,wght@0,400;0,500;0,700;1,400;1,700&display=swap" rel="stylesheet" />
|
||||
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet" />
|
||||
|
||||
{{ $style := resources.Get "style.css" }}
|
||||
|
|
|
|||
|
|
@ -7,21 +7,8 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container mx-auto px-6 mt-12">
|
||||
<ul class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{{ range (where .Site.RegularPages.ByWeight "Type" "service") }}
|
||||
<li>
|
||||
<article>
|
||||
{{ .Params.iconSvg | safeHTML }}
|
||||
{{ if isset .Params "icon" }}
|
||||
<i class="ri-{{ .Params.icon }} block text-3xl mb-2"></i>
|
||||
{{ end }}
|
||||
<h4 class="inline mr-1"><a href="{{ .Params.href }}" class="font-bold link">{{ .Title }}</a></h4>
|
||||
<div class="inline prose">
|
||||
{{ .Params.description | safeHTML }} →
|
||||
</div>
|
||||
</article>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
<section class="py-24 clip-wedge bg-red-700 text-white dark">
|
||||
<div class="container mx-auto px-6">
|
||||
{{ partial "services.html" }}
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,15 +1 @@
|
|||
<section class="container mx-auto px-6 mt-12">
|
||||
<ul class="grid grid-cols-3 gap-6">
|
||||
{{ range (where .Site.RegularPages "Type" "service") }}
|
||||
<li>
|
||||
<article>
|
||||
{{/* <img src="/images/{{ .Params.image }}" alt="{{ .Title }}" /> */}}
|
||||
<h4 class="text-2xl">{{ .Title }}</h4>
|
||||
<div>
|
||||
{{ .Params.description }}
|
||||
</div>
|
||||
</article>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</section>
|
||||
{{ partial "services.html" }}
|
||||
|
|
|
|||
Loading…
Reference in a new issue