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:
parent
9e29e145fc
commit
e5969f93da
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 {
|
||||
font-size: 2.2rem;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
@ -249,7 +250,7 @@ body {
|
|||
|
||||
@media (max-width: 500px) {
|
||||
.site-home-header .site-title {
|
||||
font-size: 3.2rem;
|
||||
font-size: 4.2rem;
|
||||
}
|
||||
|
||||
.site-home-header .site-description {
|
||||
|
@ -257,8 +258,19 @@ body {
|
|||
}
|
||||
|
||||
.site-archive-header .site-header-content {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
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 {
|
||||
flex: 0 1 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
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 {
|
||||
display: block;
|
||||
padding: 4px 10px;
|
||||
margin: 0 0 0 10px;
|
||||
padding: 4px 10px;
|
||||
border: #fff 1px solid;
|
||||
color: #fff;
|
||||
line-height: 1em;
|
||||
|
@ -1408,7 +1420,8 @@ Usage (In Ghost editor):
|
|||
|
||||
.post-full-title {
|
||||
margin-top: 0.2em;
|
||||
font-size: 3.3rem;
|
||||
font-size: 4.2rem;
|
||||
line-height: 1.05em;
|
||||
}
|
||||
|
||||
.post-full-image {
|
||||
|
@ -1652,8 +1665,12 @@ Usage (In Ghost editor):
|
|||
|
||||
@media (max-width: 500px) {
|
||||
.author-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.post-full-byline {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.post-full-byline-meta {
|
||||
|
@ -2338,6 +2355,10 @@ Usage (In Ghost editor):
|
|||
padding: 10vw 0 10px;
|
||||
}
|
||||
|
||||
.site-archive-header .author-header {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.site-archive-header .no-image .author-header {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
@ -2352,7 +2373,7 @@ Usage (In Ghost editor):
|
|||
.site-header-content .author-profile-image {
|
||||
z-index: 10;
|
||||
flex-shrink: 0;
|
||||
margin: 5px 0 0;
|
||||
margin: -4px 0 0;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
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 {
|
||||
z-index: 10;
|
||||
flex-shrink: 0;
|
||||
margin: 6px 0 -6px;
|
||||
margin: 6px 0 0;
|
||||
max-width: 46em;
|
||||
font-size: 2.0rem;
|
||||
line-height: 1.4em;
|
||||
line-height: 1.3em;
|
||||
font-weight: 400;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
@ -2379,6 +2400,7 @@ Usage (In Ghost editor):
|
|||
font-weight: 400;
|
||||
letter-spacing: 0.2px;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.author-header-content .social-link:first-of-type {
|
||||
|
@ -2408,14 +2430,10 @@ Usage (In Ghost editor):
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
.author-social-link {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.author-social-link {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.author-location + .author-stats:before,
|
||||
|
@ -2434,6 +2452,14 @@ Usage (In Ghost editor):
|
|||
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) {
|
||||
.author-header {
|
||||
padding: 10px 0 0;
|
||||
|
@ -2444,23 +2470,31 @@ Usage (In Ghost editor):
|
|||
}
|
||||
|
||||
.author-header-content {
|
||||
margin-left: 20px;
|
||||
align-items: center;
|
||||
margin: 16px 0 0 0;
|
||||
}
|
||||
|
||||
.site-header-content .author-profile-image {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
}
|
||||
|
||||
.author-header-content .author-bio {
|
||||
font-size: 1.8rem;
|
||||
line-height: 1.3em;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.author-location,
|
||||
.author-stats {
|
||||
display: none;
|
||||
.author-header-content .author-meta {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.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;
|
||||
top: 16px;
|
||||
right: 20px;
|
||||
z-index: 2000;
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: block;
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
.subscribe-close-button:before {
|
||||
|
@ -2641,9 +2675,9 @@ Usage (In Ghost editor):
|
|||
}
|
||||
|
||||
.subscribe-overlay:target {
|
||||
z-index: 2001;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
z-index: 2001;
|
||||
}
|
||||
|
||||
.subscribe-overlay-content {
|
||||
|
|
|
@ -12,6 +12,8 @@
|
|||
<div class="site-header-content author-header">
|
||||
{{#if profile_image}}
|
||||
<img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
|
||||
{{else}}
|
||||
<span class="author-profile-image">{{> "icons/avatar"}}</span>
|
||||
{{/if}}
|
||||
<div class="author-header-content">
|
||||
<h1 class="site-title">{{name}}</h1>
|
||||
|
|
Loading…
Reference in New Issue