simon/ghost-theme-sd.ai
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Organized styles

Browse Source
This commit is contained in:
Sodbileg Gansukh 2023-07-31 12:20:59 +08:00
parent c0299e8735
commit 467f1c3ece
3 changed files with 134 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/built/screen.css
View File

File diff suppressed because one or more lines are too long

2
assets/built/screen.css.map
View File

File diff suppressed because one or more lines are too long

260
assets/css/screen.css
View File

@ -19,30 +19,31 @@ production stylesheet in assets/built/screen.css
8.1. Magazine layout 8.1. Magazine layout
8.2. Highlight layout 8.2. Highlight layout
8.3. Classic layout 8.3. Classic layout
9. Featured posts 9. CTA
10. Container 10. Featured posts
10.1. With sidebar 11. Container
10.2. Without sidebar 11.1. With sidebar
11. Post list 11.2. Without sidebar
11.1. List style 12. Post list
11.2. Grid style 12.1. List style
11.3. No image list 12.2. Grid style
12. Sidebar 12.3. No image list
13. Post/page 13. Sidebar
13.1. Article 14. Post/page
13.2. Page template 14.1. Article
13.3. Page without header 14.2. Page template
14. Content 14.3. Page without header
15. Cards 15. Content
16. Comments 16. Cards
17. Recent posts 17. Comments
18. Archive 18. Recent posts
19. Design settings 19. Archive
X. Footer 20. Design settings
X.1. Footer styles 21. Footer
X.2. With recent posts 21.1. Footer styles
X.3. Footer bar 21.2. With recent posts
X.4. Footer signup 21.3. Footer bar
21.4. Footer signup
*/ */
@ -1124,7 +1125,88 @@ Search LOGO Login Subscribe
color: var(--color-secondary-text); color: var(--color-secondary-text);
} }
/* 9. Featured posts /* 9. CTA
/* ---------------------------------------------------------- */
.gh-cta {
margin-top: calc(var(--grid-gap) / 2);
}
.gh-cta-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
padding-top: 80px;
border-top: 1px solid var(--color-border);
}
.gh-cta-title {
max-width: 720px;
font-size: 4.4rem;
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.026em;
}
.gh-cta-description {
margin-top: 8px;
font-size: 2rem;
font-weight: 450;
line-height: 1.4;
letter-spacing: -.017em;
color: var(--color-secondary-text);
}
.gh-cta .gh-header-form {
display: flex;
align-items: center;
position: relative;
overflow: hidden;
max-width: 520px;
width: 100%;
height: 64px;
font-size: 1.8rem;
font-weight: 450;
letter-spacing: -0.008em;
border-radius: 40px;
background-color: var(--color-lighter-gray);
transition: background-color 0.2s ease;
}
.gh-cta .gh-header-form:hover {
background-color: rgb(0 0 0 / 0.05);
}
.gh-cta .gh-header-input {
position: absolute;
inset: 0;
padding-inline: 26px;
width: 100%;
height: 100%;
font-size: inherit;
letter-spacing: inherit;
border: 0;
background-color: transparent;
}
.gh-cta button.gh-header-input {
padding-inline-start: 56px;
text-align: left;
color: var(--color-secondary-text);
cursor: pointer;
}
.gh-cta .gh-button {
position: absolute;
right: 6px;
padding-inline: 32px;
height: 52px;
font-size: inherit;
font-weight: 600;
}
/* 10. Featured posts
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
.gh-featured { .gh-featured {
@ -1186,7 +1268,7 @@ Search LOGO Login Subscribe
background-color: var(--color-border); background-color: var(--color-border);
} }
/* 10. Container /* 11. Container
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
.gh-container { .gh-container {
@ -1200,7 +1282,7 @@ Search LOGO Login Subscribe
column-gap: var(--grid-gap); column-gap: var(--grid-gap);
} }
/* 10.1. With sidebar */ /* 11.1. With sidebar */
.gh-container.has-sidebar .gh-main { .gh-container.has-sidebar .gh-main {
grid-column: 1 / span 12; grid-column: 1 / span 12;
@ -1221,13 +1303,13 @@ Search LOGO Login Subscribe
background-color: var(--color-border); background-color: var(--color-border);
} }
/* 10.2. Without sidebar */ /* 11.2. Without sidebar */
.gh-container:not(.has-sidebar) .gh-main { .gh-container:not(.has-sidebar) .gh-main {
grid-column: 3 / span 12; grid-column: 3 / span 12;
} }
/* 11. Post list /* 12. Post list
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
.gh-container-title { .gh-container-title {
@ -1249,7 +1331,7 @@ Search LOGO Login Subscribe
margin-top: 16px; margin-top: 16px;
} }
/* 11.1. List style */ /* 12.1. List style */
.gh-container.is-list .gh-feed { .gh-container.is-list .gh-feed {
display: flex; display: flex;
@ -1290,7 +1372,7 @@ Search LOGO Login Subscribe
display: none; display: none;
} }
/* 11.2. Grid style */ /* 12.2. Grid style */
.gh-container.is-grid .gh-feed { .gh-container.is-grid .gh-feed {
display: grid; display: grid;
@ -1323,13 +1405,13 @@ Search LOGO Login Subscribe
background-color: var(--color-border); background-color: var(--color-border);
} }
/* 11.3. No image list */ /* 12.3. No image list */
.gh-container.is-list.no-image .gh-card-image { .gh-container.is-list.no-image .gh-card-image {
display: none; display: none;
} }
/* 12. Sidebar /* 13. Sidebar
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
.gh-about { .gh-about {
@ -1364,10 +1446,10 @@ Search LOGO Login Subscribe
margin-top: 24px; margin-top: 24px;
} }
/* 13. Post/page /* 14. Post/page
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
/* 13.1. Article */ /* 14.1. Article */
.gh-article { .gh-article {
--container-width: 1120px; --container-width: 1120px;
@ -1474,7 +1556,7 @@ Search LOGO Login Subscribe
width: 100%; width: 100%;
} }
/* 13.2. Page template */ /* 14.2. Page template */
.page-template .gh-article-header { .page-template .gh-article-header {
margin-block: 72px 24px; margin-block: 72px 24px;
@ -1484,7 +1566,7 @@ Search LOGO Login Subscribe
margin-bottom: 12px; margin-bottom: 12px;
} }
/* 13.3. Page without header */ /* 14.3. Page without header */
.page-template .gh-content:only-child > *:first-child:not(.kg-width-full) { .page-template .gh-content:only-child > *:first-child:not(.kg-width-full) {
margin-top: 48px; margin-top: 48px;
@ -1498,7 +1580,7 @@ Search LOGO Login Subscribe
margin-top: 0; margin-top: 0;
} }
/* 14. Content /* 15. Content
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
/* Content refers to styling all page and post content that is /* Content refers to styling all page and post content that is
@ -1640,7 +1722,7 @@ unless a heading is the very first element in the post content */
border: 1px solid var(--color-light-gray); border: 1px solid var(--color-light-gray);
} }
/* 15. Cards /* 16. Cards
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
/* Add extra margin before/after any cards, except for when immediately preceeded by a heading */ /* Add extra margin before/after any cards, except for when immediately preceeded by a heading */
@ -1820,14 +1902,14 @@ figcaption a {
text-decoration: underline; text-decoration: underline;
} }
/* 16. Comments /* 17. Comments
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
.gh-comments { .gh-comments {
margin-top: 48px; margin-top: 48px;
} }
/* 17. Recent posts /* 18. Recent posts
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
.post-template .gh-container { .post-template .gh-container {
@ -1844,7 +1926,7 @@ figcaption a {
display: none; display: none;
} }
/* 18. Archive /* 19. Archive
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
.gh-archive { .gh-archive {
@ -1921,10 +2003,10 @@ figcaption a {
height: 20px; height: 20px;
} }
/* 19. Design settings /* 20. Design settings
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
/* 19.1. Typography */ /* 20.1. Typography */
.has-sans-title .is-title { .has-sans-title .is-title {
font-family: var(--font-sans); font-family: var(--font-sans);
@ -2018,91 +2100,13 @@ figcaption a {
border-radius: 0; border-radius: 0;
} }
/* 19.2. Colors */ /* 20.2. Colors */
.has-light-text .gh-header.is-classic .gh-header-form:hover { .has-light-text .gh-header.is-classic .gh-header-form:hover {
background-color: rgb(0 0 0 / 0.2); background-color: rgb(0 0 0 / 0.2);
} }
.gh-cta { /* 21. Footer
margin-top: calc(var(--grid-gap) / 2);
}
.gh-cta-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
padding-top: 80px;
border-top: 1px solid var(--color-border);
}
.gh-cta-title {
max-width: 720px;
font-size: 4.4rem;
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.026em;
}
.gh-cta-description {
margin-top: 8px;
font-size: 2rem;
font-weight: 450;
line-height: 1.4;
letter-spacing: -.017em;
color: var(--color-secondary-text);
}
.gh-cta .gh-header-form {
display: flex;
align-items: center;
position: relative;
overflow: hidden;
max-width: 520px;
width: 100%;
height: 64px;
font-size: 1.8rem;
font-weight: 450;
letter-spacing: -0.008em;
border-radius: 40px;
background-color: var(--color-lighter-gray);
transition: background-color 0.2s ease;
}
.gh-cta .gh-header-form:hover {
background-color: rgb(0 0 0 / 0.05);
}
.gh-cta .gh-header-input {
position: absolute;
inset: 0;
padding-inline: 26px;
width: 100%;
height: 100%;
font-size: inherit;
letter-spacing: inherit;
border: 0;
background-color: transparent;
}
.gh-cta button.gh-header-input {
padding-inline-start: 56px;
text-align: left;
color: var(--color-secondary-text);
cursor: pointer;
}
.gh-cta .gh-button {
position: absolute;
right: 6px;
padding-inline: 32px;
height: 52px;
font-size: inherit;
font-weight: 600;
}
/* X. Footer
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
.gh-footer { .gh-footer {
@ -2115,7 +2119,7 @@ figcaption a {
color: inherit; color: inherit;
} }
/* X.1 Footer styles */ /* 21.1 Footer styles */
.gh-footer.has-accent-color { .gh-footer.has-accent-color {
background-color: var(--ghost-accent-color); background-color: var(--ghost-accent-color);
@ -2130,7 +2134,7 @@ figcaption a {
color: #15171a; color: #15171a;
} }
/* X.2. With recent posts */ /* 21.2. With recent posts */
.post-template .gh-container + .gh-footer { .post-template .gh-container + .gh-footer {
margin-top: 0; margin-top: 0;
@ -2140,7 +2144,7 @@ figcaption a {
background-color: var(--color-lighter-gray); background-color: var(--color-lighter-gray);
} }
/* X.3. Footer bar */ /* 21.3. Footer bar */
.gh-footer-bar { .gh-footer-bar {
display: grid; display: grid;
@ -2175,7 +2179,7 @@ figcaption a {
text-decoration: underline; text-decoration: underline;
} }
/* X.4. Footer signup */ /* 21.4. Footer signup */
.gh-footer-signup { .gh-footer-signup {
display: flex; display: flex;