mirror of
https://github.com/Theodor-Springmann-Stiftung/lenz-web.git
synced 2026-03-21 13:55:30 +00:00
Minumum Working Example
This commit is contained in:
Simon Martens
@@ -5,6 +5,7 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{ block "title" . }}Default{{ end }}</title>
|
||||
<link rel="stylesheet" href="/public/style.css">
|
||||
</head>
|
||||
<body>
|
||||
{{ block "body" . }}{{ end }}
|
||||
|
||||
125
templates/pages/brief.gohtml
Normal file
125
templates/pages/brief.gohtml
Normal file
@@ -0,0 +1,125 @@
|
||||
{{ define "brief" }}
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Brief {{ .Number }}</title>
|
||||
<link rel="stylesheet" href="/public/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<main class="brief-page">
|
||||
<header class="brief-head">
|
||||
<h1>Brief {{ .Number }}</h1>
|
||||
<nav class="brief-nav">
|
||||
{{ if gt .Prev 0 }}
|
||||
<a class="brief-nav-btn" href="/brief/{{ .Prev }}">← Brief {{ .Prev }}</a>
|
||||
{{ else }}
|
||||
<span class="brief-nav-btn is-disabled">← Kein früherer</span>
|
||||
{{ end }}
|
||||
{{ if gt .Next 0 }}
|
||||
<a class="brief-nav-btn" href="/brief/{{ .Next }}">Brief {{ .Next }} →</a>
|
||||
{{ else }}
|
||||
<span class="brief-nav-btn is-disabled">Kein späterer →</span>
|
||||
{{ end }}
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section class="brief-grid">
|
||||
{{ range $i, $p := .Pages }}
|
||||
{{ if gt $i 0 }}
|
||||
<div class="grid-row row-divider">
|
||||
<div class="grid-full page-divider-line"></div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ if $p.TopNotes }}
|
||||
<div class="grid-row row-top">
|
||||
<div class="grid-left"></div>
|
||||
<div class="grid-mid notes-band">
|
||||
{{ range $p.TopNotes }}
|
||||
<section class="sidenote {{ .PosClass }}">
|
||||
{{ if .Annotation }}<p class="sidenote-annotation">{{ .Annotation }}</p>{{ end }}
|
||||
{{ range .Lines }}
|
||||
{{ if eq .Type "empty" }}
|
||||
<div class="{{ .ClassName }}"></div>
|
||||
{{ else }}
|
||||
<div class="{{ .ClassName }}">{{ .HTML }}</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="grid-right">{{ if gt $i 0 }}<div class="page-marker">S. {{ $p.Number }}</div>{{ end }}</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<div class="grid-row row-page">
|
||||
<aside class="grid-left notes-col">
|
||||
{{ range $p.LeftNotes }}
|
||||
<section class="sidenote {{ .PosClass }}">
|
||||
{{ if .Annotation }}<p class="sidenote-annotation">{{ .Annotation }}</p>{{ end }}
|
||||
{{ range .Lines }}
|
||||
{{ if eq .Type "empty" }}
|
||||
<div class="{{ .ClassName }}"></div>
|
||||
{{ else }}
|
||||
<div class="{{ .ClassName }}">{{ .HTML }}</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
</aside>
|
||||
|
||||
<div class="grid-mid page-lines">
|
||||
{{ range $p.Lines }}
|
||||
{{ if eq .Type "empty" }}
|
||||
<div class="{{ .ClassName }}"></div>
|
||||
{{ else }}
|
||||
<div class="{{ .ClassName }}">{{ .HTML }}</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<aside class="grid-right notes-col">
|
||||
{{ if and (gt $i 0) (not $p.TopNotes) }}<div class="page-marker">S. {{ $p.Number }}</div>{{ end }}
|
||||
{{ range $p.RightNotes }}
|
||||
<section class="sidenote {{ .PosClass }}">
|
||||
{{ if .Annotation }}<p class="sidenote-annotation">{{ .Annotation }}</p>{{ end }}
|
||||
{{ range .Lines }}
|
||||
{{ if eq .Type "empty" }}
|
||||
<div class="{{ .ClassName }}"></div>
|
||||
{{ else }}
|
||||
<div class="{{ .ClassName }}">{{ .HTML }}</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
{{ if $p.BottomNotes }}
|
||||
<div class="grid-row row-bottom">
|
||||
<div class="grid-left"></div>
|
||||
<div class="grid-mid notes-band">
|
||||
{{ range $p.BottomNotes }}
|
||||
<section class="sidenote {{ .PosClass }}">
|
||||
{{ if .Annotation }}<p class="sidenote-annotation">{{ .Annotation }}</p>{{ end }}
|
||||
{{ range .Lines }}
|
||||
{{ if eq .Type "empty" }}
|
||||
<div class="{{ .ClassName }}"></div>
|
||||
{{ else }}
|
||||
<div class="{{ .ClassName }}">{{ .HTML }}</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="grid-right"></div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
{{ end }}
|
||||
@@ -1,2 +1,448 @@
|
||||
/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
|
||||
@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.static{position:static}}
|
||||
@layer theme, base, components, utilities;
|
||||
@layer theme {
|
||||
:root, :host {
|
||||
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
|
||||
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
||||
"Courier New", monospace;
|
||||
--default-font-family: var(--font-sans);
|
||||
--default-mono-font-family: var(--font-mono);
|
||||
}
|
||||
}
|
||||
@layer base {
|
||||
*, ::after, ::before, ::backdrop, ::file-selector-button {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0 solid;
|
||||
}
|
||||
html, :host {
|
||||
line-height: 1.5;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
tab-size: 4;
|
||||
font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
||||
font-feature-settings: var(--default-font-feature-settings, normal);
|
||||
font-variation-settings: var(--default-font-variation-settings, normal);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
hr {
|
||||
height: 0;
|
||||
color: inherit;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
abbr:where([title]) {
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
-webkit-text-decoration: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
b, strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
code, kbd, samp, pre {
|
||||
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
|
||||
font-feature-settings: var(--default-mono-font-feature-settings, normal);
|
||||
font-variation-settings: var(--default-mono-font-variation-settings, normal);
|
||||
font-size: 1em;
|
||||
}
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
sub, sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
table {
|
||||
text-indent: 0;
|
||||
border-color: inherit;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
:-moz-focusring {
|
||||
outline: auto;
|
||||
}
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
ol, ul, menu {
|
||||
list-style: none;
|
||||
}
|
||||
img, svg, video, canvas, audio, iframe, embed, object {
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
img, video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
button, input, select, optgroup, textarea, ::file-selector-button {
|
||||
font: inherit;
|
||||
font-feature-settings: inherit;
|
||||
font-variation-settings: inherit;
|
||||
letter-spacing: inherit;
|
||||
color: inherit;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
opacity: 1;
|
||||
}
|
||||
:where(select:is([multiple], [size])) optgroup {
|
||||
font-weight: bolder;
|
||||
}
|
||||
:where(select:is([multiple], [size])) optgroup option {
|
||||
padding-inline-start: 20px;
|
||||
}
|
||||
::file-selector-button {
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
::placeholder {
|
||||
opacity: 1;
|
||||
}
|
||||
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
|
||||
::placeholder {
|
||||
color: currentcolor;
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
color: color-mix(in oklab, currentcolor 50%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
::-webkit-date-and-time-value {
|
||||
min-height: 1lh;
|
||||
text-align: inherit;
|
||||
}
|
||||
::-webkit-datetime-edit {
|
||||
display: inline-flex;
|
||||
}
|
||||
::-webkit-datetime-edit-fields-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
|
||||
padding-block: 0;
|
||||
}
|
||||
::-webkit-calendar-picker-indicator {
|
||||
line-height: 1;
|
||||
}
|
||||
:-moz-ui-invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
|
||||
appearance: button;
|
||||
}
|
||||
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
[hidden]:where(:not([hidden="until-found"])) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@layer utilities {
|
||||
.static {
|
||||
position: static;
|
||||
}
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
:root {
|
||||
--bg: #fff;
|
||||
--ink: #2a2824;
|
||||
--muted: #7f7a72;
|
||||
--rule: #d8d4cc;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--bg);
|
||||
color: var(--ink);
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
html {
|
||||
font-size: 112.5%;
|
||||
}
|
||||
.brief-page {
|
||||
max-width: 1360px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
.brief-head {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 0.5rem 0;
|
||||
margin: 0;
|
||||
border-bottom: none;
|
||||
background: #fff;
|
||||
}
|
||||
.brief-head h1 {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
.brief-nav {
|
||||
display: flex;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
.brief-nav-btn {
|
||||
text-decoration: none;
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 999px;
|
||||
color: var(--ink);
|
||||
font-size: 0.86rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
}
|
||||
.brief-nav-btn.is-disabled {
|
||||
opacity: 0.35;
|
||||
pointer-events: none;
|
||||
}
|
||||
.brief-grid {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.grid-row {
|
||||
display: grid;
|
||||
grid-template-columns: 250px minmax(0, 1fr) 250px;
|
||||
column-gap: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.row-divider {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.page-divider-line {
|
||||
border-top: 1px solid #cfc8bc;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.grid-left, .grid-mid, .grid-right {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.grid-full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.page-marker {
|
||||
margin: 0;
|
||||
padding: 0.18rem 0 0.18rem 0;
|
||||
font-size: 0.84rem;
|
||||
color: #5f584f;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
line-height: 1;
|
||||
text-align: right;
|
||||
}
|
||||
.notes-col {
|
||||
padding-top: 0.18rem;
|
||||
}
|
||||
.notes-col > .sidenote + .sidenote {
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
.page-lines {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.notes-band {
|
||||
margin: 0;
|
||||
padding: 0.1rem 0;
|
||||
}
|
||||
.sidenote {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
.sidenote-annotation {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 0.78rem;
|
||||
color: #8d867b;
|
||||
font-family: "Times New Roman", Georgia, serif;
|
||||
font-style: italic;
|
||||
}
|
||||
.pos-top-right, .pos-bottom-right, .pos-right {
|
||||
text-align: right;
|
||||
}
|
||||
.pos-top-center, .pos-bottom-center {
|
||||
text-align: center;
|
||||
}
|
||||
.line {
|
||||
white-space: normal;
|
||||
font-size: 1.12rem;
|
||||
line-height: 1.5;
|
||||
color: #2f2c27;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.notes-col .line, .notes-band .line {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.line-empty {
|
||||
height: 1rem;
|
||||
}
|
||||
.line-first {
|
||||
padding-left: 0;
|
||||
}
|
||||
.line-continuation {
|
||||
color: #3b3731;
|
||||
}
|
||||
.line-indent-0 {
|
||||
text-indent: 0;
|
||||
}
|
||||
.line-indent-1 {
|
||||
text-indent: 0.58rem;
|
||||
}
|
||||
.line-indent-2 {
|
||||
text-indent: 1.16rem;
|
||||
}
|
||||
.line-indent-3 {
|
||||
text-indent: 1.74rem;
|
||||
}
|
||||
.line-indent-4 {
|
||||
text-indent: 2.32rem;
|
||||
}
|
||||
.line-indent-5 {
|
||||
text-indent: 2.9rem;
|
||||
}
|
||||
.line-indent-6 {
|
||||
text-indent: 3.48rem;
|
||||
}
|
||||
.line-indent-7 {
|
||||
text-indent: 4.06rem;
|
||||
}
|
||||
.line-indent-8 {
|
||||
text-indent: 4.64rem;
|
||||
}
|
||||
.line-indent-9 {
|
||||
text-indent: 5.22rem;
|
||||
}
|
||||
.line-indent-10 {
|
||||
text-indent: 5.8rem;
|
||||
}
|
||||
.line-indent-11 {
|
||||
text-indent: 6.38rem;
|
||||
}
|
||||
.line-indent-12 {
|
||||
text-indent: 6.96rem;
|
||||
}
|
||||
.line-align-ctx {
|
||||
text-align: right;
|
||||
}
|
||||
.line-align-ctx .tag-align.align-center {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.line-align-ctx .tag-align.align-right {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
.line-tab-ctx .tag-tab {
|
||||
display: inline-block;
|
||||
min-width: 3.6ch;
|
||||
border-left: 1px dotted #cdbfae;
|
||||
padding-left: 0.34rem;
|
||||
}
|
||||
.tag-aq, .tag-note {
|
||||
font-family: "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
|
||||
}
|
||||
.tag-b {
|
||||
font-weight: 700;
|
||||
}
|
||||
.tag-del {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.tag-dul {
|
||||
text-decoration: underline;
|
||||
text-decoration-style: double;
|
||||
}
|
||||
.tag-tul {
|
||||
text-decoration: underline;
|
||||
text-decoration-style: wavy;
|
||||
text-decoration-thickness: 2px;
|
||||
}
|
||||
.tag-it {
|
||||
font-style: italic;
|
||||
}
|
||||
.tag-ul {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.tag-note {
|
||||
font-size: 0.9em;
|
||||
font-weight: 700;
|
||||
color: var(--muted);
|
||||
}
|
||||
.tag-note {
|
||||
font-family: "Times New Roman", Georgia, serif;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
color: #8d867b;
|
||||
}
|
||||
.tag-ink {
|
||||
color: #2d5e8a;
|
||||
}
|
||||
.tag-pe {
|
||||
color: #4e667f;
|
||||
}
|
||||
.tag-tl {
|
||||
background: #f5e4d6;
|
||||
color: #8c5a41;
|
||||
padding: 0 0.12rem;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.tag-nr {
|
||||
color: #6f675d;
|
||||
}
|
||||
.tag-insertion {
|
||||
position: relative;
|
||||
padding-left: 0.1rem;
|
||||
}
|
||||
.tag-insertion::before {
|
||||
content: "\2038";
|
||||
font-size: 0.78em;
|
||||
vertical-align: super;
|
||||
color: #9a8b76;
|
||||
margin-right: 0.06rem;
|
||||
}
|
||||
@media (max-width: 960px) {
|
||||
.brief-page {
|
||||
max-width: 100%;
|
||||
}
|
||||
.grid-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.notes-col, .grid-left, .grid-right, .notes-band {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1 +1,249 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--bg: #fff;
|
||||
--ink: #2a2824;
|
||||
--muted: #7f7a72;
|
||||
--rule: #d8d4cc;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--bg);
|
||||
color: var(--ink);
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 112.5%;
|
||||
}
|
||||
|
||||
.brief-page {
|
||||
max-width: 1360px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.brief-head {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 0.5rem 0;
|
||||
margin: 0;
|
||||
border-bottom: none;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.brief-head h1 {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.brief-nav {
|
||||
display: flex;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.brief-nav-btn {
|
||||
text-decoration: none;
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 999px;
|
||||
color: var(--ink);
|
||||
font-size: 0.86rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
}
|
||||
|
||||
.brief-nav-btn.is-disabled { opacity: 0.35; pointer-events: none; }
|
||||
|
||||
.brief-grid {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.grid-row {
|
||||
display: grid;
|
||||
grid-template-columns: 250px minmax(0, 1fr) 250px;
|
||||
column-gap: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.row-divider {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.page-divider-line {
|
||||
border-top: 1px solid #cfc8bc;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grid-left,
|
||||
.grid-mid,
|
||||
.grid-right {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.grid-full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.page-marker {
|
||||
margin: 0;
|
||||
padding: 0.18rem 0 0.18rem 0;
|
||||
font-size: 0.84rem;
|
||||
color: #5f584f;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
line-height: 1;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.notes-col {
|
||||
padding-top: 0.18rem;
|
||||
}
|
||||
|
||||
.notes-col > .sidenote + .sidenote {
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
|
||||
.page-lines {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.notes-band {
|
||||
margin: 0;
|
||||
padding: 0.1rem 0;
|
||||
}
|
||||
|
||||
.sidenote {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.sidenote-annotation {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 0.78rem;
|
||||
color: #8d867b;
|
||||
font-family: "Times New Roman", Georgia, serif;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.pos-top-right,
|
||||
.pos-bottom-right,
|
||||
.pos-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.pos-top-center,
|
||||
.pos-bottom-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.line {
|
||||
white-space: normal;
|
||||
font-size: 1.12rem;
|
||||
line-height: 1.5;
|
||||
color: #2f2c27;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.notes-col .line,
|
||||
.notes-band .line {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.line-empty { height: 1rem; }
|
||||
.line-first { padding-left: 0; }
|
||||
.line-continuation { color: #3b3731; }
|
||||
|
||||
.line-indent-0 { text-indent: 0; }
|
||||
.line-indent-1 { text-indent: 0.58rem; }
|
||||
.line-indent-2 { text-indent: 1.16rem; }
|
||||
.line-indent-3 { text-indent: 1.74rem; }
|
||||
.line-indent-4 { text-indent: 2.32rem; }
|
||||
.line-indent-5 { text-indent: 2.9rem; }
|
||||
.line-indent-6 { text-indent: 3.48rem; }
|
||||
.line-indent-7 { text-indent: 4.06rem; }
|
||||
.line-indent-8 { text-indent: 4.64rem; }
|
||||
.line-indent-9 { text-indent: 5.22rem; }
|
||||
.line-indent-10 { text-indent: 5.8rem; }
|
||||
.line-indent-11 { text-indent: 6.38rem; }
|
||||
.line-indent-12 { text-indent: 6.96rem; }
|
||||
|
||||
.line-align-ctx { text-align: right; }
|
||||
.line-align-ctx .tag-align.align-center { display: inline-block; width: 100%; text-align: center; }
|
||||
.line-align-ctx .tag-align.align-right { display: inline-block; width: 100%; text-align: right; }
|
||||
|
||||
.line-tab-ctx .tag-tab {
|
||||
display: inline-block;
|
||||
min-width: 3.6ch;
|
||||
border-left: 1px dotted #cdbfae;
|
||||
padding-left: 0.34rem;
|
||||
}
|
||||
|
||||
.tag-aq,
|
||||
.tag-note { font-family: "Trebuchet MS", "Helvetica Neue", Arial, sans-serif; }
|
||||
|
||||
.tag-b { font-weight: 700; }
|
||||
.tag-del { text-decoration: line-through; }
|
||||
.tag-dul { text-decoration: underline; text-decoration-style: double; }
|
||||
.tag-tul { text-decoration: underline; text-decoration-style: wavy; text-decoration-thickness: 2px; }
|
||||
.tag-it { font-style: italic; }
|
||||
.tag-ul { text-decoration: underline; }
|
||||
.tag-note { font-size: 0.9em; font-weight: 700; color: var(--muted); }
|
||||
.tag-note {
|
||||
font-family: "Times New Roman", Georgia, serif;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
color: #8d867b;
|
||||
}
|
||||
.tag-ink { color: #2d5e8a; }
|
||||
.tag-pe { color: #4e667f; }
|
||||
.tag-tl { background: #f5e4d6; color: #8c5a41; padding: 0 0.12rem; border-radius: 2px; }
|
||||
.tag-nr { color: #6f675d; }
|
||||
|
||||
.tag-insertion {
|
||||
position: relative;
|
||||
padding-left: 0.1rem;
|
||||
}
|
||||
|
||||
.tag-insertion::before {
|
||||
content: "\2038";
|
||||
font-size: 0.78em;
|
||||
vertical-align: super;
|
||||
color: #9a8b76;
|
||||
margin-right: 0.06rem;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.brief-page { max-width: 100%; }
|
||||
|
||||
.grid-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.notes-col,
|
||||
.grid-left,
|
||||
.grid-right,
|
||||
.notes-band {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user