From f99c100cc1f2db573d48e34f75566f5bf9462263 Mon Sep 17 00:00:00 2001 From: koirand Date: Sat, 23 Mar 2019 18:12:24 +0900 Subject: [PATCH] Change navi link to icon #13 --- exampleSite/config.toml | 8 ++ layouts/index.html | 2 +- layouts/partials/head.html | 1 + static/css/style.css | 176 ++++++++++++++++++------------------- 4 files changed, 98 insertions(+), 89 deletions(-) diff --git a/exampleSite/config.toml b/exampleSite/config.toml index fed48e0..bda2eb5 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -26,16 +26,24 @@ pygmentsUseClasses = false [[menu.main]] name = "Blog" + pre = "" url = "/blog/" + weight = 10 [[menu.main]] name = "Twitter" + pre = "" url = "https://twitter.com/username" + weight = 20 [[menu.main]] name = "GitHub" + pre = "" url = "https://github.com/username" + weight = 30 [[menu.main]] name = "Email" + pre = "" url = "mailto:username@example.com" + weight = 40 diff --git a/layouts/index.html b/layouts/index.html index 3fefac0..7115ce3 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -21,7 +21,7 @@ diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 32fa0f8..b2782c3 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -16,6 +16,7 @@ + {{ range .Site.Params.custom_css }} diff --git a/static/css/style.css b/static/css/style.css index 9acf19d..8826475 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1,148 +1,148 @@ /* General */ body { - min-height:100vh; - margin: 0; - padding: 20px; - box-sizing:border-box; - background-color: #EFEFEF; - color: #707070; - text-align: center; - font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif; - line-height: 1.5; + min-height:100vh; + margin: 0; + padding: 20px; + box-sizing:border-box; + background-color: #EFEFEF; + color: #707070; + text-align: center; + font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif; + line-height: 1.5; } a:link { - color: #707070; + color: #707070; } a:visited { - color: #707070; + color: #707070; } a:hover { - color: #707070; + color: #707070; } a:active { - color: #707070; + color: #707070; } /* Header */ header .avatar { - position: relative; - height: 100px; + position: relative; + height: 100px; } header .avatar img { - position: absolute; - width: 100px; - margin: 0 auto; - left: 0; - right: 0; + position: absolute; + width: 100px; + margin: 0 auto; + left: 0; + right: 0; } header .avatarMask { - clip-path: circle(48px at center); - -webkit-clip-path: circle(48px at center); + clip-path: circle(48px at center); + -webkit-clip-path: circle(48px at center); } /* Footer */ footer { - font-size: 12px; - box-sizing:border-box; + font-size: 12px; + box-sizing:border-box; } /* Top page */ #profileContainer { - min-height: calc(100vh - 100px); - display: flex; - justify-content: center; - align-items: center; + min-height: calc(100vh - 100px); + display: flex; + justify-content: center; + align-items: center; } #profile { - max-width: 600px; - min-width: 300px; + max-width: 600px; + min-width: 300px; } nav ul { - display: flex; - justify-content: space-evenly; - width: 300px; - margin: 20px auto; - padding: 0; - list-style: none; + display: flex; + justify-content: space-evenly; + width: 300px; + margin: 20px auto; + padding: 0; + list-style: none; } /* Contents List */ #searchBox { - position: relative; - width: 300px; - height: 30px; - margin: 20px auto; + position: relative; + width: 300px; + height: 30px; + margin: 20px auto; } #searchBox #searchBoxInput { - position: absolute; - width: 100%; - padding: 0 35px 0 15px; - top: 0; - left: 0; - right: 0; - bottom: 0; - border-radius: 15px; - outline: 0; - font-size: 15px; - color: #707070; - background-color:#f6f6f6; - border: solid 1px #c9c9c9; - box-sizing: border-box; + position: absolute; + width: 100%; + padding: 0 35px 0 15px; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: 15px; + outline: 0; + font-size: 15px; + color: #707070; + background-color:#f6f6f6; + border: solid 1px #c9c9c9; + box-sizing: border-box; } #searchBox #searchBoxInput::placeholder { - color: #c9c9c9; + color: #c9c9c9; } #searchBox #searchBoxIcon { - position: absolute; - height: 20px; - width: 20px; - top: 5px; - right: 10px; + position: absolute; + height: 20px; + width: 20px; + top: 5px; + right: 10px; } #searchResults { - display: none; - position: absolute; - max-width: 600px; - min-width: 300px; - margin: 0 auto; - top: 240px; - left: 0; - right: 0; - padding: 5px; - background-color:#f6f6f6; - border: solid 1px #c9c9c9; - border-radius: 5px; - text-align: left; - box-sizing: border-box; + display: none; + position: absolute; + max-width: 600px; + min-width: 300px; + margin: 0 auto; + top: 240px; + left: 0; + right: 0; + padding: 5px; + background-color:#f6f6f6; + border: solid 1px #c9c9c9; + border-radius: 5px; + text-align: left; + box-sizing: border-box; } #searchResults .searchResultPage { - padding: 20px + padding: 20px } #searchResults .searchResultTitle { - font-weight: bold; - margin: 5px 0; + font-weight: bold; + margin: 5px 0; } #searchResults .searchResultBody { - font-size: 14px; + font-size: 14px; } #searchResults mark { - background-color: #dddfdf; + background-color: #dddfdf; } #contentsList { @@ -150,17 +150,17 @@ nav ul { } #contentsList hr.separator { - width: 10px; - margin: 30px auto; - border: solid 1px #C9C9C9; + width: 10px; + margin: 30px auto; + border: solid 1px #C9C9C9; } /* Page */ div.markdown-body { - width: 90vw; - max-width: 800px; - min-width: 300px; - margin: 0 auto; - padding: 20px; - text-align: left; + width: 90vw; + max-width: 800px; + min-width: 300px; + margin: 0 auto; + padding: 20px; + text-align: left; }