Lots of visual tweaks
DELETE
website/src/_includes/docs/Intro.md
-<div class="hero">
- <h1 toc-exclude>Your next-gen JavaScript toolchain.</h1>
- <h2 toc-exclude>Focus on code, let Rome take care of the rest!</h2>
-</div>
\ No newline at end of file

MODIFY
website/src/_includes/layouts/base.njk
website/src/_includes/layouts/base.njk
</div>
<div class="main">
<div class="overlay"></div>
+ <div class="hero">
+ <h1>Your next-gen JavaScript toolchain.</h1>
+ <h2>Focus on code, let Rome take care of the rest!</h2>
+ </div>
<div class="content">
{{ content | safe }}
+
</div>
<div class="footer">
<div class="row">

MODIFY
website/src/index.md
website/src/index.md
@@ -3,8 +3,6 @@ title: A JavaScript toolchain | Rome
layout: layouts/base.njk
---
-{% doc "Intro.md" %}
-
{% doc "Introduction.md" %}
{% doc "Installation.md" %}

MODIFY
website/src/styles/_footer.scss
website/src/styles/_footer.scss
margin: 0 auto;
padding: $unit;
border-top: 1px solid $gray-color;
+ @include pattern-white;
h4 {
margin: $unit 0;
a {
text-decoration: none;
}
+
}
.copyright {

MODIFY
website/src/styles/_header.scss
website/src/styles/_header.scss
top: 0;
align-items: center;
padding: 0 $unit;
- width: $sidebar-width;
.stretch {
flex-grow: 1;
display: flex;
align-items: center;
padding: 0 $unit;
- width: $sidebar-width;
+ width: 100%;
@include mobile-only() {
display: none;
}
display: inline-flex;
align-items: flex-end;
text-decoration: none;
- font-size: 32px;
- margin-bottom: 16px;
+ font-size: 44px;
+ margin-bottom: $unit * 2;
img {
width: 1em;
font-family: Libre Baskerville, serif;
font-weight: bold;
position: relative;
- top: 4px;
+ top: 5.5px;
+ @include mobile-only() {
+ top: 3.5px;
+ }
+ }
+
+ @include mobile-only() {
+ font-size: 32px;
+ margin-bottom: 0;
}
}

MODIFY
website/src/styles/_hero.scss
website/src/styles/_hero.scss
.hero {
position: relative;
- padding: $unit * 2 0;
+ padding: $unit * 2;
color: rgb(68, 73, 80);
+ border-bottom: 1px solid rgba(0,0,0,.05);
+ @include pattern-white;
- &::before {
- content: "";
- position: absolute;
- left: -100%;
- right: -100%;
- top: 0;
- bottom: 0;
- background: #ffffff;
- background-image: url(/static/img/pattern-white.png),
- radial-gradient(circle, #fff 0, rgba(241, 241, 239, 0.7) 100%);
- background-repeat: repeat;
- background-position: 50%;
- background-size: 125px;
- z-index: -1;
+ @include mobile-only() {
+ text-align: center;
}
}
\ No newline at end of file

MODIFY
website/src/styles/_mixins.scss
website/src/styles/_mixins.scss
transition-duration: 200ms;
transition-timing-function: cubic-bezier(0.57, 0.33, 0.19, 0.97);
}
+
+@mixin pattern-white{
+ background: #ffffff;
+ background-image: url(/static/img/pattern-white.png),
+ linear-gradient(90deg, rgba(241,241,239,0.7) 60%, rgba(255,255,255,1) 100%);;
+ background-repeat: repeat;
+ background-position: 50%;
+ z-index: -1;
+}
\ No newline at end of file

MODIFY
website/src/styles/_table-of-contents.scss
website/src/styles/_table-of-contents.scss
margin: 0;
padding: 0;
+
ol{
margin-left: $unit;
}
+
}
a {
text-decoration: none;
height: auto;
- padding: $unit / 6 $unit / 2;
- border-radius: 4px;
+ padding: $unit / 4 $unit / 2;
+ margin-left: $unit / 2;
+ border-radius: 2px;
display: inline-block;
&.active {
color: $primary-color;
- background-color: $gray-color;
+ background-color: $text-color;
font-weight: bold;
}

MODIFY
website/src/styles/index.scss
website/src/styles/index.scss
overflow-x: hidden;
font-size: 0.9rem;
padding: $unit;
+ padding-right: 0;
+ padding-top: $unit * 2;
position: sticky;
top: 0;
height: 100vh;

Lots of visual tweaks