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

View File

@ -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 {

View File

@ -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>