diff options
| author | iCyris <cyris1015@gmail.com> | 2019-01-26 05:22:23 +0300 |
|---|---|---|
| committer | iCyris <cyris1015@gmail.com> | 2019-01-26 05:22:23 +0300 |
| commit | 5ba20a40ef5aa59d327207c256c3924fa07e8905 (patch) | |
| tree | dee463bdfcd03bd53e5b58327518113c12337d60 | |
| parent | b0f0faae7ab27d0e2f791ba2d53f488cd814aab1 (diff) | |
first commit
31 files changed, 1060 insertions, 26 deletions
diff --git a/layouts/404.html b/layouts/404.html index e69de29..9fb30de 100644 --- a/layouts/404.html +++ b/layouts/404.html @@ -0,0 +1,6 @@ + +<div id="main"> + <div> + <h1 id="title"><a href="{{ "/" | relURL }}">Go Home</a></h1> + </div> +</div> diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html deleted file mode 100644 index 5f8e2ec..0000000 --- a/layouts/_default/baseof.html +++ /dev/null @@ -1,11 +0,0 @@ -<!DOCTYPE html> -<html> - {{- partial "head.html" . -}} - <body> - {{- partial "header.html" . -}} - <div id="content"> - {{- block "main" . }}{{- end }} - </div> - {{- partial "footer.html" . -}} - </body> -</html> diff --git a/layouts/_default/li.html b/layouts/_default/li.html new file mode 100644 index 0000000..4a0785b --- /dev/null +++ b/layouts/_default/li.html @@ -0,0 +1,26 @@ +<article class="c-article p-list-article"> + <header> + <h2 class="c-title c-article__title"><a href="{{ .Permalink }}">{{ .Title }}</a></h2> + <p class="c-article__meta"> + Posted on + <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}"> + {{ .Date.Format "Jan 2, 2006" }} + </time> + </p> + </header> + <div class="c-article__summary"> + {{ .Summary | plainify | safeHTML }} + </div> + {{ if .Truncated }} + <a href="{{ .Permalink }}" class="c-article__btn p-list-article__btn">Read more</a> + {{ end }} +</article> + +<!-- tags --> +{{ range $name, $taxonomy := .Site.Taxonomies.tags }} +<a href="/tags/{{ $name | urlize }}">{{ $name }}</a> +{{ end }} + + + + diff --git a/layouts/_default/list.html b/layouts/_default/list.html index e69de29..8cc9ad2 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -0,0 +1,16 @@ +{{ partial "header.html" . }} + +<div class="main-page"> + <div class="main-page__list"> + <ul> + {{ range .Pages }} + <div> + <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1> + <time>{{ .Date.Format "Mon, Jan 2, 2006" }}</time> + </div> + {{ end }} + </ul> + </div> +</div> + +{{ partial "footer.html" . }}
\ No newline at end of file diff --git a/layouts/_default/single.html b/layouts/_default/single.html index e69de29..b982570 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -0,0 +1,36 @@ +{{ partial "header.html" . }} + +<div class="main-page"> + <div class="main-page__date"> + <h4 id="date"> {{ .Date.Format "2006.01.02" }} </h4> + </div> + <div class="main-page__title"> + <h1 id="title">{{ .Title }}</h1> + </div> + <div> + <article id="content"> + {{ .Content }} + </article> + </div> +</div> +<div class="main-page-meta"> + <div class="main-page__tags"> + {{ with .Params.tags }} + <div class="tags"> + {{ range . }} + <span> <a href="{{ "tags/" | absURL }}{{ . | urlize }}">{{ . }}</a> </span> + {{ end }} + </div> + {{ end }} + </div> + <div class="main-page__pn"> + {{ with .PrevInSection }} + <a class="previous" href="{{.Permalink}}"> {{.Title}}</a> + {{ end }} + {{ with .NextInSection }} + <a class="next" href="{{.Permalink}}"> {{.Title}}</a> + {{ end }} + </div> +</div> + +{{ partial "footer.html" . }}
\ No newline at end of file diff --git a/layouts/index.html b/layouts/index.html index e69de29..c0f46ab 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -0,0 +1,43 @@ +{{ partial "header_index.html" . }} + +<!-- Display image --> +<div class="index-displayImg" style="background-image: url(/images/display.png)"></div> + +<!-- SNS --> +<div class="index-line u-font"> + {{- with .Site.Params.snsTitle -}} + <span class="index-line__content u-font">{{ . }}</span> + {{- end -}} +</div> +<div class="index-sns u-font"> + <a class="index-sns__name" target="_blank" href="https://cyris.moe">CYRIS.MOE</a> + {{- with .Site.Params.Twitter -}} + <a class="index-sns__name" target="_blank" href="https://twitter.com/{{ . }}">Twitter</a> + {{- end -}} + {{- with .Site.Params.GitHub -}} + <a class="index-sns__name" target="_blank" href="https://github.com/{{ . }}">GitHub</a> + {{- end -}} +</div> + +<!-- Content list --> +<div class="index-line"> + <span class="index-line__content u-font">Home</span> +</div> + +<div class="index-posts"> + {{- .Content -}} + {{- range .Site.RegularPages -}} + <div class="index-posts__list"> + <span class="l-time"><a href="{{.Permalink}}">{{ .Date.Format "2006.01.02 15:04" }}</a></span> + <span class="l-title"><a href="{{.Permalink}}">{{.Title}}</a></span> + </div> + {{- end -}} +</div> + +<div class="index-paginate"> + +</div> + + + +{{ partial "footer.html" . }}
\ No newline at end of file diff --git a/layouts/pages/single.html b/layouts/pages/single.html new file mode 100644 index 0000000..ce3d609 --- /dev/null +++ b/layouts/pages/single.html @@ -0,0 +1,13 @@ +{{ partial "header.html" . }} + +<div class="main-page"> + <div class="main-page__title title-type__custom u-font"> + <h1 id="title">{{ .Title }}</h1> + </div> + <div> + <article id="content"> + {{ .Content }} + </article> + </div> +</div> +{{ partial "footer.html" . }}
\ No newline at end of file diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index e69de29..5bd9cc8 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -0,0 +1,20 @@ +</div> +<div class="footer"> + <div class="copyright-wrap"> + <p class="copyright u-font"> + © + {{ with .Site.Copyright | safeHTML }} + {{- . -}}. + {{ else }} + {{ .Site.LastChange.Format "2006" }} + {{ if .Site.Params.author }} + <a href="{{ .Site.Params.authorwebsite }}" target="_blank">{{ .Site.Params.author }}.</a> + {{ end }} + {{ end }} + Theme <a href="https://github.com/iCyris/hugo-theme-yuki" target="_blank">yuki</a>. + Powered by Hugo. + </p> + </div> +</div> +</body> +<script src="/js/page.js"></script> diff --git a/layouts/partials/head.html b/layouts/partials/head.html index e69de29..e187753 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + {{ block "title" . }} + {{ .Site.Title }} + {{ end }} + </title> + <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1"> + {{- with .Site.Params.favicon }} + <link rel='icon' type='image/x-icon' href="{{ . | absURL }}" /> + <link rel="apple-touch-icon" href="{{ . | absURL }}"> + {{- end -}} + <link rel="stylesheet" href="/scss/style.css"> + <!-- HighlightJS --> + <link rel="stylesheet" + href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.13.1/build/styles/monokai-sublime.min.css"> + <script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.13.1/build/highlight.min.js"></script> + <script>hljs.initHighlightingOnLoad();</script> + <link rel="stylesheet" href="/scss/highlight.css"> + <!-- Google Analytics --> + {{ with .Site.Params.ga_api_key }} + <script> + (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) + })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); + ga('create', '{{ . }}', 'auto'); + ga('send', 'pageview'); + </script> + {{ end }} + <!-- Hugo version --> + {{ .Hugo.Generator -}} +</head>
\ No newline at end of file diff --git a/layouts/partials/header.html b/layouts/partials/header.html index e69de29..5b00bec 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -0,0 +1,35 @@ +{{ partial "head.html" . }} + +<body> + <div class="header"> + <div class="site-logo__wrap"> + <div id="site-button"> + <div></div> + </div> + <div class="site-logo"> + <a href="/"> + {{- with .Site.Params.logo -}} + <img src="{{ . | absURL }}" /> + {{- end -}} + </a> + </div> + </div> + <div class="site-nav u-font" id="nav-bar"> + <div class="site-nav__wrap"> + <a class="site-nav__el" href="/">HOME</a> + </div> + <div class="site-nav__wrap"> + <a class="site-nav__el" href="/posts">BLOG</a> + </div> + <div class="site-nav__wrap"> + <a class="site-nav__el" href="/pages/about">ABOUT</a> + </div> + <div class="site-nav__wrap"> + <a class="site-nav__el" href="/tags">TAG</a> + </div> + <div class="site-nav__wrap"> + <a class="site-nav__el" href="/pages/links">FRIENDS</a> + </div> + </div> + </div> + <div class="main">
\ No newline at end of file diff --git a/layouts/partials/header_index.html b/layouts/partials/header_index.html new file mode 100644 index 0000000..106a3da --- /dev/null +++ b/layouts/partials/header_index.html @@ -0,0 +1,35 @@ +{{ partial "head.html" . }} + +<body> + <div class="header"> + <div class="site-logo__wrap"> + <div id="site-button"> + <div></div> + </div> + <div class="site-logo site-logo__index"> + <a href="/"> + {{- with .Site.Params.logo -}} + <img src="{{ . | absURL }}" /> + {{- end -}} + </a> + </div> + </div> + <div class="site-nav site-nav__index u-font" id="nav-bar"> + <div class="site-nav__wrap"> + <a class="site-nav__el" href="/">HOME</a> + </div> + <div class="site-nav__wrap"> + <a class="site-nav__el" href="/posts">BLOG</a> + </div> + <div class="site-nav__wrap"> + <a class="site-nav__el" href="/pages/about">ABOUT</a> + </div> + <div class="site-nav__wrap"> + <a class="site-nav__el" href="/tags">TAG</a> + </div> + <div class="site-nav__wrap"> + <a class="site-nav__el" href="/pages/links">FRIENDS</a> + </div> + </div> + </div> + <div class="main">
\ No newline at end of file diff --git a/static/images/display.png b/static/images/display.png Binary files differnew file mode 100644 index 0000000..62bd9de --- /dev/null +++ b/static/images/display.png diff --git a/static/images/favicon.png b/static/images/favicon.png Binary files differnew file mode 100644 index 0000000..81c3a5c --- /dev/null +++ b/static/images/favicon.png diff --git a/static/images/logo.png b/static/images/logo.png Binary files differnew file mode 100644 index 0000000..81c3a5c --- /dev/null +++ b/static/images/logo.png diff --git a/static/images/profile.png b/static/images/profile.png Binary files differnew file mode 100644 index 0000000..be19686 --- /dev/null +++ b/static/images/profile.png diff --git a/static/js/page.js b/static/js/page.js new file mode 100644 index 0000000..561175e --- /dev/null +++ b/static/js/page.js @@ -0,0 +1,34 @@ +window.onscroll = function() {fixNav()}; + +let navbar = document.getElementById("nav-bar"); +let sticky = navbar.offsetTop; + +function fixNav() { + if (window.pageYOffset >= sticky) { + navbar.classList.add("site-nav-fixed") + } else { + navbar.classList.remove("site-nav-fixed"); + } +} + +let navEls = navbar.getElementsByClassName("site-nav__el"); +let currentURL = document.URL; + +for (let i = 0; i < navEls.length; i++) { + if (navEls[i].href + '/' === currentURL || navEls[i].href === currentURL) { navEls[i].className += " current-page" ;} + else {navEls[i].className = navEls[i].className.replace(" current-page", "");} +} + +// Site button +let sitebtn = document.getElementById("site-button"); + +sitebtn.addEventListener("click", function () { + if (getComputedStyle(navbar).display === 'none') { + navbar.style.display = 'flex'; + sitebtn.className += ' button-clicked'; + } + else { + navbar.style.display = 'none'; + sitebtn.className = ''; + } +}); diff --git a/static/scss/config/_config.scss b/static/scss/config/_config.scss new file mode 100644 index 0000000..7e26561 --- /dev/null +++ b/static/scss/config/_config.scss @@ -0,0 +1,16 @@ +/* + * Theme colors config + */ +$theme-color-gold: #b38d19; +$theme-color-gold-light: #d9c68c; +$theme-color-black: #111111; +$theme-color-gray: #bbbbbb; +$theme-color-gray-light: #e6e6e6; +$theme-color-gray-heavy: #aaaaaa; +$theme-color-white: #ffffff; +/* + * Font config + */ +.u-font { + font-family: "EB Garamond", "Hiragino Mincho ProN", serif; +}
\ No newline at end of file diff --git a/static/scss/highlight.css b/static/scss/highlight.css new file mode 100644 index 0000000..99dd730 --- /dev/null +++ b/static/scss/highlight.css @@ -0,0 +1,13 @@ +/* + * Highlight.js style + */ +.hljs { + margin: 3vh auto; + padding: 0.6em; + line-height: 1.25rem; } + +article pre code { + font-family: consolas, "Courier New", monospace; + font-size: .9rem; } + +/*# sourceMappingURL=highlight.css.map */ diff --git a/static/scss/highlight.css.map b/static/scss/highlight.css.map new file mode 100644 index 0000000..2d61135 --- /dev/null +++ b/static/scss/highlight.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "AAAA;;GAEG;AACH,KAAM;EACJ,MAAM,EAAE,QAAQ;EAChB,OAAO,EAAE,KAAK;EACd,WAAW,EAAE,OAAO;;AAEtB,gBAAiB;EACf,WAAW,EAAE,kCAAkC;EAC/C,SAAS,EAAE,KAAK", +"sources": ["highlight.scss"], +"names": [], +"file": "highlight.css" +}
\ No newline at end of file diff --git a/static/scss/highlight.scss b/static/scss/highlight.scss new file mode 100644 index 0000000..2a11d8e --- /dev/null +++ b/static/scss/highlight.scss @@ -0,0 +1,12 @@ +/* + * Highlight.js style + */ +.hljs { + margin: 3vh auto; + padding: 0.6em; + line-height: 1.25rem; +} +article pre code { + font-family: consolas, "Courier New", monospace; + font-size: .9rem; +} diff --git a/static/scss/keyframes/_keyframes.scss b/static/scss/keyframes/_keyframes.scss new file mode 100644 index 0000000..38a4f6b --- /dev/null +++ b/static/scss/keyframes/_keyframes.scss @@ -0,0 +1,17 @@ +/* + * Keyframes + */ +@keyframes fadein { + from {opacity: 0;} + to {opacity: 1;} +} +@keyframes fadeout { + from {opacity: 1;} + to {opacity: 0;} +} +@keyframes nav-in { + 0% {transform: translateX(-100%);} + 50% {transform: translateX(4%);} + 70% {transform: translateX(-2.5%);} + 100% {transform: translateX(0%);} +}
\ No newline at end of file diff --git a/static/scss/pages/_base.scss b/static/scss/pages/_base.scss new file mode 100644 index 0000000..48d3a6b --- /dev/null +++ b/static/scss/pages/_base.scss @@ -0,0 +1,37 @@ +/* + * Base style + */ +* { + padding: 0; + margin: 0; +} +body { + font-family: Helvetica neue, "Open Sans", sans-serif, Arial, serif; + font-size: 16px; +} +.main { + position: relative; + width: 100%; height: 100%; + left: 0; top: 0; + text-align: center; + min-height: 70vh; +} +a { + text-decoration: none; + color: $theme-color-gold; + transition: color .2s ease; + &:hover { color: $theme-color-gold-light ;} +} +article { + margin: 45px 0 30px; + word-wrap: break-word; + color: $theme-color-black; + p { + font-size: 1rem; + line-height: 30px; + font-weight: 340; + margin: 24px 0; + word-wrap: break-word; + letter-spacing: 1px; + } +}
\ No newline at end of file diff --git a/static/scss/pages/_custom.scss b/static/scss/pages/_custom.scss new file mode 100644 index 0000000..5a1a581 --- /dev/null +++ b/static/scss/pages/_custom.scss @@ -0,0 +1,16 @@ +/* + * Custom page + */ +.title-type__custom { + text-align: center; + margin-top: 6vmin; + h1 { + display: inline-block; + width: auto; height: auto; + font-weight: 400; + font-size: 1.8rem; + padding: 3vmin 0; + letter-spacing: 2px; + } + +}
\ No newline at end of file diff --git a/static/scss/pages/_footer.scss b/static/scss/pages/_footer.scss new file mode 100644 index 0000000..3c91741 --- /dev/null +++ b/static/scss/pages/_footer.scss @@ -0,0 +1,19 @@ +/* + * Footer +*/ +.footer { + position: relative; + width: 100%; + left: 0; bottom: 0; + margin-top: 20vh; +} +.copyright-wrap { + text-align: center; + border-top: $theme-color-gray-light 1px solid; +} +.copyright { + padding: 2.5vh 0; + font-size: .4rem; + color: $theme-color-gray; + a { color: $theme-color-gray ;} +}
\ No newline at end of file diff --git a/static/scss/pages/_header.scss b/static/scss/pages/_header.scss new file mode 100644 index 0000000..282b08d --- /dev/null +++ b/static/scss/pages/_header.scss @@ -0,0 +1,118 @@ +/* + * Header + */ +.site-logo__wrap { + position: relative; + width: 100vw; + padding: 7vmin 0; + background-color: $theme-color-white; + @media screen and (max-width: 800px) { + border-bottom: $theme-color-gray-light 1px solid; + padding: 7px 0; + } +} +.site-logo { + position: relative; + width: 7vmin; height: 7vmin; + margin: 0 auto; + a { display: inline-block; width: 100%; height: 100% ;} + img { width: 100%; height: 100% ;} +} +.site-logo__index { + width: 9vmin; height: 9vmin; + @media screen and (max-width: 800px) { width: 7vmin; height: 7vmin ;} +} +.site-nav { + position: relative; + width: 100%; + padding: 2vh 0; + display: flex; + flex-wrap: wrap; + justify-content: center; + background-color: $theme-color-white; + letter-spacing: 1px; + z-index: 1000; + .site-nav__wrap { margin: 0 2vw ;} + .site-nav__el { + display: inline-block; + height: 4vh; + line-height: 4vh; + color: $theme-color-black; + font-size: .8rem; + &:hover { opacity: .6 ; transition: opacity .2s ease ;} + } + .current-page { + opacity: .6; + cursor: default; + pointer-events: none; + border-bottom: $theme-color-black 1px solid; + } +} +.site-nav__index { + .site-nav__el { + height: 5vh; + line-height: 5vh; + } +} +.site-nav-fixed { + position: fixed; + top: 0; +} +#site-button { + @media screen and (max-width: 800px){ display: block ;} + position: absolute; + display: none; + width: 22px; height: 22px; + left: 20px; top: calc(50% - 11px); + text-align: center; + z-index: 1001; + cursor: pointer; + div { + position: absolute; + width: 100%; height: 1px; + left: 0; top: calc(50% - 0.5px); + background-color: $theme-color-black; + &::before, &::after { + position: absolute; content: ""; + width: 100%; height: 100%; + left: 0; top: 0; + background-color: $theme-color-black; + transition: all .2s ease; + } + &::before { transform: translateY(7.5px) rotate(0) ;} + &::after { transform: translateY(-7.5px) rotate(0) ;} + } +} +#site-button.button-clicked { + position: fixed; + left: 20px; top: 10px; + div { + background-color: rgba(255, 255, 255, 0); + &::before { transform: translateY(0) rotate(45deg) ;} + &::after { transform: translateY(0) rotate(-45deg) ;} + } +} +// Nav sp +@media screen and (max-width: 800px) { + #nav-bar { display: none ;} + .site-nav { + position: fixed; + flex-direction: column; + width: 100vw; height: 100vh; + left: 0; top: 0; + margin-top: 0; + transform: translateX(-100%); + animation: nav-in .5s ease forwards; + .site-nav__wrap { + width: 100%; + text-align: center; + margin: 12px 0; + a { + height: 4vh; + line-height: 4vh; + font-size: 1.5rem; + letter-spacing: 2px; + } + } + } +}
\ No newline at end of file diff --git a/static/scss/pages/_index.scss b/static/scss/pages/_index.scss new file mode 100644 index 0000000..37beff1 --- /dev/null +++ b/static/scss/pages/_index.scss @@ -0,0 +1,89 @@ +/* + * Index page + */ +.index-displayImg { + @media screen and (max-width: 800px){ height: 25vh ;} + position: relative; + width: 100vw; height: 85vh; + margin: 0 auto; + background-position: center; + background-size: cover; +} +.index-line { + @media screen and (max-width: 800px){ width: 80vw ;} + position: relative; + margin: 0 auto; + margin-top: 8vmin; + text-align: center; + width: 50vw; height: 5vh; + border-top: $theme-color-gray-light 1px solid; + line-height: 5vh; + span { + display: inline-block; + color: $theme-color-black; + border-top: $theme-color-gold 3px solid; + margin-top: -1px; + opacity: .9; + font-size: 1rem; + } +} +.index-sns { + position: relative; + margin: 0 auto; + margin-top: 3vmin; + text-align: center; + display: flex; + flex-direction: column; + a { + @media screen and (max-width: 800px){ + width: 55%; + padding: 1.7vh 3vw; + margin: 3vmin auto; + font-size: .7rem; + } + margin: 2vmin auto; + padding: 1.3vh 0.2vw; + width: 18%; + color: $theme-color-gray-heavy; + font-size: .8rem; + letter-spacing: 1px; + border: $theme-color-gray-heavy 1px solid; + transition: all .2s ease; + &:hover { + color: $theme-color-white; + background-color: $theme-color-gold-light; + } + } +} +.index-posts { + position: relative; + display: block; + margin: 0 auto; + margin-top: 4vmin; + width: 50vw; + @media screen and (max-width: 800px){ width: 80vw ;} + .index-posts__list { + display: inline-block; + width: 100%; + text-align: left; + margin: 2vh 0; + font-size: .8rem; + } + a { + transition: all .3s ease; + letter-spacing: 0.8px; + &:hover { opacity: .6 ;} + } + .l-time { + a { + color: $theme-color-gray-heavy; + } + } + .l-title { + a { color: $theme-color-black ;} + margin-left: 1vw; + } +} +/* + * Animations + */ diff --git a/static/scss/pages/_post.scss b/static/scss/pages/_post.scss new file mode 100644 index 0000000..34cb84f --- /dev/null +++ b/static/scss/pages/_post.scss @@ -0,0 +1,27 @@ +/* + * Post page + */ +.main-page { + @media screen and (max-width: 800px) { + width: 90vw; + } + position: relative; + margin: 0 auto; margin-top: 6vmin; + width: 60vw; + text-align: left; +} +.main-page__date { + position: relative; + margin: 1vmin 0; + h4 { + font-size: 1rem; + font-weight: 300; + } +} +.main-page__title { + position: relative; + margin: 2vmin 0; + h1 { + font-weight: 400; + } +} diff --git a/static/scss/style.css b/static/scss/style.css new file mode 100644 index 0000000..b66c42e --- /dev/null +++ b/static/scss/style.css @@ -0,0 +1,361 @@ +/* + * Theme colors config + */ +/* + * Font config + */ +.u-font { + font-family: "EB Garamond", "Hiragino Mincho ProN", serif; } + +/* + * Base style + */ +* { + padding: 0; + margin: 0; } + +body { + font-family: Helvetica neue, "Open Sans", sans-serif, Arial, serif; + font-size: 16px; } + +.main { + position: relative; + width: 100%; + height: 100%; + left: 0; + top: 0; + text-align: center; + min-height: 70vh; } + +a { + text-decoration: none; + color: #b38d19; + transition: color .2s ease; } + a:hover { + color: #d9c68c; } + +article { + margin: 45px 0 30px; + word-wrap: break-word; + color: #111111; } + article p { + font-size: 1rem; + line-height: 30px; + font-weight: 340; + margin: 24px 0; + word-wrap: break-word; + letter-spacing: 1px; } + +/* + * Header + */ +.site-logo__wrap { + position: relative; + width: 100vw; + padding: 7vmin 0; + background-color: #ffffff; } + @media screen and (max-width: 800px) { + .site-logo__wrap { + border-bottom: #e6e6e6 1px solid; + padding: 7px 0; } } + +.site-logo { + position: relative; + width: 7vmin; + height: 7vmin; + margin: 0 auto; } + .site-logo a { + display: inline-block; + width: 100%; + height: 100%; } + .site-logo img { + width: 100%; + height: 100%; } + +.site-logo__index { + width: 9vmin; + height: 9vmin; } + @media screen and (max-width: 800px) { + .site-logo__index { + width: 7vmin; + height: 7vmin; } } + +.site-nav { + position: relative; + width: 100%; + padding: 2vh 0; + display: flex; + flex-wrap: wrap; + justify-content: center; + background-color: #ffffff; + letter-spacing: 1px; + z-index: 1000; } + .site-nav .site-nav__wrap { + margin: 0 2vw; } + .site-nav .site-nav__el { + display: inline-block; + height: 4vh; + line-height: 4vh; + color: #111111; + font-size: .8rem; } + .site-nav .site-nav__el:hover { + opacity: 0.6; + transition: opacity 0.2s ease; } + .site-nav .current-page { + opacity: .6; + cursor: default; + pointer-events: none; + border-bottom: #111111 1px solid; } + +.site-nav__index .site-nav__el { + height: 5vh; + line-height: 5vh; } + +.site-nav-fixed { + position: fixed; + top: 0; } + +#site-button { + position: absolute; + display: none; + width: 22px; + height: 22px; + left: 20px; + top: calc(50% - 11px); + text-align: center; + z-index: 1001; + cursor: pointer; } + @media screen and (max-width: 800px) { + #site-button { + display: block; } } + #site-button div { + position: absolute; + width: 100%; + height: 1px; + left: 0; + top: calc(50% - 0.5px); + background-color: #111111; } + #site-button div::before, #site-button div::after { + position: absolute; + content: ""; + width: 100%; + height: 100%; + left: 0; + top: 0; + background-color: #111111; + transition: all .2s ease; } + #site-button div::before { + transform: translateY(7.5px) rotate(0); } + #site-button div::after { + transform: translateY(-7.5px) rotate(0); } + +#site-button.button-clicked { + position: fixed; + left: 20px; + top: 10px; } + #site-button.button-clicked div { + background-color: rgba(255, 255, 255, 0); } + #site-button.button-clicked div::before { + transform: translateY(0) rotate(45deg); } + #site-button.button-clicked div::after { + transform: translateY(0) rotate(-45deg); } + +@media screen and (max-width: 800px) { + #nav-bar { + display: none; } + + .site-nav { + position: fixed; + flex-direction: column; + width: 100vw; + height: 100vh; + left: 0; + top: 0; + margin-top: 0; + transform: translateX(-100%); + animation: nav-in .5s ease forwards; } + .site-nav .site-nav__wrap { + width: 100%; + text-align: center; + margin: 12px 0; } + .site-nav .site-nav__wrap a { + height: 4vh; + line-height: 4vh; + font-size: 1.5rem; + letter-spacing: 2px; } } +/* + * Index page + */ +.index-displayImg { + position: relative; + width: 100vw; + height: 85vh; + margin: 0 auto; + background-position: center; + background-size: cover; } + @media screen and (max-width: 800px) { + .index-displayImg { + height: 25vh; } } + +.index-line { + position: relative; + margin: 0 auto; + margin-top: 8vmin; + text-align: center; + width: 50vw; + height: 5vh; + border-top: #e6e6e6 1px solid; + line-height: 5vh; } + @media screen and (max-width: 800px) { + .index-line { + width: 80vw; } } + .index-line span { + display: inline-block; + color: #111111; + border-top: #b38d19 3px solid; + margin-top: -1px; + opacity: .9; + font-size: 1rem; } + +.index-sns { + position: relative; + margin: 0 auto; + margin-top: 3vmin; + text-align: center; + display: flex; + flex-direction: column; } + .index-sns a { + margin: 2vmin auto; + padding: 1.3vh 0.2vw; + width: 18%; + color: #aaaaaa; + font-size: .8rem; + letter-spacing: 1px; + border: #aaaaaa 1px solid; + transition: all .2s ease; } + @media screen and (max-width: 800px) { + .index-sns a { + width: 55%; + padding: 1.7vh 3vw; + margin: 3vmin auto; + font-size: .7rem; } } + .index-sns a:hover { + color: #ffffff; + background-color: #d9c68c; } + +.index-posts { + position: relative; + display: block; + margin: 0 auto; + margin-top: 4vmin; + width: 50vw; } + @media screen and (max-width: 800px) { + .index-posts { + width: 80vw; } } + .index-posts .index-posts__list { + display: inline-block; + width: 100%; + text-align: left; + margin: 2vh 0; + font-size: .8rem; } + .index-posts a { + transition: all .3s ease; + letter-spacing: 0.8px; } + .index-posts a:hover { + opacity: 0.6; } + .index-posts .l-time a { + color: #aaaaaa; } + .index-posts .l-title { + margin-left: 1vw; } + .index-posts .l-title a { + color: #111111; } + +/* + * Animations + */ +/* + * Post page + */ +.main-page { + position: relative; + margin: 0 auto; + margin-top: 6vmin; + width: 60vw; + text-align: left; } + @media screen and (max-width: 800px) { + .main-page { + width: 90vw; } } + +.main-page__date { + position: relative; + margin: 1vmin 0; } + .main-page__date h4 { + font-size: 1rem; + font-weight: 300; } + +.main-page__title { + position: relative; + margin: 2vmin 0; } + .main-page__title h1 { + font-weight: 400; } + +/* + * Custom page + */ +.title-type__custom { + text-align: center; + margin-top: 6vmin; } + .title-type__custom h1 { + display: inline-block; + width: auto; + height: auto; + font-weight: 400; + font-size: 1.8rem; + padding: 3vmin 0; + letter-spacing: 2px; } + +/* + * Footer +*/ +.footer { + position: relative; + width: 100%; + left: 0; + bottom: 0; + margin-top: 20vh; } + +.copyright-wrap { + text-align: center; + border-top: #e6e6e6 1px solid; } + +.copyright { + padding: 2.5vh 0; + font-size: .4rem; + color: #bbbbbb; } + .copyright a { + color: #bbbbbb; } + +/* + * Keyframes + */ +@keyframes fadein { + from { + opacity: 0; } + to { + opacity: 1; } } +@keyframes fadeout { + from { + opacity: 1; } + to { + opacity: 0; } } +@keyframes nav-in { + 0% { + transform: translateX(-100%); } + 50% { + transform: translateX(4%); } + 70% { + transform: translateX(-2.5%); } + 100% { + transform: translateX(0%); } } + +/*# sourceMappingURL=style.css.map */ diff --git a/static/scss/style.css.map b/static/scss/style.css.map new file mode 100644 index 0000000..2cfd198 --- /dev/null +++ b/static/scss/style.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "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", +"sources": ["config/_config.scss","pages/_base.scss","pages/_header.scss","pages/_index.scss","pages/_post.scss","pages/_custom.scss","pages/_footer.scss","keyframes/_keyframes.scss"], +"names": [], +"file": "style.css" +}
\ No newline at end of file diff --git a/static/scss/style.scss b/static/scss/style.scss new file mode 100644 index 0000000..9a66a65 --- /dev/null +++ b/static/scss/style.scss @@ -0,0 +1,13 @@ +// config +@import "config/config"; + +// pages +@import "pages/base"; +@import "pages/header"; +@import "pages/index"; +@import "pages/post"; +@import "pages/custom"; +@import "pages/footer"; + +// keyframes +@import "keyframes/keyframes"; @@ -1,21 +1,15 @@ -# theme.toml template for a Hugo theme -# See https://github.com/gohugoio/hugoThemes#themetoml for an example - name = "Yuki" license = "MIT" -licenselink = "https://github.com/yourname/yourtheme/blob/master/LICENSE" -description = "" -homepage = "http://example.com/" -tags = [] -features = [] +licenselink = "https://github.com/iCyris/hugo-theme-yuki/blob/master/LICENSE" +description = "Yuki is a cute blog theme for Hugo." +homepage = "https://cyris.pen.moe" +tags = ["blog"] +features = ["blog"] min_version = "0.41" [author] - name = "" - homepage = "" + name = "Cyris" + homepage = "https://cyris.moe" + + -# If porting an existing theme -[original] - name = "" - homepage = "" - repo = "" |
