Ghost Anpassungen

Hinweis: Dieses Posting wurde am 31.05.2022 an Capser 5.x. angepasst.

Dieser Blog wird mithilfe von Ghost zur Verfügung gestellt. Diese Instanz verwendet das Default-Theme Casper mit folgenden CSS-Anpassungen durch Code-Injection in den Einstellungen :

Da für meinen Blog kein Subscription-Modell angedacht ist, wurden mithilfe diverser Stellschrauben in den Einstellungen alle Bezüge im Blog zum Thema "Abonnement" deaktiviert. Nur der Subscription-Button im Header und Footer der Site wird trotz Deaktivierung immer noch angezeigt.

Hier hilft nur ein Ausblenden des Buttons per CSS.

.gh-head-button {
    display: none!important;
}
.footer-cta-button {
    display: none!important;
}    

Da ich persönlich kein Freund von einem reinweißen Hintergrund bin, wurde die globale Farbgebung wie folgt angepasst:

body { 
    background: #F1F5F8;
    color : #303030;
}   

hr {
   border-top: 1px solid #e0e0e0;
}

Für die Fußzeile .site-footer sowie den Bereich .read-more-wrap, der die weiteren Postings anzeigt, habe ich diverse Farbgradienten bezüglich der Hintergrundfarbe gesetzt. Mit den padding-Einstellungen des .site-footer wurde die Höhe der Fußzeile angepasst. Der Original-Wert ist für meinen Geschmack einfach viel zu hoch.

.site-footer {
   	background: rgb(105,183,249);
    background: radial-gradient(circle, rgba(105,183,249,1) 0%, rgba(66,165,246,1) 48%, rgba(14,71,161,1) 100%);
    padding: 40px 4vmin 20px;
}    
    
.read-more-wrap {
    background-image: radial-gradient( circle farthest-corner at 7.2% 13.6%, rgba(105,183,249,1)  0%,  rgba(14,71,161,1)  90% );
}

Hinweis: Die Farbgestaltung des Headers wurde in den Ghost-Einstellungen gesetzt.

Hilfreiche Links:
① screen.css-Datei des Casper-Themes auf github
Farbgradienten online erstellen:
② https://cssgradient.io/
③ https://cssgradient.io/gradient-backgrounds/