-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Create mockup for basic example page - Placeholder code in basic.js for testing scrollable page - Implement code to support common themes across pages, namely loading source content into a collapsible div with syntax highlights (thanks highlight.js) - More style rules for the site, including buttons and controls, horizontal rule, main and aside content, smooth scroll, and source container styling
- Loading branch information
Showing
5 changed files
with
301 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
|
|
||
| <head> | ||
| <style> | ||
| body { | ||
| background: #000; | ||
| color: #f0f8ff; | ||
| } | ||
| </style> | ||
| <link rel="stylesheet" href="css/page.css"> | ||
| <link rel="stylesheet" href="css/main.css"> | ||
| <script src="js/basic.js"></script> | ||
|
|
||
| <script src="js/main.js"></script> | ||
|
|
||
| <!-- Code highlighting --> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/night-owl.min.css"> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/javascript.min.js"></script> | ||
|
|
||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| <div class="center page-box page-style flex-container"> | ||
| <div class="flex-aside center-text"> | ||
| <p><a href="index.html">Homepage</a></p> | ||
| <p class="flex-column-to-bottom"><a href="#">Scroll to top</a></p> | ||
| </div> | ||
| <div class="flex-main"> | ||
| <h1 id="title" class="center-text text-glow-responsive"> | ||
| Basic Sound Control | ||
| </h1> | ||
| <p class="center-text text-glow"> | ||
| Playing a sound using MusicMixer.js | ||
| </p> | ||
| <hr> | ||
|
|
||
| <div class="flex-container flex-center flex-controls"> | ||
| <button type="button">Play Music</button> | ||
| <button type="button">Stop Music</button> | ||
| <button type="button">Fade In<br>(Start)</button> | ||
| <button type="button">Fade Out<br>(Stop)</button> | ||
| </div> | ||
|
|
||
| <hr> | ||
| <div class="source-code-container"> | ||
| <button type="button" class="collapse-button" onclick="collapse(this, 'Hide Source', 'code')">Show Source</button> | ||
| <div name="code" class="collapse-content"> | ||
| <pre class="m-0"><code name="source-code" class="language-javascript">Source code!!</code></pre> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script> | ||
| loadSourceCode('source-code', 'js/basic.js') | ||
| .catch((reason) => { console.error(reason); }) | ||
| .finally(() => { hljs.highlightAll(); }); | ||
| </script> | ||
|
|
||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -7,6 +7,10 @@ body { | |
| min-height: 100%; | ||
| } | ||
|
|
||
| html { | ||
| scroll-behavior: smooth; | ||
| } | ||
|
|
||
| *, | ||
| *:before, | ||
| *:after { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| // Source code!! | ||
|
|
||
| const thing = { Yooo: 'World' }; | ||
| console.log('Two lines'); | ||
|
|
||
| // So many lines | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // What to do with my time | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // Never ending? | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // It ends! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| async function loadSourceCode(name, path) { | ||
| const sourceCode = await (await fetch(path)).text(); | ||
| const elements = document.getElementsByName(name); | ||
| elements.forEach((element) => (element.innerHTML = sourceCode)); | ||
| } | ||
|
|
||
| function collapse(self, toggleText, name) { | ||
| self.classList.toggle('collapse-active'); | ||
| if (!self.getAttribute('data-toggle-text')) { | ||
| self.setAttribute('data-toggle-text', toggleText); | ||
| } | ||
| const text = self.getAttribute('data-toggle-text'); | ||
| self.setAttribute('data-toggle-text', self.innerHTML); | ||
| self.innerHTML = text; | ||
| const elements = document.getElementsByName(name); | ||
| if (!elements.length) { | ||
| console.warn(`Tried to toggle collapsible elements named ${name}, but it wasn't on the page!`); | ||
| return; | ||
| } | ||
| elements.forEach((element) => { | ||
| if (element.style.maxHeight) { | ||
| element.style.maxHeight = null; | ||
| } else { | ||
| element.style.maxHeight = element.scrollHeight + 'px'; | ||
| } | ||
| }); | ||
| } |