diff --git a/assets/css/photos.css b/assets/css/photos.css index e53684d..0142fec 100644 --- a/assets/css/photos.css +++ b/assets/css/photos.css @@ -1,20 +1,20 @@ .photos_folder { width: 100%; display: flex; - border: 1px solid #212121; - border-radius: 10px; + border: 1px solid #5a5a5a; + border-radius: 5px; } .photos_folder a:hover, .photos_path a:hover { box-shadow: 0 0 10px #000; - background-color: white; + background-color: #e0e0e0; color: black; } .photos_folder a { font-size: 25px; text-decoration: none; - border-radius: 10px; + border-radius: 5px; min-width: 100px; height: 100px; padding: 10px; @@ -22,10 +22,10 @@ display: flex; align-items: center; justify-content: center; - background-color: #212121; - box-shadow: 0 0 2px #212121; + background-color: #1a1a1a; + box-shadow: 0 0 4px #000; transition: 0.3s; - color: white; + color: #e0e0e0; } .photos img { @@ -34,14 +34,16 @@ opacity: 1; cursor: pointer; transition: 0.3s; + padding: 0; } .photos img:hover { - opacity: 0.5; + box-shadow: 0 0 5px #000; + opacity: 0.7; } .photos img:active { - opacity: 0.1; + box-shadow: 0 0 10px #000; } .no_photo { @@ -70,10 +72,10 @@ display: flex; align-items: center; justify-content: center; - background-color: #212121; - box-shadow: 0 0 2px #212121; + background-color: #1a1a1a; + box-shadow: 0 0 4px #000; transition: 0.3s; - color: white; + color: #e0e0e0; } #img_big { diff --git a/assets/css/sidenav.css b/assets/css/sidenav.css index b23fd30..8de923c 100644 --- a/assets/css/sidenav.css +++ b/assets/css/sidenav.css @@ -3,16 +3,16 @@ .sidenav { height: 100%; width: 250px; - margin-left: -250px; /* change margin with JavaScript */ + margin-left: -500px; /* change margin with JavaScript */ position: fixed; /* Stay in place */ z-index: 1000; top: 0; left: 0; - background-color: #111111; overflow-x: hidden; /* Disable horizontal scroll */ padding-top: 80px; transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */ - box-shadow: none; /* change shadow with JavaScript */ + text-align: left; + background: linear-gradient(to right, #1c1c1c, transparent 90%); } /* The navigation menu links */ diff --git a/assets/css/style.css b/assets/css/style.css index 81e33a9..7eef052 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -38,19 +38,21 @@ body { -o-background-size: cover; box-sizing: border-box; - color: #373737; + color: #b5b5b5; font-size: 16px; font-family: 'Nunito Sans', sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; + text-align: center; } h1, h2, h3, h4, h5, h6 { margin: 10px 0; - color: #222222; - font-family: 'Rubik', sans-serif; + color: #e0e0e0; + font-family: 'Work Sans', sans-serif; + font-weight: bold; letter-spacing: -1px; - border-bottom: 1px solid #ccc; + text-align: center; } h1 { @@ -187,12 +189,11 @@ Full-Width Styles #header_top { display: flex; color: white; - background: #212121; position: fixed; width: 100%; - height: 50px; z-index: 2000; - box-shadow: 0 2px 5px #222; + height: 100px; + background: linear-gradient(to bottom, #1c1c1c, transparent 90%); } #header_top h4 { @@ -212,9 +213,10 @@ Full-Width Styles margin: 0; color: #fff; font-size: 42px; - font-weight: 700; text-shadow: #111 0 0 10px; - border-bottom: none; + text-align: center; + font-family: 'Work Sans', sans-serif; + font-weight: normal; } #description { @@ -232,9 +234,6 @@ Full-Width Styles #home_content { padding-top: 100px; - background-color: #212121aa; - border-radius: 0 0 60px 60px; - box-shadow: 0 0 40px #212121; } #home_content h1 { @@ -252,9 +251,16 @@ Full-Width Styles text-shadow: 0 0 5px #000; } +#main_fading_top_edge { + height: 200px; + background: linear-gradient(to top, #1c1c1c, transparent 90%); +} +#main_fading_bottom_edge { + height: 200px; + background: linear-gradient(to bottom, #1c1c1c, transparent 90%); +} #main_content_wrap { - background: #f2f2f2; - box-shadow: 0 0 10px #222; + background: #1c1c1c; } #main_content { diff --git a/assets/images/bg.jpg b/assets/images/bg.jpg index ffe7026..8ea2653 100644 Binary files a/assets/images/bg.jpg and b/assets/images/bg.jpg differ diff --git a/assets/scripts/sidenavScript.js b/assets/scripts/sidenavScript.js index af7c1d3..9ff7ccc 100644 --- a/assets/scripts/sidenavScript.js +++ b/assets/scripts/sidenavScript.js @@ -10,7 +10,6 @@ var backButton = $("#back_button"); function openNav() { sidenav.css("margin-left", "0"); - sidenav.css("box-shadow", "5px 5px 10px #151515"); backButton.addClass("active_background"); enableHamburger(); menuOpen = true; @@ -23,7 +22,6 @@ function openNav() { */ function closeNav() { sidenav.css("margin-left", "-250px"); - sidenav.css("box-shadow", "none"); backButton.removeClass("active_background"); disableHamburger(); menuOpen = false; diff --git a/includes/top_bar.html b/includes/top_bar.html index 118ac9f..8379484 100644 --- a/includes/top_bar.html +++ b/includes/top_bar.html @@ -5,4 +5,4 @@
Voici les différentes technologies et ressources que ce site utilise :
- + JQuery