fred.boniface
/
fredboniface.co.uk
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix obtrusive flexbpx, toggle display with JS

This commit is contained in:
Fred Boniface 2022-10-28 21:20:45 +01:00
parent 007aef7a15
commit 7ca2ab41c3
2 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/navbar.js
View File

@ -10,10 +10,12 @@ function sidebarOpen() {
document.getElementById("sidebar").style.width = "50%"; document.getElementById("sidebar").style.width = "50%";
document.getElementById("sidebar_open_short").style.display = "none"; document.getElementById("sidebar_open_short").style.display = "none";
document.getElementById("sidebar_close_short").style.display = "block"; document.getElementById("sidebar_close_short").style.display = "block";
document.getElementById("sidebar_social").style.display = "flex";
} }
function sidebarClose() { function sidebarClose() {
document.getElementById("sidebar").style.width = "0%" document.getElementById("sidebar").style.width = "0%"
document.getElementById("sidebar_open_short").style.display = "block"; document.getElementById("sidebar_open_short").style.display = "block";
document.getElementById("sidebar_close_short").style.display = "none"; document.getElementById("sidebar_close_short").style.display = "none";
document.getElementById("sidebar_social").style.display = "none";
} }

7
style/new_style.css
View File

@ -127,6 +127,7 @@ body {
color: var(--link-color); color: var(--link-color);
display: block; display: block;
white-space: nowrap; white-space: nowrap;
transition: 0.5s;
} }
@media screen and (max-height: 455px){#sidebar a{margin-top:0px;padding-top:0px}} @media screen and (max-height: 455px){#sidebar a{margin-top:0px;padding-top:0px}}
#sidebar a:hover {color: var(--main-text-color)} #sidebar a:hover {color: var(--main-text-color)}
@ -139,7 +140,7 @@ body {
} }
#sidebar_social { #sidebar_social {
position: absolute; position: absolute;
display: flex; display: none;
bottom: 50px; bottom: 50px;
width: 100%; width: 100%;
margin: auto; margin: auto;
@ -148,9 +149,9 @@ body {
#sidebar_social img { #sidebar_social img {
width: 12vw; width: 12vw;
max-width: 50px; max-width: 50px;
transition: 0.2s; transition: 0.5s;
} }
@media screen and (min-height: 600px){#sidebar_social img{margin-bottom:10px}} @media screen and (min-height: 600px){#sidebar_social img{margin-bottom:20px}}
@media screen and (max-height: 360px){#sidebar_social img{display:none}} @media screen and (max-height: 360px){#sidebar_social img{display:none}}
/* CONTENT */ /* CONTENT */
.content { /* Try z-index: 1; so it scrolls over header image */ .content { /* Try z-index: 1; so it scrolls over header image */