diff options
author | gangjun06 <me@gangjun.dev> | 2020-08-13 13:49:55 +0300 |
---|---|---|
committer | gangjun06 <me@gangjun.dev> | 2020-08-13 13:49:55 +0300 |
commit | 5f811378d2fefdd50bd025ea80410ace1b3ebca4 (patch) | |
tree | 9f8035d6b17fcf5b201d536f10df0a1eab84e4f4 | |
parent | 2dc3a2643a8824c45462f4768fe9d6df245e00c5 (diff) |
update navbar
-rw-r--r-- | layouts/partials/header.html | 9 | ||||
-rw-r--r-- | layouts/partials/home.html | 31 | ||||
-rw-r--r-- | layouts/partials/navbar.html | 53 | ||||
-rw-r--r-- | static/css/index.css | 2 | ||||
-rw-r--r-- | static/css/navbar.css | 53 |
5 files changed, 83 insertions, 65 deletions
diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 622f609..464f542 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -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>
\ No newline at end of file diff --git a/layouts/partials/home.html b/layouts/partials/home.html index ee7248b..ecb66b0 100644 --- a/layouts/partials/home.html +++ b/layouts/partials/home.html @@ -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> diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html index bddca45..6991881 100644 --- a/layouts/partials/navbar.html +++ b/layouts/partials/navbar.html @@ -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>
\ No newline at end of file diff --git a/static/css/index.css b/static/css/index.css index 6e83f65..ef50956 100644 --- a/static/css/index.css +++ b/static/css/index.css @@ -81,7 +81,7 @@ content: ""; width: 42px; height: 4px; - background: #EE7785; + background: #ee7785; left: 0; bottom: 0px; } diff --git a/static/css/navbar.css b/static/css/navbar.css new file mode 100644 index 0000000..6fb9683 --- /dev/null +++ b/static/css/navbar.css @@ -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; +} |