mirror of
https://github.com/ViViDboarder/Vivid-Casper.git
synced 2024-12-22 19:47:38 +00:00
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
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
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}}">
|
<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}}
|
||||||
|
|||||||
48
index.hbs
48
index.hbs
@ -3,29 +3,33 @@
|
|||||||
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}}
|
|
||||||
{{!-- This is a responsive image, it loads different sizes depending on device
|
{{#if @site.cover_image}}
|
||||||
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
|
{{!-- This is a responsive image, it loads different sizes depending on device
|
||||||
<img class="site-header-cover"
|
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
|
||||||
srcset="{{img_url @site.cover_image size="s"}} 300w,
|
<img class="site-header-cover"
|
||||||
{{img_url @site.cover_image size="m"}} 600w,
|
srcset="{{img_url @site.cover_image size="s"}} 300w,
|
||||||
{{img_url @site.cover_image size="l"}} 1000w,
|
{{img_url @site.cover_image size="m"}} 600w,
|
||||||
{{img_url @site.cover_image size="xl"}} 2000w"
|
{{img_url @site.cover_image size="l"}} 1000w,
|
||||||
sizes="100vw"
|
{{img_url @site.cover_image size="xl"}} 2000w"
|
||||||
src="{{img_url @site.cover_image size="xl"}}"
|
sizes="100vw"
|
||||||
alt=""
|
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}}
|
{{/if}}
|
||||||
<h1 class="site-title">
|
<div class="site-header-wrapper">
|
||||||
{{#if @site.logo}}
|
<h1 class="site-title">{{@site.title}}</h1>
|
||||||
<img class="site-logo" src="{{img_url @site.logo size="m"}}" alt="{{@site.title}}" />
|
<p class="site-description">{{@site.description}}</p>
|
||||||
{{else}}
|
</div>
|
||||||
{{@site.title}}
|
</section>
|
||||||
{{/if}}
|
|
||||||
</h1>
|
</div>
|
||||||
<p class="site-description">{{@site.description}}</p>
|
|
||||||
</div>
|
|
||||||
{{/match}}
|
{{/match}}
|
||||||
|
|
||||||
{{!-- The main content area --}}
|
{{!-- The main content area --}}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user