css customizations for spectreofreflections..

This commit is contained in:
Marcell Mars 2021-08-31 22:26:23 +02:00
parent c53a91870e
commit 22dbd2ea57
2 changed files with 907 additions and 0 deletions

View file

@ -0,0 +1,754 @@
html,
body,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr {
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}
ul {
list-style: none;
}
button,
input,
select,
textarea {
margin: 0;
}
html {
box-sizing: border-box;
}
img,
video {
height: auto;
max-width: 100%;
}
iframe {
border: 0;
}
strong del {
/* font-weight: normal; */
display: inline;
text-decoration: none;
margin-left: 1rem;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
table {
border-collapse: collapse;
border-spacing: 0;
background-color: #fff9f9;
border-left: 1px red solid;
margin-left: 1rem;
}
td,
th {
padding: 0;
vertical-align: top;
padding-right: 1rem;
padding-left: 1rem;
padding-bottom: 0.5rem;
}
td:not([align]),
th:not([align]) {
text-align: left;
}
@font-face {
font-family: "Gentium Plus";
font-style: normal;
src: url("../fonts/GentiumPlus-R.woff"),
url("../fonts/GentiumPlus-R.woff") format("woff");
}
@font-face {
font-family: "Gentium Plus";
font-style: italic;
src: url("../fonts/GentiumPlus-I.woff"),
url("../fonts/GentiumPlus-I.woff") format("woff");
}
@font-face {
font-family: "Great Vibes";
font-style: normal;
font-weight: 400;
src: url("../fonts/great-vibes-v7-latin-ext_latin-regular.eot");
/* IE9 Compat Modes */
src: local("Great Vibes"), local("GreatVibes-Regular"),
url("../fonts/great-vibes-v7-latin-ext_latin-regular.eot?#iefix")
format("embedded-opentype"),
/* IE6-IE8 */ url("../fonts/great-vibes-v7-latin-ext_latin-regular.woff2")
format("woff2"),
/* Super Modern Browsers */
url("../fonts/great-vibes-v7-latin-ext_latin-regular.woff") format("woff"),
/* Modern Browsers */
url("../fonts/great-vibes-v7-latin-ext_latin-regular.ttf")
format("truetype"),
/* Safari, Android, iOS */
url("../fonts/great-vibes-v7-latin-ext_latin-regular.svg#GreatVibes")
format("svg");
/* Legacy iOS */
}
@font-face {
font-family: "Antinoou";
font-style: normal;
src: url("../fonts/Antinoou.ttf"),
url("../fonts/Antinoou.ttf") format("truetype");
unicode-range: U+2C80U+2CFF, U+0370U+03FF, U+102E0U+102FF;
}
@font-face {
font-family: "Antinoou";
font-style: italic;
src: url("../fonts/AntinoouItalic.ttf"),
url("../fonts/AntinoouItalic.ttf") format("truetype");
unicode-range: U+2C80U+2CFF, U+0370U+03FF, U+102E0U+102FF;
}
html {
line-height: 1.5;
}
body {
font-family: "Gentium Plus", "Antinoou", serif;
max-width: 1024px;
font-size: 1.4rem;
padding-left: 3rem;
padding-top: 0.5rem;
padding-right: 2rem;
color: black;
}
#preview {
display: none;
}
sup,
sub {
vertical-align: baseline;
position: relative;
top: -0.4em;
}
sub {
top: 0.4em;
}
.headiter {
display: flex;
justify-content: space-between;
border-bottom: 0.3rem solid red;
border-top: 0.1rem solid red;
padding-top: 1rem;
padding-bottom: 0.5rem;
padding-left: 1rem;
padding-right: 1rem;
margin-bottom: 1rem;
}
a.edit-button {
color: #000;
text-decoration: none;
}
a.edit-button:hover {
text-decoration: underline;
-webkit-text-decoration-color: red;
text-decoration-color: red;
font-weight: bold;
/* font-size: 0.95em; */
cursor: pointer;
}
.header {
display: grid;
grid-template-columns: auto;
grid-auto-flow: column;
position: sticky;
top: 0;
padding-top: 0.5rem;
font-size: 1.1rem;
background-color: white;
z-index: 10;
}
.mantlebar {
display: none;
}
.breadcrumbs {
grid-column: 1;
}
.bibliotheke {
width: 2.4rem;
grid-column: 2;
margin-left: auto;
}
.bibliotheke:hover {
text-decoration: none;
font-size: 1rem;
}
.alsoin {
font-weight: bold;
display: inline-flex;
padding-left: 0.2rem;
padding-right: 0.3rem;
}
.ddmenu {
cursor: pointer;
display: inline-grid;
}
.ddmenu input {
display: none;
}
.ddmenu li {
list-style-type: none;
}
.ddmenu .hiddendiv {
display: none;
margin-top: -0.9rem;
}
input:focus,
select:focus,
textarea:focus,
label:focus,
button:focus {
outline: none;
}
.ddmenu input:checked ~ .hiddendiv {
display: block;
}
.logolink {
width: 2.4rem;
margin-left: auto;
}
.sandpointlogo {
border-radius: 50%;
border: 0.3em solid red;
display: inline-flex;
font-family: "Great Vibes", cursive;
font-size: 1.2rem;
font-weight: bold;
color: white;
background-color: red;
position: relative;
padding-left: 1em;
padding-right: 0.3em;
padding-bottom: 1.2em;
max-width: 0em;
max-height: 0em;
}
.sandpointF {
position: absolute;
font-size: 1.2em;
margin-top: -0.2em;
margin-left: -0.4em;
}
.sandpointN {
position: absolute;
font-size: 0.7em;
margin-top: 0.4em;
color: red;
margin-left: -0.5em;
}
.sandpointC {
position: absolute;
font-size: 1em;
margin-left: -0.37em;
}
footer {
display: flex;
margin-bottom: 1rem;
margin-top: 4rem;
}
li {
list-style-type: " ";
}
li[role="doc-endnote"] {
list-style-type: decimal;
}
ol li {
list-style-type: decimal;
}
.supt {
display: inline-flex;
flex-wrap: nowrap;
font-family: "Great Vibes", cursive;
font-size: 0.9em;
font-style: normal;
color: rgba(0, 0, 0, 0.8);
vertical-align: baseline;
position: relative;
top: -0.3em;
}
.sup {
display: inline-flex;
flex-wrap: nowrap;
font-family: "Great Vibes", cursive;
font-size: 0.9em;
font-style: normal;
color: red;
vertical-align: baseline;
position: relative;
top: -0.3em;
}
.sup:hover {
font-weight: normal !important;
}
.nosup a {
color: red;
}
.nosup a span.sup {
display: none;
}
.syllabustitle,
.coretitle {
margin-top: 4rem;
font-style: italic;
font-size: 4rem;
margin-bottom: 4rem;
}
.mantletitle,
.crusttitle {
margin-top: 4rem;
font-style: italic;
font-size: 2rem;
margin-bottom: 4rem;
}
.grid {
padding-left: 3rem;
margin-bottom: 2rem;
display: grid;
grid-template-columns: 1fr 1fr;
}
.leftcolumn {
grid-column: 1;
padding-right: 1.2rem;
position: relative;
}
#TableOfContents {
margin-left: -2rem;
margin-top: -1.5rem;
}
#TableOfContents li {
list-style: decimal inside;
padding-left: 0.5rem;
color: rgba(0, 0, 0, 0.4);
margin: 0;
padding: 0;
}
#TableOfContents li a {
font-family: "Gentium Plus";
font-size: 1.4rem;
font-weight: bold;
}
/* #TableOfContents > ol:first-child > span > li > a::after { */
/* content: "¶"; */
/* color: rgba(0, 0, 0, 0.2); */
/* font-size: 1.3em; */
/* padding-left: 0.1em; */
/* } */
.rightcolumn {
/* display: grid;
grid-column: 2;
grid-template-columns: auto 1fr;
grid-auto-rows: max-content; */
padding-left: 0.5rem;
}
.has {
display: inline-grid;
grid-column: 2;
grid-auto-rows: max-content;
font-size: 1.4rem;
font-style: italic;
margin-bottom: 0.8rem;
}
.hasauthors {
font-size: 1.6rem !important;
display: flex;
}
.hassup {
grid-column: 1;
font-family: "Great Vibes", cursive;
font-size: 0.9em;
font-style: normal;
color: red;
vertical-align: baseline;
position: relative;
/* top: -0.3em; */
}
.afterhas {
grid-column: 2;
}
.content {
margin-top: 4rem;
padding-left: 3rem;
padding-right: 10rem;
max-width: 720px;
}
a {
color: black;
text-decoration: none;
}
a:hover {
text-decoration: underline;
text-decoration-color: red;
font-weight: bold;
/* font-size: 0.95em; */
cursor: pointer;
}
h1 {
display: none;
}
h2 {
font-weight: bold;
font-size: 1.6rem;
}
h3 {
font-weight: bold;
font-size: 1.4rem;
}
h4 {
font-weight: bold;
font-size: 1.2rem;
}
h5 {
font-weight: bold;
font-size: 1.1rem;
}
h6 {
font-weight: bold;
font-size: 1rem;
}
.abstract {
font-style: italic;
border-left: 1px solid rgb(0, 0, 0);
margin-left: 5rem;
margin-right: 2rem;
margin-bottom: 1.2rem;
padding-left: 1rem;
padding-right: 2rem;
padding-top: 1.2rem;
padding-bottom: 1.2rem;
background-color: rgba(0, 0, 0, 0.05);
max-width: 70ch;
}
.authors {
display: inline-block;
font-size: 1.8rem;
margin-left: 5rem;
margin-right: 2rem;
padding-left: 1rem;
}
.keywords {
display: inline-block;
font-size: 1.2rem;
margin-left: 5rem;
margin-right: 2rem;
padding-left: 1rem;
padding-right: 2rem;
margin-bottom: 2.2rem;
max-width: 72ch;
}
blockquote {
border-left: 1px red solid;
margin-left: 1rem;
margin-right: 2rem;
padding-left: 1rem;
padding-right: 2rem;
padding-top: 0.1rem;
padding-bottom: 0.1rem;
background-color: #fff9f9;
}
.hx {
position: relative;
}
.hpar {
display: none;
/* position: absolute; */
/* font-size: 1.7em; */
/* font-style: normal; */
/* color: rgba(0, 0, 0, 0.1); */
/* top: 0; */
/* margin-top: -0.4em; */
}
.smallcaps {
font-family: "Gentium Plus", serif;
font-variant: small-caps;
}
body {
counter-reset: h2 glossN;
}
h2 {
counter-reset: h3;
}
h3 {
counter-reset: h4;
}
h4 {
counter-reset: h5;
}
h5 {
counter-reset: h6;
}
h2:before {
color: rgba(0, 0, 0, 0.4);
counter-increment: h2;
content: counter(h2) ". ";
}
h3:before {
color: rgba(0, 0, 0, 0.4);
counter-increment: h3;
content: counter(h2) "." counter(h3) ". ";
}
h4:before {
color: rgba(0, 0, 0, 0.4);
counter-increment: h4;
content: counter(h2) "." counter(h3) "." counter(h4) ". ";
}
h5:before {
color: rgba(0, 0, 0, 0.4);
counter-increment: h5;
content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";
}
h6:before {
color: rgba(0, 0, 0, 0.4);
counter-increment: h6;
content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "."
counter(h6) ". ";
}
h2.nocount:before,
h3.nocount:before,
h4.nocount:before,
h5.nocount:before,
h6.nocount:before {
content: "";
counter-increment: none;
}
details {
padding-left: 1rem;
}
#toggleAllLinks {
font-size: 0.8rem;
}
#toggleAllLinks:hover {
cursor: pointer;
text-decoration: underline;
text-decoration-color: red;
}
.glosscontainer {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: 1fr;
gap: 0px 0px;
grid-template-areas: "glossnumber gloss";
border-left: 1px red solid;
background-color: #fff9f9;
padding-top: 0.4em;
margin-top: 1rem;
margin-bottom: 1rem;
margin-left: 1rem;
margin-right: 2rem;
padding-bottom: 0.4em;
padding-left: 1rem;
padding-right: 2rem;
}
.gloss {
grid-area: gloss;
}
.glossnumber {
grid-area: glossnumber;
padding-right: 0.6rem;
}
.glossnumberAuto::before {
counter-increment: glossN;
content: "(" counter(glossN) ")";
}
/* .glossline {
border-bottom: lightgray solid 1px;
border-top: lightgray solid 1px;
} */
.glosswords {
display: inline-block;
padding-left: -0.3rem;
padding-right: 1rem;
}
.sitemap {
padding-left: 3rem;
font-size: 1.2rem;
}
.sitemap a {
color: rgba(0, 0, 0, 0.4);
}
.sitemap .sup {
color: rgba(255, 0, 0, 0.7);
}
.highline a,
.sitemap a:hover {
color: rgba(0, 0, 0, 1);
}
.highline .sup,
.sitemap .sup:hover {
color: red;
}
.highline {
font-size: 1.6rem;
color: rgb(0, 0, 0);
border-left: 1px red solid;
padding-left: 1rem;
padding-top: 0.1rem;
padding-bottom: 0.1rem;
background-color: #fff9f9;
}
@media (max-width: 767px) {
html {
box-sizing: border-box;
max-width: 767px;
margin: 0 auto;
padding: 0;
}
body {
font-size: 1rem;
padding-left: 10px;
padding-right: 10px;
}
.grid {
display: inline;
}
.coretitle {
margin-top: 3rem;
margin-bottom: 2rem;
font-size: 2.2rem;
}
.leftcolumn {
display: none;
}
.has,
.afterhas {
font-size: 1.1rem;
}
.mantle,
.crust {
margin-bottom: 0.2em;
}
.content {
padding: 0px;
margin: 0 auto;
margin-top: 4rem;
}
.hpar {
display: none;
}
.mantletitle {
font-size: 1.7rem;
}
.sessiongrid {
display: none;
}
}

