WebP in blog post, button, frontpage marquee, styled inputs

S0GBttn.xcf

blog-posts/html-tag-ranking.md

@@ -4,4 +4,4 @@ updated: 2024 Feb 21

                                
                                
                                
                            
                                
                                    
                                        
                                            4  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            5  
                                            I like HTML. I recently found a video of [Theo](t3.gg) ranking HTML tags with a tierlist, the video is available on YouTube([URL](https://youtu.be/EtYtYnhxeNc)), and the tierlist is on TierMaker([URL](https://tiermaker.com/create/html-elements-16095055)). Without further ado, here is how I ranked all\* HTML elements.
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            6  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        7 -
                                        <img src="/blog-files/HTML_tierlist.png" style="width: 97%; height: auto" alt="S: h1, html, ul, link, details, summary, form, title, kbd, a, main, p, b, head, body, img, meta, br, footer, label, input; A: track, blockquote, q, h2, h3, hr svg, tfoot, i, u, textarea, style, code, tbody, optgroup, th, tr, option, select, pre, datalist, s, nav, td, em, iframe, embed, video, dialog, button, mark, ol, noscript, table, article, header, col, field, figcaption, samp, thead, area, colgroup; B: sup, progress, sub, h4, cite, strong, strike, picture, audio, h5, source, h6, canvas, abbr, script, caption; C: figure, math, wbr, hgroup, section, div, small, center, span, template; D: data, object, slot, marquee" />
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        7 +
                                        <img src="/blog-files/HTML_tierlist.webp" style="width: 97%; height: auto" alt="S: h1, html, ul, link, details, summary, form, title, kbd, a, main, p, b, head, body, img, meta, br, footer, label, input; A: track, blockquote, q, h2, h3, hr svg, tfoot, i, u, textarea, style, code, tbody, optgroup, th, tr, option, select, pre, datalist, s, nav, td, em, iframe, embed, video, dialog, button, mark, ol, noscript, table, article, header, col, field, figcaption, samp, thead, area, colgroup; B: sup, progress, sub, h4, cite, strong, strike, picture, audio, h5, source, h6, canvas, abbr, script, caption; C: figure, math, wbr, hgroup, section, div, small, center, span, template; D: data, object, slot, marquee" />
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

static/blog-files/HTML_tierlist.png

static/blog-files/HTML_tierlist.webp

static/button.webp

static/src/global.css

@@ -152,3 +152,59 @@ samp {

                                
                                
                                
                            
                                
                                    
                                        
                                            152  
                                            	font-size: .85rem;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            153  
                                            	white-space: pre-wrap;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            154  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        155 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        156 +
                                        .button-hotlink {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        157 +
                                            display: block;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        158 +
                                            margin-top: 3px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        159 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        160 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        161 +
                                        input,
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        162 +
                                        textarea {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        163 +
                                            appearance: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        164 +
                                            background-color: #000;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        165 +
                                            color: #fff;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        166 +
                                            border: 1px solid white;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        167 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        168 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        169 +
                                        input[type=checkbox],
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        170 +
                                        input[type=radio] {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        171 +
                                            width: 1em;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        172 +
                                            height: 1em;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        173 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        174 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        175 +
                                        input[type=radio] {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        176 +
                                            border-radius: 100%;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        177 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        178 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        179 +
                                        input:is([type=radio], [type=checkbox]):checked {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        180 +
                                            background-color: #f00;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        181 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        182 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        183 +
                                        .ticker-wrapper {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        184 +
                                            overflow: hidden;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        185 +
                                            display: block;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        186 +
                                            width: 100%;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        187 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        188 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        189 +
                                        .ticker-wrapper .ticker {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        190 +
                                            animation: infinite linear ticker 14s;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        191 +
                                            white-space: nowrap;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        192 +
                                            display: inline-block;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        193 +
                                            min-width: 100%;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        194 +
                                            box-sizing: content-box;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        195 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        196 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        197 +
                                        .ticker-wrapper.pauseonhover:hover > * {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        198 +
                                            animation-play-state: paused;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        199 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        200 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        201 +
                                        @keyframes ticker {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        202 +
                                            0% {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        203 +
                                                transform: translateX(100%);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        204 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        205 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        206 +
                                            100% {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        207 +
                                                transform: translateX(-100%);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        208 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        209 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        210 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

views/_layout.html

@@ -25,20 +25,57 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            25  
                                                <main>{% block content %}{% endblock %}</main>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            26  
                                                <footer>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            27  
                                                    <div class="footer-link-list-holder" role="group">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        28 -
                                                    <span aria-hidden="true" id="footer-label-site-details" class="footer-link-list-label">Site Meta</span>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        28 +
                                                    <span
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        29 +
                                                        aria-hidden="true"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        30 +
                                                        id="footer-label-site-details"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        31 +
                                                        class="footer-link-list-label"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        32 +
                                                    >Site Meta</span>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            33  
                                                        <ol class="footer-link-list" aria-labelledby="footer-label-site-details">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            34  
                                                            <li><a href="/list/website-sources-mirrors.html">Source Code and Mirrors</a></li>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            35  
                                                            <li><a href="https://steve0greatness.github.io/extras">Extras</a></li>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            36  
                                                        </ol>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            37  
                                                    </div>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            38  
                                                    <div class="footer-link-list-holder" role="group">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        35 -
                                                    <span aria-hidden="true" id="footer-label-social-accounts" class="footer-link-list-label">Social Accounts</span>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        39 +
                                                    <span
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        40 +
                                                        aria-hidden="true"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        41 +
                                                        id="footer-label-social-accounts"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        42 +
                                                        class="footer-link-list-label"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        43 +
                                                    >Social Accounts</span>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            44  
                                                        <ol class="footer-link-list" aria-labelledby="footer-label-social-accounts">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            45  
                                                            <li><a href="https://mastodon.social/@S0G" rel="me">Mastodon</a></li>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            46  
                                                            <li><a href="https://youtube.com/@s0g">YouTube</a></li>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            47  
                                                            <li><a href="/list/link-tree.html">More...</a></li>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            48  
                                                        </ol>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            49  
                                                    </div>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        50 +
                                                <div class="footer-link-list-holder" role="group">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        51 +
                                                    <span
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        52 +
                                                        aria-hidden="true"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        53 +
                                                        id="footer-label-button"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        54 +
                                                        class="footer-link-list-label"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        55 +
                                                    >Button(hotlink it)</span>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        56 +
                                                    <div class="footer-link-list" aria-labelledby="footer-label-button">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        57 +
                                                    <a href="https://steve0greatness.nekoweb.org">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        58 +
                                                        <img
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        59 +
                                                            src="/button.webp"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        60 +
                                                            title="Steve0Greatness"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        61 +
                                                            alt="Steve0Greatness"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        62 +
                                                            width="88"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        63 +
                                                            height="31"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        64 +
                                                            style="image-rendering: pixelated"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        65 +
                                                        />
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        66 +
                                                    </a>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        67 +
                                                    <textarea class="button-hotlink" readonly="readonly"><a href="https://steve0greatness.nekoweb.org">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        68 +
                                            <img
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        69 +
                                                src="https://steve0greatness.nekoweb.org/button.webp"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        70 +
                                                title="Steve0Greatness"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        71 +
                                                alt="Steve0Greatness"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        72 +
                                                width="88"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        73 +
                                                height="31"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        74 +
                                                style="image-rendering: pixelated"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        75 +
                                            />
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        76 +
                                        </a></textarea>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        77 +
                                                    </div>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        78 +
                                                </div>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            79  
                                                </footer>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            80  
                                            </body>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            81  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

views/index.html

@@ -11,4 +11,18 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            11  
                                            <h1>Steve0Greatness</h1>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            12  
                                            <p>Hey there! I'm <i>Steve0Greatness</i>(<a href="/blog/name.html">About my username</a>). Welcome to my website!</p>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            13  
                                            <p>I'm a <i>human being</i> with an interest in full-stack web-dev. I'm also a proponent for <dfn id="floss"><abbr title="Free/Libre Open Source Software">FLOSS</abbr></dfn>. Despite this, I have a really bad hoarding problem, specifically for accounts on random websites I visit once every 5 years; because of this, I have a list of these: <a href="/list/link-tree.html">link tree</a>.</p>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        14 +
                                        <h2 id="cool-people-projects">Cool People &amp; Projects!</h2>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        15 +
                                        <div class="ticker-wrapper pauseonhover">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        16 +
                                            <div class="ticker">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        17 +
                                                <a href="https://tauon.dev/" target="_blank">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        18 +
                                                    <img
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        19 +
                                                        src="https://tauon.dev/images/88x31/lily.png"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        20 +
                                                        alt="lily"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        21 +
                                                        width="88"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        22 +
                                                        height="31"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        23 +
                                                        style="image-rendering: pixelated"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        24 +
                                                    />
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        25 +
                                                </a>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        26 +
                                            </div>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        27 +
                                        </div>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            28  
                                            {% endblock %}