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

sidebar

Browse Source
This commit is contained in:
Lazy Hippopotamus
2023-06-06 15:12:24 -04:00
parent e7d8d215b4
commit 3fd42d469b
2 changed files with 171 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
index.html
View File

@@ -8,6 +8,24 @@
<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>
</div>
</div>
</div>
<div id="outer">
<div id="header">
<div id="head-marker" class="scrolly"></div>
<div id="headin">
@@ -18,13 +36,13 @@
</div>
<div>
<div class="dropdown-inner">
<a>
<a href="#">
LINK
</a>
<a>
<a href="#">
LINK
</a>
<a>
<a href="#">
LINK
</a>
</div>
@@ -34,13 +52,13 @@
</div>
<div>
<div class="dropdown-inner">
<a>
<a href="#">
LINK
</a>
<a>
<a href="#">
LINK
</a>
<a>
<a href="#">
LINK
</a>
</div>
@@ -50,13 +68,13 @@
</div>
<div>
<div class="dropdown-inner">
<a>
<a href="#">
LINK
</a>
<a>
<a href="#">
LINK
</a>
<a>
<a href="#">
LINK
</a>
</div>
@@ -91,6 +109,7 @@
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque quis eveniet ipsa perferendis possimus molestias?
Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus.
</div>
</div>
<script src="main.js"></script>
</body>
</html>

79
main.css
View File

@@ -1,3 +1,7 @@
:root {
--sidebar-size: clamp(300px, 20%, 400px);
}
@font-face {
font-family: "Cantarell var";
font-weight: 100 900;
@@ -64,10 +68,9 @@ h1 {
}
#headin {
padding-top: 5%;
padding-bottom: 5%;
padding-top: 2%;
padding-bottom: 2%;
transition: background-color 0.3s, color 0.3s;
width: 100%;
}
#head-marker.scrolly-out + #headin {
@@ -76,8 +79,78 @@ h1 {
left: 0px;
background-color: darkred;
color: lightgreen;
margin-left: var(--sidebar-size);
width: calc(100vw - var(--sidebar-size));
}
#head-marker.scrolly-out + #headin > #links > * > *, #head-marker.scrolly-out + #headin > #links > * {
background-color: black;
}
body {
display: grid;
grid-template-columns: var(--sidebar-size) auto;
}
#outer {
position: relative;
height: 100vh;
overflow-y: scroll;
}
#sider {
box-sizing: border-box;
padding: 20px;
background-color: pink;
}
.hidden {
display: none;
}
#sider-cats {
border-left: 2px solid white;
padding-left: 10px;
}
#sider-cats > div {
display: none;
border-left: 2px solid red;
padding-left: 10px;
}
#sider-cats > input:checked + label {
border-right: 2px solid red;
border-bottom: 2px solid red;
}
#sider-cats > label {
color: green;
padding-right: 10px;
padding-bottom: 10px;
display: inline-block;
}
#sider-cats > label:hover {
color: darkgreen;
cursor: pointer;
}
#sider-cats > input:checked + label + div {
display: block;
}
#sider > h2 {
border-right: 2px solid white;
border-bottom: 2px solid white;
text-align: center;
}
a {
text-decoration: none;
color: green;
}
a:hover {
color: darkgreen;
}