src/components/APIArguments.astro

@@ -1,61 +0,0 @@
----
-const {args} = Astro.props;
----
-
-{(args && args.length) ? (
-    <h3>Arguments</h3>
-    <table class="arguments">
-        <tbody>
-            {args.map(arg=>(
-                <tr class="argument">
-                    <th>
-                        <strong>{arg.name}</strong>
-                        <br/>
-                        <span>
-                            {!arg.is_required && (
-                                "optional "
-                            )}
-                            {arg.type}
-                        </span>
-                    </th>
-                    <th>
-                        <span>{arg.description}</span>
-                    </th>
-                </tr>
-        ))}
-        </tbody>
-    </table>
-) : ''}
-<style>
-    .arguments {
-            border: 1px solid var(--tertiary-background);
-        }
-
-        .arguments .left, .arguments .right {
-            display: flex;
-            flex-direction: column;
-        }
-
-        .arguments .argument {
-            background-color: var(--tertiary-background);
-            border-bottom: 1px solid var(--tertiary-background);
-        }
-
-        .arguments .argument th {
-            text-align: left;
-            padding: 0.25rem 1rem;
-        }
-
-        .arguments .argument span {
-            text-align: left;
-            font-weight: normal;
-        }
-
-        .arguments .argument .left, .arguments .argument .right {
-            padding: 0.5rem 1rem;
-        }
-
-        .arguments .argument:nth-child(2n) {
-            background-color: var(--secondary-background);
-        }
-</style>

src/components/APIExamples.astro

@@ -1,71 +0,0 @@
----
-import { Code } from "astro/components";
-
-const {examples, cmd} = Astro.props;
-
-if (!examples) return;
-
-// Treat title and output as metadata and remove from examples
-const title = examples.title;
-const output = examples.output;
-delete examples.title;
-delete examples.output;
-
-function setExample(example, cmd){
-                console.log(example, cmd);
-                document.body.classList.toggle(example);
-            }
-
----
-
-<div class="examples">
-    {examples ? (
-        <div>
-            <h3>Examples</h3>
-            <h4>{title}</h4>
-            {Object.keys(examples).map(example=>(
-                <button data-example={example}>{example}</button>
-            ))}
-            {Object.keys(examples).map(example=>(
-                <div class:list={["example", cmd, example]}>
-                    <p>{example}</p>
-                    <Code lang={"bash"} code={`${examples[example]}`} />
-                </div>
-            ))}
-        </div>
-        <script define:vars={{examples, cmd}}>
-            
-            document.querySelectorAll(`.${cmd} button`).forEach(btn=>{
-                btn.addEventListener('click', (e)=>{
-                    Object.keys(examples).map(example=>{
-                        document.body.classList.remove(example);
-                    });
-                    document.body.classList.add(btn.getAttribute('data-example'));
-                })
-            })
-            
-        </script>
-    ) : ''}
-</div>
-<style>
-    .example {
-        display: none;
-    }
-
-    body:not(.curl, .lbrynet, .python) .examples .example:first-of-type {
-        display: block;
-    }
-
-    body.curl .example.curl {
-        display: block;
-    }
-
-    body.lbrynet .example.lbrynet {
-        display: block;
-    }
-
-    body.python .example.python {
-        display: block;
-    }
-
-</style>

src/components/Header.astro

@@ -8,7 +8,6 @@ const links = [
   { name: "Overview", href: "/overview" },
   { name: "Playground", href: "/playground" },
   { name: "Resources", href: "/resources"},
-  { name: "API", href: "/api"},
   { name: "Tutorials", href: "/tutorials"},
   { name: "Community", href: "/community"}
 ]
@@ -17,10 +16,6 @@ const isActive = (href: string)=>{
     return href === pathname || href === pathname.split('/').slice(0,2).join('/');
 }
 
-function handleMenu(e) {
-  console.log(e);
-}
-
 ---
 
 <header>
