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
3. Special Templates
4. Site Header
4.1 Home header
4.2 Archive header
5. Site Navigation
6. Post Feed
7. Single Post
@ -110,31 +108,41 @@ production stylesheet in assets/built/screen.css
position: relative;
z-index: 100;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 6vw 3vw;
align-items: flex-end;
height: 600px;
min-height: 200px;
max-height: 340px;
text-align: center;
padding-top: 104px;
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 {
z-index: 10;
margin: 0 0 0.15em;
margin: 0;
padding: 0;
}
.site-logo {
max-height: 55px;
font-size: 4.8rem;
font-weight: 800;
}
.site-description {
z-index: 10;
max-width: 600px;
margin: 0 auto;
line-height: 1.2em;
opacity: 0.8;
margin-top: 8px;
max-width: 560px;
font-size: 2rem;
line-height: 1.3;
}
@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
/* ---------------------------------------------------------- */
.gh-head {
padding: 1vmin 4vmin;
padding-top: 32px;
padding-bottom: 32px;
font-size: 1.6rem;
line-height: 1.3em;
color: #fff;
@ -236,14 +223,13 @@ production stylesheet in assets/built/screen.css
}
.gh-head-menu .nav li {
margin: 0 2.5vmin 0 0;
margin: 0 32px 0 0;
padding: 0;
}
.gh-head-menu .nav a {
display: inline-block;
padding: 5px 0;
opacity: 0.8
}
.gh-head-menu .nav a:hover {
@ -303,15 +289,16 @@ production stylesheet in assets/built/screen.css
}
a.gh-head-button {
display: block;
padding: 8px 15px;
display: inline-flex;
align-items: center;
padding: 8px 16px;
height: 40px;
color: var(--button-text-color, var(--color-darkgrey));
font-weight: 500;
font-weight: 600;
letter-spacing: -0.015em;
font-size: 1.5rem;
line-height: 1em;
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}}">
<div class="viewport">
<header id="gh-head" class="gh-head{{#match @custom.publication_cover_style "!=" "None"}} has-cover{{/match}}">
<nav class="gh-head-inner inner gh-container">
<header id="gh-head" class="gh-head outer{{#match @custom.publication_cover_style "!=" "None"}} has-cover{{/match}}">
<nav class="gh-head-inner inner">
<div class="gh-head-brand">
<a class="gh-head-logo" href="{{@site.url}}">
@ -51,15 +51,6 @@
{{navigation}}
</div>
<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}}
<a class="gh-head-button" href="#/portal/signup" data-portal="signup">Subscribe</a>
{{else}}

View File

@ -3,7 +3,8 @@
into the {body} of the default.hbs template --}}
{{#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}}
{{!-- 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 --}}
@ -17,15 +18,18 @@ into the {body} of the default.hbs template --}}
alt=""
/>
{{/if}}
<h1 class="site-title">
{{#if @site.logo}}
<img class="site-logo" src="{{img_url @site.logo size="m"}}" alt="{{@site.title}}" />
{{else}}
{{@site.title}}
<section class="site-header-inner inner">
{{#if @site.icon}}
<img class="site-icon" src="{{@site.icon}}" alt="{{@site.title}}">
{{/if}}
</h1>
<div class="site-header-wrapper">
<h1 class="site-title">{{@site.title}}</h1>
<p class="site-description">{{@site.description}}</p>
</div>
</section>
</div>
{{/match}}
{{!-- The main content area --}}