Sidebar will shrink to hamburger menu below certain screen size
This commit is contained in:
parent
623a157504
commit
32326f6d88
3 changed files with 91 additions and 9 deletions
|
|
@ -134,18 +134,75 @@ img {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
/*Container for menu button */
|
||||
.menu-button-container {
|
||||
display: none;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
cursor: pointer;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sidebar-popup {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#menu-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.container {
|
||||
|
||||
.menu-button-container {
|
||||
display: block;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.sidebar-popup {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar-svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
#menu-toggle ~ .menu li {
|
||||
height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#menu-toggle:checked ~ .menu li {
|
||||
border: 1px solid var(--fg);
|
||||
height: auto;
|
||||
padding: 0.5em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu > li {
|
||||
margin: 0;
|
||||
padding: 0.5em 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.menu > li:not(:last-child) {
|
||||
border-bottom: 1px solid #444;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: static;
|
||||
}
|
||||
|
||||
.sidebar ul li {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<body>
|
||||
<div class="container">
|
||||
<nav class="sidebar">
|
||||
<ul>
|
||||
<ul class="sidebar-svg">
|
||||
<li><a href="/">
|
||||
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Home</title>
|
||||
|
|
@ -87,7 +87,31 @@
|
|||
</svg>
|
||||
</a></li>
|
||||
</ul>
|
||||
<div class="sidebar-popup">
|
||||
<label class="menu-button-container" for="menu-toggle">
|
||||
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
||||
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
|
||||
<g id="SVGRepo_iconCarrier">
|
||||
<path d="M4 18L20 18" stroke="#c8d3f5" stroke-width="2" stroke-linecap="round"></path>
|
||||
<path d="M4 12L20 12" stroke="#c8d3f5" stroke-width="2" stroke-linecap="round"></path>
|
||||
<path d="M4 6L20 6" stroke="#c8d3f5" stroke-width="2" stroke-linecap="round"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</label>
|
||||
<input id="menu-toggle" type="checkbox" />
|
||||
<ul class="menu">
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="https://code.achubb.com">Code</a>
|
||||
<li><a id="posts" href="/posts">Posts</a></li>
|
||||
<li><a id="projects" href="/projects">Projects</a></li>
|
||||
<li><a id="now" href="/now">Now</a></li>
|
||||
<li><a id="about" href="/about">About</a></li>
|
||||
<li><a id="contact" href="/contact">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="content">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -14,11 +14,12 @@
|
|||
|
||||
<h4>Currently Reading</h4>
|
||||
<p>
|
||||
Look to Windward - Ian Banks
|
||||
A Prayer for the Crown Shy - Becky Chambers
|
||||
</p>
|
||||
|
||||
<h4>Read so far in 2025</h4>
|
||||
<ul class="no-bul">
|
||||
<li>Look to Windward - Ian M Banks</li>
|
||||
<li>Blood in the Machine - Brian Merchant</li>
|
||||
<li>A Psalm for the Wild Built - Becky Chambers</li>
|
||||
<li>River of Gods - Ian McDonald</li>
|
||||
|
|
|
|||
Loading…
Reference in a new issue