-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: style for home and post list pages
- Loading branch information
Showing
7 changed files
with
434 additions
and
9 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| @import "../../helper"; | ||
|
|
||
| .Homepage { | ||
| &-header { | ||
| position: relative; | ||
| z-index: 1; | ||
| overflow: hidden; | ||
| padding: 96px 20px; | ||
| text-align: center; | ||
| background-color: #fff; | ||
|
|
||
| h1 { | ||
| margin-top: 0; | ||
| margin-bottom: .3em; | ||
| font-size: 10rem; | ||
| font-weight: 700; | ||
| } | ||
| } | ||
|
|
||
| &-slogan { | ||
| font-size: 2.5rem; | ||
| } | ||
|
|
||
| &-body { | ||
| &:before { | ||
| content: "\0020"; | ||
| display: block; | ||
| height: 0; | ||
| @include box-shadow(0 2px 2px 0 rgba(0, 0, 0, .1), 0 1px 5px 3px rgba(0, 0, 0, .1)); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .GetStarted { | ||
| $height: 46px; | ||
|
|
||
| margin-top: 56px; | ||
| margin-bottom: 0; | ||
|
|
||
| a { | ||
| display: inline-block; | ||
| padding: 0 30px; | ||
| font-weight: 400; | ||
| line-height: $height; | ||
| border-radius: $height; | ||
| color: #fff; | ||
| background-color: #337ab7; | ||
|
|
||
| &:hover { | ||
| text-decoration: none; | ||
| background-color: #0871ab; | ||
| } | ||
| } | ||
|
|
||
| .fa { | ||
| margin-left: .5em; | ||
| } | ||
| } | ||
|
|
||
| .FeatureList { | ||
| max-width: 960px; | ||
| margin: 0 auto; | ||
| padding: 52px 0; | ||
| font-size: 14px; | ||
| @include pie-clearfix; | ||
|
|
||
| &-item { | ||
| float: left; | ||
| padding: 18px 36px; | ||
|
|
||
| h3 { | ||
| margin: 0; | ||
| font-size: 18px; | ||
| } | ||
|
|
||
| p { | ||
| margin: 12px 0 0; | ||
| color: #555; | ||
| } | ||
|
|
||
| @media (min-width: $screen-sm-min) { | ||
| width: percentage(1 / 3); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,161 @@ | ||
| @import "../../helper"; | ||
|
|
||
| .MainCategories { | ||
| margin: { | ||
| top: -15px; | ||
| bottom: 1.5em; | ||
| } | ||
|
|
||
| li { | ||
| min-width: percentage(1 / 3); | ||
|
|
||
| a { | ||
| padding: 30px 20px; | ||
| } | ||
|
|
||
| @media all and (max-width: $screen-xs-max) { | ||
| + li { | ||
| margin-top: 7.5px; | ||
| } | ||
|
|
||
| a { | ||
| padding: { | ||
| top: 20px; | ||
| bottom: 20px; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .ArticleList { | ||
| padding-bottom: 1.5em; | ||
| } | ||
|
|
||
| .ArticleList-summary { | ||
| p { | ||
| margin-bottom: 15px; | ||
|
|
||
| span { | ||
| font-size: 20px; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .ArticleList-archives { | ||
| margin-top: 0 !important; | ||
| padding-left: 0; | ||
| list-style-type: none; | ||
| font: { | ||
| size: 22px; | ||
| style: italic; | ||
| } | ||
| @include pie-clearfix; | ||
|
|
||
| a { | ||
| display: block; | ||
| margin: { | ||
| right: -15px; | ||
| left: -15px; | ||
| } | ||
| padding: 10px 15px; | ||
| border-radius: 6px; | ||
| text-decoration: none; | ||
| font-weight: normal; | ||
|
|
||
| span { | ||
| display: block; | ||
| color: #888; | ||
| font: { | ||
| size: 14px; | ||
| style: normal; | ||
| weight: 300; | ||
| } | ||
|
|
||
| .fa { | ||
| margin-right: 1em; | ||
| } | ||
| } | ||
|
|
||
| &:hover { | ||
| background-color: #0871ab; | ||
|
|
||
| &, | ||
| * { | ||
| color: #fff !important; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .ArticleList-hotCategories { | ||
| > div { | ||
| margin: { | ||
| right: -15px; | ||
| left: -15px; | ||
| } | ||
| } | ||
|
|
||
| ul { | ||
| list-style: none inside none; | ||
| padding-left: 0; | ||
| } | ||
|
|
||
| li { | ||
| a { | ||
| display: block; | ||
| background-color: #eee; | ||
| border: 1px solid #a6a6a6; | ||
| border-radius: 6px; | ||
| padding: 10px 15px; | ||
| font: { | ||
| size: 18px; | ||
| weight: 400; | ||
| } | ||
| color: #333; | ||
| text-decoration: none; | ||
|
|
||
| span { | ||
| display: block; | ||
| margin-top: 5px; | ||
| font: { | ||
| size: 12px; | ||
| weight: 300; | ||
| } | ||
| color: #888; | ||
| } | ||
| } | ||
|
|
||
| @media all and (max-width: $screen-xs-max) { | ||
| + li { | ||
| margin-top: 10px; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .Widget--hotCategories { | ||
| p { | ||
| margin-bottom: 10px; | ||
|
|
||
| a, | ||
| span { | ||
| margin: 0 .3em; | ||
| font: { | ||
| size: 16px; | ||
| weight: bold; | ||
| } | ||
| } | ||
|
|
||
| span { | ||
| font-style: italic; | ||
| text-decoration: underline; | ||
| } | ||
| } | ||
|
|
||
| ul { | ||
| list-style-position: inside; | ||
| margin-bottom: 0; | ||
| padding-left: 5px; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,35 @@ | ||
| --- | ||
| layout: default | ||
| css: | ||
| - local/pages/index | ||
| permalink: index.html | ||
| --- | ||
|
|
||
| {% include header.html %} | ||
| <main class="Page-content" style="height: 100%;"> | ||
| <div style="height: calc(100% - 271px); display: flex; align-items: center; justify-content: center; text-align: center;"> | ||
| <div> | ||
| <h1 style="margin-top: 0; margin-bottom: .3em; font-size: 10rem; font-weight: 700;">{{ site.title }}</h1> | ||
| <p style="margin-bottom: 0; font-size: 2.5rem;">{{ site.tagline }}</p> | ||
| </div> | ||
| </div> | ||
| <main class="Page-content"> | ||
| <article class="Homepage"> | ||
| <header class="Homepage-header"> | ||
| <h1>{{ site.title }}</h1> | ||
| <p class="Homepage-slogan">{{ site.tagline | default: site.description }}</p> | ||
| <p class="GetStarted"><a href="{{ '/guides/' | prepend: site.baseurl | prepend: site.url }}">开始了解<i class="fa fa-long-arrow-right"></i></a></p> | ||
| </header> | ||
| <section class="Homepage-body"> | ||
| <h2 class="sr-only">特色</h2> | ||
| <div class="FeatureList"> | ||
| <div class="FeatureList-item"> | ||
| <h3>体验优先</h3> | ||
| <p>以提高阅读体验和保持简洁风格为最高原则，体现个性在其次。</p> | ||
| </div> | ||
| <div class="FeatureList-item"> | ||
| <h3>应用广泛</h3> | ||
| <p>可用于博客、个人网站、API 文档站等以内容为主的网站。</p> | ||
| </div> | ||
| <div class="FeatureList-item"> | ||
| <h3>多种支持</h3> | ||
| <p>除了提供核心的样式与交互外，还支持 Jekyll、Hexo 等主流静态网站生成器。</p> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| </article> | ||
| </main> | ||
| {% include footer.html %} |
Oops, something went wrong.