Fixed JS visual changes being delayed and updated homepage layout

HedgeDocs · Nov 3, 2023 · 61393c8 · 61393c8
1 parent c04ab57
commit 61393c8
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
     <a href="#hedgedocs">
         <img width="95" align="left" src="https://raw.githubusercontent.com/HedgeDocs/HedgeDocs.github.io/main/hedgedocs/web/images/favicon.png">
     </a>
-    HedgeDocs
+    Hedge<span style="font-weight: 200;">Docs</span>
 </h1>
 
 GitHub Page with tools and guides for modding Sonic games, powered by [Material for MkDocs](https://squidfunk.github.io/mkdocs-material/).

diff --git a/hedgedocs/index.md b/hedgedocs/index.md
@@ -11,11 +11,14 @@ search:
   }
 </style>
 
-<div>
-  <img class="not-clickable" width="96" style="vertical-align: middle" src="/web/images/favicon.png">
-  <h1 style="padding: 0 0 0 0.3em; display: inline; vertical-align: middle; font-weight: bold;">HedgeDocs</h1>
-  <p style="padding-top: 2em"> HedgeDocs is a webpage containing several guides and tools to be used for modding Sonic the Hedgehog games.</p>
-  <hr>
+<div style="margin-bottom: 2rem">
+  <div style="margin: auto; width: fit-content;">
+    <img class="not-clickable" width="96" style="display: inline-block; vertical-align: middle;" src="/web/images/favicon.png">
+    <div style="display: inline-block; vertical-align: middle;">
+      <h1 style="padding: 0 0 0 0.3rem; font-weight: 900; margin-bottom: -.3rem; font-size: xx-large;">Hedge<span style="font-weight: 200;">Docs</span></h1>
+      <span style="padding: 0 0 0 0.3rem; font-weight: 100; font-size: large;">Your Sonic modding textbook.</span>
+    </div>
+  </div>
 </div>
 
 <div class="homepage-buttons">

diff --git a/hedgedocs/web/javascripts/custom.js b/hedgedocs/web/javascripts/custom.js
@@ -4,7 +4,6 @@
 let animatedBackgroundIsEnabled = false
 
 /* --------- ON PAGE LOAD ----------- */
-
 MutationObserver = window.MutationObserver || window.WebKitMutationObserver
 var observer = new MutationObserver(function (mutations, observer) {
     if (mutations.find((elem) => elem.attributeName == 'data-md-scrollfix') != undefined) {
@@ -17,6 +16,7 @@ var observer = new MutationObserver(function (mutations, observer) {
         replacePermalinkIcon()
         makeImagesClickable()
         sidebarExternalLinksNewTab()
+        onInitialLoad()
         //addFadeAnim()
         //addCssClasses()
 
@@ -25,11 +25,18 @@ var observer = new MutationObserver(function (mutations, observer) {
         }
     }
 })
+
+function onInitialLoad() {
+    headerStyling()
+}
+
+
+/* ON JS LOAD */
 observer.observe(document, {
     subtree: true,
     attributes: true,
 })
-
+onInitialLoad()
 
 /* --------- FUNCTIONS ----------- */
 
@@ -163,6 +170,21 @@ function sidebarExternalLinksNewTab() {
     }
 }
 
+function headerStyling() {
+    const header = document.querySelectorAll('body > header > nav.md-header__inner.md-grid > div.md-header__title > div > div:nth-child(1) > span')
+
+    if (header.length > 0) {
+        header[0].innerHTML = 
+            '<span class="md-ellipsis" style="/* font-weight: 900; */">Hedge</span><span class="md-ellipsis" style="font-weight: 100;">Docs</span>'
+    }
+
+    const mobileSidebarHeader = document.querySelector('body > div.md-container > main > div > div.md-sidebar.md-sidebar--primary > div > div > nav > label')
+
+    mobileSidebarHeader.innerHTML = '<a href="/" title="HedgeDocs" class="md-nav__button md-logo" aria-label="HedgeDocs" data-md-component="logo">\
+                                        <img src="/web/images/icon.svg" alt="logo">\
+                                    </a>'
+}
+
 function replaceNavLinks() {
     const links = document.querySelectorAll('.md-nav__link')
     for (let i = 0, length = links.length; i < length; i++) {
@@ -193,3 +215,7 @@ function replaceNavLinks() {
         */
     }
 }
+
+
+/* SHOW BODY WHEN SCRIPT LOADS */
+document.body.style.display = 'flex'
diff --git a/hedgedocs/web/stylesheets/extra.css b/hedgedocs/web/stylesheets/extra.css
@@ -1,4 +1,5 @@
 /* GENERAL */
+body { display:none; } /* For initial JS Load. Changes to "flex" after custom.js executes */
 
 :root {
     --imagePreview-finalScale: 1.2;
@@ -14,6 +15,10 @@ body {
     background-image: var(--background-color);
 }
 
+.md-main__inner {
+    margin-top: .5rem;
+}
+
 .md-footer {
     z-index: 1;
 }
@@ -71,6 +76,16 @@ body > header > nav.md-header__inner.md-grid > div.md-header__title > div > div:
     }
 }
 
+@media screen and (max-width: 76.234375em) {
+    .md-nav--primary .md-nav__title[for=__drawer] {
+        height: 5em;
+    }
+}
+
+input:placeholder-shown {
+    font-style: italic;
+}
+
 /* EXTERNAL LINKS IN SIDEBAR */
 
 a[href^="htt"].md-nav__link::before {
@@ -217,6 +232,8 @@ a[href^="htt"].md-nav__link::before {
 
     .homepage-buttons {
         display: block !important;
+        margin-right: 0em !important;
+        margin-left: 0em !important;
     }
 }
 
@@ -230,6 +247,8 @@ a[href^="htt"].md-nav__link::before {
 
 .homepage-buttons {
     display: flex;
+    margin-right: -.5em;
+    margin-left: -.5em;
 }
 
 .md-tabs__item {