mirror of
https://github.com/Brandon-Rozek/website-theme.git
synced 2024-11-09 10:50:34 -05:00
Change navi link to icon #13
This commit is contained in:
parent
2ea0f32ac9
commit
f99c100cc1
4 changed files with 98 additions and 89 deletions
|
@ -26,16 +26,24 @@ pygmentsUseClasses = false
|
|||
|
||||
[[menu.main]]
|
||||
name = "Blog"
|
||||
pre = "<i class='fa fa-book-open fa-lg'></i>"
|
||||
url = "/blog/"
|
||||
weight = 10
|
||||
|
||||
[[menu.main]]
|
||||
name = "Twitter"
|
||||
pre = "<i class='fab fa-twitter fa-lg'></i>"
|
||||
url = "https://twitter.com/username"
|
||||
weight = 20
|
||||
|
||||
[[menu.main]]
|
||||
name = "GitHub"
|
||||
pre = "<i class='fab fa-github fa-lg'></i>"
|
||||
url = "https://github.com/username"
|
||||
weight = 30
|
||||
|
||||
[[menu.main]]
|
||||
name = "Email"
|
||||
pre = "<i class='fa fa-envelope fa-lg'></i>"
|
||||
url = "mailto:username@example.com"
|
||||
weight = 40
|
||||
|
|
|
@ -21,7 +21,7 @@
|
|||
<nav>
|
||||
<ul>
|
||||
{{ range .Site.Menus.main }}
|
||||
<li><a href="{{ .URL }}">{{ .Name }}</a></li>
|
||||
<li><a href="{{ .URL }}">{{ .Pre }}</a></li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
@ -16,6 +16,7 @@
|
|||
<link rel="stylesheet" href="/css/style.css">
|
||||
<link rel="stylesheet" href="/css/markdown.css">
|
||||
<link rel="stylesheet" href="/css/syntax-highlight.css">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
|
||||
|
||||
<!-- custom css -->
|
||||
{{ range .Site.Params.custom_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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue