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

35
index.html
View File

@@ -7,24 +7,27 @@
<title>Jhewit | Home</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<!--<div id="sider">
<h2>Sidebar</h2>
<div id="sider-cats">
<input type="checkbox" id="i_1" class="hidden" />
<label for="i_1">Category 1</label>
<div>
<a href="#">This is a link</a><br>
<a href="#">Another link</a>
</div><br>
<input type="checkbox" id="i_2" class="hidden" />
<label for="i_2">Category 2</label>
<div>
<a href="#">Third link, new category</a><br>
<a href="#">Links.</a>
<body class="sidebar-opened">
<div id="sider-outer">
<div id="sider">
<h2>Sidebar</h2>
<div id="sider-cats">
<input type="checkbox" id="i_1" class="hidden" />
<label for="i_1">Category 1</label>
<div>
<a href="#">This is a link</a><br>
<a href="#">Another link</a>
</div><br>
<input type="checkbox" id="i_2" class="hidden" />
<label for="i_2">Category 2</label>
<div>
<a href="#">Third link, new category</a><br>
<a href="#">Links.</a>
</div>
</div>
<img src="res/arrow-left.svg" onclick="toggle_sidebar()" />
</div>
</div>-->
</div>
<div id="outer">
<div id="header">
<div id="head-marker" class="scrolly"></div>

51
main.css
View File

@@ -61,9 +61,9 @@ h1 {
}
body {
/*display: grid;
display: grid;
grid-template-columns: var(--sidebar-size) auto;
grid-template-columns: var(--sidebar-size) auto;*/
transition: grid-template-columns 1s;
}
.dropdown, .link {
@@ -116,9 +116,9 @@ h1 {
top: 0px;
left: 0px;
/*color: red;*/
/*margin-left: var(--sidebar-size);
width: calc(100vw - var(--sidebar-size));*/
width: 100vw;
margin-left: var(--sidebar-size);
width: calc(100vw - var(--sidebar-size));
/*width: 100vw;*/
}
#head-marker.scrolly-out + #headin > #links > * > *, #head-marker.scrolly-out + #headin > #links > * {
@@ -131,10 +131,46 @@ h1 {
overflow-y: scroll;
}
#sider {
#sider-outer {
box-sizing: border-box;
padding: 20px;
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 {
@@ -241,7 +277,6 @@ h1 {
.carousel-outer {
margin-top: clamp(50px, 10vh, 100px);
width: 100vw;
display: flex;
background-color: black;
align-items: center;

16
main.js
View File

@@ -95,8 +95,9 @@ function getCarousel(id) {
},
display() {
var bbox = carousel.selected().getBoundingClientRect();
var bb2 = carousel.element.parentNode.getBoundingClientRect();
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,
behavior: "smooth"
});
@@ -110,4 +111,15 @@ function getCarousel(id) {
var carousel_1 = getCarousel("carousel_1");
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";
}
}

35
src/template.html
View File

@@ -7,24 +7,27 @@
<title>Jhewit | Home</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<!--<div id="sider">
<h2>Sidebar</h2>
<div id="sider-cats">
<input type="checkbox" id="i_1" class="hidden" />
<label for="i_1">Category 1</label>
<div>
<a href="#">This is a link</a><br>
<a href="#">Another link</a>
</div><br>
<input type="checkbox" id="i_2" class="hidden" />
<label for="i_2">Category 2</label>
<div>
<a href="#">Third link, new category</a><br>
<a href="#">Links.</a>
<body class="sidebar-opened">
<div id="sider-outer">
<div id="sider">
<h2>Sidebar</h2>
<div id="sider-cats">
<input type="checkbox" id="i_1" class="hidden" />
<label for="i_1">Category 1</label>
<div>
<a href="#">This is a link</a><br>
<a href="#">Another link</a>
</div><br>
<input type="checkbox" id="i_2" class="hidden" />
<label for="i_2">Category 2</label>
<div>
<a href="#">Third link, new category</a><br>
<a href="#">Links.</a>
</div>
</div>
<img src="res/arrow-left.svg" onclick="toggle_sidebar()" />
</div>
</div>-->
</div>
<div id="outer">
<div id="header">
<div id="head-marker" class="scrolly"></div>