internal
/
itsonus-blog
4
0
Fork 0
Code Issues 7 Pull Requests Releases Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/_layouts/base.njk
View File

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

35
src/assets/css/index.scss
View File

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