Made side panel more mobile friendly

This commit is contained in:
Nathan Byrd 2022-02-01 18:00:27 -06:00
parent 9f246b1704
commit 0725549a1a
2 changed files with 47 additions and 5 deletions

View File

@ -9,21 +9,25 @@
</head>
<body>
<a href="https://github.com/NuSkooler/enigma-bbs"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>
<a href="https://github.com/NuSkooler/enigma-bbs/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>
<div id="container">
<div class="sidebar" id="sidebar">
<hr class="mobile-divide" />
<div class="container">
<a href="{{ site.baseurl }}"><img src="{{ '/assets/images/enigma-logo.png' | relative_url }}" class="logo" /></a>
<a href="{{ site.baseurl }}{% link index.md %}"><img src="{{ '/assets/images/enigma-logo.png' | relative_url }}" class="logo" /></a>
</div>
{% capture nav_include %}{% include nav.md %}{% endcapture %}
{{ nav_include | markdownify }}
</div>
<div class="main_area">
<div class="container">
<div class="main_area">
<div class="container">
<section id="main_content">
<a href="#sidebar" class="btn menu_button">MENU</a>
{{ content }}
</section>
</div>
</div>
</div>
</div>
{% if site.google_analytics %}
<script type="text/javascript">

View File

@ -2,3 +2,41 @@
---
@import 'jekyll-theme-hacker';
@media (max-width: 767px) {
html {
scroll-behavior: smooth;
}
.mobile-divide {
border-top: 1px dashed #b5e853;
}
.sidebar {
order: 2;
float: none;
width: 100%;
position: relative !important;
}
.main_area {
padding-left: 0px !important;
}
#container {
display: flex;
flex-direction: column;
display:flex;
}
}
@media (min-width: 768px) {
.menu_button {
display: none;
}
.mobile-divide {
display: none;
}
}