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

Browse Source
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_open_short").style.display = "none";
document.getElementById("sidebar_close_short").style.display = "block";
document.getElementById("sidebar_social").style.display = "flex";
}
function sidebarClose() {
document.getElementById("sidebar").style.width = "0%"
document.getElementById("sidebar_open_short").style.display = "block";
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);
display: block;
white-space: nowrap;
transition: 0.5s;
}
@media screen and (max-height: 455px){#sidebar a{margin-top:0px;padding-top:0px}}
#sidebar a:hover {color: var(--main-text-color)}
@ -139,7 +140,7 @@ body {
}
#sidebar_social {
position: absolute;
display: flex;
display: none;
bottom: 50px;
width: 100%;
margin: auto;
@ -148,9 +149,9 @@ body {
#sidebar_social img {
width: 12vw;
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}}
/* CONTENT */
.content { /* Try z-index: 1; so it scrolls over header image */