Clean up mobile navigation
ADD
website/docs/src/_includes/external-links.liquid
+<a class="foreground-svg external-link" target="_blank" href="https://discord.gg/rome">{% include svg/discord.svg %}<span class="sr-only">Discord</span></a>
+<a class="foreground-svg external-link" target="_blank" href="https://github.com/rome/tools">{% include svg/footer/github.svg %}<span class="sr-only">GitHub</span></a>
+<a class="foreground-svg external-link" target="_blank" href="https://twitter.com/rometools">{% include svg/footer/twitter.svg %}<span class="sr-only">Twitter</span></a>

MODIFY
website/docs/src/_includes/layout.liquid
website/docs/src/_includes/layout.liquid
@@ -54,6 +54,10 @@ social-image: social-logo.png
{% assign sidebar-enabled = toccontent != "" %}
<div class="docs-header">
+ <a href="https://rome.tools/" class="back foreground-svg">
+ {% include svg/chevron-left.svg %}
+ </a>
+
<a class="logo" href="/">
{% include svg/rome-logo.svg %}
@@ -62,9 +66,7 @@ social-image: social-logo.png
<div id="docsearch"></div>
- <a class="foreground-svg link" target="_blank" href="https://discord.gg/rome">{% include svg/discord.svg %}<span class="sr-only">Discord</span></a>
- <a class="foreground-svg link" target="_blank" href="https://github.com/rome/tools">{% include svg/footer/github.svg %}<span class="sr-only">GitHub</span></a>
- <a class="foreground-svg link" target="_blank" href="https://twitter.com/rometools">{% include svg/footer/twitter.svg %}<span class="sr-only">Twitter</span></a>
+ {% include external-links.liquid %}
{% if sidebar-enabled %}
<a href="#" class="mobile-handle">
@@ -76,6 +78,10 @@ social-image: social-logo.png
<div class="docs-main">
<aside class="docs-sidebar sidebar">
+ <div class="external-links">
+ {% include external-links.liquid %}
+ </div>
+
<h2>Guides</h2>
<ul>

ADD
website/docs/src/_includes/layouts/svg/chevron-left.svg
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="320"
+ height="448"
+ viewBox="0 0 320 448"
+ id="svg2"
+ version="1.1"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="chevron-left.svg">
+ <title
+ id="title3340">chevron-left</title>
+ <defs
+ id="defs4" />
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="0.7"
+ inkscape:cx="83.19264"
+ inkscape:cy="244.19737"
+ inkscape:document-units="px"
+ inkscape:current-layer="layer1"
+ showgrid="true"
+ fit-margin-top="448"
+ fit-margin-right="384"
+ fit-margin-left="0"
+ fit-margin-bottom="0"
+ units="px"
+ inkscape:window-width="1196"
+ inkscape:window-height="852"
+ inkscape:window-x="761"
+ inkscape:window-y="439"
+ inkscape:window-maximized="0"
+ inkscape:snap-bbox="true"
+ inkscape:bbox-nodes="true"
+ showborder="true">
+ <inkscape:grid
+ type="xygrid"
+ id="grid3347"
+ spacingx="16"
+ spacingy="16"
+ empspacing="2"
+ originx="0"
+ originy="-1.7498462e-005" />
+ </sodipodi:namedview>
+ <metadata
+ id="metadata7">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title>chevron-left</dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1"
+ transform="translate(0,-604.36224)">
+ <path
+ style="fill-opacity:1;stroke-width:32;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none"
+ d="M 203.56297,988.36226 240,950.9021 120.80698,828.36225 240,705.82242 l -36.43703,-37.46016 -36.40349,37.42566 0.0335,0.0344 L 48,828.36226 l 119.19302,122.53983 -0.0335,0.0344 36.4035,37.42568 z"
+ id="rect4331"
+ inkscape:connector-curvature="0" />
+ </g>
+</svg>

MODIFY
website/docs/src/styles/_docs.scss
website/docs/src/styles/_docs.scss
@@ -44,6 +44,24 @@ footer {
display: flex;
align-items: center;
+ .back {
+ margin-right: 5px;
+ border-radius: 50%;
+ width: 40px;
+ height: 40px;
+ padding: 5px;
+
+ svg {
+ display: block;
+ width: 30px;
+ height: 30px;
+ }
+
+ &:hover {
+ background: rgba(0, 0, 0, 0.05);
+ }
+ }
+
.DocSearch:not(:hover) {
box-shadow: inset 0 0 0 2px var(--hard-border-color);
}
@@ -76,7 +94,7 @@ footer {
height: 30px;
}
- .link {
+ .external-link {
margin-left: 24px;
display: inline-block;
opacity: 0.6;
@@ -84,6 +102,10 @@ footer {
&:hover {
opacity: 1;
}
+
+ @include mobile-only {
+ display: none;
+ }
}
.logo {
@@ -142,11 +164,38 @@ footer {
}
}
+ .external-links {
+ display: flex;
+ flex-direction: row;
+ gap: 24px;
+ align-items: center;
+ justify-content: center;
+ padding-bottom: 10px;
+ border-bottom: 1px solid var(--hard-border-color);
+ margin-bottom: 30px;
+
+ svg {
+ height: 30px;
+ }
+
+ .external-link {
+ opacity: 0.6;
+
+ &:hover {
+ opacity: 1;
+ }
+ }
+
+ @include desktop-only {
+ display: none;
+ }
+ }
+
.emoji {
margin-right: 6px;
}
- a {
+ li a {
display: block;
text-decoration: none;
border-radius: 8px;

Clean up mobile navigation