Etheryo/saoulbonmonsieur
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added favicon, animation for menu selection, responsiveness for the footer element

Browse source
This commit is contained in:
Yohan Boujon 2023-06-24 17:15:11 +02:00
parent e199885bbb
commit 280e9e1d36
7 changed files with 132 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 33 KiB

9
components/navbar.html
View file

@ -1,12 +1,17 @@
<nav id="navbar_component">
<div id="navbar_menu">
<a class="navbar_menu-click" href="javascript:openMenu()">
<span class="iconify" data-icon="mdi-menu"></span>
<svg width="1em" height="1em" viewBox="0 0 24 24"
style="vertical-align: -0.125em; transform: rotate(360deg);">
<polygon
points="3,6 21,6 21,8 3,8 3,6 3,11 21,11 21,13 3,13 3,11 3,16 21,16 21,18 3,18 3,16"
fill="currentColor" />
</svg>
</a>
</div>
<div id="navbar_text-container">
<div class="navbar_menu-close">
<a href="javascript:closeMenu()">
<a class="navbar_menu-close-btn" href="javascript:closeMenu()">
<span class="iconify" data-icon="mdi-close"></span>
</a>
</div>

98
css/footer.css
View file

@ -1,57 +1,101 @@
.footer-container
{
display: flex;
height: 15rem;
background-color: var(--color-dark);
color: var(--color-white);
overflow: clip;
@media screen and (min-width: 700px) {
.footer-container {
display: flex;
height: 15rem;
background-color: var(--color-dark);
color: var(--color-white);
overflow: clip;
}
.footer-bottom_grid {
flex: 1;
padding: 1rem 4rem;
word-wrap: break-word;
}
.legal{
border-radius: .5rem;
height: 80%;
width: 50%;
position: relative;
top: 10%;
left: 25%;
background-color: var(--color-white);
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
z-index: 100;
}
}
.footer-container_grid
{
@media screen and (max-width: 700px) {
.footer-container {
display: flex;
height: 15rem;
background-color: var(--color-dark);
color: var(--color-white);
overflow: clip;
flex-direction: column;
}
.footer-bottom_grid {
flex: 1;
padding: 0.5rem;
word-wrap: break-word;
font-size: small;
}
.footer-bottom_grid.right-align{
padding-right: 1rem;
}
.footer-bottom_grid.left-align{
padding-left: 1rem;
}
.legal{
border-radius: .5rem;
height: 80%;
width: 60%;
position: relative;
top: 10%;
left: 20%;
background-color: var(--color-white);
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
z-index: 100;
}
}
.footer-container_grid {
flex: 1;
padding: 1rem 2rem;
word-wrap: break-word;
}
.footer-bottom
{
.footer-bottom {
background-color: var(--color-gray);
color: var(--color-white);
display: flex;
align-items:center;
align-items: center;
height: 2.5rem;
vertical-align: middle;
overflow: clip;
}
.footer-bottom_grid
{
flex: 1;
padding: 1rem 4rem;
word-wrap: break-word;
}
.footer-bottom_grid a:link
{
.footer-bottom_grid a:link {
text-decoration: none;
color: var(--color-white);
}
.footer-bottom_grid a:visited
{
.footer-bottom_grid a:visited {
text-decoration: none;
color: var(--color-white);
}
.footer-bottom_grid a:hover
{
.footer-bottom_grid a:hover {
text-decoration: none;
color: var(--color-light);
}
.footer-bottom_grid.right-align:hover
{
.footer-bottom_grid.right-align:hover {
transform: translateY(-2px);
transition: all .3s ease 0s;
}

12
css/navbar.css
View file

@ -109,7 +109,7 @@
}
#navbar_menu svg:hover{
color: var(--color-white);
color: var(--color-main);
}
.navbar_menu-close svg{
@ -118,6 +118,10 @@
transition: all .3s ease 0s;
}
.navbar_menu-close svg:hover{
color: var(--color-main);
}
.navbar_dropdown {
align-items: center;
background-color: rgba(255, 255, 255, 0.75);
@ -165,3 +169,9 @@ button {
background-color: var(--color-light) !important;
color: var(--color-white) !important;
}
.navbar_menu-close-btn:hover{
transform: translateY(-1px) !important;
background-color: rgba(255, 255, 255, 0)!important;
box-shadow: none !important;
}

2
index.html
View file

@ -5,10 +5,10 @@
<title>Saoul Bonmonsieur | Site Web Officiel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="icon" type="image/x-icon" href="assets/favicon.ico">
<script src="lib/anime.min.js"></script>
<script src="js/base.js"></script>
<script src="//code.iconify.design/1/1.0.6/iconify.min.js"></script>
<link href="css/index.css" rel="stylesheet">
</head>

1
js/base.js
View file

@ -116,6 +116,7 @@ function popUpPlacement(className) {
//During the loading process we need a loading status bar
var headTag = document.getElementsByTagName("head")[0];
window.addEventListener('load', function () {
loadJS("//code.iconify.design/1/1.0.6/iconify.min.js", headTag)
loadCSS(urlStr + "css/base.css", headTag);
loadCSS(urlStr + "css/navbar.css", headTag);
load(urlStr + "components/navbar.html", document.getElementsByTagName("Navbar")[0], urlStr + "js/navbar.js", headTag);

45
js/navbar.js
View file

@ -6,18 +6,20 @@
var mobileMode = false
//enterAnimation is a status linked to mouseenter/leave of the icon
var enterAnimation = false;
//same but for menu
var enterMenuAnimation = false;
//each <li> tag of the navbar_text-container
var dropdownList = document.getElementById("navbar_text-container").children[1].children;
//each <a> tag in the navbar
var aTagList = getNavbarTextContainer();
//a list
var dropdownStatus = Array(aTagList.length).fill(false);
//list of dropdown links
var dropdownLinks = ["droits/penal.html", "droits/affaire.html", "join/contact.html", "join/coordonees.html"];
//list of container links
var containerLinks = ["avocat"];
//navbarDropdown Element
var navbarDropdown = document.getElementsByClassName("navbar_dropdown");
//menu close SVG Element
var menuCloseElement = document.getElementsByClassName("navbar_menu-close-btn")[0].children[0];
//menu hamburger SVG Element
var menuOpenElement = document.getElementsByClassName("navbar_menu-click")[0].children[0];
/****************************************/
/* animjs */
@ -42,6 +44,17 @@ var logoRotate = anime({
}
});
var menuAnimation = anime({
targets: '.navbar_menu-click polygon',
points: [
{ value: '3,6 21,6 21,8 3,8 3,6 3,11 21,11 21,13 3,13 3,11 3,16 21,16 21,18 3,18 3,16', duration: 10, delay: 0 },
{ value: '15.410 16.580, 10.830 12.000, 15.410 7.410, 14.000 6.000, 8.000 12.000, 14.000 18.000, 15.410 16.580', duration: 200, delay: 10 }
],
scale: 1,
easing: 'easeOutExpo',
autoplay: false,
});
/****************************************/
/* functions */
/****************************************/
@ -193,3 +206,27 @@ window.addEventListener('resize', function (e) {
mobileMode = true;
}
});
//Animation to be played when hovering the menu
menuOpenElement.addEventListener("mouseenter", function () {
//enterAnimation is now true (see update in logoRotate)
enterMenuAnimation = true;
//Will play the animation and when finished set enterAnimation to false
menuAnimation.play();
menuAnimation.finished.then(() => {
enterMenuAnimation = false;
})
});
//Animation to be played when leaving the menu
menuOpenElement.addEventListener("mouseleave", function () {
//enterAnimation is now false (see update in logoRotate)
enterMenuAnimation = false;
menuAnimation.reverse();
menuAnimation.play();
//Will play the reversed animation and when finished set enterAnimation to true and and cancel the reverse
menuAnimation.finished.then(() => {
menuAnimation.reverse();
enterMenuAnimation = true;
})
});