Align the website in the middle of the page
MODIFY
website/src/_includes/layouts/base.njk
website/src/_includes/layouts/base.njk
<link rel="stylesheet" href="{{ '/static/styles.css' | url }}">
</head>
<body>
- <div class="header">
+ <div class="container">
+
+ <div class="header-mobile">
<a class="logo" href="{{ '/' | url }}">
<img src="{{ '/static/img/rome-logo-black.svg' | url }}" alt="Rome" />
<span class="logo-text">Rome</span>
<img src="{{ '/static/img/mobile-handle.svg' | url }}" alt="Menu" />
</a>
</div>
+
<div class="sidebar">
+ <div class="header-desktop">
+ <a class="logo" href="{{ '/' | url }}">
+ <img src="{{ '/static/img/rome-logo-black.svg' | url }}" alt="Rome" />
+ <span class="logo-text">Rome</span>
+ </a>
+ </div>
<div class="table-of-contents">
<div class="toc-container"></div>
</div>
<div class="main">
<div class="overlay"></div>
<div class="content">
+
{{ content | safe }}
</div>
<div class="footer">
</div>
<span class="copyright">Copyright &copy; 2020 Rome.</span>
</div>
- <div>
+ </div>
+ </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.min.js"></script>
<script src="{{ '/static/js/index.js' | url }}"></script>
</body>

MODIFY
website/src/styles/_grid.scss
website/src/styles/_grid.scss
display: block;
}
}
+
+.container{
+ max-width: 1280px;
+ margin: auto;
+ display: flex;
+ flex-direction: row;
+}
\ No newline at end of file

MODIFY
website/src/styles/_header.scss
website/src/styles/_header.scss
-.header {
+// using a different element for desktop header and mobile header
+// so i can align the elements in the middle of the page
+
+.header-mobile {
z-index: 2;
background-color: #ffffff;
+ height: $unit * 4;
+ display: none;
position: fixed;
left: 0;
right: 0;
top: 0;
- height: $unit * 4;
- display: flex;
align-items: center;
padding: 0 $unit;
width: $sidebar-width;
flex-grow: 1;
}
- @include desktop-only() {
- border-right: 1px solid $gray-color;
- }
-
@include mobile-only() {
width: 100%;
border-bottom: 1px solid $gray-color;
+ display: flex;
+ }
+}
+
+.header-desktop{
+ z-index: 2;
+ background-color: #ffffff;
+ height: $unit * 4;
+ display: flex;
+ align-items: center;
+ padding: 0 $unit;
+ width: $sidebar-width;
+ @include mobile-only() {
+ display: none;
}
}

MODIFY
website/src/styles/_variables.scss
website/src/styles/_variables.scss
@@ -2,8 +2,8 @@ $text-color: rgb(28, 30, 33);
$primary-color: rgb(255, 201, 5);
$gray-color: rgba(0, 0, 0, 0.05);
-$sidebar-width: 240px;
-$container-width: 940px;
+$sidebar-width: 20%;
+$container-width: 100%;
$unit: 16px;
$unit-border-radius: 4px;

MODIFY
website/src/styles/index.scss
website/src/styles/index.scss
.sidebar {
@include transition-timing;
- z-index: 1;
width: $sidebar-width;
list-style: none;
overflow-y: auto;
overflow-x: hidden;
font-size: 0.9rem;
- position: fixed;
padding: $unit;
- top: 64px;
- bottom: 0;
- left: 0;
- width: $sidebar-width;
+ position: sticky;
+ top: 0;
+ height: 100vh;
border-right: 1px solid $gray-color;
background-color: #ffffff;
transition-property: transform;
@include mobile-only() {
transform: translateX(-100%);
+ position: fixed;
+ min-width: 256px;
+ top: 64px;
&.visible {
transform: translateX(0);
}
.main {
- margin-left: $sidebar-width;
overflow: hidden;
+ width: 80%;
@include mobile-only() {
margin-top: $unit * 4;
margin-left: 0;
+ width: 100%;
}
}
\ No newline at end of file

Align the website in the middle of the page