mirror of
https://github.com/ZetaKebab/kesper.git
synced 2024-09-16 11:10:09 +00:00
Redesign theme style
This commit is contained in:
parent
1cfebce298
commit
32a3298ada
@ -126,6 +126,8 @@ a {
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
text-decoration: underline;
|
||||
opacity: initial;
|
||||
}
|
||||
b,
|
||||
strong {
|
||||
|
||||
@ -28,6 +28,10 @@ production stylesheet in assets/built/screen.css
|
||||
|
||||
/* Import CSS reset and base styles */
|
||||
@import "global.css";
|
||||
@import "prism.css";
|
||||
|
||||
@font-face { font-family:'Mulish'; src:url('../fonts/Mulish-Regular.ttf'); }
|
||||
@font-face { font-family:'Mulish'; src:url('../fonts/Mulish-Bold.ttf'); font-weight:bold; }
|
||||
|
||||
:root {
|
||||
|
||||
@ -54,7 +58,7 @@ production stylesheet in assets/built/screen.css
|
||||
|
||||
/* Fonts */
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||
--font-serif: Georgia, Times, serif;
|
||||
--font-serif: Mulish, Georgia, Times, serif;
|
||||
--font-mono: Menlo, Courier, monospace;
|
||||
|
||||
}
|
||||
@ -63,6 +67,11 @@ production stylesheet in assets/built/screen.css
|
||||
/* 2. Layout - Page building blocks
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
body {
|
||||
font-family: Mulish;
|
||||
background-color: #f5f6f8;
|
||||
}
|
||||
|
||||
.viewport {
|
||||
position: relative;
|
||||
display: flex;
|
||||
@ -113,16 +122,16 @@ production stylesheet in assets/built/screen.css
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: calc(19vmin + 44px);
|
||||
padding-bottom: 19vmin;
|
||||
text-align: center;
|
||||
color: var(--color-darkgrey);
|
||||
}
|
||||
|
||||
.has-cover .site-header-content {
|
||||
min-height: 560px;
|
||||
min-height: 90px;
|
||||
background-color: var(--ghost-accent-color);
|
||||
color: #fff;
|
||||
border-bottom: .1em solid #eff0f3;
|
||||
box-shadow: 0 .4em .4em 0 rgba(0,0,0,.04);
|
||||
}
|
||||
|
||||
.site-header-content.left-aligned {
|
||||
@ -228,15 +237,9 @@ production stylesheet in assets/built/screen.css
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.site-header-content {
|
||||
padding-top: calc(19vmin + 32px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.has-cover .site-header-content {
|
||||
min-height: 240px;
|
||||
min-height: 60px;
|
||||
}
|
||||
.site-header-inner {
|
||||
gap: 16px;
|
||||
@ -417,6 +420,10 @@ production stylesheet in assets/built/screen.css
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
a.gh-head-logo.no-image:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.has-cover .gh-head-logo {
|
||||
color: #fff;
|
||||
}
|
||||
@ -444,6 +451,7 @@ production stylesheet in assets/built/screen.css
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1.15em;
|
||||
}
|
||||
|
||||
.gh-head-menu .nav li {
|
||||
@ -458,7 +466,7 @@ production stylesheet in assets/built/screen.css
|
||||
}
|
||||
|
||||
.gh-head-menu .nav a:hover {
|
||||
opacity: 0.9;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.gh-head-menu .nav-more-toggle {
|
||||
@ -477,6 +485,10 @@ production stylesheet in assets/built/screen.css
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.nav-blog a {
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
body:not(.is-dropdown-loaded) .gh-head-menu .nav > li {
|
||||
opacity: 0;
|
||||
@ -842,13 +854,13 @@ production stylesheet in assets/built/screen.css
|
||||
.post-feed {
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 4.8vmin 4vmin;
|
||||
gap: 0vmin 4vmin;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
padding: max(4.8vmin, 36px) 0 0;
|
||||
padding: max(3.8vmin,36px) 0 0;
|
||||
}
|
||||
|
||||
:is(.tag-template, .author-template) .post-feed {
|
||||
margin-top: 4vmin;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
@ -871,6 +883,7 @@ production stylesheet in assets/built/screen.css
|
||||
flex-direction: column;
|
||||
background-size: cover;
|
||||
word-break: break-word;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.post-card-image-link {
|
||||
@ -878,12 +891,12 @@ production stylesheet in assets/built/screen.css
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
margin-bottom: 32px;
|
||||
margin-bottom:0;
|
||||
}
|
||||
|
||||
.post-card-image-link::after {
|
||||
content: "";
|
||||
display: block;
|
||||
padding-bottom: 55%;
|
||||
padding-bottom: 0%;
|
||||
}
|
||||
|
||||
.post-card[class*="post-access-"] .post-card-image-link::after {
|
||||
@ -902,16 +915,16 @@ production stylesheet in assets/built/screen.css
|
||||
}
|
||||
|
||||
.post-card-image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--color-lightgrey) no-repeat center center;
|
||||
object-fit: cover;
|
||||
border-radius: 0px;
|
||||
border-style: none;
|
||||
border-width: 0px;
|
||||
height: max(15vw, 30vh);
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.post-card.keep-ratio:not(.post-card-large):not(.post-card-full) .post-card-image {
|
||||
position: static;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.post-card-access {
|
||||
@ -976,10 +989,11 @@ production stylesheet in assets/built/screen.css
|
||||
font-size: 2.6rem;
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
color: #146598;
|
||||
}
|
||||
|
||||
.post-card-content-link:hover .post-card-title {
|
||||
opacity: 0.9;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.no-image .post-card-title {
|
||||
@ -1000,6 +1014,8 @@ production stylesheet in assets/built/screen.css
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-top: 2px solid #146598;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.post-card-excerpt {
|
||||
@ -1009,7 +1025,6 @@ production stylesheet in assets/built/screen.css
|
||||
max-width: 720px;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.5;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-word;
|
||||
}
|
||||
@ -1018,10 +1033,6 @@ production stylesheet in assets/built/screen.css
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
|
||||
.post-card:not(.post-card-large):not(.post-card-full):not(.dynamic):not(.no-image) .post-card-excerpt {
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
:is(.tag-template, .author-template) .post-card-excerpt {
|
||||
margin-top: 6px;
|
||||
}
|
||||
@ -1041,6 +1052,15 @@ production stylesheet in assets/built/screen.css
|
||||
color: var(--color-secondary-text);
|
||||
}
|
||||
|
||||
.post-card-meta time {
|
||||
text-decoration-line: underline;
|
||||
text-decoration-style: wavy;
|
||||
text-underline-offset: 6px;
|
||||
font-size: 1.5rem;
|
||||
color: black;
|
||||
text-decoration-color: #146598;
|
||||
}
|
||||
|
||||
.post-card-meta > * {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -1222,12 +1242,8 @@ html.no-infinite-scroll .pagination {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.post-template .article {
|
||||
padding: max(8vmin, 40px) 0 max(8vmin, 64px);
|
||||
}
|
||||
|
||||
.post-template .article-header {
|
||||
padding: 0 0 max(6.4vmin, 40px);
|
||||
margin: 10px 0px;
|
||||
}
|
||||
|
||||
.page-template .article-header {
|
||||
@ -1244,7 +1260,7 @@ html.no-infinite-scroll .pagination {
|
||||
}
|
||||
|
||||
.article-title {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 10px;
|
||||
font-size: clamp(3.2rem, 5vw, 5.2rem);
|
||||
font-weight: 800;
|
||||
line-height: 1.05;
|
||||
@ -1266,7 +1282,7 @@ html.no-infinite-scroll .pagination {
|
||||
.gh-canvas .article-image {
|
||||
grid-column: wide-start / wide-end;
|
||||
width: 100%;
|
||||
margin: max(6.4vmin, 40px) 0 0;
|
||||
margin: 35px 0px;
|
||||
}
|
||||
|
||||
.image-full .article-image {
|
||||
@ -1365,7 +1381,7 @@ headings, text, images and lists. We deal with cards lower down. */
|
||||
/* Add back a top margin to all headings, unless a heading
|
||||
is the very first element in the post content */
|
||||
.gh-content > [id]:not(:first-child) {
|
||||
margin: 2em 0 0;
|
||||
margin: 1.5em 0 0;
|
||||
}
|
||||
|
||||
/* Add a small margin between a heading and anything after it */
|
||||
@ -1389,6 +1405,11 @@ is the very first element in the post content */
|
||||
color: var(--ghost-accent-color);
|
||||
text-decoration: underline;
|
||||
word-break: break-word;
|
||||
text-decoration: initial;
|
||||
}
|
||||
|
||||
.gh-content a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.gh-content > blockquote:not([class]),
|
||||
@ -1396,7 +1417,7 @@ is the very first element in the post content */
|
||||
.gh-content > ul,
|
||||
.gh-content > dl,
|
||||
.gh-content > p {
|
||||
font-family: var(--font-serif);
|
||||
font-family: Mulish;
|
||||
font-weight: 400;
|
||||
font-size: 2rem;
|
||||
line-height: 1.6em;
|
||||
@ -1545,10 +1566,10 @@ make sure they look good, and are given a bit of extra spacing. */
|
||||
/* Add extra margin before/after any cards,
|
||||
except for when immediately preceeded by a heading */
|
||||
.gh-content :not(.kg-card):not([id]) + .kg-card {
|
||||
margin-top: 6vmin;
|
||||
margin-top: 0vmin;
|
||||
}
|
||||
.gh-content .kg-card + :not(.kg-card) {
|
||||
margin-top: 6vmin;
|
||||
margin-top: 0vmin;
|
||||
}
|
||||
|
||||
/* This keeps small embeds centered */
|
||||
@ -1598,13 +1619,21 @@ except for when immediately preceeded by a heading */
|
||||
font-family: var(--font-serif);
|
||||
}
|
||||
|
||||
hr {
|
||||
width: 100px;
|
||||
border-width: 6px 0 0 0;
|
||||
border-style: double;
|
||||
border-color: black;
|
||||
margin: auto;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
/* Captions */
|
||||
figcaption {
|
||||
padding: 1.5rem 1.5rem 0;
|
||||
text-align: center;
|
||||
color: rgba(0,0,0,0.5);
|
||||
font-size: 1.3rem;
|
||||
font-size: 2rem;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
figcaption strong {
|
||||
@ -1727,13 +1756,18 @@ iframe.instagram-media + script + :not([id]) {
|
||||
.article-byline {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: min(24px, 5.6vmin) 0 0;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
border-width: 6px 0 0 0;
|
||||
border-style: double;
|
||||
}
|
||||
|
||||
.article-byline-content {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 25px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.article-byline-content .author-list {
|
||||
@ -1742,9 +1776,10 @@ iframe.instagram-media + script + :not([id]) {
|
||||
}
|
||||
|
||||
.article-byline-meta {
|
||||
color: var(--color-secondary-text);
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.2em;
|
||||
font-size: 1.85rem;
|
||||
color: initial;
|
||||
}
|
||||
|
||||
.article-byline-meta .author-name {
|
||||
@ -1759,6 +1794,13 @@ iframe.instagram-media + script + :not([id]) {
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.byline-meta-content time {
|
||||
text-decoration-line: underline;
|
||||
text-decoration-style: wavy;
|
||||
text-underline-offset: 6px;
|
||||
text-decoration-color: #146598;
|
||||
}
|
||||
|
||||
.author-avatar {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
@ -1775,6 +1817,15 @@ iframe.instagram-media + script + :not([id]) {
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.article-byline-content {
|
||||
flex-direction: column;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.article-byline-meta {
|
||||
margin: 5px 0px;
|
||||
}
|
||||
|
||||
.article-byline-content .author-list {
|
||||
padding-right: 12px;
|
||||
}
|
||||
@ -1783,6 +1834,13 @@ iframe.instagram-media + script + :not([id]) {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
.article-byline-meta {
|
||||
font-size: 1.6rem;
|
||||
color: initial;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 6.2. Subscribe
|
||||
/* ---------------------------------------------------------- */
|
||||
@ -1971,6 +2029,13 @@ iframe.instagram-media + script + :not([id]) {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.tag-template .post-card-large .post-card-content {
|
||||
border-top: 0px;
|
||||
}
|
||||
.tag-template .post-card-large .post-card-content-link:hover .post-card-title {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1001px) {
|
||||
.tag-template .post-card-large .post-card-content:only-child {
|
||||
grid-column: span 2;
|
||||
@ -2051,10 +2116,11 @@ iframe.instagram-media + script + :not([id]) {
|
||||
.site-footer {
|
||||
position: relative;
|
||||
margin: max(12vmin, 64px) 0 0 0;
|
||||
padding-top: 48px;
|
||||
padding-bottom: 140px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
color: #fff;
|
||||
background: color-mod(var(--color-darkgrey) l(-5%));
|
||||
background: #146598;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.page-template .site-footer {
|
||||
@ -2073,15 +2139,21 @@ iframe.instagram-media + script + :not([id]) {
|
||||
color: #fff;
|
||||
letter-spacing: -0.015em;
|
||||
font-weight: 500;
|
||||
font-size: 1.9rem;
|
||||
}
|
||||
|
||||
.site-footer .copyright a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.site-footer a {
|
||||
color: rgba(255,255,255,0.7);
|
||||
color: #fff;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.site-footer a:hover {
|
||||
color: rgba(255,255,255,1);
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.site-footer-nav ul {
|
||||
@ -2131,7 +2203,7 @@ iframe.instagram-media + script + :not([id]) {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.site-footer .copyright {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user