Publii Button "To Top"
Manche Publii Themen haben nicht diesen schönen Button "Go to Top" oder "nach Oben" ...
Das Grund Thema "simple" und "Tattoo" hat diesen Button. Das Theme "massively" hat diesen Button leider nicht.
Klar ich könnte mir ein Theme suchen, daß das alles schon hat :-) aber wo bleibt da der Spaß?
So hat auch das Theme "ProDocs" diesen Button nicht.
So aber habe ich die Theme meinem Bedürfnis angepasst.
DS_Store Dateien
Als kleinen Nebeneffekt habe ich auch alle .DS_Store Dateien bei mir entfernt - ja unter Debian brauch man diese nun wirklich nicht.
find . -type f -name .DS_Store -delete
Im Terminal unter Linux ;-) und wech sind Sie.
Winblond Dateien unter einem UTF-8 Dateisystem ein graus ...
file DieDatei
sollte z.B. dann so aussehen: ... document, UTF-8 Unicode text, with CRLF line terminators
Umwandeln von (ISO-8859-14 Dateien sagte jedenfalls Mousepad das es solch eine ist) geht dann ganz einfach mit dem nachfolgendem Beispiel wenn
-f sich dann auf DieEingabeDatei bezieht.
-t sich dann auf DieAusgabeDatei bezieht.
iconv -f ISO-8859-14 -t UTF-8 DieEingabeDatei > DieAusgabeDatei
Verzeichnisse Vergleichen mit diff
diff -rq /home/USER/1.VERZEICHNIS /home/USER/2.VERZEICHNIS > AusgabeDatei.txt 2>&1
Danach vielleicht noch eine Sortierung und man hat was geschafft. Oder nimmt ein Linux Programm wie MELD 🤡
To Top
Habe ein bisschen herumgesucht und dann etwas schönes im CSS & HTML gefunden. (Funktioniert nicht mit allen Publii Theme aber es gibt ja zwei die das schon eingebaut haben.)
Im HTML Bereich:
nach dem Publii Syntax:
Body:
<div class="container">
Fuß:
<div class="scrolltop-wrap">
<a href="#" role="button" aria-label="Nach Oben Rollen">
<svg height="48" viewBox="0 0 48 48" width="48" height="48px" xmlns="http://www.w3.org/2000/svg">
<path id="scrolltop-bg" d="M0 0h48v48h-48z"></path>
<path id="scrolltop-arrow" d="M14.83 30.83l9.17-9.17 9.17 9.17 2.83-2.83-12-12-12 12z"></path>
</svg>
</a>
</div>
</div>
Im CSS Bereich:
html {
scroll-behavior: smooth;
}
.scrolltop-wrap {
box-sizing: border-box;
position: absolute;
top: 12rem;
right: 2rem;
bottom: 0;
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.scrolltop-wrap #scrolltop-bg {
fill: #007bff;
}
.scrolltop-wrap #scrolltop-arrow {
fill: white;
}
.scrolltop-wrap a:hover #scrolltop-bg {
fill: #2990ff;
}
.scrolltop-wrap a:hover #scrolltop-arrow {
fill: white;
}
@supports (-moz-appearance: meterbar) {
.scrolltop-wrap {
clip: rect(0, 3rem, auto, 0);
}
}
.scrolltop-wrap a {
position: fixed;
position: sticky;
top: -5rem;
width: 3rem;
height: 3rem;
margin-bottom: -5rem;
transform: translateY(100vh);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
display: inline-block;
text-decoration: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: all;
outline: none;
overflow: hidden;
}
.scrolltop-wrap a svg {
display: block;
border-radius: 50%;
width: 100%;
height: 100%;
}
.scrolltop-wrap a svg path {
transition: all 0.1s;
}
.scrolltop-wrap a #scrolltop-arrow {
transform: scale(0.66);
transform-origin: center;
}
@media print {
.scrolltop-wrap {
display: none !important;
}
}
html {
overflow-y: scroll;
overflow-x: hidden;
}
html::before {
content: "";
display: block;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: fixed;
top: 0;
right: -5px;
bottom: 0;
left: -5px;
filter: brightness(1.14) blur(2px);
}
.container {
position: relative;
padding: 2rem 2rem 6rem;
}
hier würde es wohl reichen einfach in den Publii eigenem CSS Bereich den Code einzufügen.
Kommentare