Website update
* The CSS related to sidebar is in a single file
Fix margin and padding
* Organize SVG's and add github and twitter icons
Change github and twitter icon color when on dark mode
* Add accessible names to links
* Visual tweaks
MODIFY
website/src/_includes/layouts/base.njk
website/src/_includes/layouts/base.njk
<div class="header-mobile">
<a class="logo" href="{{ '/' | url }}">
- <svg data-name="logo"
- xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360">
- <defs>
- <style>.cls-1{fill:#27272a;}.cls-2{fill:#ffc905;}</style>
- </defs>
- <title>rome-logo-black</title>
- <path class="cls-1" d="M141.35,63.15a9.43,9.43,0,0,1-4.44,12.57c-.3.14-.6.27-.91.38C88.13,93.1,54,137,54,188.57V198H0v-9.43c0-73,47.88-135.3,115.35-160a9.43,9.43,0,0,1,11.76,4.79Z"/>
- <rect class="cls-1" y="216" width="54" height="144"/>
- <path class="cls-1" d="M360,188.57V198H306v-9.43C306,137,271.9,93.11,224,76.1a9.44,9.44,0,0,1-5.76-12c.11-.31.24-.62.38-.92l14.24-29.82a9.43,9.43,0,0,1,11.76-4.79C312.12,53.27,360,115.6,360,188.57Z"/>
- <rect class="cls-1" x="306" y="216" width="54" height="144"/>
- <path class="cls-2" d="M214.26,2.32a9.45,9.45,0,0,1,7.26,13.42l-2.59,5.42-20.06,42a9.48,9.48,0,0,1-9.11,5.35c-3.23-.18-6.49-.27-9.76-.27s-6.53.09-9.76.27a9.48,9.48,0,0,1-9.11-5.35l-20.06-42-2.59-5.42a9.46,9.46,0,0,1,7.26-13.42,254.39,254.39,0,0,1,68.52,0Z"/>
- <path class="cls-2" d="M288,188.57V360H234V188.57c0-28.41-24.18-51.43-54-51.43s-54,23-54,51.43V360H72V188.57c0-56.81,48.36-102.86,108-102.86S288,131.76,288,188.57Z"/>
- </svg>
+
+ {% include "./svg/rome-logo.njk" %}
+
<span class="logo-text">Rome</span>
</a>
<div class="stretch"></div>
<a href="#" class="mobile-handle">
- <svg height="32px" id="menu" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink">
- <path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/>
- </svg>
+ <span class="sr-only">Mobile handle</span>
+ {% include "./svg/mobile-handle.njk" %}
</a>
</div>
<div class="sidebar">
<div class="header-desktop">
<a class="logo" href="{{ '/' | url }}">
- <svg data-name="logo"
- xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360">
- <defs>
- <style>.cls-1{fill:#27272a;}.cls-2{fill:#ffc905;}</style>
- </defs>
- <title>rome-logo-black</title>
- <path class="cls-1" d="M141.35,63.15a9.43,9.43,0,0,1-4.44,12.57c-.3.14-.6.27-.91.38C88.13,93.1,54,137,54,188.57V198H0v-9.43c0-73,47.88-135.3,115.35-160a9.43,9.43,0,0,1,11.76,4.79Z"/>
- <rect class="cls-1" y="216" width="54" height="144"/>
- <path class="cls-1" d="M360,188.57V198H306v-9.43C306,137,271.9,93.11,224,76.1a9.44,9.44,0,0,1-5.76-12c.11-.31.24-.62.38-.92l14.24-29.82a9.43,9.43,0,0,1,11.76-4.79C312.12,53.27,360,115.6,360,188.57Z"/>
- <rect class="cls-1" x="306" y="216" width="54" height="144"/>
- <path class="cls-2" d="M214.26,2.32a9.45,9.45,0,0,1,7.26,13.42l-2.59,5.42-20.06,42a9.48,9.48,0,0,1-9.11,5.35c-3.23-.18-6.49-.27-9.76-.27s-6.53.09-9.76.27a9.48,9.48,0,0,1-9.11-5.35l-20.06-42-2.59-5.42a9.46,9.46,0,0,1,7.26-13.42,254.39,254.39,0,0,1,68.52,0Z"/>
- <path class="cls-2" d="M288,188.57V360H234V188.57c0-28.41-24.18-51.43-54-51.43s-54,23-54,51.43V360H72V188.57c0-56.81,48.36-102.86,108-102.86S288,131.76,288,188.57Z"/>
- </svg>
+ {% include "./svg/rome-logo.njk" %}
<h1 class="logo-text">Rome</h1>
</a>
</div>
<nav aria-labelledby="external-links" class="menu external-links">
<h2 id="external-links" class="sr-only">External Links</h2>
-
- <a target="_blank" href="https://github.com/romejs/rome">
- <img src="{{ '/static/img/github-icon.png' | url }}" alt="GitHub Repo">
+ <ul>
+ <li>
+ <a target="_blank" rel="noopener" href="https://github.com/romejs/rome">
+ <span class="sr-only">GitHub Repo</span>
+ {% include "./svg/github.njk" %}
</a>
-
- <a target="_blank" href="https://twitter.com/romejsdev">
- <img src="{{ '/static/img/twitter-icon.png' | url }}" alt="Twitter Account">
+ </li>
+ <li>
+ <a target="_blank" rel="noopener" href="https://twitter.com/romejsdev">
+ <span class="sr-only">Twitter Account</span>
+ {% include "./svg/twitter.njk" %}
</a>
+ </li>
+ </ul>
</nav>
<nav aria-labelledby="site-navigation" class="menu">

MODIFY
website/src/_includes/layouts/sections/footer.njk
website/src/_includes/layouts/sections/footer.njk
</div>
<div class="logo">
- <svg data-name="logo"
- xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360">
- <defs>
- <style>.cls-1{fill:#27272a;}.cls-2{fill:#ffc905;}</style>
- </defs>
- <title>rome-logo-black</title>
- <path class="cls-1" d="M141.35,63.15a9.43,9.43,0,0,1-4.44,12.57c-.3.14-.6.27-.91.38C88.13,93.1,54,137,54,188.57V198H0v-9.43c0-73,47.88-135.3,115.35-160a9.43,9.43,0,0,1,11.76,4.79Z"/>
- <rect class="cls-1" y="216" width="54" height="144"/>
- <path class="cls-1" d="M360,188.57V198H306v-9.43C306,137,271.9,93.11,224,76.1a9.44,9.44,0,0,1-5.76-12c.11-.31.24-.62.38-.92l14.24-29.82a9.43,9.43,0,0,1,11.76-4.79C312.12,53.27,360,115.6,360,188.57Z"/>
- <rect class="cls-1" x="306" y="216" width="54" height="144"/>
- <path class="cls-2" d="M214.26,2.32a9.45,9.45,0,0,1,7.26,13.42l-2.59,5.42-20.06,42a9.48,9.48,0,0,1-9.11,5.35c-3.23-.18-6.49-.27-9.76-.27s-6.53.09-9.76.27a9.48,9.48,0,0,1-9.11-5.35l-20.06-42-2.59-5.42a9.46,9.46,0,0,1,7.26-13.42,254.39,254.39,0,0,1,68.52,0Z"/>
- <path class="cls-2" d="M288,188.57V360H234V188.57c0-28.41-24.18-51.43-54-51.43s-54,23-54,51.43V360H72V188.57c0-56.81,48.36-102.86,108-102.86S288,131.76,288,188.57Z"/>
- </svg>
+ {% include "../svg/rome-logo.njk" %}
<span class="logo-text">Rome</span>
</div>
</div>

ADD
website/src/_includes/layouts/svg/github.njk
+<svg data-name="github" xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" viewBox="0 0 32 31.21"><path class="cls-1" d="M16,.29a15.72,15.72,0,0,0-5,30.64c.79.14,1.08-.34,1.08-.76s0-1.36,0-2.67c-4.38.95-5.3-2.11-5.3-2.11A4.16,4.16,0,0,0,5,23.09c-1.42-1,.11-1,.11-1a3.3,3.3,0,0,1,2.41,1.62,3.35,3.35,0,0,0,4.58,1.31,3.31,3.31,0,0,1,1-2.1C9.64,22.56,6,21.21,6,15.19A6.1,6.1,0,0,1,7.59,11a5.68,5.68,0,0,1,.15-4.16s1.32-.42,4.33,1.61a14.87,14.87,0,0,1,7.87,0c3-2,4.32-1.61,4.32-1.61A5.58,5.58,0,0,1,24.41,11,6.06,6.06,0,0,1,26,15.19c0,6-3.68,7.37-7.18,7.76a3.72,3.72,0,0,1,1.07,2.91c0,2.1,0,3.79,0,4.31s.28.91,1.08.76A15.73,15.73,0,0,0,16,.29Z"/></svg>
\ No newline at end of file

ADD
website/src/_includes/layouts/svg/mobile-handle.njk
+<svg height="32px" id="menu" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/>
+</svg>
\ No newline at end of file

ADD
website/src/_includes/layouts/svg/rome-logo.njk
+<svg data-name="logo"
+ xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360">
+ <defs>
+ <style>.cls-1{fill:#27272a;}.cls-2{fill:#ffc905;}</style>
+ </defs>
+ <title>rome-logo</title>
+ <path class="cls-1" d="M141.35,63.15a9.43,9.43,0,0,1-4.44,12.57c-.3.14-.6.27-.91.38C88.13,93.1,54,137,54,188.57V198H0v-9.43c0-73,47.88-135.3,115.35-160a9.43,9.43,0,0,1,11.76,4.79Z"/>
+ <rect class="cls-1" y="216" width="54" height="144"/>
+ <path class="cls-1" d="M360,188.57V198H306v-9.43C306,137,271.9,93.11,224,76.1a9.44,9.44,0,0,1-5.76-12c.11-.31.24-.62.38-.92l14.24-29.82a9.43,9.43,0,0,1,11.76-4.79C312.12,53.27,360,115.6,360,188.57Z"/>
+ <rect class="cls-1" x="306" y="216" width="54" height="144"/>
+ <path class="cls-2" d="M214.26,2.32a9.45,9.45,0,0,1,7.26,13.42l-2.59,5.42-20.06,42a9.48,9.48,0,0,1-9.11,5.35c-3.23-.18-6.49-.27-9.76-.27s-6.53.09-9.76.27a9.48,9.48,0,0,1-9.11-5.35l-20.06-42-2.59-5.42a9.46,9.46,0,0,1,7.26-13.42,254.39,254.39,0,0,1,68.52,0Z"/>
+ <path class="cls-2" d="M288,188.57V360H234V188.57c0-28.41-24.18-51.43-54-51.43s-54,23-54,51.43V360H72V188.57c0-56.81,48.36-102.86,108-102.86S288,131.76,288,188.57Z"/>
+</svg>
\ No newline at end of file

ADD
website/src/_includes/layouts/svg/twitter.njk
+
+<svg data-name="twitter" xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" viewBox="0 0 32 31.21"><defs><style></style></defs><path class="cls-1" d="M10.21,28.28c11.77,0,18.21-9.75,18.21-18.21,0-.28,0-.55,0-.83a12.75,12.75,0,0,0,3.2-3.31,12.74,12.74,0,0,1-3.68,1A6.37,6.37,0,0,0,30.73,3.4,12.84,12.84,0,0,1,26.67,5a6.41,6.41,0,0,0-10.91,5.84A18.15,18.15,0,0,1,2.58,4.1a6.39,6.39,0,0,0,2,8.54,6.32,6.32,0,0,1-2.91-.8v.08A6.41,6.41,0,0,0,6.79,18.2a6.42,6.42,0,0,1-2.89.11,6.4,6.4,0,0,0,6,4.44,12.89,12.89,0,0,1-8,2.75A11.23,11.23,0,0,1,.4,25.4a18.09,18.09,0,0,0,9.81,2.87"/></svg>
\ No newline at end of file

MODIFY
website/src/styles/_footer.scss
website/src/styles/_footer.scss
}
.row > div{
- border-right: 1px solid var(--soft-border-color);
margin-right: $unit;
}

MODIFY
website/src/styles/_hero.scss
website/src/styles/_hero.scss
position: relative;
padding: $unit * 2;
border-bottom: 1px solid var(--soft-border-color);
- border-right: 1px solid var(--soft-border-color);
@include pattern-white;
@include mobile-only() {

ADD
website/src/styles/_sidebar.scss
+.sidebar {
+ @include transition-timing;
+ width: $sidebar-width;
+ list-style: none;
+ overflow-y: auto;
+ overflow-x: hidden;
+ font-size: 0.95rem;
+ position: sticky;
+ top: 0;
+ height: 100vh;
+ border-right: 1px solid var(--soft-border-color);
+ border-left: 1px solid var(--soft-border-color);
+ transition-property: transform;
+ z-index: 2;
+ min-width: 256px;
+ display: flex;
+ flex-direction: column;
+
+ @include desktop-only() {
+ @include top-border;
+ border-top-width: 0;
+ transition-duration: 150ms;
+ padding-top: $unit * 2;
+ }
+
+ @include mobile-only() {
+ transform: translateX(-100%);
+ position: fixed;
+ min-width: 256px;
+ padding-top: 64px;
+ background: var(--background-color);
+ height: 100%;
+ -webkit-overflow-scrolling: touch;
+
+ &.visible {
+ transform: translateX(0);
+ }
+ }
+
+ .menu {
+ border-bottom: 1px solid var(--soft-border-color);
+ font-weight: bold;
+ padding: $unit 0 $unit $unit * 2;
+
+ ul {
+ margin: 0;
+ padding: 0;
+ }
+
+ li {
+ list-style-type: none;
+ }
+
+ a {
+ @include transition-timing;
+ text-decoration: none;
+ font-size: 1.1em;
+ transition-duration: 100ms;
+ transition-property: color;
+ height: auto;
+ padding: $unit / 5 $unit / 2;
+ margin-left: $unit / 2;
+ display: inline-block;
+ color: var(--logo-font-color);
+ padding-left: 0;
+ margin-left: 0;
+ }
+
+ a:hover {
+ text-decoration: dashed;
+ opacity: 0.7;
+ }
+
+ a:active {
+ padding-left: $unit / 1.5;
+ text-decoration: dashed;
+ opacity: 0.6;
+ }
+ }
+
+ .external-links {
+
+ @include desktop-only() {
+ border-top: 1px solid var(--soft-border-color);
+ }
+
+ ul{
+ display: flex;
+ }
+
+ svg {
+ .cls-1 {
+ fill: var(--logo-font-color);
+ }
+ }
+
+ a{
+ margin-right: $unit / 3;
+ }
+
+ a:active {
+ padding-left: 0;
+ }
+
+ img {
+ width: 24px;
+ height: 24px;
+ }
+ }
+
+ .mode-switch {
+ text-align: center;
+ color: var(--background-color);
+ background: var(--logo-font-color);
+ border: 0;
+ padding: 5px 10px;
+ cursor: pointer;
+ width: 100%;
+ margin: auto $unit * 2 $unit $unit * 2;
+ font-weight: bold;
+ }
+
+ .mode-switch-container {
+ margin-top: $unit;
+ height: 100%;
+ display: flex;
+ width: 100%;
+ }
+
+}
\ No newline at end of file

MODIFY
website/src/styles/_table-of-contents.scss
website/src/styles/_table-of-contents.scss
.table-of-contents {
margin-left: $unit;
+ margin-top: $unit;
ol {
margin: 0;

MODIFY
website/src/styles/index.scss
website/src/styles/index.scss
@import "_grid";
@import "_global";
@import "_header";
+@import "_sidebar";
@import "_table-of-contents";
@import "_content";
@import "_hero";
overflow: hidden;
}
-.sidebar {
- @include transition-timing;
- width: $sidebar-width;
- list-style: none;
- overflow-y: auto;
- overflow-x: hidden;
- font-size: 0.95rem;
- position: sticky;
- top: 0;
- height: 100vh;
- border-right: 1px solid var(--soft-border-color);
- transition-property: transform;
- z-index: 2;
- min-width: 256px;
- display: flex;
- flex-direction: column;
-
- @include desktop-only() {
- @include top-border;
- border-top-width: 0;
- transition-duration: 150ms;
- padding-top: $unit * 2;
- }
-
- @include mobile-only() {
- transform: translateX(-100%);
- position: fixed;
- min-width: 256px;
- padding-top: 64px + $unit;
- background: var(--background-color);
- height: 100%;
- -webkit-overflow-scrolling: touch;
-
- &.visible {
- transform: translateX(0);
- }
- }
-}
-
.overlay{
transform: translateX(100%);
width: 100%;
.main {
overflow: hidden;
width: 80%;
-
+ border-right: 1px solid var(--soft-border-color);
@include mobile-only() {
margin-top: $unit * 4;
margin-left: 0;
width: 100%;
}
}
-.menu {
- padding-bottom: $unit;
- border-bottom: 1px solid var(--soft-border-color);
- margin-bottom: $unit;
- font-weight: bold;
- margin-left: $unit;
-
- ul {
- margin: 0;
- padding: 0;
- }
-
- li {
- list-style-type: none;
- }
-
- a {
- @include transition-timing;
- text-decoration: none;
- font-size: 1.1em;
- transition-duration: 100ms;
- transition-property: color;
- height: auto;
- padding: $unit / 5 $unit / 2;
- margin-left: $unit / 2;
- display: inline-block;
- color: var(--logo-font-color);
- }
-
- a:hover {
- text-decoration: dashed;
- opacity: 0.7;
- }
-
- a:active {
- padding-left: $unit / 1.5;
- text-decoration: dashed;
- opacity: 0.6;
- }
-}
-
-.external-links {
- a {
- padding: 0;
- }
-
- img {
- width: 24px;
- height: 24px;
- }
-}
-
-
-.mode-switch {
- text-align: center;
- color: var(--background-color);
- background: var(--logo-font-color);
- border: 0;
- padding: 5px 10px;
- cursor: pointer;
- width: 100%;
- margin: auto $unit * 2 $unit $unit * 2;
- font-weight: bold;
-}
-
-.mode-switch-container {
- margin-top: $unit;
- height: 100%;
- display: flex;
- width: 100%;
-}
.skip-to-content a {
@include transition-timing;

DELETE
website/static/img/github-icon.png
website/static/img/github-icon.png
Binary files a/website/static/img/github-icon.png and /dev/null differ

DELETE
website/static/img/twitter-icon.png
website/static/img/twitter-icon.png
Binary files a/website/static/img/twitter-icon.png and /dev/null differ

Website update (#638)

* The CSS related to sidebar is in a single file

Fix margin and padding

* Organize SVG's and add github and twitter icons

- Change github and twitter icon color when on dark mode

* Add accessible names to links

* Visual tweaks