Blankie/pastel.codes
1
0
Fork 0
mirror of https://github.com/aurora-dot/pastel.codes.git synced 2025-04-28 13:32:12 +01:00
Code Issues Projects Releases Wiki Activity

Add menu animation and drop down menu

Browse Source
This commit is contained in:
E 2021-09-11 19:27:52 +01:00
parent 88e5a4c14c
commit edfd5323dd
No known key found for this signature in database
GPG Key ID: 91C5E15B03621D7A
7 changed files with 717 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

873
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
package.json
View File

@ -29,12 +29,13 @@
"morgan": "^1.10.0", "morgan": "^1.10.0",
"nodemailer": "^6.6.0", "nodemailer": "^6.6.0",
"pug": "^3.0.2", "pug": "^3.0.2",
"tailwind-hamburgers": "^1.1.1",
"winston": "^3.3.3" "winston": "^3.3.3"
}, },
"devDependencies": { "devDependencies": {
"tailwindcss": "^2.2.15", "autoprefixer": "^10.3.4",
"postcss-cli": "^8.3.1",
"npm-watch": "^0.11.0", "npm-watch": "^0.11.0",
"autoprefixer": "^10.3.4" "postcss-cli": "^8.3.1",
"tailwindcss": "^2.2.15"
} }
} }

0
public/javascript/contact.js
View File

5
public/javascript/nav.js
View File

@ -1,5 +1,6 @@
$(document).ready(function () { $(document).ready(function () {
$('.ham-button').on('click', function () { $('#menu').on('click', function () {
$('.ham').toggleClass('open'); $('#menu').toggleClass('tham-active');
$('#menu-items').slideToggle(300);
}); });
}); });

4
tailwind.config.js
View File

@ -27,5 +27,7 @@ module.exports = {
variants: { variants: {
extend: {}, extend: {},
}, },
plugins: [], plugins: [
require('tailwind-hamburgers'),
],
} }

24
views/index.pug
View File

@ -1,23 +1,23 @@
extends layout extends layout
block nav-links block nav-links
li.nav-item.active a(href='#')
a.nav-link(href='#') li(class="py-3 bg-black text-green hover:bg-pink hover:text-black transition duration-500 ease-in-out")
span Home span Home
li.nav-item a(href='/about')
a.nav-link(href='/about') li(class="py-3 bg-pink text-black hover:bg-black hover:text-pink transition duration-500 ease-in-out")
span About span About
li.nav-item a(href='#')
a.nav-link(href='#') li(class="py-3 bg-pink text-black hover:bg-black hover:text-pink transition duration-500 ease-in-out")
span CV span CV
li.nav-item a(href='https://github.com/aurora-dot')
a.nav-link(href='https://github.com/aurora-dot') li(class="py-3 bg-pink text-black hover:bg-black hover:text-pink transition duration-500 ease-in-out")
span Projects span Projects
li.nav-item a(href='https://blog.pastel.codes')
a.nav-link(href='https://blog.pastel.codes') li(class="py-3 bg-pink text-black hover:bg-black hover:text-pink transition duration-500 ease-in-out")
span Blog span Blog
li.nav-item a(href='/contact')
a.nav-link(href='/contact') li(class="py-3 bg-pink text-black hover:bg-black hover:text-pink transition duration-500 ease-in-out")
span Contact span Contact
block content block content

15
views/layout.pug
View File

@ -23,21 +23,16 @@ html
a(href="/") EEEE. a(href="/") EEEE.
div(class="absolute inset-y-0 right-0 flex items-center") div(class="absolute inset-y-0 right-0 flex items-center")
button(type="button" class="inline-flex items-center justify-center rounded-md text-pink hover:text-green" aria-controls="mobile-menu" aria-expanded="false") div(id="menu").tham.tham-e-squeeze.tham-w-8
span.sr-only Open main menu div.tham-box
div(class="tham-inner bg-pink")
svg(class="block h-9 w-9" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true")
path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16")
svg(class="hidden h-9 w-9" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true")
path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12")
div(class="hidden" id="menu") ul(class="hidden transition duration-500 ease-in-out text-center pb-5 mx-5 list-none" id="menu-items")
block nav-links block nav-links
main(class="flex flex-grow sm:items-stretch") main(class="flex flex-grow sm:items-stretch")
div(class="flex flex-col sm:flex-row flex-grow max-w-5xl mx-auto px-5") div(class="flex flex-col sm:flex-row flex-grow max-w-4xl mx-auto px-5")
block content block content
footer.w-full.text-center.p-4.text-base footer.w-full.text-center.p-4.text-base