-
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.
- Loading branch information
0 parents
commit c545a86
Showing
65 changed files
with
4,108 additions
and
0 deletions.
There are no files selected for viewing
Empty file.
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,47 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en-us" prefix="og: https://ogp.me/ns#"> | ||
|
|
||
| <head> | ||
|
|
||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>404 Not Found - S0G</title> | ||
| <link rel="stylesheet" href="/src/global.css" /> | ||
| <meta property="og:locale" content="en_US"/> | ||
| <meta property="og:site_name" content="Steve0Greatness' Site"/> | ||
|
|
||
| </head> | ||
|
|
||
| <body> | ||
| <header> | ||
| <h2><a href="/">Steve0Greatness</a></h2> | ||
| <nav> | ||
| <a href="/blog">Blog</a> | ||
| <a href="/list/link-tree.html">Link Tree</a> | ||
| </nav> | ||
| </header> | ||
|
|
||
| <main> | ||
| <h1>Error 404: Not Found</h1> | ||
| <p>The requested resource was unable to be found. Maybe try going back to the <a href="/">index</a>?</p> | ||
| </main> | ||
| <footer role="group"> | ||
| <div class="footer-link-list-holder"> | ||
| <span aria-hidden="true" id="footer-label-site-details" class="footer-link-list-label">Site Meta</span> | ||
| <ol class="footer-link-list" aria-labelledby="footer-label-site-details"> | ||
| <li><a href="https://github.com/Steve0Greatness/steve0greatness.github.io">Github Repository</a></li> | ||
| <li><a href="https://steve0greatness.github.io/extras">Extras Archive</a></li> | ||
| </ol> | ||
| </div> | ||
| <div class="footer-link-list-holder"> | ||
| <span aria-hidden="true" id="footer-label-social-accounts" class="footer-link-list-label">Social Accounts</span> | ||
| <ol class="footer-link-list" aria-labelledby="footer-label-social-accounts"> | ||
| <li><a href="https://mastodon.social/@S0G" rel="me">Mastodon</a></li> | ||
| <li><a href="https://youtube.com/@s0g">YouTube</a></li> | ||
| <li><a href="/list/link-tree.html">More...</a></li> | ||
| </ol> | ||
| </div> | ||
| </footer> | ||
| </body> | ||
|
|
||
| </html> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,89 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en-us" prefix="og: https://ogp.me/ns#"> | ||
|
|
||
| <head> | ||
|
|
||
|
|
||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Changing the light-mode - S0G</title> | ||
| <link rel="stylesheet" href="/src/global.css" /> | ||
| <meta property="og:locale" content="en_US"/> | ||
| <meta property="og:site_name" content="Steve0Greatness' Site"/> | ||
|
|
||
| <link rel="stylesheet" href="/src/code-blocks.css" /> | ||
| <link rel="stylesheet" href="/src/blog.css" /> | ||
| <link rel="alternate" href="/blog/Changing_the_Light-mode.txt" type="text/plain" title="Post source" /> | ||
| <meta property="og:title" content="Changing the light-mode" /> | ||
| <meta property="og:url" content="https://steve0greatness.github.io/blog/Changing_the_Light-mode.html" /> | ||
|
|
||
| </head> | ||
|
|
||
| <body> | ||
| <header> | ||
| <h2><a href="/">Steve0Greatness</a></h2> | ||
| <nav> | ||
| <a href="/blog">Blog</a> | ||
| <a href="/list/link-tree.html">Link Tree</a> | ||
| </nav> | ||
| </header> | ||
|
|
||
| <ol role="navigation" class="breadcrumbs" aria-roledescription="Site breadcrumb"> | ||
| <li> | ||
| <a href="/">Index</a> | ||
| </li> | ||
|
|
||
| <li > | ||
| <a href="/blog"> | ||
| Blog Index | ||
| </a> | ||
| </li> | ||
|
|
||
| <li aria-current="location"> | ||
|
|
||
| Changing the light-mode | ||
|
|
||
| </li> | ||
|
|
||
| </ol> | ||
| <main> | ||
| <article> | ||
| <header> | ||
| <h2 id="blog-post-titled">Changing the light-mode</h2> | ||
| <div role="toolbar" class="toolbar"> | ||
| <a href="https://toot.kytta.dev/?text=Take a look at this article by @[email protected]: https://steve0greatness.github.io/blog/Changing_the_Light-mode.html" title="Share to Mastodon"> | ||
| <img src="/toot-kytta-dev-icon.png" width="16" height="16" aria-hidden="true" title="Share to Mastodon" /> | ||
| </a> | ||
| <a href="/blog/Changing_the_Light-mode.html" title="Direct link"> | ||
| <img src="/link-icon.png" width="16" height="16" aria-hidden="true" title="Direct link" /> | ||
| </a> | ||
| <a href="/blog/Changing_the_Light-mode.txt" title="Markdown source"> | ||
| <img src="/md-src.png" width="16" height="16" aria-hidden="true" /> | ||
| </a> | ||
| </div> | ||
| <time>2021 Sep 11</time> | ||
| </header> | ||
| <p>As of currently, the light mode on this site doesn't live up to what I want it to be.<br />I want it to be something that is the opposite of the dark mode, and it really isn't that. Expect it to change. But, in case you do still want to view it, here are the current css variable colors:<br /><div class="code">html.l {<div style="margin-left: 1em;">--navCo: #0F0089;<br />--headCo: #3700FF;<br />--linkCo: #F7E45D;<br />--maCo: #0044F7;<br />--maTxtCo: #C2FFBA;<br />--buCo: #F09;<br />--buTxtCo: #0FF;<br />--buBoCo: #fff;<br />--noteCo: #f25;<br />--noteTxtCo: #ccc;<br />--inCo: #0bf;<br />--inlinkCo: #05c;<br />--selCo: #f51;<br />--selTxtCo: #059;<br />--taCo: #cf4;<br />--taTxtCo: black;</div>}</div></p> | ||
|
|
||
| </article> | ||
| </main> | ||
| <footer role="group"> | ||
| <div class="footer-link-list-holder"> | ||
| <span aria-hidden="true" id="footer-label-site-details" class="footer-link-list-label">Site Meta</span> | ||
| <ol class="footer-link-list" aria-labelledby="footer-label-site-details"> | ||
| <li><a href="https://github.com/Steve0Greatness/steve0greatness.github.io">Github Repository</a></li> | ||
| <li><a href="https://steve0greatness.github.io/extras">Extras Archive</a></li> | ||
| </ol> | ||
| </div> | ||
| <div class="footer-link-list-holder"> | ||
| <span aria-hidden="true" id="footer-label-social-accounts" class="footer-link-list-label">Social Accounts</span> | ||
| <ol class="footer-link-list" aria-labelledby="footer-label-social-accounts"> | ||
| <li><a href="https://mastodon.social/@S0G" rel="me">Mastodon</a></li> | ||
| <li><a href="https://youtube.com/@s0g">YouTube</a></li> | ||
| <li><a href="/list/link-tree.html">More...</a></li> | ||
| </ol> | ||
| </div> | ||
| </footer> | ||
| </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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| title: Changing the light-mode | ||
| date: 2021 Sep 11 | ||
| --- | ||
| As of currently, the light mode on this site doesn't live up to what I want it to be.<br />I want it to be something that is the opposite of the dark mode, and it really isn't that. Expect it to change. But, in case you do still want to view it, here are the current css variable colors:<br /><div class="code">html.l {<div style="margin-left: 1em;">--navCo: #0F0089;<br />--headCo: #3700FF;<br />--linkCo: #F7E45D;<br />--maCo: #0044F7;<br />--maTxtCo: #C2FFBA;<br />--buCo: #F09;<br />--buTxtCo: #0FF;<br />--buBoCo: #fff;<br />--noteCo: #f25;<br />--noteTxtCo: #ccc;<br />--inCo: #0bf;<br />--inlinkCo: #05c;<br />--selCo: #f51;<br />--selTxtCo: #059;<br />--taCo: #cf4;<br />--taTxtCo: black;</div>}</div> |
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,89 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en-us" prefix="og: https://ogp.me/ns#"> | ||
|
|
||
| <head> | ||
|
|
||
|
|
||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Creating a HTML drop-down list - S0G</title> | ||
| <link rel="stylesheet" href="/src/global.css" /> | ||
| <meta property="og:locale" content="en_US"/> | ||
| <meta property="og:site_name" content="Steve0Greatness' Site"/> | ||
|
|
||
| <link rel="stylesheet" href="/src/code-blocks.css" /> | ||
| <link rel="stylesheet" href="/src/blog.css" /> | ||
| <link rel="alternate" href="/blog/Creating_HTML_DD_List.txt" type="text/plain" title="Post source" /> | ||
| <meta property="og:title" content="Creating a HTML drop-down list" /> | ||
| <meta property="og:url" content="https://steve0greatness.github.io/blog/Creating_HTML_DD_List.html" /> | ||
|
|
||
| </head> | ||
|
|
||
| <body> | ||
| <header> | ||
| <h2><a href="/">Steve0Greatness</a></h2> | ||
| <nav> | ||
| <a href="/blog">Blog</a> | ||
| <a href="/list/link-tree.html">Link Tree</a> | ||
| </nav> | ||
| </header> | ||
|
|
||
| <ol role="navigation" class="breadcrumbs" aria-roledescription="Site breadcrumb"> | ||
| <li> | ||
| <a href="/">Index</a> | ||
| </li> | ||
|
|
||
| <li > | ||
| <a href="/blog"> | ||
| Blog Index | ||
| </a> | ||
| </li> | ||
|
|
||
| <li aria-current="location"> | ||
|
|
||
| Creating a HTML drop-down list | ||
|
|
||
| </li> | ||
|
|
||
| </ol> | ||
| <main> | ||
| <article> | ||
| <header> | ||
| <h2 id="blog-post-titled">Creating a HTML drop-down list</h2> | ||
| <div role="toolbar" class="toolbar"> | ||
| <a href="https://toot.kytta.dev/?text=Take a look at this article by @[email protected]: https://steve0greatness.github.io/blog/Creating_HTML_DD_List.html" title="Share to Mastodon"> | ||
| <img src="/toot-kytta-dev-icon.png" width="16" height="16" aria-hidden="true" title="Share to Mastodon" /> | ||
| </a> | ||
| <a href="/blog/Creating_HTML_DD_List.html" title="Direct link"> | ||
| <img src="/link-icon.png" width="16" height="16" aria-hidden="true" title="Direct link" /> | ||
| </a> | ||
| <a href="/blog/Creating_HTML_DD_List.txt" title="Markdown source"> | ||
| <img src="/md-src.png" width="16" height="16" aria-hidden="true" /> | ||
| </a> | ||
| </div> | ||
| <time>2021 Oct 01</time> | ||
| </header> | ||
| <p>Inorder to create a drop-down selection list in HTML, we must first understand why they are important.<br />Drop-down lists can be used in lots of ways, from creating a way for people to chose from a strict set of options, to making an on-off switch(even though you should use buttons for that)<br />Before we start, here is an example:<table><td style="font-weight: bolder; text-align: right; font-size: 1em;">Select Image: </td><td><select id="selcet" onchange="document.getElementById('img').src = document.getElementById('selcet').value"><option value="https://upload.wikimedia.org/wikipedia/commons/a/a2/Paul_von_Hindenburg_%281914%29_von_Nicola_Perscheid.jpg" selected="true">Img 1</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/Wilfried_Gruhn.jpg/121px-Wilfried_Gruhn.jpg">Img 2</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Blackcap_%28Sylvia_atricapilla%29_male.jpg/129px-Blackcap_%28Sylvia_atricapilla%29_male.jpg">Img 3</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Lt._Gen._Nguy%E1%BB%85n_V%C4%83n_Thi%E1%BB%87u_at_Cam_Ranh_Base%2C_October_26%2C_1966.jpg/116px-Lt._Gen._Nguy%E1%BB%85n_V%C4%83n_Thi%E1%BB%87u_at_Cam_Ranh_Base%2C_October_26%2C_1966.jpg">Img 3</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Steve_Stricker.jpg/157px-Steve_Stricker.jpg">Img 4</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Aegotheles_chrisoptus_-_Catlereigh_Nature_Reserve.jpg/350px-Aegotheles_chrisoptus_-_Catlereigh_Nature_Reserve.jpg">Img 5</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Michael_Whelan_-_Lucca_2017.jpg/118px-Michael_Whelan_-_Lucca_2017.jpg">Img 6</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/St_Pancras_Railway_Station_2012-06-23.jpg/152px-St_Pancras_Railway_Station_2012-06-23.jpg">Img 7</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Mae_La_refugee_camp_TFA.jpg/162px-Mae_La_refugee_camp_TFA.jpg">Img 8</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/JimmyCarterPortrait_%28cropped%29.jpg/121px-JimmyCarterPortrait_%28cropped%29.jpg">Img 9</option></select></td></table><img id="img" src="https://upload.wikimedia.org/wikipedia/commons/a/a2/Paul_von_Hindenburg_%281914%29_von_Nicola_Perscheid.jpg" style="width: auto; height: 10em;" /><div style="font-size: 10px;">Images from <a style="color: inherit;" href="https://en.wikipedia.org">Wikipedia</a>, on <a style="color: inherit;" href="https://web.archive.org/web/20211001135954/https://en.wikipedia.org/wiki/Main_Page">Oct. 2nd & </a><a style="color: inherit;" href="https://web.archive.org/web/20211002095505/https://en.wikipedia.org/wiki/Main_Page">1st, 2021</a></div>For some weird reason, it's not in<div class="code"><input></div>It has it's own tags, know as <span class="code"><select></span> and <span class="code"><option></span>. Using these is alittle like making a list, if you've ever made one. Here's an example bit of HTML.<div class="code"><select><div style="text-indent: 1em;"><option>op 1</option></div><div style="text-indent: 1em;"><option>op 2</option></div></select></div>Next we want to add values to <span class="code"><options></span>, and an id(#) to <span class="code"><select></span>.<br />You most-likely already know how to do ids, and maybe also values(if you have used input in any way), so I'll leave it up to you.<br />However, you may not know some things that could be useful here, such as preselections, or making things update upon being changed, well, you can do preselections with <span class="code">selected</span> in the <span class="code"><option></span> that you want to be preselected. Changes done the page upon the change of the selection in the drop-down(or anything else that can be changed by the user) is <span class="code">onchange="submitFunction()"</span> being placed in the <span class="code"><select></span>.<br />Let's check back on the code that we made at the code example:<div class="code" id="finished"><select onchange="submitFunction()" id="selection"><div style="text-indent: 1em;"><option value="op1" selected>op 1</option></div><div style="text-indent: 1em;"><option value="op2">op 2</option></div></select></div>Inorder to access the selected option with JavaScript, use <span class="code">document.getElementById("selection").value</span><br />That's basically it, feel free to <span class="code">CTRL + C</span> <span class="code">CTRL + V</span> it. /s</p> | ||
|
|
||
| </article> | ||
| </main> | ||
| <footer role="group"> | ||
| <div class="footer-link-list-holder"> | ||
| <span aria-hidden="true" id="footer-label-site-details" class="footer-link-list-label">Site Meta</span> | ||
| <ol class="footer-link-list" aria-labelledby="footer-label-site-details"> | ||
| <li><a href="https://github.com/Steve0Greatness/steve0greatness.github.io">Github Repository</a></li> | ||
| <li><a href="https://steve0greatness.github.io/extras">Extras Archive</a></li> | ||
| </ol> | ||
| </div> | ||
| <div class="footer-link-list-holder"> | ||
| <span aria-hidden="true" id="footer-label-social-accounts" class="footer-link-list-label">Social Accounts</span> | ||
| <ol class="footer-link-list" aria-labelledby="footer-label-social-accounts"> | ||
| <li><a href="https://mastodon.social/@S0G" rel="me">Mastodon</a></li> | ||
| <li><a href="https://youtube.com/@s0g">YouTube</a></li> | ||
| <li><a href="/list/link-tree.html">More...</a></li> | ||
| </ol> | ||
| </div> | ||
| </footer> | ||
| </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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| title: Creating a HTML drop-down list | ||
| date: 2021 Oct 01 | ||
| --- | ||
| Inorder to create a drop-down selection list in HTML, we must first understand why they are important.<br />Drop-down lists can be used in lots of ways, from creating a way for people to chose from a strict set of options, to making an on-off switch(even though you should use buttons for that)<br />Before we start, here is an example:<table><td style="font-weight: bolder; text-align: right; font-size: 1em;">Select Image: </td><td><select id="selcet" onchange="document.getElementById('img').src = document.getElementById('selcet').value"><option value="https://upload.wikimedia.org/wikipedia/commons/a/a2/Paul_von_Hindenburg_%281914%29_von_Nicola_Perscheid.jpg" selected="true">Img 1</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/Wilfried_Gruhn.jpg/121px-Wilfried_Gruhn.jpg">Img 2</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Blackcap_%28Sylvia_atricapilla%29_male.jpg/129px-Blackcap_%28Sylvia_atricapilla%29_male.jpg">Img 3</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Lt._Gen._Nguy%E1%BB%85n_V%C4%83n_Thi%E1%BB%87u_at_Cam_Ranh_Base%2C_October_26%2C_1966.jpg/116px-Lt._Gen._Nguy%E1%BB%85n_V%C4%83n_Thi%E1%BB%87u_at_Cam_Ranh_Base%2C_October_26%2C_1966.jpg">Img 3</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Steve_Stricker.jpg/157px-Steve_Stricker.jpg">Img 4</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Aegotheles_chrisoptus_-_Catlereigh_Nature_Reserve.jpg/350px-Aegotheles_chrisoptus_-_Catlereigh_Nature_Reserve.jpg">Img 5</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Michael_Whelan_-_Lucca_2017.jpg/118px-Michael_Whelan_-_Lucca_2017.jpg">Img 6</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/St_Pancras_Railway_Station_2012-06-23.jpg/152px-St_Pancras_Railway_Station_2012-06-23.jpg">Img 7</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Mae_La_refugee_camp_TFA.jpg/162px-Mae_La_refugee_camp_TFA.jpg">Img 8</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/JimmyCarterPortrait_%28cropped%29.jpg/121px-JimmyCarterPortrait_%28cropped%29.jpg">Img 9</option></select></td></table><img id="img" src="https://upload.wikimedia.org/wikipedia/commons/a/a2/Paul_von_Hindenburg_%281914%29_von_Nicola_Perscheid.jpg" style="width: auto; height: 10em;" /><div style="font-size: 10px;">Images from <a style="color: inherit;" href="https://en.wikipedia.org">Wikipedia</a>, on <a style="color: inherit;" href="https://web.archive.org/web/20211001135954/https://en.wikipedia.org/wiki/Main_Page">Oct. 2nd & </a><a style="color: inherit;" href="https://web.archive.org/web/20211002095505/https://en.wikipedia.org/wiki/Main_Page">1st, 2021</a></div>For some weird reason, it's not in<div class="code"><input></div>It has it's own tags, know as <span class="code"><select></span> and <span class="code"><option></span>. Using these is alittle like making a list, if you've ever made one. Here's an example bit of HTML.<div class="code"><select><div style="text-indent: 1em;"><option>op 1</option></div><div style="text-indent: 1em;"><option>op 2</option></div></select></div>Next we want to add values to <span class="code"><options></span>, and an id(#) to <span class="code"><select></span>.<br />You most-likely already know how to do ids, and maybe also values(if you have used input in any way), so I'll leave it up to you.<br />However, you may not know some things that could be useful here, such as preselections, or making things update upon being changed, well, you can do preselections with <span class="code">selected</span> in the <span class="code"><option></span> that you want to be preselected. Changes done the page upon the change of the selection in the drop-down(or anything else that can be changed by the user) is <span class="code">onchange="submitFunction()"</span> being placed in the <span class="code"><select></span>.<br />Let's check back on the code that we made at the code example:<div class="code" id="finished"><select onchange="submitFunction()" id="selection"><div style="text-indent: 1em;"><option value="op1" selected>op 1</option></div><div style="text-indent: 1em;"><option value="op2">op 2</option></div></select></div>Inorder to access the selected option with JavaScript, use <span class="code">document.getElementById("selection").value</span><br />That's basically it, feel free to <span class="code">CTRL + C</span> <span class="code">CTRL + V</span> it. /s |
Oops, something went wrong.