diff options
| author | Fabian Tamp <fabian.tamp@gmail.com> | 2021-02-10 18:04:37 +0300 |
|---|---|---|
| committer | Fabian Tamp <fabian.tamp@gmail.com> | 2021-02-10 18:04:37 +0300 |
| commit | 5644f0d85b0cfe1aeea341e102d5238a004e535a (patch) | |
| tree | 6ce75002f805978a64a4e19a6d9e192ecff5f4cc | |
| parent | 4ff77c7f80b937d6a7fb713d6e59ab1f01ee5424 (diff) | |
Add additional footer customisation
| -rw-r--r-- | layouts/_default/baseof.html | 2 | ||||
| -rw-r--r-- | layouts/_default/single.html | 4 | ||||
| -rw-r--r-- | layouts/partials/single-footer-customisation.html | 1 | ||||
| -rw-r--r-- | static/css/style.css | 29 |
4 files changed, 32 insertions, 4 deletions
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 221dde7..16d6325 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -26,7 +26,7 @@ <body class="{{ block "body-classes" . }}{{ end }}" lang="{{ .Site.LanguageCode }}"> - <div class="nav-bkg"> + <div class="nav-bkg drop-shadow"> <nav class="content-container pagewide-bar-padding"> <span class="divider">/ </span> <a href="{{ .Site.Home.RelPermalink }}" >{{ .Site.Title }}</a> diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 9772a86..8e52772 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -8,6 +8,8 @@ {{ define "footer" }} +{{- partial "single-footer-customisation" . -}} + <!-- TODO: right now, this gets weird when there's a big title on the right. There might be better info here: https://stackoverflow.com/questions/34995740/css-when-inline-block-elements-line-break-parent-wrapper-does-not-fit-new-width and you can test on the android-development-developer-productivity article. @@ -15,7 +17,7 @@ and you can test on the android-development-developer-productivity article. Would also be cool to make this fold on mobile so there's two links on separate lines. --> {{if (and (not .Parent.IsHome) (or .PrevInSection .NextInSection)) }} - <div class="nav-bkg-50 content-container-narrow-pad bottom-links text-0p75"> + <div class="nav-bkg-50 content-container-narrow-pad bottom-links text-0p75 drop-shadow"> <nav class="flex-row"> {{if .PrevInSection}} <a href="{{.PrevInSection.Permalink}}" class="flex-row v-center no-underline" style="max-width:45%;"> diff --git a/layouts/partials/single-footer-customisation.html b/layouts/partials/single-footer-customisation.html new file mode 100644 index 0000000..44fc196 --- /dev/null +++ b/layouts/partials/single-footer-customisation.html @@ -0,0 +1 @@ +{{- /* Intentionally blank, override in site */ -}} diff --git a/static/css/style.css b/static/css/style.css index 975219b..458fd1b 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -140,7 +140,6 @@ blockquote { .nav-bkg { color: white; - box-shadow: 0 5px 5px -5px #777777; background: #00223E; /* fallback for old browsers */ background: -webkit-linear-gradient(135deg, #00223E 80%, #FFA17F 80%); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(135deg, #00223E 80%, #FFA17F 80%); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ @@ -148,12 +147,15 @@ blockquote { .nav-bkg-50 { color: white; - box-shadow: 0 5px 5px -5px #777777; background: #00223E; /* fallback for old browsers */ background: -webkit-linear-gradient(135deg, #00223E 50%, #FFA17F 50%); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(135deg, #00223E 50%, #FFA17F 50%); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } +.drop-shadow { + box-shadow: 0 5px 5px -5px #777777; +} + .nav-bkg a { text-decoration: underline; } @@ -298,6 +300,10 @@ twitter-widget { justify-content: space-between; } +.flex-row.flex-center { + justify-content: center; +} + a.no-underline:hover { text-decoration: none; } @@ -306,6 +312,25 @@ a.no-underline:hover .re-underline { text-decoration: underline; } +a.btn-dashed { + border: dashed 1px #777; + border-radius: 4px; + padding: 0.5em; +} + +a.btn-dashed:hover { + box-shadow: 0 5px 5px -5px #777777; + border: solid 1px #777; + text-decoration: none; + background-color: #77777722; + transition: all 0.1s; +} + +.vertical-margins { + margin-top: 1em; + margin-bottom: 1em; +} + .list-of-titles .post-title { color: black; font-size: 1.5em; |