jcarr
/
hugo-simpleIntro
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update navbar

This commit is contained in:
gangjun06 2020-08-13 10:49:55 +00:00
parent 2dc3a2643a
commit 5f811378d2
5 changed files with 83 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
layouts/partials/header.html
View File

@ -2,6 +2,15 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/css/index.css" />
<link rel="stylesheet" href="/css/navbar.css" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<script src="https://use.fontawesome.com/releases/v5.14.0/js/all.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/konpa/devicon@master/devicon.min.css">
<script type="text/javascript">
window.addEventListener('scroll', ()=>{
const nav = document.querySelector('nav')
console.log(nav)
nav.classList.toggle('onscroll', window.scrollY > 0)
})
</script>

31
layouts/partials/home.html
View File

@ -14,23 +14,26 @@
{{ $data := .Site.Data.home }}
<main class="container mx-auto mt-8 px-4 xl:px-0">
<section id="about" class="md:flex justify-around">
<div class="my-auto">
<div class="my-auto md:mr-4">
{{ partial "home_title" (dict "title" "About Me") }}
<div class="flex mt-3 gap-3 text-xl">
{{ range $data.about.link }}
<i class="{{ .icon }}"></i>{{end}}
</div>
</div>
<div class="text-md mt-4 md:mt-0">
<div>{{ replace $data.about.text "\n" "<br />" | safeHTML }}</div>
<div class="mt-4 md:mt-0 md:ml-4">
<div class="text-2xl font-bold">{{$data.about.title}}</div>
<div class="text-lg mt-3">
<div>{{ replace $data.about.text "\n" "<br />" | safeHTML }}</div>
</div>
</div>
</section>
<section id="skills" class="mt-6">
<section id="skills" class="mt-12">
<div class="md:flex justify-center">
{{ partial "home_title" (dict "title" "Skills") }}
</div>
<div
class="mt-4 grid grid-flow-row grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
class="mt-8 grid grid-flow-row grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
>
{{ range $data.skills.list }}
<div class="w-full rounded overflow-hidden shadow-lg">
@ -55,12 +58,12 @@
{{end}}
</div>
</section>
<section id="projects" class="mt-6">
<section id="projects" class="mt-12">
<div class="md:flex justify-center">
{{ partial "home_title" (dict "title" "Projects") }}
</div>
<div
class="mt-4 grid grid-flow-row grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
class="mt-8 grid grid-flow-row grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
>
{{ range $data.project.list }}
<div class="w-full rounded overflow-hidden shadow-lg">
@ -75,20 +78,6 @@
{{ .text }}
</p>
</div>
<div class="px-6 py-4">
<span
class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2"
>#photography</span
>
<span
class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2"
>#travel</span
>
<span
class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700"
>#winter</span
>
</div>
</div>
{{end}}
</div>

53
layouts/partials/navbar.html
View File

@ -1,44 +1,11 @@
<nav class="fixed w-full" style="z-index:1000">
<div
class="container mx-auto flex items-center justify-between flex-wrap bg-transparency p-6"
>
<div class="flex items-center flex-shrink-0 text-white mr-6">
<a class="font-semibold text-xl tracking-tight" href="/"
>{{ $.Site.Title }}</a
>
</div>
<div class="block lg:hidden">
<button
class="flex items-center px-3 py-2 border rounded text-teal-200 border-white hover:text-white hover:border-white"
>
<svg
class="fill-current h-3 w-3"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<title>Menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
</svg>
</button>
</div>
<div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
<div class="text-sm lg:flex-grow">
{{ $currentPage := . }} {{ range .Site.Menus.main }}
<a
href="{{ .URL }}"
class="block mt-4 lg:inline-block lg:mt-0 text-white hover:text-white mr-4"
>
{{ .Name }}
</a>
{{end}}
</div>
<div>
<a
href="#"
class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0"
>Blog</a
>
</div>
</div>
</div>
<nav>
<a href="/" class="logo">{{ .Site.Title }}</a>
<ul>
{{ range .Site.Menus.main }}
<li>
<a href="{{ .URL }}">{{ .Name }}</a>
</li>
{{end}}
</ul>
</nav>
<section class="banner"></section>

2
static/css/index.css
View File

@ -81,7 +81,7 @@
content: "";
width: 42px;
height: 4px;
background: #EE7785;
background: #ee7785;
left: 0;
bottom: 0px;
}

53
static/css/navbar.css Normal file
View File

@ -0,0 +1,53 @@
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.6s;
padding: 40px 100px;
z-index: 600;
}
nav.onscroll {
padding: 5px 100px;
background: rgba(0, 0, 0, 0.5);
}
nav .logo {
position: relative;
font-weight: 700;
color: #fff;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
}
nav ul {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
nav ul li {
position: relative;
list-style: none;
}
nav ul li a {
position: relative;
margin: 0 15px;
text-decoration: none;
color: #fff;
letter-spacing: 2px;
font-weight: 500px;
transition: 0.6s;
}
nav.onscroll .logo,
nav.onscroll ul li a {
color: #fff;
}