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.

Zurücklehnen und Anklicken.

Kommentare