vividboarder
/
Vivid-Casper
mirror of https://github.com/ViViDboarder/Vivid-Casper.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Header

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
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

81
assets/css/screen.css
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;
} }

13
default.hbs
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}}

48
index.hbs
View File

@ -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 --}}