admin/avrahamsociety
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fun things

Browse Source
This commit is contained in:
Lazy Hippopotamus
2023-06-12 13:17:16 -04:00
parent 370041fb16
commit 667ac446e6
4 changed files with 95 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
index.html
View File

@@ -7,8 +7,9 @@
<title>Jhewit | Home</title> <title>Jhewit | Home</title>
<link rel="stylesheet" href="main.css" /> <link rel="stylesheet" href="main.css" />
</head> </head>
<body> <body class="sidebar-opened">
<!--<div id="sider"> <div id="sider-outer">
<div id="sider">
<h2>Sidebar</h2> <h2>Sidebar</h2>
<div id="sider-cats"> <div id="sider-cats">
<input type="checkbox" id="i_1" class="hidden" /> <input type="checkbox" id="i_1" class="hidden" />
@@ -24,7 +25,9 @@
<a href="#">Links.</a> <a href="#">Links.</a>
</div> </div>
</div> </div>
</div>--> <img src="res/arrow-left.svg" onclick="toggle_sidebar()" />
</div>
</div>
<div id="outer"> <div id="outer">
<div id="header"> <div id="header">
<div id="head-marker" class="scrolly"></div> <div id="head-marker" class="scrolly"></div>

51
main.css
View File

@@ -61,9 +61,9 @@ h1 {
} }
body { body {
/*display: grid; display: grid;
grid-template-columns: var(--sidebar-size) auto; grid-template-columns: var(--sidebar-size) auto;
grid-template-columns: var(--sidebar-size) auto;*/ transition: grid-template-columns 1s;
} }
.dropdown, .link { .dropdown, .link {
@@ -116,9 +116,9 @@ h1 {
top: 0px; top: 0px;
left: 0px; left: 0px;
/*color: red;*/ /*color: red;*/
/*margin-left: var(--sidebar-size); margin-left: var(--sidebar-size);
width: calc(100vw - var(--sidebar-size));*/ width: calc(100vw - var(--sidebar-size));
width: 100vw; /*width: 100vw;*/
} }
#head-marker.scrolly-out + #headin > #links > * > *, #head-marker.scrolly-out + #headin > #links > * { #head-marker.scrolly-out + #headin > #links > * > *, #head-marker.scrolly-out + #headin > #links > * {
@@ -131,10 +131,46 @@ h1 {
overflow-y: scroll; overflow-y: scroll;
} }
#sider { #sider-outer {
box-sizing: border-box; box-sizing: border-box;
padding: 20px;
background-color: pink; background-color: pink;
margin: 0px;
padding: 0px;
position: relative;
overflow: visible !important;
z-index: 1000000;
}
#sider {
padding: 20px;
}
body:not(.sidebar-opened) {
--sidebar-size: 0px;
}
body:not(.sidebar-opened) > #sider-outer > #sider {
box-sizing: border-box;
overflow: hidden;
padding: 0;
margin: 0;
}
body:not(.sidebar-opened) > #sider-outer > #sider > img {
/*right: none;*/
left: 0px;
padding-left: 10px;
background-color: red;
border-radius: 20px;
padding: 20px;
}
#sider > img {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 20px;
} }
.hidden { .hidden {
@@ -241,7 +277,6 @@ h1 {
.carousel-outer { .carousel-outer {
margin-top: clamp(50px, 10vh, 100px); margin-top: clamp(50px, 10vh, 100px);
width: 100vw;
display: flex; display: flex;
background-color: black; background-color: black;
align-items: center; align-items: center;

14
main.js
View File

@@ -95,8 +95,9 @@ function getCarousel(id) {
}, },
display() { display() {
var bbox = carousel.selected().getBoundingClientRect(); var bbox = carousel.selected().getBoundingClientRect();
var bb2 = carousel.element.parentNode.getBoundingClientRect();
carousel.element.scrollBy({ carousel.element.scrollBy({
left: (bbox.left - window.innerWidth/2 + bbox.width/2), left: (bbox.left - bb2.left - bb2.width/2 + bbox.width/2),
top: 0, top: 0,
behavior: "smooth" behavior: "smooth"
}); });
@@ -111,3 +112,14 @@ var carousel_1 = getCarousel("carousel_1");
carousel_1.display(); carousel_1.display();
setInterval(carousel_1.nextAnim, 2000); setInterval(carousel_1.nextAnim, 2000);
function toggle_sidebar() {
document.body.classList.toggle("sidebar-opened");
var el = document.querySelector("#sider > img");
if (document.body.classList.contains("sidebar-opened")) {
el.src = "res/arrow-left.svg";
}
else {
el.src = "res/arrow-right.svg";
}
}

9
src/template.html
View File

@@ -7,8 +7,9 @@
<title>Jhewit | Home</title> <title>Jhewit | Home</title>
<link rel="stylesheet" href="main.css" /> <link rel="stylesheet" href="main.css" />
</head> </head>
<body> <body class="sidebar-opened">
<!--<div id="sider"> <div id="sider-outer">
<div id="sider">
<h2>Sidebar</h2> <h2>Sidebar</h2>
<div id="sider-cats"> <div id="sider-cats">
<input type="checkbox" id="i_1" class="hidden" /> <input type="checkbox" id="i_1" class="hidden" />
@@ -24,7 +25,9 @@
<a href="#">Links.</a> <a href="#">Links.</a>
</div> </div>
</div> </div>
</div>--> <img src="res/arrow-left.svg" onclick="toggle_sidebar()" />
</div>
</div>
<div id="outer"> <div id="outer">
<div id="header"> <div id="header">
<div id="head-marker" class="scrolly"></div> <div id="head-marker" class="scrolly"></div>