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;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
/*Container for menu button */
|
||||||
.container {
|
.menu-button-container {
|
||||||
|
display: none;
|
||||||
|
height: 100%;
|
||||||
|
width: auto;
|
||||||
|
cursor: pointer;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-popup {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu-toggle {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
|
||||||
|
.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 {
|
.sidebar {
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
height: auto;
|
||||||
position: static;
|
width: auto;
|
||||||
}
|
justify-content: center;
|
||||||
|
|
||||||
.sidebar ul li {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<nav class="sidebar">
|
<nav class="sidebar">
|
||||||
<ul>
|
<ul class="sidebar-svg">
|
||||||
<li><a href="/">
|
<li><a href="/">
|
||||||
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<title>Home</title>
|
<title>Home</title>
|
||||||
|
|
@ -87,7 +87,31 @@
|
||||||
</svg>
|
</svg>
|
||||||
</a></li>
|
</a></li>
|
||||||
</ul>
|
</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>
|
</nav>
|
||||||
|
|
||||||
<main class="content">
|
<main class="content">
|
||||||
{% block content %}{% endblock %}
|
{% block content %}{% endblock %}
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
|
|
@ -14,11 +14,12 @@
|
||||||
|
|
||||||
<h4>Currently Reading</h4>
|
<h4>Currently Reading</h4>
|
||||||
<p>
|
<p>
|
||||||
Look to Windward - Ian Banks
|
A Prayer for the Crown Shy - Becky Chambers
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h4>Read so far in 2025</h4>
|
<h4>Read so far in 2025</h4>
|
||||||
<ul class="no-bul">
|
<ul class="no-bul">
|
||||||
|
<li>Look to Windward - Ian M Banks</li>
|
||||||
<li>Blood in the Machine - Brian Merchant</li>
|
<li>Blood in the Machine - Brian Merchant</li>
|
||||||
<li>A Psalm for the Wild Built - Becky Chambers</li>
|
<li>A Psalm for the Wild Built - Becky Chambers</li>
|
||||||
<li>River of Gods - Ian McDonald</li>
|
<li>River of Gods - Ian McDonald</li>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue