fix: correct for small screen

feat/integration_ideo
Nicolas Doby 2022-10-24 10:20:08 +02:00
parent 5ae9f63745
commit 6fcf990dd7
2 changed files with 12 additions and 29 deletions

View File

@ -26,10 +26,8 @@
{{ content | safe }}
</div>
<div class="right-side">
<nav class="nav-right">
{% include "tagslist.njk" %}
{% include "other_links.njk" %}
</nav>
</div>
</main>

View File

@ -58,50 +58,42 @@ body {
}
main {
max-width: 50rem;
max-width: 1200px;
margin: 0 auto;
display: flex;
position: relative;
}
.main-content {
margin: auto;
width: 50rem;
width: 1200px;
}
.right-side {
position: absolute;
left: 110%;
height: 100%;
max-width: 300px;
margin-right: 30px;
}
.nav-right {
position: sticky;
top: 1rem;
align-self: flex-start;
width: 300px;
padding-left: 60px;
}
.nav-right .title {
.right-side .title {
color: var(--text-color-secondary);
font-weight: 700;
}
.nav-right .tags {
.right-side .tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.nav-right .links {
.right-side .links {
padding: 0;
list-style: none;
}
.nav-right .tags,
.nav-right .links {
.right-side .tags,
.right-side .links {
padding: 0;
margin: 12px 0 23px 0;
list-style: none;
@ -398,7 +390,7 @@ pre[class*="language-diff-"] {
color: inherit; /* override del, ins, mark defaults */
}
@media only screen and (max-width: 1550px) {
@media only screen and (max-width: 1200px) {
main {
max-width: 100%;
flex-direction: column;
@ -408,16 +400,9 @@ pre[class*="language-diff-"] {
max-width: 100%;
}
.right-side {
position: relative;
left: unset;
height: unset;
width: 100%;
max-width: 50rem;
padding-left: 0;
margin: 0 auto;
}
.nav-right {
width: 100%;
padding-top: 5rem;
}
.main-footer {
flex-direction: column-reverse;