sidebar
This commit is contained in:
Lazy Hippopotamus
171
index.html
171
index.html
@@ -8,88 +8,107 @@
|
|||||||
<link rel="stylesheet" href="main.css" />
|
<link rel="stylesheet" href="main.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="header">
|
<div id="sider">
|
||||||
<div id="head-marker" class="scrolly"></div>
|
<h2>Sidebar</h2>
|
||||||
<div id="headin">
|
<div id="sider-cats">
|
||||||
<h1>Jhewit</h1>
|
<input type="checkbox" id="i_1" class="hidden" />
|
||||||
<div id="links">
|
<label for="i_1">Category 1</label>
|
||||||
<div class="dropdown">
|
<div>
|
||||||
Dropdown 1
|
<a href="#">This is a link</a><br>
|
||||||
</div>
|
<a href="#">Another link</a>
|
||||||
<div>
|
</div><br>
|
||||||
<div class="dropdown-inner">
|
<input type="checkbox" id="i_2" class="hidden" />
|
||||||
<a>
|
<label for="i_2">Category 2</label>
|
||||||
LINK
|
<div>
|
||||||
</a>
|
<a href="#">Third link, new category</a><br>
|
||||||
<a>
|
<a href="#">Links.</a>
|
||||||
LINK
|
</div>
|
||||||
</a>
|
</div>
|
||||||
<a>
|
</div>
|
||||||
LINK
|
<div id="outer">
|
||||||
</a>
|
<div id="header">
|
||||||
|
<div id="head-marker" class="scrolly"></div>
|
||||||
|
<div id="headin">
|
||||||
|
<h1>Jhewit</h1>
|
||||||
|
<div id="links">
|
||||||
|
<div class="dropdown">
|
||||||
|
Dropdown 1
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div>
|
||||||
<div class="dropdown">
|
<div class="dropdown-inner">
|
||||||
Dropdown 2
|
<a href="#">
|
||||||
</div>
|
LINK
|
||||||
<div>
|
</a>
|
||||||
<div class="dropdown-inner">
|
<a href="#">
|
||||||
<a>
|
LINK
|
||||||
LINK
|
</a>
|
||||||
</a>
|
<a href="#">
|
||||||
<a>
|
LINK
|
||||||
LINK
|
</a>
|
||||||
</a>
|
</div>
|
||||||
<a>
|
|
||||||
LINK
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="dropdown">
|
||||||
<div class="dropdown">
|
Dropdown 2
|
||||||
Dropdown 3
|
</div>
|
||||||
</div>
|
<div>
|
||||||
<div>
|
<div class="dropdown-inner">
|
||||||
<div class="dropdown-inner">
|
<a href="#">
|
||||||
<a>
|
LINK
|
||||||
LINK
|
</a>
|
||||||
</a>
|
<a href="#">
|
||||||
<a>
|
LINK
|
||||||
LINK
|
</a>
|
||||||
</a>
|
<a href="#">
|
||||||
<a>
|
LINK
|
||||||
LINK
|
</a>
|
||||||
</a>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dropdown">
|
||||||
|
Dropdown 3
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="dropdown-inner">
|
||||||
|
<a href="#">
|
||||||
|
LINK
|
||||||
|
</a>
|
||||||
|
<a href="#">
|
||||||
|
LINK
|
||||||
|
</a>
|
||||||
|
<a href="#">
|
||||||
|
LINK
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div id="content">
|
||||||
<div id="content">
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam! 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. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
|
||||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam! 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. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
|
nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
|
||||||
nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
|
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. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
|
||||||
Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
|
nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
|
||||||
nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
|
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. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
|
||||||
Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
|
nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
|
||||||
nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
|
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. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
|
||||||
Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
|
nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
|
||||||
nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
|
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. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
|
||||||
Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
|
nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
|
||||||
nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
|
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. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
|
||||||
Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
|
nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
|
||||||
nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
|
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. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
|
||||||
Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
|
nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
|
||||||
nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
|
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. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
|
||||||
Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
|
nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
|
||||||
nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
|
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>
|
||||||
|
|||||||
79
main.css
79
main.css
@@ -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;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user