Improved author and tag header styles

no refs.

- added default avatar for authors template
- fixed typography inconsistencies, alignment and spacing issues for author and tags headers
- applied CSSComb
This commit is contained in:
Peter Zimon 2020-03-04 14:34:03 +01:00
parent 9e29e145fc
commit e5969f93da
4 changed files with 61 additions and 25 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -205,6 +205,7 @@ body {
.site-home-header .site-description { .site-home-header .site-description {
font-size: 2.2rem; font-size: 2.2rem;
font-weight: 300; font-weight: 300;
text-align: center;
} }
@ -249,7 +250,7 @@ body {
@media (max-width: 500px) { @media (max-width: 500px) {
.site-home-header .site-title { .site-home-header .site-title {
font-size: 3.2rem; font-size: 4.2rem;
} }
.site-home-header .site-description { .site-home-header .site-description {
@ -257,8 +258,19 @@ body {
} }
.site-archive-header .site-header-content { .site-archive-header .site-header-content {
flex-direction: column;
align-items: center;
min-height: unset; min-height: unset;
} }
.site-archive-header .site-title {
font-size: 4.2rem;
text-align: center;
}
.site-archive-header .no-image .site-header-content {
padding: 12vw 0 20px;
}
} }
@ -454,8 +466,8 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
.site-nav-right { .site-nav-right {
flex: 0 1 auto; flex: 0 1 auto;
display: flex; display: flex;
align-items: center;
justify-content: flex-end; justify-content: flex-end;
align-items: center;
padding: 10px 0; padding: 10px 0;
height: 64px; height: 64px;
} }
@ -517,8 +529,8 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
.subscribe-button { .subscribe-button {
display: block; display: block;
padding: 4px 10px;
margin: 0 0 0 10px; margin: 0 0 0 10px;
padding: 4px 10px;
border: #fff 1px solid; border: #fff 1px solid;
color: #fff; color: #fff;
line-height: 1em; line-height: 1em;
@ -1408,7 +1420,8 @@ Usage (In Ghost editor):
.post-full-title { .post-full-title {
margin-top: 0.2em; margin-top: 0.2em;
font-size: 3.3rem; font-size: 4.2rem;
line-height: 1.05em;
} }
.post-full-image { .post-full-image {
@ -1652,8 +1665,12 @@ Usage (In Ghost editor):
@media (max-width: 500px) { @media (max-width: 500px) {
.author-avatar { .author-avatar {
width: 32px; width: 36px;
height: 32px; height: 36px;
}
.post-full-byline {
margin-top: 20px;
} }
.post-full-byline-meta { .post-full-byline-meta {
@ -2338,6 +2355,10 @@ Usage (In Ghost editor):
padding: 10vw 0 10px; padding: 10vw 0 10px;
} }
.site-archive-header .author-header {
align-items: center;
}
.site-archive-header .no-image .author-header { .site-archive-header .no-image .author-header {
padding-bottom: 20px; padding-bottom: 20px;
} }
@ -2352,7 +2373,7 @@ Usage (In Ghost editor):
.site-header-content .author-profile-image { .site-header-content .author-profile-image {
z-index: 10; z-index: 10;
flex-shrink: 0; flex-shrink: 0;
margin: 5px 0 0; margin: -4px 0 0;
width: 110px; width: 110px;
height: 110px; height: 110px;
box-shadow: rgba(255,255,255,0.1) 0 0 0 6px; box-shadow: rgba(255,255,255,0.1) 0 0 0 6px;
@ -2361,10 +2382,10 @@ Usage (In Ghost editor):
.author-header-content .author-bio { .author-header-content .author-bio {
z-index: 10; z-index: 10;
flex-shrink: 0; flex-shrink: 0;
margin: 6px 0 -6px; margin: 6px 0 0;
max-width: 46em; max-width: 46em;
font-size: 2.0rem; font-size: 2.0rem;
line-height: 1.4em; line-height: 1.3em;
font-weight: 400; font-weight: 400;
opacity: 0.8; opacity: 0.8;
} }
@ -2379,6 +2400,7 @@ Usage (In Ghost editor):
font-weight: 400; font-weight: 400;
letter-spacing: 0.2px; letter-spacing: 0.2px;
text-transform: uppercase; text-transform: uppercase;
white-space: nowrap;
} }
.author-header-content .social-link:first-of-type { .author-header-content .social-link:first-of-type {
@ -2408,14 +2430,10 @@ Usage (In Ghost editor):
opacity: 1; opacity: 1;
} }
.author-social-link {
padding: 10px 0;
}
.author-social-link { .author-social-link {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
padding: 10px 0; padding: 6px 0;
} }
.author-location + .author-stats:before, .author-location + .author-stats:before,
@ -2434,6 +2452,14 @@ Usage (In Ghost editor):
color: var(--midgrey); color: var(--midgrey);
} }
@media (max-width: 700px) {
.author-location,
.author-stats,
.author-stats + .author-social-link:first-of-type:before {
display: none;
}
}
@media (max-width: 500px) { @media (max-width: 500px) {
.author-header { .author-header {
padding: 10px 0 0; padding: 10px 0 0;
@ -2444,23 +2470,31 @@ Usage (In Ghost editor):
} }
.author-header-content { .author-header-content {
margin-left: 20px; align-items: center;
margin: 16px 0 0 0;
} }
.site-header-content .author-profile-image { .site-header-content .author-profile-image {
width: 80px; width: 96px;
height: 80px; height: 96px;
} }
.author-header-content .author-bio { .author-header-content .author-bio {
font-size: 1.8rem; font-size: 1.8rem;
line-height: 1.3em; line-height: 1.3em;
letter-spacing: 0; letter-spacing: 0;
text-align: center;
} }
.author-location, .author-header-content .author-meta {
.author-stats { margin-top: 8px;
display: none; }
.author-location + .author-stats:before,
.author-stats + .author-social-link:before,
.author-social-link + .author-social-link:before {
display: inline;
margin: 0 6px;
} }
} }
@ -2587,10 +2621,10 @@ Usage (In Ghost editor):
position: absolute; position: absolute;
top: 16px; top: 16px;
right: 20px; right: 20px;
z-index: 2000;
display: block;
width: 40px; width: 40px;
height: 40px; height: 40px;
display: block;
z-index: 2000;
} }
.subscribe-close-button:before { .subscribe-close-button:before {
@ -2641,9 +2675,9 @@ Usage (In Ghost editor):
} }
.subscribe-overlay:target { .subscribe-overlay:target {
z-index: 2001;
opacity: 1; opacity: 1;
pointer-events: auto; pointer-events: auto;
z-index: 2001;
} }
.subscribe-overlay-content { .subscribe-overlay-content {

@ -12,6 +12,8 @@
<div class="site-header-content author-header"> <div class="site-header-content author-header">
{{#if profile_image}} {{#if profile_image}}
<img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" /> <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
{{else}}
<span class="author-profile-image">{{> "icons/avatar"}}</span>
{{/if}} {{/if}}
<div class="author-header-content"> <div class="author-header-content">
<h1 class="site-title">{{name}}</h1> <h1 class="site-title">{{name}}</h1>