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

refactor: set right side as absolute

feat/integration_ideo
Nicolas Doby 2022-10-21 14:25:57 +02:00
parent 8c0034d325
commit 9cf7f75df1
2 changed files with 30 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/_layouts/base.njk
View File

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

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

@ -57,42 +57,50 @@ body {
} }
main { main {
max-width: 1200px; max-width: 50rem;
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
position: relative;
} }
.main-content { .main-content {
margin: auto; margin: auto;
width: 1200px; width: 50rem;
} }
.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;
} }
.right-side .title { .nav-right .title {
color: var(--text-color-secondary); color: var(--text-color-secondary);
font-weight: 700; font-weight: 700;
} }
.right-side .tags { .nav-right .tags {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 5px; gap: 5px;
} }
.right-side .links { .nav-right .links {
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.right-side .tags, .nav-right .tags,
.right-side .links { .nav-right .links {
padding: 0; padding: 0;
margin: 12px 0 23px 0; margin: 12px 0 23px 0;
list-style: none; list-style: none;
@ -384,7 +392,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: 1200px) { @media only screen and (max-width: 1550px) {
main { main {
max-width: 100%; max-width: 100%;
flex-direction: column; flex-direction: column;
@ -394,9 +402,15 @@ 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: unset;
padding-left: 0; padding-left: 0;
padding-top: 5rem; }
.nav-right {
width: 100%;
} }
.main-footer { .main-footer {
flex-direction: column-reverse; flex-direction: column-reverse;