💄 Update styles

This commit is contained in:
nanxiaobei 2018-08-16 01:22:33 +08:00
parent 884e39a97d
commit 2af70a215f
3 changed files with 40 additions and 33 deletions

View File

@ -1,10 +1,10 @@
</main> </main>
<footer class="footer"> <footer class="footer">
<span>&copy; {{ now.Year }} {{ .Site.Title }} 🎉</span> <span>&copy; {{ now.Year }} {{ .Site.Title }}</span>
<span>&middot;</span> <span>&middot;</span>
<span>Powered by <a href="https://gohugo.io/" target="_blank">Hugo</a></span> <span>Powered by <a href="https://gohugo.io/" target="_blank">Hugo</a></span>
<span>&middot;</span> <span>&middot;</span>
<span>Designed by <a href="http://21beats.com/" target="_blank">21beats</a></span> <span>Designed by <a href="http://21beats.com/" target="_blank">21beats</a></span>
</footer> </footer>
<script src="https://cdn.bootcss.com/instantclick/3.0.1/instantclick.min.js" data-no-instant></script> <script src="https://cdn.bootcss.com/instantclick/3.0.1/instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script> <script data-no-instant>InstantClick.init();</script>

View File

@ -23,8 +23,8 @@
<meta name="author" content="{{ .Site.Params.author }}"> <meta name="author" content="{{ .Site.Params.author }}">
{{ end -}} {{ end -}}
<!-- Styles --> <!-- Styles -->
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700,700i" rel="stylesheet">
<link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/default.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/atom-one-dark.min.css" rel="stylesheet">
<link href="{{.Site.BaseURL}}css/style.css" rel="stylesheet"> <link href="{{.Site.BaseURL}}css/style.css" rel="stylesheet">
<!-- Favicons --> <!-- Favicons -->
<link rel="apple-touch-icon" href="{{.Site.BaseURL}}img/apple-touch-icon.png"> <link rel="apple-touch-icon" href="{{.Site.BaseURL}}img/apple-touch-icon.png">

View File

@ -31,10 +31,10 @@ article, aside, figcaption, figure, footer, header, main, nav, section {
} }
body { body {
margin: 0; margin: 0;
font-family: 'PT Sans', sans-serif; font-family: 'Source Sans Pro', sans-serif;
color: rgba(0, 0, 0, .8); color: rgba(0, 0, 0, .8);
font-size: 18px; font-size: 20px;
line-height: 1.7; line-height: 1.6;
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
margin-top: 0; margin-top: 0;
@ -78,7 +78,7 @@ pre, code {
/* Body /* Body
============================================================= */ ============================================================= */
.list { .list {
background: #fafafa; background: #f9f9f9;
} }
/* Header /* Header
============================================================= */ ============================================================= */
@ -118,7 +118,7 @@ pre, code {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
width: 20px; width: 22px;
height: 2px; height: 2px;
background: #000; background: #000;
} }
@ -126,7 +126,7 @@ pre, code {
transform: translate3d(-50%, -5px, 0); transform: translate3d(-50%, -5px, 0);
} }
.menu-toggle::after { .menu-toggle::after {
transform: translate3d(-50%, 4px, 0); transform: translate3d(-50%, 5px, 0);
} }
.noscroll .menu-toggle::before { .noscroll .menu-toggle::before {
transform: translate3d(-50%, -1px, 0) rotateZ(45deg); transform: translate3d(-50%, -1px, 0) rotateZ(45deg);
@ -226,17 +226,17 @@ pre, code {
/* Post /* Post
------------------------------ */ ------------------------------ */
.post-meta { .post-meta {
margin-top: 5px; margin-top: 8px;
color: rgba(0, 0, 0, .4); color: rgba(0, 0, 0, .4);
font-size: 15px; font-size: 16px;
letter-spacing: .5px; letter-spacing: .5px;
} }
/* First entry */ /* First entry */
.first-entry { .first-entry {
position: relative; min-height: calc(100vh - 65px - 80px);
margin-bottom: 40px; margin-bottom: 80px;
padding-top: 60px; padding-top: 12vh;
padding-bottom: 120px; padding-bottom: 12vh;
background: #fff; background: #fff;
} }
.welcome-emoji { .welcome-emoji {
@ -245,10 +245,20 @@ pre, code {
} }
.first-entry .post-title { .first-entry .post-title {
font-size: 50px; font-size: 50px;
transform: translateX(-3px);
}
.first-entry .post-summary {
margin-top: 15px;
margin-bottom: 15px;
font-size: 19px;
}
.post-title {
transform: translateX(-2px);
} }
.post-summary { .post-summary {
margin-top: 10px; margin-top: 10px;
color: rgba(0, 0, 0, .4); color: rgba(0, 0, 0, .4);
font-size: 18px;
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.first-entry { .first-entry {
@ -301,16 +311,18 @@ pre, code {
.post-content h4, .post-content h4,
.post-content h5, .post-content h5,
.post-content h6 { .post-content h6 {
color: rgba(0, 0, 0, .4);
font-weight: 400;
margin-bottom: 10px; margin-bottom: 10px;
} }
.post-content h5,
.post-content h6 {
font-weight: 400;
}
.post-content h1 { .post-content h1 {
font-size: 40px; font-size: 45px;
margin-top: 50px; margin-top: 50px;
} }
.post-content h2 { .post-content h2 {
font-size: 34px; font-size: 32px;
margin-top: 40px; margin-top: 40px;
} }
.post-content h3 { .post-content h3 {
@ -327,7 +339,8 @@ pre, code {
font-size: 18px; font-size: 18px;
} }
.post-content a { .post-content a {
border-bottom: 1px solid rgba(0, 0, 0, .8); padding-bottom: 2px;
border-bottom: 1.5px solid rgba(0, 0, 0, .8);
} }
.post-content p, .post-content p,
.post-content ul, .post-content ul,
@ -383,20 +396,14 @@ pre, code {
.post-content th { .post-content th {
text-align: left; text-align: left;
} }
.post-content pre {
padding: 20px;
background: #fafafa;
border-radius: 6px;
}
.post-content pre code { .post-content pre code {
padding: 0; padding: 20px;
background: transparent; border-radius: 6px;
border-radius: 0;
} }
.post-content code { .post-content code {
padding: 3px 6px; padding: 3px 6px;
font-size: 15px; font-size: 0.75em;
background: #fafafa; white-space: pre-wrap;
border-radius: 3px; border-radius: 3px;
} }
.post-content blockquote { .post-content blockquote {
@ -466,7 +473,7 @@ pre, code {
======================================================================= */ ======================================================================= */
.footer { .footer {
padding: 20px; padding: 20px;
font-size: 14px; font-size: 15px;
line-height: 25px; line-height: 25px;
text-align: center; text-align: center;
} }