Blankie/pastel.codes
1
0
Fork 0
mirror of https://github.com/aurora-dot/pastel.codes.git synced 2025-04-28 05:22:11 +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",
"nodemailer": "^6.6.0",
"pug": "^3.0.2",
"tailwind-hamburgers": "^1.1.1",
"winston": "^3.3.3"
},
"devDependencies": {
"tailwindcss": "^2.2.15",
"postcss-cli": "^8.3.1",
"autoprefixer": "^10.3.4",
"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 () {
$('.ham-button').on('click', function () {
$('.ham').toggleClass('open');
$('#menu').on('click', function () {
$('#menu').toggleClass('tham-active');
$('#menu-items').slideToggle(300);
});
});

4
tailwind.config.js
View File

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

24
views/index.pug
View File

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

15
views/layout.pug
View File

@ -23,21 +23,16 @@ html
a(href="/") EEEE.
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")
span.sr-only Open main menu
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(id="menu").tham.tham-e-squeeze.tham-w-8
div.tham-box
div(class="tham-inner bg-pink")
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
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
footer.w-full.text-center.p-4.text-base