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

79
main.css
View File

@@ -1,3 +1,7 @@
:root {
--sidebar-size: clamp(300px, 20%, 400px);
}
@font-face { @font-face {
font-family: "Cantarell var"; font-family: "Cantarell var";
font-weight: 100 900; font-weight: 100 900;
@@ -64,10 +68,9 @@ h1 {
} }
#headin { #headin {
padding-top: 5%; padding-top: 2%;
padding-bottom: 5%; padding-bottom: 2%;
transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s;
width: 100%;
} }
#head-marker.scrolly-out + #headin { #head-marker.scrolly-out + #headin {
@@ -76,8 +79,78 @@ h1 {
left: 0px; left: 0px;
background-color: darkred; background-color: darkred;
color: lightgreen; 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 > * { #head-marker.scrolly-out + #headin > #links > * > *, #head-marker.scrolly-out + #headin > #links > * {
background-color: black; 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;
}