Merge commit '726ea3b91f41db4c665cc94305b8d5b7cbe61d15' into jpg

0ba6983 Added index

git-subtree-dir: content
git-subtree-split: 0ba69837fc65f6c9c2e82762cf10cbd099bacde9

Dockerfile

@@ -1,3 +1,14 @@
+FROM python:latest as convert
+WORKDIR /usr/src/app
+COPY content/ ./
+COPY custom/convert-furigana/program/convert-furigana.py ./
+COPY custom/convert-usage/program/convert-usage.py ./
+ENV PIP_ROOT_USER_ACTION=ignore
+RUN python -m pip install --upgrade pip
+RUN python -m pip install beautifulsoup4
+RUN python convert-furigana.py .
+RUN python convert-usage.py .
+
 FROM node:20-slim as builder
 WORKDIR /usr/src/app
 COPY package.json .
@@ -8,4 +19,5 @@ FROM node:20-slim
 WORKDIR /usr/src/app
 COPY --from=builder /usr/src/app/ /usr/src/app/
 COPY . .
+COPY --from=convert /usr/src/app/ /usr/src/app/content/
 CMD ["npx", "quartz", "build", "--serve"]

content/index.md

@@ -0,0 +1,48 @@
+# Japanese Grammar (JPG)
+
+Welcome to my Japanese Grammar project!
+
+## Goal
+
+The goal of this website is to be a synthesis of useful resources for my Japanese learning adventure. I want to have grammar points next to each other, independently of any "difficulty level", set up in a logical and consistent form. I don't want to have to open 5 pages to compare information, and I don't want a deep dive into a notion. The goal is to be a reminder of the things I learn, rather than a way to learn. I want a few examples to grasp it, but I do not want to have ten of the same kind. And nothing quite fits for me!
+
+## Sources
+
+Of course, since I'm _learning_ the language, I need to borrow what I write from different sources. So this website uses data from the websites listed here. I don't want any recognition of what is here! It's mostly a compilation of what people who are way better in this language have made before.
+
+* [Bunpro](https://bunpro.jp/grammar_points)
+* [JLPT Sensei](https://jlptsensei.com/#jlpt-grammar-lists)
+* [Maggie Sensei](https://maggiesensei.com/)
+* [Try! Series of books](https://2024.ask-books.com/tag/try/)
+* [Hedgehog Japanese](https://hedgehog-japanese.com/category/grammar/)
+* [Wasabi](https://www.wasabi-jpn.com/category/japanese-grammar/)
+* [Japanese StackExchange](https://japanese.stackexchange.com/)
+* [Guide du Japonais](https://guidedujaponais.fr/)
+
+## Other useful resources
+
+In addition to those I cited, here are other resources I find useful.
+
+### Kanjis
+
+* [Remembering the Kanji (RTK)](https://en.wikipedia.org/wiki/Remembering_the_Kanji_and_Remembering_the_Hanzi), a kanji learning method
+* [Kanji Koohii](https://kanji.koohii.com/), a website using the RTK method and spaced repetition
+* [Remember the JLPT](https://git.marchal.dev/keb/remember-the-JLPT), a tool I made to learn kanjis by JLPT levels
+
+### Reading
+
+* [Sakubun](https://sakubun.xyz/)
+* [NHK News Web Easy](https://www3.nhk.or.jp/news/easy/)
+
+### Grammar
+
+* [jtest4you](https://japanesetest4you.com/)
+* [Japanese Conjugation Drill](https://drill.marchal.dev)
+
+### Vocabulary
+
+* [Jisho](https://jisho.org/), an online dictionary
+
+## Any errors?
+
+If you find any error, please do contact me! You can find my website in the footer of any page of this website. Thanks!

custom/build-run.sh

@@ -0,0 +1,2 @@
+docker build -t quartz-jpg .
+cd custom && docker-compose up -d --force-recreate

custom/convert-furigana/LICENSE

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2024 keb
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

custom/convert-furigana/README.md

@@ -0,0 +1,43 @@
+# convert-furigana
+
+## What is it?
+
+There are a few extensions that add [furigana](https://en.wikipedia.org/wiki/Furigana) support to Markdown. I use [Obsidian](https://obsidian.md/), and therefore its furigana extension: [obsidian-markdown-furigana](https://github.com/steven-kraft/obsidian-markdown-furigana). It works well, but by nature is limited by being used within Obsidian.
+
+For that purpose, this python script converts this specific syntax to common, all-platforms HTML ruby tags.
+
+## Process
+
+This specific extension syntax is as following:
+```
+{漢字|かんじ}
+{漢字|かん|じ}
+```
+
+When processed by this script, the result is:
+```
+<ruby>漢字<rt>かんじ</rt></ruby>
+<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>
+```
+
+Which leads visually from, by default markdown standards:
+
+> {漢字|かんじ}
+>
+> {漢字|かん|じ}
+
+to common HTML ruby syntax:
+
+> <ruby>漢字<rt>かんじ</rt></ruby>
+>
+> <ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>
+
+## Limitations
+
+This has been made for my personal use, which is only kanjis with kanas as furigana. The regexp used do not recognize other inputs. But you can modify them easily for your use if needed.
+
+## Usage
+
+Usage: `python3 convert-furigana.py [root folder]`
+
+Note: Please be careful, this software applies modifications recursively!

custom/convert-furigana/examples/furigana1.md

@@ -0,0 +1,6 @@
+{僕|ボク}の{筆記|ひっ|き}
+
+### ～によるN
+
+* テレビによる{報道|ほうどう}
+* この{地震|じ|しん}による{津波|つ|なみ}の{心配|しんぱい}はありません。

custom/convert-furigana/examples/subfolder/furigana2.md

@@ -0,0 +1,7 @@
+## ふりがなテスト
+
+{漢字|かんじ}
+
+{漢字|かん|じ}
+
+{漢字|カン|ジ}

custom/convert-furigana/program/convert-furigana.py

@@ -0,0 +1,71 @@
+import sys
+import os
+from glob import glob
+import re
+
+### Patterns ###
+
+# https://www.reddit.com/r/learnpython/comments/h0tsaa/regex_expression_for_japanese_extracting/
+re_brace = '{(.+?)}'
+re_kanji = '([㐀-䶵一-鿋豈-頻]+)'
+re_kana = '([ぁ-ゟ゠-ヿ]+)'
+
+### Open file ###
+
+def open_file(filename):
+    with open(filename, 'r', encoding='utf-8-sig') as file:
+        filedata = file.read()
+        return filedata
+
+### Replace ###
+
+def write_ruby_simple(kanji, kana):
+    return f"<ruby>{kanji}<rt>{kana}</rt></ruby>"
+
+def write_ruby_multiple(kanji, kanas):
+    result = f"<ruby>"
+    for idx, kana in enumerate(kanas):
+        result += f"{kanji[idx]}"
+        result += f"<rt>{kana}</rt>"
+    result += f"</ruby>"
+    return result
+
+def convert_to_ruby(content):
+    kanji = re.search(re_kanji, content.group())
+    kana = re.findall(re_kana, content.group())
+
+    if (len(kana) == 1):
+        return write_ruby_simple(kanji.group(), kana[0])
+    else:
+        return write_ruby_multiple(kanji.group(), kana)
+
+def convert_pattern(text):
+    res_text = re.sub(re_brace, convert_to_ruby, text)
+    return res_text
+
+### Write to file ###
+
+def write_file(filename, text):
+    with open(filename, 'w', encoding='utf-8-sig') as file:
+        file.write(text)
+
+
+### Execution ###
+
+file_list = []
+
+if len(sys.argv) > 1:
+    path = sys.argv[1]
+    for filename in glob(path + "/**/*.md", recursive=True):
+        if (os.path.isfile(filename)):
+            file_list.append(filename)
+else:
+    print(f"Usage: python3 {sys.argv[0]} [root folder]")
+    print(f"Note: Please be careful, this software applies modifications recursively!")
+
+for filename in file_list:
+    print(f"Found file {filename}, processing...", end='')
+    data = open_file(filename)
+    text = convert_pattern(data)
+    write_file(filename, text)
+    print(f" done!")

custom/convert-usage/LICENSE

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2024 keb
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

custom/convert-usage/README.md

@@ -0,0 +1,17 @@
+# convert-usage
+
+## Obsidian snippet
+
+For my Japanese Grammar (JPG) project, I have created a style for explanation on the usage of certain grammar points. There is no simple way to make it in Markdown, so I tried to make it with the least amount of HTML possible. You can find it in `examples/sample.md`. However, for it to work, you have to import a custom [CSS snippet](https://help.obsidian.md/Extending+Obsidian/CSS+snippets) to Obsidian, which is located in `obsidian-snippet/usage.css`. But using it, you will have this kind of result:
+
+![Obsidian screenshot](./screenshot.png)
+
+## convert-usage.py
+
+In my Quartz rendering of my markdown data, I want this kind of data to be in a callout. However, it is not possible to combine HTML and Markdown in Obsidian. For that purpose, this script encapsulates it directly in HTML. To make it both compatible in Obsidian and Quartz, and to be still easy to write, it's done with this python script. This is probably super specific and will not be of use for anybody except me!
+
+## Usage
+
+Usage: `python3 convert-usage.py [root folder]`
+
+Note: Please be careful, this software applies modifications recursively!

custom/convert-usage/examples/sample.md

@@ -0,0 +1,33 @@
+# test file
+
+## Lorem ipsum
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris massa eros, feugiat eu dapibus nec, fermentum vel ex. Nulla malesuada luctus pretium. Phasellus ac felis ut nisi lacinia malesuada nec vel odio. Donec tincidunt tincidunt lorem vel tempus. Nullam sed efficitur ligula, a porttitor nibh. Praesent justo dui, venenatis ac mi non, laoreet consequat libero. Aenean ut molestie mauris. Proin mattis volutpat ligula eget tincidunt. Fusce ex eros, condimentum consectetur efficitur vitae, euismod at justo.
+
+**Usage**
+
+<div class="usage">
+<div class="left">
+	<p><span class="box">item1</span></p>
+	<p><span class="box">item2</span></p>
+	<p><span class="box">item3</span></p>
+	<p><span class="box">item4</span></p>
+</div>
+	<p class="right">+ final</p>
+</div>
+
+## Phasellus tristique
+
+Phasellus tristique rutrum enim. Integer vitae ex at turpis convallis posuere nec nec erat. Cras finibus erat mauris. Suspendisse id diam at sapien luctus faucibus. Pellentesque fermentum auctor libero, ut porta orci porttitor quis. In varius at sem sed ultricies. Mauris iaculis convallis erat, congue tincidunt turpis luctus vitae.
+
+**Usage**
+
+<div class="usage">
+<div class="left">
+	<p><span class="box">アイテム１</span></p>
+	<p><span class="box">アイテム２</span></p>
+	<p><span class="box">アイテム３</span></p>
+	<p><span class="box">アイテム４</span></p>
+</div>
+	<p class="right">＋ ファイナル</p>
+</div>

custom/convert-usage/examples/sample2.md

@@ -0,0 +1,23 @@
+# test file
+
+## Lorem ipsum
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris massa eros, feugiat eu dapibus nec, fermentum vel ex. Nulla malesuada luctus pretium. Phasellus ac felis ut nisi lacinia malesuada nec vel odio. Donec tincidunt tincidunt lorem vel tempus. Nullam sed efficitur ligula, a porttitor nibh. Praesent justo dui, venenatis ac mi non, laoreet consequat libero. Aenean ut molestie mauris. Proin mattis volutpat ligula eget tincidunt. Fusce ex eros, condimentum consectetur efficitur vitae, euismod at justo.
+
+**Usage**
+
+<div class="usage">
+<div class="left">
+	<p><span class="box">item1</span></p>
+	<p><span class="box">item2</span></p>
+	<p><span class="box">item3</span></p>
+	<p><span class="box">item4</span></p>
+</div>
+	<p class="right">+ final</p>
+</div>
+
+## Callout
+
+> [!info] Example
+> Callout example
+> Careful with BS4 encoding some characters

custom/convert-usage/obsidian-snippets/usage.css

@@ -0,0 +1,35 @@
+.box {
+    display: inline-block;
+    width: fit-content;
+    margin: 0.2rem;
+    padding: 0.2rem 0.3rem 0.2rem 0.3rem;
+
+    border: 1px solid black;
+    border-radius: 0.5rem;
+}
+
+.usage {
+    display:flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.left {
+    padding-right: 1.7rem;
+
+    background-image: linear-gradient(black, black), linear-gradient(black, black);
+    background-repeat: no-repeat;
+    background-size: 8px 2px;
+    background-position: top right, bottom right;
+
+    border-right: solid black;
+    border-width: 0 2px;
+}
+
+.left p {
+    margin:0;
+}
+
+.right {
+    padding-left: 1rem;
+}

custom/convert-usage/program/convert-usage.py

@@ -0,0 +1,66 @@
+import sys
+import os
+from glob import glob
+from bs4 import BeautifulSoup
+import re
+
+### Patterns ###
+
+re_usage = r'(^\*\*Usage\*\*$\n\n)'
+callout_title_html = '''
+    <div class="callout-title">
+        <div class="callout-icon"></div>
+        <div class="callout-title-inner"><p>Usage</p></div>
+    </div>'''
+
+### Open file ###
+
+def open_file(filename):
+    with open(filename, 'r', encoding='utf-8-sig') as file:
+        filedata = file.read()
+        return filedata
+
+### Write to file ###
+
+def write_file(filename, text):
+    with open(filename, 'w', encoding='utf-8-sig') as file:
+        file.write(text)
+
+### Replace ###
+
+def convert_pattern(text):
+    text, success = re.subn(re_usage, '', text, flags=re.MULTILINE)
+    if (success == 0):
+        return text
+
+    soup = BeautifulSoup(text, features="html.parser")
+
+    for tag in soup.find_all('div', {"class": "usage"}):
+        new_blockquote = soup.new_tag("blockquote", **{"class": "callout notes", "data-callout": "notes"})
+        tag.wrap(new_blockquote)
+
+        calloutTitle = BeautifulSoup(callout_title_html, features="html.parser")
+        tag.insert_before(calloutTitle)
+
+    return (soup.decode(False, formatter=None))
+
+
+### Execution ###
+
+file_list = []
+
+if len(sys.argv) > 1:
+    path = sys.argv[1]
+    for filename in glob(path + "/**/*.md", recursive=True):
+        if (os.path.isfile(filename)):
+            file_list.append(filename)
+else:
+    print(f"Usage: python3 {sys.argv[0]} [root folder]")
+    print(f"Note: Please be careful, this software applies modifications recursively!")
+
+for filename in file_list:
+    print(f"Found file {filename}, processing...", end='')
+    data = open_file(filename)
+    text = convert_pattern(data)
+    write_file(filename, text)
+    print(f" done!")

custom/docker-compose.yml

@@ -0,0 +1,14 @@
+version: '3.4'
+
+services:
+  quartz:
+    image: quartz-jpg
+    build:
+      context: .
+      dockerfile: Dockerfile
+    environment:
+      NODE_ENV: production
+    container_name: quartz-jpg-container
+    restart: always
+    ports:
+      - 8080:8080

custom/update-repos.sh

@@ -0,0 +1,8 @@
+git fetch convert-furigana main
+git subtree pull --prefix custom/convert-furigana convert-furigana main --squash
+
+git fetch convert-usage main
+git subtree pull --prefix custom/convert-usage convert-usage main --squash
+
+git fetch content main
+git subtree pull --prefix content content main --squash

quartz.config.ts

@@ -8,14 +8,14 @@ import * as Plugin from "./quartz/plugins"
  */
 const config: QuartzConfig = {
   configuration: {
-    pageTitle: "🪴 Quartz 4.0",
+    pageTitle: "[JPG]",
     enableSPA: true,
     enablePopovers: true,
     analytics: {
       provider: "plausible",
     },
     locale: "en-US",
-    baseUrl: "quartz.jzhao.xyz",
+    baseUrl: "jpg.marchal.dev",
     ignorePatterns: ["private", "templates", ".obsidian"],
     defaultDateType: "created",
     theme: {
@@ -56,7 +56,7 @@ const config: QuartzConfig = {
       Plugin.CreatedModifiedDate({
         priority: ["frontmatter", "filesystem"],
       }),
-      Plugin.Latex({ renderEngine: "katex" }),
+      Plugin.Latex({ renderEngine: "katex" }), // mathjax or katex
       Plugin.SyntaxHighlighting({
         theme: {
           light: "github-light",
@@ -64,7 +64,7 @@ const config: QuartzConfig = {
         },
         keepBackground: false,
       }),
-      Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: false }),
+      Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: true, enableYouTubeEmbed: true }),
       Plugin.GitHubFlavoredMarkdown(),
       Plugin.TableOfContents(),
       Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }),
@@ -88,4 +88,4 @@ const config: QuartzConfig = {
   },
 }
 
-export default config
+export default config

quartz.layout.ts

@@ -7,8 +7,7 @@ export const sharedPageComponents: SharedLayout = {
   header: [],
   footer: Component.Footer({
     links: {
-      GitHub: "https://github.com/jackyzha0/quartz",
-      "Discord Community": "https://discord.gg/cRFFHYye7t",
+      "Théo Marchal": "https://theo.marchal.dev"
     },
   }),
 }
@@ -16,22 +15,19 @@ export const sharedPageComponents: SharedLayout = {
 // components for pages that display a single page (e.g. a single note)
 export const defaultContentPageLayout: PageLayout = {
   beforeBody: [
-    Component.Breadcrumbs(),
-    Component.ArticleTitle(),
-    Component.ContentMeta(),
-    Component.TagList(),
+    Component.MobileOnly(Component.Explorer()),
+    Component.Breadcrumbs()
   ],
   left: [
     Component.PageTitle(),
     Component.MobileOnly(Component.Spacer()),
+    Component.MobileOnly(Component.Darkmode()),
     Component.Search(),
-    Component.Darkmode(),
-    Component.DesktopOnly(Component.Explorer()),
+    Component.DesktopOnly(Component.Explorer())
   ],
   right: [
-    Component.Graph(),
+    Component.DesktopOnly(Component.Darkmode()),
     Component.DesktopOnly(Component.TableOfContents()),
-    Component.Backlinks(),
   ],
 }
 

quartz/styles/custom.scss

@@ -1,3 +1,173 @@
 @use "./base.scss";
+@use "./variables.scss" as *;
 
-// put your custom CSS here!
+.text-highlight {
+    background-color: #ddcee5;
+}
+
+:root[saved-theme="dark"] .text-highlight {
+    background-color: #7d4e95;
+}
+
+.callout {
+    border: 3px solid #885a9f;
+    background-color:initial;
+    border-radius: 1rem;
+}
+
+.callout-title {
+    --color: #885a9f;
+}
+
+:root[saved-theme="dark"] .callout {
+    border: 3px solid #a672c0;
+}
+
+:root[saved-theme="dark"] .callout-title {
+    --color: #a672c0;
+}
+
+table {
+    border: 2px solid var(--gray);
+
+    & thead > tr {
+        border-bottom: 2px solid var(--lightgray);
+
+        & th {
+            border: 1px solid var(--lightgray);
+        }
+    }
+
+    & td {
+        border: 1px solid var(--lightgray);
+    }
+}
+
+.callout.note {
+    & table {
+        margin: 0;
+        margin-bottom: 0.5rem;
+
+        & thead {
+            display: none;
+        }
+
+        & td {
+            padding: 0;
+        }
+    }
+}
+
+ul.overflow, ol.overflow {
+    max-height: 75dvh;
+}
+
+ul.overflow::after, ol.overflow::after {
+    position:initial;
+}
+
+#toc-content {
+    & ul {
+      & > li > a {
+        opacity: 0.75;
+      }
+    }
+}
+
+.page {
+    & > #quartz-body {
+
+        & .center {
+            & p {
+                font-size: 1.15rem;
+                white-space: break-spaces;
+                hyphens: none;
+            }
+            
+            & li {
+                font-size: 1.15rem;
+            }
+
+            & h3 {
+                font-size: 1.5rem;
+            }
+            
+            & h2 {
+                font-size: 1.7rem;
+            }
+            
+            & h1 {
+                font-size: 2rem;
+            }
+        }
+
+        & .sidebar {
+            @media all and (max-width: $fullPageWidth) {
+                margin-top: 1rem;
+            }
+       }
+
+        & .right.sidebar {
+        @media all and (max-width: $fullPageWidth) {
+            margin-top: 0;
+        }
+        }
+    }
+}
+
+hr {
+    margin: 1rem auto;
+}
+
+footer {
+    margin-bottom: 2rem;
+
+    & p {
+        font-size: 1rem;
+    }
+
+    @media all and (max-width: $fullPageWidth) {
+        margin-bottom: 1rem;
+    }
+}
+
+
+
+// Usage
+
+.usage {
+    display:flex;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 1rem;
+    margin-top: 0.5rem;
+}
+
+.usage .left {
+    padding-right: 1.7rem;
+
+    background-image: linear-gradient(var(--darkgray), var(--darkgray)), linear-gradient(var(--darkgray), var(--darkgray));
+    background-repeat: no-repeat;
+    background-size: 8px 2px;
+    background-position: top right, bottom right;
+
+    border-right: solid var(--darkgray);
+    border-width: 0 2px;
+}
+
+.usage .left .box {
+    border: 1px solid var(--darkgray);
+    border-radius: 0.5rem;
+    padding: 0.2rem 0.3rem 0.2rem 0.3rem;
+    display: inline-block;
+    width: fit-content;
+    margin: 0.2rem;
+}
+
+.usage .left p {
+    margin:0;
+}
+
+.usage .right {
+    padding-left: 1rem;
+}

quartz/styles/variables.scss

@@ -2,7 +2,7 @@ $pageWidth: 750px;
 $mobileBreakpoint: 600px;
 $tabletBreakpoint: 1000px;
 $sidePanelWidth: 380px;
-$topSpacing: 6rem;
+$topSpacing: 2rem;
 $fullPageWidth: $pageWidth + 2 * $sidePanelWidth;
 $boldWeight: 700;
 $semiBoldWeight: 600;