@@ -40,24 +35,7 @@ function handleMenu(e) {
     </div>
     <div class="right">
       <div class="search"><p>Search TODO</p></div>
-        <btn id="menu">
+      <btn class="menu"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></btn>
-            <span></span>
-            <span></span>
-            <span></span>
-        </btn>
     </div>
   </nav>
 </header>
-<script>
-    const btn = document.querySelector('#menu');
-
-    btn.addEventListener('click', () => {
-        btn.classList.toggle('open');
-        document.querySelectorAll('.sidebar').forEach(sidebar=>{
-            sidebar.classList.toggle('active');
-        })
-    });
-</script>
-<style>
-    
-</style>

src/components/TableOfContents.astro

@@ -3,10 +3,12 @@
 import TableOfContentsHeading from "./TableOfContentsHeading.astro";
 import TocItem from '../utils/generateToc.ts';
 const { headings, edit } = Astro.props;
-import { REPOSITORY } from "../config";
+import { REPOSITORY, edit_page } from "../config";
 
 const toc = headings && headings.length ? TocItem(headings) : [];
 
+console.log(edit);
+
 ---
 
 <section class="toc">
@@ -21,19 +23,22 @@ const toc = headings && headings.length ? TocItem(headings) : [];
 </section>
 <style is:inline>
     .toc {
-        width: calc(var(--sidebar-width) - 2rem);
+        position: fixed;
-        height: 100%;
+        width: var(--sidebar-width);
-        overflow-y: scroll;
+        height: 100vh;
-        /* max-height: 80%; */
+        overflow-y: auto;
-        /* inset-block: 0; */
+        inset-block: 0;
+        inset-inline-end: 0;
+        padding-top: var(--nav-height);
+        background-color: var(--secondary-background);
         transition: 0.3s;
+        z-index: 10;
     }
 
     .toc .container {
         display: flex;
         flex-direction: column;
         padding: 1rem 1rem 0;
-        overflow-y: auto;
     }
 
     .toc .container summary {
@@ -55,15 +60,6 @@ const toc = headings && headings.length ? TocItem(headings) : [];
 
     .toc ul li:hover {
         font-size: 0.785rem;
-    }
+        /* border-left: 1px solid var(--header-text); */
-
-    @media only screen and (max-width: 750px) {
-        /* .toc {
-            margin-top: var(--nav-height);
-            margin-bottom: 0;
-            inset-inline-start: 0;
-            inset-inline-end: unset;
-            transform: translateX(-100%);
-        } */
     }
 </style>

src/components/TableOfContentsHeading.astro

@@ -39,7 +39,7 @@ const { heading } = Astro.props;
     }
 
   li ul {
-    list-style: none;
+    /* list-style: none; */
     padding-inline-start: 1rem;
     /* border-left: 1px solid var(--secondary-background); */
   }

src/config.js

@@ -72,25 +72,20 @@ export const featured = [
 ]
 
 export const REDIRECTS = {
-  // "/api/blockchain": "/api/lbrycrd",
+  "/api/blockchain": "/api/lbrycrd",
-  // "/api/lbry": "/api/sdk",
+  "/api/lbry": "/api/sdk",
-  // "/api/protocol": "/api/sdk",
+  "/api/protocol": "/api/sdk",
-  // "/play": "/playground",
+  "/play": "/playground",
-  // "/repository-standards": "/resources/repository-standards",
+  "/repository-standards": "/resources/repository-standards",
-  // "/resources/lbry-claimtrie": "/spec#claimtrie",
+  "/resources/lbry-claimtrie": "/spec#claimtrie",
-  // "/resources/schema": "/spec#metadata",
+  "/resources/schema": "/spec#metadata",
-  // "/resources/signing-claim": "/resources/claim-signing",
+  "/resources/signing-claim": "/resources/claim-signing",
-  // "/resources/uri": "/spec#urls",
+  "/resources/uri": "/spec#urls",
-  // "/resources/video-lbryandroid": "https://odysee.com/video-2018-10-15053403:e",
+  "/resources/video-lbryandroid": "https://odysee.com/video-2018-10-15053403:e",
-  // "/resources/video-lbrycrd": "https://odysee.com/intro-to-LBRYcrd:5",
+  "/resources/video-lbrycrd": "https://odysee.com/intro-to-LBRYcrd:5",
-  // "/resources/video-lbrydesktop": "https://odysee.com/LBRYAppDesign:7",
+  "/resources/video-lbrydesktop": "https://odysee.com/LBRYAppDesign:7",
-  // "/resources/video-lbrysdk": "https://odysee.com/@lbrytech:1/lbrynet-dev-setup:9",
+  "/resources/video-lbrysdk": "https://odysee.com/@lbrytech:1/lbrynet-dev-setup:9",
-  // "/specification": "/spec",
+  "/specification": "/spec",
-  // "/tour": "/playground",
+  "/tour": "/playground",
-  // "/whitepaper": "/spec"
+  "/whitepaper": "/spec"
-}
-
-export const API_REPOS = {
-  "lbry-sdk": "docs/api.json",
-  "lbrycrd": "contrib/devtools/generated/api_v1.json"
 }

src/layouts/Collections.astro

@@ -35,11 +35,6 @@ const isActive = (href: string)=>{
 <Layout title={frontmatter.title}>
     <div class="wrapper">
         <section class="sidebar">
-            {(headings && headings.length) ? (
-                <aside id="toc">
-                    <TableOfContents headings={headings} />
-                </aside>
-            ) : ''}
             <div class="container">
                 {items.length ? (
                     <summary>
@@ -55,17 +50,15 @@ const isActive = (href: string)=>{
         </section>
         <div class="main">
             <div class="content">
-                <!-- {headings && (
+                <aside class="toc">
-                    <aside id="toc">
+                    <TableOfContents headings={headings} edit={'src/content' + pathname + '.md'} />
-                        <TableOfContents headings={headings} />
                 </aside>
-                )} -->
                 <div class="markdown-body">
                     <h1>{frontmatter.title}</h1>
                     <h3><Fragment set:html={description}/></h3>
                     <slot/>
                     {!noedit && (
-                        <hr/>
+                        <hr>
                         <a class="edit" href={`https://github.com/${REPOSITORY}/tree/master/src/content${pathname}.mdx`} target="_blank">{EDIT_PAGE}</a>
                     )}
                 </div>
@@ -75,29 +68,24 @@ const isActive = (href: string)=>{
     <style>
         .wrapper {
             display: flex;
+            /* max-width: 1000px; */
         }
         
         .wrapper .sidebar {
             position: fixed;
             width: var(--sidebar-width);
-            height: 100%;
+            height: 100vh;
-            max-height: calc(100% - var(--nav-height));
             overflow-y: auto;
             inset-block: 0;
             inset-inline-start: 0;
-            margin-top: var(--nav-height);
-            padding-bottom: var(--nav-height);
             /* padding: 20px; */
-            // padding: var(--nav-height) 0;
+            padding-top: var(--nav-height);
             background-color: var(--secondary-background);
             transition: 0.3s;
-            z-index: 10;
         }
 
         .wrapper .sidebar .container {
-            position: relative;
             padding: 1rem 1rem 0;
-            // height: calc(100vh - var(--nav-height)*2);
         }
 
         .wrapper .sidebar summary .title {
@@ -160,56 +148,32 @@ const isActive = (href: string)=>{
             margin: 1rem;
         }
 
+        .wrapper .main aside {
+            display: flex;
+            align-items: center;
+            order: 2;
+            width: fit-content;
+            max-width: 25%;
+            margin: 0 auto;
+        }
+
         .wrapper .markdown-body {
             // padding: 10px 20px;
             width: 100%;
         }
 
-        .wrapper #toc {
+        .wrapper .toc {
-            position: fixed;
+            display: flex;
-            width: calc(var(--sidebar-width) - 2rem);
+            flex-direction: column;
-            height: fit-content;
-            max-height: calc(100vh - var(--nav-height)*2 - 2rem * 2);
-            inset-block: 0;
-            inset-inline-end: 2rem;
-            margin: calc(2rem + var(--nav-height)) 0;
-            // background-color: var(--secondary-background);
-            transition: 0.3s;
-            z-index: 10;
-            overflow-y: auto;
-            border-radius: 1em;
-            background-color: var(--secondary-background);
-        }
-
-        @media only screen and (max-width: 1000px) {
-            .wrapper #toc {
-                position: relative;
-                width: var(--sidebar-width);
-                max-height: unset;
-                inset-block: unset;
-                inset-inline-end: unset;
-                margin-top: 0;
-                z-index: 1;
-                background-color: transparent;
-            }
-
-            .wrapper .main {
-                padding-inline-end: unset;
-            }
         }
 
         @media only screen and (max-width: 750px) {
             .wrapper .sidebar {
-                transform: translateX(-100%);
+                transform: translateX(-80%);
             }
 
-            .wrapper .sidebar.active {
-                transform: translateX(0);
-            }
-
-
             .wrapper .main {
-                padding-inline-start: unset;
+                padding-inline-start: calc(var(--sidebar-width) * 0.2);
             }
         }
     </style>

src/layouts/Markdown.astro

@@ -17,15 +17,13 @@ const description = await markdown.parse(frontmatter.description);
 
 <Layout title={frontmatter.title}>
     <div class="wrapper">
-        <section class="sidebar">
+        <div class="main">
+            <div class="content">
                 {headings && (
-                <aside id="toc">
+                    <aside class="toc">
                         <TableOfContents headings={headings} />
                     </aside>
                 )}
-        </section>
-        <div class="main">
-            <div class="content">
                 <div class="markdown-body">
                     <h1>{frontmatter.title}</h1>
                     <h3><Fragment set:html={description}/></h3>
@@ -52,75 +50,32 @@ const description = await markdown.parse(frontmatter.description);
             margin: 1rem;
         }
 
+        .wrapper .main aside {
+            display: flex;
+            align-items: center;
+            order: 2;
+            /* max-width: 25%; */
+            margin: 0 auto;
+        }
+
         .wrapper .markdown-body {
             /* margin: 10px 20px; */
             /* max-width: 75%; */
             max-width: 100%;
         }
 
-        .wrapper #toc {
+        .wrapper .toc {
-            position: fixed;
+            display: flex;
-            width: calc(var(--sidebar-width) - 2rem);
+            flex-direction: column;
-            height: fit-content;
-            max-height: calc(100vh - var(--nav-height)*2 - 2rem * 2);
-            inset-block: 0;
-            inset-inline-end: 2rem;
-            margin: calc(2rem + var(--nav-height)) 0;
-            background-color: var(--secondary-background);
-            transition: 0.3s;
-            z-index: 10;
-            overflow-y: auto;
-            border-radius: 1em;
-            background-color: var(--secondary-background);
-        }
-
-        @media only screen and (max-width: 1000px) {
-            .wrapper .sidebar {
-                position: fixed;
-                width: var(--sidebar-width);
-                height: 100%;
-                max-height: calc(100% - var(--nav-height));
-                overflow-y: auto;
-                inset-block: 0;
-                inset-inline-start: 0;
-                margin-top: var(--nav-height);
-                padding-bottom: var(--nav-height);
-                /* padding: 20px; */
-                // padding: var(--nav-height) 0;
-                background-color: var(--secondary-background);
-                transition: 0.3s;
-                z-index: 10;
-            }
-
-            .wrapper #toc {
-                position: relative;
-                width: var(--sidebar-width);
-                max-height: unset;
-                inset-block: unset;
-                inset-inline-end: unset;
-                margin-top: 0;
-                z-index: 1;
-                background-color: transparent;
-            }
-
-            .wrapper .main {
-                width: 100%;
-                padding-inline-start: var(--sidebar-width);
-            }
         }
 
         @media only screen and (max-width: 750px) {
             .wrapper .sidebar {
-                transform: translateX(-100%);
+                transform: translateX(-80%);
-            }
-
-            .wrapper .sidebar.active {
-                transform: translateX(0);
             }
 
             .wrapper .main {
-                width: 100%;
+                padding-inline-start: calc(400px * 0.2);
-                padding-inline-start: 0;
             }
         }
     </style>

src/pages/api.astro

@@ -1,19 +0,0 @@
----
-import Layout from '../layouts/Layout.astro';
-
-import * as config from "../config.js";
-
----
-
-
-<Layout title="API">
-    <div class="wrapper">
-        <ul>
-            {Object.keys(config.API_REPOS).map(repo=>(
-                <li>
-                    <a href={`/api/${repo}`}>{repo}</a>
-                </li>
-            ))}
-        </ul>
-    </div>
-</Layout>

src/pages/api/[repo].astro

@@ -1,15 +1,14 @@
 ---
 import Layout from '../../layouts/Layout.astro';
-import TableOfContents from '../../components/TableOfContents.astro';
-import APIArguments from '../../components/APIArguments.astro';
-import APIExamples from '../../components/APIExamples.astro';
-
 import * as config from "../../config.js";
 import { Code } from 'astro:components';
 
 export function getStaticPaths() {
+    const repos = [
+        "lbry-sdk",
+    ]
     
-    const paths = Object.keys(config.API_REPOS).map(repo=>{
+    const paths = repos.map(repo=>{
         return {params: {repo}};
     });
 
@@ -21,168 +20,44 @@ const { repo } = Astro.params;
 const tags = (await (await fetch(`https://data.jsdelivr.com/v1/packages/gh/${config.GITHUB_ORG}/${repo}`)).json()).versions;
 tags.unshift({version: "master"});
 
-const tag = tags[0];
+const docs = (await (await fetch(`https://cdn.jsdelivr.net/gh/${config.GITHUB_ORG}/${repo}/docs/api.json`)).json());
+console.log(docs);
 
-let docs = (await (await fetch(`https://cdn.jsdelivr.net/gh/${config.GITHUB_ORG}/${repo}@${tag.version}/${config.API_REPOS[repo]}`)).json());
-
-
-// Convert lbrycrd docs to the same structure as lbry-sdk
-if (repo === 'lbrycrd') {
-    const crd = {};
-    for (let i in docs) {
-        if (!crd[docs[i].namespace]) crd[docs[i].namespace] = {
-            doc: docs[i].namespace,
-            commands: []
-        };
-        crd[docs[i].namespace].commands.push(docs[i]);
-        console.log(docs[i]);
-        
-        //docs.main[i].command = docs.main[i].name;
-    }
-    docs = crd;
-}
-
-const headings: Array<object> = [];
-
-// Generate headings
-Object.keys(docs).forEach(group=>{
-    headings.push({
-        slug: group,
-        text: group.charAt(0).toUpperCase() + group.substr(1).toLowerCase(),
-        depth: 2
-    });
-
-    docs[group].commands.forEach(cmd=>{
-        headings.push({
-            slug: cmd.name,
-            text: cmd.name,
-            depth: 3
-        });
-    })
-    
-});
 
 ---
 
 
 <Layout title={repo}>
-    <div class="wrapper">
+    <div>Looking at repo: {repo}!</div>
-        <section class="sidebar">
+    <div class="sidebar">
-            {(headings && headings.length) ? (
+        <ul>
-                <aside id="toc">
+            {Object.keys(docs).map(header=>(
-                    <TableOfContents headings={headings} />
+                <li>
-                </aside>
+                    <a href={`#${header}`}>{header}</a>
-            ) : ''}
+                    {docs[header].commands.map(cmd=>(
-        </section>
+                        <p><a href={`#${cmd.name}`}>{cmd.name}</a></p>
-        
+                    ))}
-        <!-- <TableOfContents headings={headings} /> -->
+                </li>
+            ))}
+        </ul>
+    </div>
     <select>
         {tags.map(tag=>(
             <option>{tag.version}</option>
         ))}
     </select>
-        <div class="main">
+    <div>
-            <h1>{repo} {tag.version}</h1>
-            <p>Methods and signatures provided by {repo} are documented below. To build, download, or run the daemon, see the project
-                <a href={`https://github.com/${config.GITHUB_ORG}/${repo}/blob/${tag.version}/README.md`}>README</a>.
-            </p>
-            <div class="commands">
         {Object.keys(docs).map(header=>(
             <section>
-                        <h1 id={header}>{header}</h1>
+                <h2 id={header}>{header}</h2>
                 {docs[header].commands.map(cmd=>(
-                            <div class:list={["command", cmd.name]}>
+                    <h3 id={cmd.name}>{cmd.name}</h3>
-                                <h2 id={cmd.name}>{cmd.name}</h2>
                     <p>{cmd.description}</p>
-                                <APIArguments args={cmd.arguments}/>
+                    <Code lang={"json"} code={cmd.returns} />
-                                <APIExamples cmd={cmd.name} examples={cmd.examples[0]}/>
+                    <code>
-                                <h3>Returns</h3>
+                    </code>  
-                                <Code lang={"json"} code={`${cmd.returns || "Not available."}`} class:list={["returns"]} />
-                                </div>
-                            <hr/>
                 ))}
             </section>
         ))}
     </div>
-        </div>
-    </div>
-    <style>
-        .wrapper {
-            padding: 1rem;
-        }
-
-        .wrapper .main {
-            /* width: calc(100vw - var(--sidebar-width)); */
-            padding-inline-end: var(--sidebar-width);
-            transition: 0.3s;
-            overflow-x: hidden;
-            max-width: 1750px;
-            width: calc(100%);
-        }
-
-        .commands {
-            display: flex;
-            flex-direction: column;
-            gap: 25px;
-        }
-
-        .commands section {
-            display: flex;
-            flex-direction: column;
-            gap: 25px;
-        }
-
-        .commands section .command {
-            display: flex;
-            flex-direction: column;
-            gap: 1em;
-        }
-
-        .wrapper #toc {
-            position: fixed;
-            width: calc(var(--sidebar-width) - 2rem);
-            height: fit-content;
-            max-height: calc(100vh - var(--nav-height)*2 - 2rem * 2);
-            inset-block: 0;
-            inset-inline-end: 2rem;
-            margin: calc(2rem + var(--nav-height)) 0;
-            // background-color: var(--secondary-background);
-            transition: 0.3s;
-            z-index: 10;
-            overflow-y: auto;
-            border-radius: 1em;
-            background-color: var(--secondary-background);
-        }
-
-        @media only screen and (max-width: 1000px) {
-            .wrapper #toc {
-                position: relative;
-                width: var(--sidebar-width);
-                max-height: unset;
-                inset-block: unset;
-                inset-inline-end: unset;
-                margin-top: 0;
-                z-index: 1;
-                background-color: transparent;
-            }
-
-            .wrapper .main {
-                padding-inline-end: unset;
-            }
-        }
-        
-    </style>
-
-    <style is:inline>
-        .commands > section pre {
-            padding: 1em;
-            border-radius: 9px;
-            max-width: 80%;
-            background-color: var(--secondary-background) !important;
-        }
-
-        .commands > section pre code span {
-            white-space: break-spaces;
-        }
-    </style>
 </Layout>

src/styles/Header.css

@@ -41,74 +41,17 @@ header ul li:hover a {
     list-style: none;
 }
 
-header .right #menu {
+header .right .menu {
     display: none;
-    cursor: pointer;
 }
 
-#menu {
+@media only screen and (max-width: 600px) {
-    flex-direction: column;
-    /* justify-content: space-between; */
-    justify-content: center;
-    width: 2rem;
-    height: 1.5rem;
-    position: relative;
-    /* margin: 50px auto; */
-    -webkit-transition: .5s ease-in-out;
-    -moz-transition: .5s ease-in-out;
-    -o-transition: .5s ease-in-out;
-    transition: .5s ease-in-out;
-    cursor: pointer;
-    /*   border:1px solid red; */
-}
-
-#menu span {
-    display: block;
-    position: absolute;
-    height: 3px;
-    width: 100%;
-    background: var(--header-text);
-    border-radius: 9px;
-    opacity: 1;
-    left: 0;
-    transform: rotate(0deg);
-    transition: .2s ease-in-out;
-    /*   border:4px solid black; */
-}
-
-#menu span:nth-child(1) {
-    top: 0;
-}
-
-#menu span:nth-child(3) {
-    bottom: 0;
-}
-
-#menu.open span:nth-child(1) {
-    top: 50%;
-    transform: translateY(-50%);
-    transform: rotate(45deg);
-}
-
-#menu.open span:nth-child(2) {
-    width: 0;
-    left: 50%;
-    transform: translateX(-50%);
-}
-
-#menu.open span:nth-child(3) {
-    top: 50%;
-    transform: translateY(-50%);
-    transform: rotate(-45deg);
-}
-
-@media only screen and (max-width: 750px) {
     header .left ul, header  .right .search {
         display: none;
     }
 
-    header .right #menu {
+    header .right .menu {
-        display: flex;
+        display: block;
-        /* width: 25px; */
+        width: 25px;
     }
 }

src/styles/global.scss

@@ -30,20 +30,12 @@
     }
 }
 
-@media only screen and (max-width: 750px) {
-    :root {
-        --sidebar-width: 80vw;
-    }
-}
-
 * {
     margin: 0;
     box-sizing: border-box;
 }
 
-*:target{
+*:target{ padding-top: 100px;margin-top: -100px}
-    scroll-margin-top: calc(var(--nav-height) + 1em);
-}
 
 html {
     font-family: 'Roboto', sans-serif;