View file

@ -0,0 +1,153 @@
{{- define "singlebody" -}}
{{ $cssTemplate := `.css-_rplc_-h2 {
counter-reset: css-_rplc_-h3;
}
.css-_rplc_-h3 {
counter-reset: css-_rplc_-h4;
}
.css-_rplc_-h4 {
counter-reset: css-_rplc_-h5;
}
.css-_rplc_-h5 {
counter-reset: css-_rplc_-h6;
}
.css-_rplc_-h2:before {
color: rgba(0, 0, 0, 0.4);
counter-increment: css-_rplc_-h2 1;
content: counter(css-_rplc_-h2) ". ";
}
.css-_rplc_-h3:before {
color: rgba(0, 0, 0, 0.4);
counter-increment: css-_rplc_-h3 1;
content: counter(css-_rplc_-h2) "." counter(css-_rplc_-h3) ". ";
}
.css-_rplc_-h4:before {
color: rgba(0, 0, 0, 0.4);
counter-increment: css-_rplc_-h4 1;
content: counter(css-_rplc_-h2) "." counter(css-_rplc_-h3) "." counter(css-_rplc_-h4) ". ";
}
.css-_rplc_-h5:before {
color: rgba(0, 0, 0, 0.4);
counter-increment: css-_rplc_-h5 1;
content: counter(css-_rplc_-h2) "." counter(css-_rplc_-h3) "." counter(css-_rplc_-h4) "." counter(css-_rplc_-h5) ". ";
}
.css-_rplc_-h6:before {
color: rgba(0, 0, 0, 0.4);
counter-increment: css-_rplc_-h6 1;
content: counter(css-_rplc_-h2) "." counter(css-_rplc_-h3) "." counter(css-_rplc_-h4) "." counter(css-_rplc_-h5) "."
counter(css-_rplc_-h6) ". ";
}
.css-_rplc_-h2.nocount:before,
.css-_rplc_-h3.nocount:before,
.css-_rplc_-h4.nocount:before,
.css-_rplc_-h5.nocount:before,
.css-_rplc_-h6.nocount:before {
content: "";
counter-increment: none;
}` }}
{{ $cssOutput := "" }}
{{ $cssHashes := "" }}
{{ $s := partialCached "scratch.html" . }}
{{ $p := $.GetPage .Params.print }}
{{ $scratch := $s.Get (printf "/%s" $p.File) }}
{{ $currentDir := "" }}
{{ with .File }}
{{ $currentDir = .Dir }}
{{ end }}
<div class="print0">{{ partial "printsinglebody.html" $p }}</div>
<div class="content">{{ $p.Content }}</div>
{{ $cssOutput = printf "%s\n%s" $cssOutput (replace $cssTemplate "_rplc_" $p.File.UniqueID) }}
{{ $cssHashes = printf "%s css-%s-h2" $cssHashes $p.File.UniqueID }}
{{ range $scratch.has_children }}
<div class="crustpage">
{{ $addS := 0 }}
{{ with .Params.editors }}
{{ $addS = len . }}
{{ end }}
{{ range $n, $authorFile := .Params.editors }}
{{ $author := $.GetPage (printf "/editor/%s" $authorFile) }}
{{ if eq $n 0 }}
<div class="runningAuthors"><span class="sup">editor{{ with (gt $addS 1) }}s{{ end }}</span><a href="#ph-{{ $author.File.UniqueID }}">{{ $author.Title }}</a>
{{ else }}
, <a href="#ph-{{ $author.File.UniqueID }}">{{ $author.Title }}</a>
{{ end }}
{{ end }}
{{ with .Params.editors }}</div>{{ end }}
{{ $tit := .Title }}
{{ if gt (len .Title) 54 }}
{{ $tit = printf "%s…" (substr .Title 0 50) }}
{{ end }}
<div class="runningTitle"><span class="sup">{{ index $scratch.crust 0 }}</span><a href="#ph-{{ .File.UniqueID }}">{{ $tit }}</a></div>
{{ partial "printsinglebody.html" . }}
{{ .Content }}
{{ $cssOutput = printf "%s\n%s" $cssOutput (replace $cssTemplate "_rplc_" .File.UniqueID) }}
{{ $cssHashes = printf "%s css-%s-h2" $cssHashes .File.UniqueID }}
{{ $kid := $s.Get (printf "/%s" .File) }}
{{ range $kid.has_children }}
<div class="crustpage">
{{ $addS := 0 }}
{{ with .Params.editors }}
{{ $addS = len . }}
{{ end }}
{{ range $n, $authorFile := .Params.editors }}
{{ $author := $.GetPage (printf "/editor/%s" $authorFile) }}
{{ if eq $n 0 }}
<div class="runningAuthors"><span class="sup">editor{{ with (gt $addS 1) }}s{{ end }}</span><a href="#ph-{{ $author.File.UniqueID }}">{{ $author.Title }}</a>
{{ else }}
, <a href="#ph-{{ $author.File.UniqueID }}">{{ $author.Title }}</a>
{{ end }}
{{ end }}
{{ with .Params.editors }}</div>{{ end }}
{{ $tit := .Title }}
{{ if gt (len .Title) 54 }}
{{ $tit = printf "%s…" (substr .Title 0 50) }}
{{ end }}
<div class="runningTitle"><span class="sup">{{ index $scratch.crust 0 }}</span><a href="#ph-{{ .File.UniqueID }}">{{ $tit }}</a></div>
{{ partial "printsinglebody.html" . }}
{{ .Content }}
{{ $cssOutput = printf "%s\n%s" $cssOutput (replace $cssTemplate "_rplc_" .File.UniqueID) }}
{{ $cssHashes = printf "%s css-%s-h2" $cssHashes .File.UniqueID }}
{{ end }}
{{ end }}
{{ range where $.Site.RegularPages "Section" "in" (slice "author" "editor") }}
<div class="authorpage">
<div class="runningTitle runningAuthors"><span class="sup">{{ index $scratch.mantle 0 }}</span><a href="#ph-{{ $p.File.UniqueID }}">{{ $p.Title }}</a></div>
<div id="ph-{{ .File.UniqueID }}" class="{{ $scratch.depth | default "crust" }}title"><span class="supt">{{ substr .File.Dir 0 -1 }}</span>{{ .Title }}</div>
{{ .Content }}
{{ if in .Page.Site.Params.sandpointsMentionedIn (substr .File.Dir 0 -1) }}
{{ $ss := $s.Get (printf "/%s" .File) }}
<div class="has hasmentionedin">
{{ with $ss }}
<div class="hassup">mentioned in</div>
{{ end }}
<div class="afterhas">
{{ range $ss.backlinks }}
<div class="{{ $ss.child_depth }}">
<a href="#ph-{{ .File.UniqueID }}">{{ .Title }}</a>
</div>
{{ end }}
</div></div>
{{ end }}
{{ end }}
{{ $cssOutput = printf "body {counter-reset: %s;}\n%s" $cssHashes $cssOutput }}
{{ $var := $cssOutput | resources.FromString "css/dyn.css" }}
{{ $dummy := $var.Permalink }}
{{- end -}}