This commit is contained in:
Sodbileg Gansukh 2022-05-06 14:12:11 +08:00
parent ff4e4226c0
commit f74e9241bb
5 changed files with 64 additions and 82 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

@ -8,8 +8,6 @@ production stylesheet in assets/built/screen.css
2. Layout 2. Layout
3. Special Templates 3. Special Templates
4. Site Header 4. Site Header
4.1 Home header
4.2 Archive header
5. Site Navigation 5. Site Navigation
6. Post Feed 6. Post Feed
7. Single Post 7. Single Post
@ -110,31 +108,41 @@ production stylesheet in assets/built/screen.css
position: relative; position: relative;
z-index: 100; z-index: 100;
display: flex; display: flex;
flex-direction: column; align-items: flex-end;
justify-content: center; height: 600px;
align-items: center;
padding: 6vw 3vw;
min-height: 200px; min-height: 200px;
max-height: 340px; padding-top: 104px;
text-align: center; padding-bottom: 64px;
color: #fff;
}
.site-header-inner {
position: relative;
display: flex;
align-items: center;
}
.site-icon {
flex-shrink: 0;
margin-right: 24px;
width: 120px;
height: 120px;
} }
.site-title { .site-title {
z-index: 10; z-index: 10;
margin: 0 0 0.15em; margin: 0;
padding: 0; padding: 0;
} font-size: 4.8rem;
font-weight: 800;
.site-logo {
max-height: 55px;
} }
.site-description { .site-description {
z-index: 10; z-index: 10;
max-width: 600px; margin-top: 8px;
margin: 0 auto; max-width: 560px;
line-height: 1.2em; font-size: 2rem;
opacity: 0.8; line-height: 1.3;
} }
@media (max-width: 600px) { @media (max-width: 600px) {
@ -144,34 +152,13 @@ production stylesheet in assets/built/screen.css
} }
} }
/* 4.1 Home header
/* ---------------------------------------------------------- */
.site-home-header {
position: relative;
z-index: 1000;
overflow: hidden;
}
.site-header-content {
padding: 18vmin 4vmin;
font-size: 2.5rem;
font-weight: 400;
color: #fff;
background: var(--ghost-accent-color);
}
.site-header-content.large {
padding-top: 28vmin;
padding-bottom: 28vmin;
}
/* 5. Site Navigation /* 5. Site Navigation
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
.gh-head { .gh-head {
padding: 1vmin 4vmin; padding-top: 32px;
padding-bottom: 32px;
font-size: 1.6rem; font-size: 1.6rem;
line-height: 1.3em; line-height: 1.3em;
color: #fff; color: #fff;
@ -236,14 +223,13 @@ production stylesheet in assets/built/screen.css
} }
.gh-head-menu .nav li { .gh-head-menu .nav li {
margin: 0 2.5vmin 0 0; margin: 0 32px 0 0;
padding: 0; padding: 0;
} }
.gh-head-menu .nav a { .gh-head-menu .nav a {
display: inline-block; display: inline-block;
padding: 5px 0; padding: 5px 0;
opacity: 0.8
} }
.gh-head-menu .nav a:hover { .gh-head-menu .nav a:hover {
@ -303,15 +289,16 @@ production stylesheet in assets/built/screen.css
} }
a.gh-head-button { a.gh-head-button {
display: block; display: inline-flex;
padding: 8px 15px; align-items: center;
padding: 8px 16px;
height: 40px;
color: var(--button-text-color, var(--color-darkgrey)); color: var(--button-text-color, var(--color-darkgrey));
font-weight: 500; font-weight: 600;
letter-spacing: -0.015em; letter-spacing: -0.015em;
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1em;
background: var(--button-bg-color, #fff); background: var(--button-bg-color, #fff);
border-radius: 30px; border-radius: 6px;
} }

View File

@ -30,8 +30,8 @@
<body class="{{body_class}}{{#match @custom.title_font "=" "Elegant serif"}} has-serif-title{{/match}}{{#match @custom.body_font "=" "Modern sans-serif"}} has-sans-body{{/match}}"> <body class="{{body_class}}{{#match @custom.title_font "=" "Elegant serif"}} has-serif-title{{/match}}{{#match @custom.body_font "=" "Modern sans-serif"}} has-sans-body{{/match}}">
<div class="viewport"> <div class="viewport">
<header id="gh-head" class="gh-head{{#match @custom.publication_cover_style "!=" "None"}} has-cover{{/match}}"> <header id="gh-head" class="gh-head outer{{#match @custom.publication_cover_style "!=" "None"}} has-cover{{/match}}">
<nav class="gh-head-inner inner gh-container"> <nav class="gh-head-inner inner">
<div class="gh-head-brand"> <div class="gh-head-brand">
<a class="gh-head-logo" href="{{@site.url}}"> <a class="gh-head-logo" href="{{@site.url}}">
@ -51,15 +51,6 @@
{{navigation}} {{navigation}}
</div> </div>
<div class="gh-head-actions"> <div class="gh-head-actions">
<div class="gh-social">
{{#if @site.facebook}}
<a class="gh-social-facebook" href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
{{/if}}
{{#if @site.twitter}}
<a class="gh-social-twitter" href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
{{/if}}
</div>
{{#unless @member}} {{#unless @member}}
<a class="gh-head-button" href="#/portal/signup" data-portal="signup">Subscribe</a> <a class="gh-head-button" href="#/portal/signup" data-portal="signup">Subscribe</a>
{{else}} {{else}}

View File

@ -3,7 +3,8 @@
into the {body} of the default.hbs template --}} into the {body} of the default.hbs template --}}
{{#match @custom.publication_cover_style "!=" "None"}} {{#match @custom.publication_cover_style "!=" "None"}}
<div class="site-header-content{{#match @custom.publication_cover_style "Large"}} large{{/match}}"> <div class="site-header-content outer{{#match @custom.publication_cover_style "Large"}} large{{/match}}">
{{#if @site.cover_image}} {{#if @site.cover_image}}
{{!-- This is a responsive image, it loads different sizes depending on device {{!-- This is a responsive image, it loads different sizes depending on device
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}} https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
@ -17,15 +18,18 @@ into the {body} of the default.hbs template --}}
alt="" alt=""
/> />
{{/if}} {{/if}}
<h1 class="site-title">
{{#if @site.logo}} <section class="site-header-inner inner">
<img class="site-logo" src="{{img_url @site.logo size="m"}}" alt="{{@site.title}}" /> {{#if @site.icon}}
{{else}} <img class="site-icon" src="{{@site.icon}}" alt="{{@site.title}}">
{{@site.title}}
{{/if}} {{/if}}
</h1> <div class="site-header-wrapper">
<h1 class="site-title">{{@site.title}}</h1>
<p class="site-description">{{@site.description}}</p> <p class="site-description">{{@site.description}}</p>
</div> </div>
</section>
</div>
{{/match}} {{/match}}
{{!-- The main content area --}} {{!-- The main content area --}}