Header
This commit is contained in:
Sodbileg Gansukh
parent
ff4e4226c0
commit
f74e9241bb
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
13
default.hbs
13
default.hbs
|
|
@ -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}}
|
||||
|
|
|
|||
48
index.hbs
48
index.hbs
|
|
@ -3,29 +3,33 @@
|
|||
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}}">
|
||||
{{#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 --}}
|
||||
<img class="site-header-cover"
|
||||
srcset="{{img_url @site.cover_image size="s"}} 300w,
|
||||
{{img_url @site.cover_image size="m"}} 600w,
|
||||
{{img_url @site.cover_image size="l"}} 1000w,
|
||||
{{img_url @site.cover_image size="xl"}} 2000w"
|
||||
sizes="100vw"
|
||||
src="{{img_url @site.cover_image size="xl"}}"
|
||||
alt=""
|
||||
/>
|
||||
<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 --}}
|
||||
<img class="site-header-cover"
|
||||
srcset="{{img_url @site.cover_image size="s"}} 300w,
|
||||
{{img_url @site.cover_image size="m"}} 600w,
|
||||
{{img_url @site.cover_image size="l"}} 1000w,
|
||||
{{img_url @site.cover_image size="xl"}} 2000w"
|
||||
sizes="100vw"
|
||||
src="{{img_url @site.cover_image size="xl"}}"
|
||||
alt=""
|
||||
/>
|
||||
{{/if}}
|
||||
|
||||
<section class="site-header-inner inner">
|
||||
{{#if @site.icon}}
|
||||
<img class="site-icon" src="{{@site.icon}}" alt="{{@site.title}}">
|
||||
{{/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}}
|
||||
{{/if}}
|
||||
</h1>
|
||||
<p class="site-description">{{@site.description}}</p>
|
||||
</div>
|
||||
<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 --}}
|
||||
|
|
|
|||
Loading…
Reference in New Issue