uuupah/11ty_neocities
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed some mobile layout issues

Browse Source
This commit is contained in:
jonathan
2023-02-24 19:26:04 +10:30
parent f433710c3a
commit bc64c51586
3 changed files with 41 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/_includes/layout/base.njk
View File

@ -18,10 +18,12 @@
<body> <body>
<main> <main>
<header>{% include 'partials/header.njk' %}</header> <header>{% include 'partials/header.njk' %}</header>
<hr/>
<article> <article>
<h1>{{ title }}</h1> <h1>{{ title }}</h1>
{{ content | safe }} {{ content | safe }}
</article> </article>
<hr/>
<footer>{% include 'partials/footer.njk' %}</footer> <footer>{% include 'partials/footer.njk' %}</footer>
</main> </main>
<aside>{% include 'partials/sidebar.njk' %}</aside> <aside>{% include 'partials/sidebar.njk' %}</aside>

10
src/_includes/partials/navigation.njk
View File

@ -1,8 +1,8 @@
<nav> <nav>
<a href="/">Home</a><br/> <a href="/">/</a><br/>
<a href="/blog/">Blog</a><br/> <a href="/blog/">/blog</a><br/>
<a href="/about/">About</a><br/> <a href="/about/">/about</a><br/>
<a href="/links/">Links</a><br/> <a href="/links/">/links</a><br/>
<a href="/contact/">Contact</a> <a href="/contact/">/contact</a>
</nav> </nav>
{#INFO: It's important to stucture your links with the slashes / on either side of the href /about/ to ensure the links are always from the root of the site.#} {#INFO: It's important to stucture your links with the slashes / on either side of the href /about/ to ensure the links are always from the root of the site.#}

39
src/css/styles.css
View File

@ -53,6 +53,10 @@ a:hover {
text-decoration: none; text-decoration: none;
} }
hr {
border: 1px solid var(--border);
}
body { body {
color: var(--text); color: var(--text);
background: var(--bg); background: var(--bg);
@ -80,11 +84,6 @@ main {
box-sizing: border-box; box-sizing: border-box;
} }
@media all and (max-width: 1000px) {
body {
flex-direction: column-reverse;
}
}
aside { aside {
position: sticky; position: sticky;
@ -117,6 +116,36 @@ aside {
position: relative; position: relative;
} }
@media all and (max-width: 1100px) {
body {
flex-direction: column-reverse;
max-width: 100%;
/* this is a pretty bad solution */
margin: -20px 20px 20px;
}
main {
max-width: 100%;
}
aside {
position: relative;
}
/* nav {
display: flex;
flex-direction: row;
gap: 1rem;
} */
.sidebar-contents {
/* padding: 15px; */
margin: 0 0 -25px 0;
/* width: min-content; */
}
}
/* body > footer { /* body > footer {
margin-top: 4rem; margin-top: 4rem;
padding: 2rem 1rem 1.5rem 1rem; padding: 2rem 1rem 1.5rem 1rem;