Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <a href="#" style="font-size: 2em; position: fixed; bottom: 0.5em; right: 0.5em;">&#8593;</a>

<main>
  <h1 id="devlog">DEVELOGGER</h1>
  <input type="checkbox" checked id="details">
  <input type="checkbox" checked id="fapple">
  <input type="checkbox" checked id="design">
  <input type="checkbox" checked id="order">
  <input type="checkbox" checked id="notag">


  <details>
    <summary></summary>
    <label for="notag"> no tags (shorts & actual site updates - the rest are ramblings LOL)</label>
    <label for="details"> (small tweaks, web rants)</label>
    <label for="fapple"> (browser compatibility)</label>
    <label for="design"> (CSS tag. if you know, you know.)</label>
    <label for="order"></label>
  </details> 
  <br>
  <div class="notag design">
    <strong>28-04-22 -- FILTERS!!!</strong>
    <p>
      I DID IT. I made <strong>a filter system using only CSS</strong>. We are a no scripts society &gt;:) Right now the devlog is a sandbox for filter (the tags - very Tumblr, ik), but I intend to use this in u3s6e9r&#39;s page.</p>
    <p>The very first idea of a filter came to me last year when I saw <a target="_blank" href="https://otto958.systems">Otto985&#39;s website</a> (sidenote: the portal on my page might be inspired by them too. Damn I thought I just like the idea of &quot;terminal commands&quot;-like shortcuts but now that I think about it... maybe it&#39;s really an Otto985 inspo). I tried replicating their layout to use it for u3s6e9r&#39;s page (yes I started working on u3s6e9r&#39;s page since last year), did a bunch of draft on that, unfortunately my noob coding skills didn&#39;t catch up with the idea. I really thought this was impossible with pure CSS. Well, I did it! It&#39;s still a bit hacky, I may try to improve it in the future. But hey, it's lightweight and it works.</p>
<i></i><i></i><i></i><i></i>
  </div>

  <div class="details fapple"><strong>27-04-22</strong>
    <p>
      Got access to a Lenovo ThinkCentre at school, I think e0x0e0 works well in Edge, except that it looks <strong>tiny</strong>. I work on a Mac Pro, but I have scaled screen so my viewport looks like 1280 x 800, which is smaller than most nowadays&#39; computer screen. Maybe I&#39;ll put a note on my front page telling people to <code>Ctrl&#65291;</code> to see things properly.</p>

    <p>I changed the cursor from inline SVG (the cursor is an ASCII character, the &#10040;) to PNG the other day because it broke on Safari. Now I change it back to SVG again because the PNG cursor looks fugly and pixelated on Safari. The SVG looked crisp for a few days and now it&#39;s pixelated again, and occasionally breaks into random strings. Works fine on Chrome&#47;Edge tho. Tried <code>image-rendering: pixelated</code>, base64-ing the picture, clearing Safari's cache, nothing works. Might be Apple&#39;s font smoothing but I&#39;m not sure, it looks like a bad resize job using <strong>sips</strong>. God damn. So much for having a custom cursor. </p>
    <p>Who knows 90% time spent making a website is just trying to make it look the same on every browser. </p>
    <i></i><i></i><i></i><i></i>
  </div>

  <div class="notag design">
    <strong>25-04-22 </strong>
    <p>Added Winamp player cheatsheet. Also switched to pure CSS modals (alert boxes). Why? because JavaScript <code>alert()</code> and similar JS methods block the Winamp player, and because I can. I always wanted to reduce the amount of scripts on the page, even if it adds a bit of markup. After all CSS <em>is</em> Turing-complete, so theoretically you can do <em>anything</em> with it, and I&#39;m willing to try.</p>
    <p>I previously learned to make modals with anchor links and <code>div:not(:target) { display: none}</code>, but this changes the URL and writes more into the browsing history, so it doesn&#39;t really behave like a modal. My new CSS modals are based on <code>&lt;input type=&quot;checkbox&quot;&gt;</code> and <code>&lt;label&gt;</code>, <a target="_blank" href="https://github.com/you-dont-need/You-Dont-Need-JavaScript">inspired by this</a>. Shoutout to <a target="_blank" href="https://tonicfunk.neocities.org/index.html">Tonic Funks</a> for including this in their Links page.</p>
    <i></i><i></i><i></i><i></i>
  </div>
  
  <div class="notag"><strong>24-04-22</strong>
    <p>Added Winamp player, and of course I have changed my whole layout to adopt the Winamp. Haha. Oops. The skeuomorphic y2k computer screen was cute but I don&#39;t want to seem nostalgic (since I&#39;m not) and honestly I don&#39;t like useless skeuomorphism. The pseudo-screen was functional, it served to limit viewport to ~750px, but now I don't need it anymore. <a target="_blank" href="https://e0x0e0.neocities.org/page2.html">I still have the old layout here</a> in case I change my mind lol.</p>
    <p>Also, moved main navigators to the side. They used to be at the bottom of every page, and looked cute with the whole computery aesthetic but it required extra padding and I had to paste it to every page. Silly me. Also? It&#39;s a shame that the <code>&lt;frame&gt;</code> element is obsolete, really. No more bottom navigations.</p>

    <i></i><i></i><i></i><i></i>
  </div>

  <div class=" design"><strong>17-04-22</strong>
    <p>
      no: create smaller flexboxes to allow line breaks between flex sections</p>
    <p>yes: create one huge flexbox then hijack it with horizontal rules</p>
    <p>tell me now am I insane.</p>
    <i></i><i></i><i></i> <br><br>
    <p>also, found a new tip: from now on whenever I need to link to a Youtube video I&#39;ll just get the no-cookie variation of the embed link, for example, <a target="_blank" href="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ">https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ</a>. No ads, no recommendation, less surveillance, just how a video should be.</p>
  </div>

  <div class="design notag"><strong>13-04-22</strong>
    <p>Rewritten the copying page. Rewritten the whole style of the index page, really. Changed background color to silver (#c0c0c0 in hex, I was this close to go with #e0e0e0 to be meta) because after hours of staring at the screen, black on white doesn&#39;t seem like a good idea anymore. I can&#39;t decide on an off-white color, and white on black or a &quot;dark mode&quot; scheme is kind of gloomy and makes me want to sleep, so now we have black on grey. I unironically think it looks good. </p>
<p>More note on color palette: it&#39;s not like I want to go grayscale, but I have to put a limit on colors because i&#39;m so indecisive and if I have too many options my brain will explode and I will stop functioning. I learned that when I started using TIC-80 and realized it&#39;s much, much easier to work with a limited palette. It goes the same for drawing, making powerpoint presentations etc, I&#39;d always have to start from b&amp;w or a gray scale, get all the base done, and then I&#39;ll consider colors. If I start with colors I&#39;ll get NOTHING done. With this page I think I&#39;m limiting it to the hex grayscale (#fff - #000), dark blue (000080), blue, and red.</p>
    <i></i><i></i><i></i><i></i>
  </div>
  <div class="details order"><strong>02-04-22</strong>
    <p>God I&#39;ve spent months fixing a bunch of small things that I was too lazy to fix. The devil&#39;s in the details. Reformatted this whole page because I changed the font and realized I can&#39;t just get away with <code>white-space: pre-wrap;</code> everything to save tags.</p>
    <p>I'm really trying to make this page as lightweight as possible with all the styling I'm putting into it. I discovered some post-processors that can format my HTML and CSS files, but I'll only run it when I've already <em>perfected</em> the markup. </p>
    <i></i><i></i><i></i><i></i>
  </div>
  <div class="notag"><strong>22-02-22</strong>
    <p>Added the Shrine, which for now includes picrews and some Advance-Garbage fashion brands. Added the Inventory, which includes Bookmark &amp; Web tools. So far just functional stuff for my use.</p>
  </div>
  <div class="design"><strong>21-01-22</strong>
    <p>Happy New Year. I played around with CSS and changed everything again in terms of design. There&#39;s no such thing as a microblog anymore. Added more multimedia content. Added my diary so you can use it to bully me in the future.</p>
    <i></i><i></i><i></i><i></i>
  </div>
  <div class="notag"><strong>22-12-21</strong>
    <p>New user147&#39;s microblog entries. Believe it or not, I spent more time fixing grammar errors and typos on this page than I do coding.</p>
  </div>
  <div class="design details"><strong>03-12-21 -- FONTS!!!</strong>
    <p>Changed the font to Arial. Good ol&#39; sans-serif Arial. At first I didn&#39;t expect to do a lot of writing so this whole page was set in Menlo, Roboto Mono or monospace (there was a lot of ASCII art around here so setting all the texts to monospace saved me a lot of formatting). But after some long ass blog (rant) entries I realized that:</p>
    <ol>
      <li style="font-family: monospace;  font-size: 14px;">Monospace fonts make it easier to recognize letters, but not words.</li>
      <li style="font-family: serif;  font-size: 17px;">Serif fonts make it easier to recognize words, but not letters. Also they give me visual fatigue.</li>
      <li>Sans-serif fonts are perfect for reading, and Arial is the best sans-serif font ever made.</li>
    </ol>
    <p>A bit of letter-spacing and line-height magic and Arial becomes the most readable font ever.</p>
    <p style="font-family: 'Monaco', sans-serif;  font-size: 14px;">Readable monospaced fonts like Monaco is on thin ice (and it&#39;s also used in the code editor of Neocities I believe?). But hey Monaco isn&#39;t one of the default fonts in some browsers. So, boo.</p>
    <p style="font-family: 'Courier', monospace;  font-size: 14px;">Courier should be used very sparingly for it is a reading nightmare, as it is <strong>both monospaced AND serif</strong>. I get tired looking at all the nooks and crannies of it and if I need to read a wall of text in Courier I&#39;ll just hang myself.</p>
    <p>That said, if the text was formatted properly (i.e it has hierarchy and moderate paragraph spacing, unlike mine) and if the content was well-written (unlike mine), then I honestly don&#39;t mind reading it in <em style="font-family: 'Times', 'Times New Roman', serif; font-size: 17px;">Times New Roman.</em></p>
    <i></i><i></i><i></i><i></i>
  </div>
  <div class="notag"><strong>26-11-21</strong>
    <p>Made a Go Back and Refresh button just so I can edit and preview them easier locally. Added Picrew page &amp; changed the Microblog layout completely. Enjoy Microblog 2.0!</p>
  </div>
  <div class="notag"><strong>21-11-21</strong>
    <p>So I saw Sadgrl&#39;s new updates including their own <a target="_blank" href="https://yesterweb.org/radio/index.html">Yesterweb Radio</a>, and I was hooked. As a frequent listener of <a target="_blank" href="https://anonradio.net/">aNONradio</a>, I was <em>very</em> tempted to learn how to stream my own radio station through icecast (as if I have anything good to stream) but apparently I didn&#39;t have any time at the moment. So next &quot;goal&quot; is to figure out the whole icecast thing. Shouldn&#39;t be rocket science.</p>
  </div>
  <div class="notag"><strong>25-09-21</strong>
    <p>Finally renovated the index. Removed the &quot;Under Construction&quot; sign, it&#39;s now forever under destruction &lt;/3</p>
  </div>
</main>
              
            
!

CSS

              
                * {
  line-height: 1.5em;
  letter-spacing: 0.01em;
}

body {
  background: #c0c0c0;
}

main {
  margin: auto;
  max-width: 30em;
  font-family: Arial,sans-serif;
  font-size: 16px;
}

main > div {
  margin-top: 1em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid #333;
}

div > p {
  margin-top: 0;
}

details > summary::after {
  content: "Some filters";
}

[open] > summary::after {
  content: " (all checked by default, click to check / uncheck)";
}

.details > i:nth-of-type(1)::after, label[for="details"]::before {
  content: "# minor detail that hurts nobody except for the webmaster who is a pathological perfectionist";
}

.fapple > i:nth-of-type(2)::after, label[for="fapple"]::before {
  content: "# is safari a bitch or am i bad at programming";
}

.design > i:nth-of-type(3)::after, label[for="design"]::before {
  content: "# le web design is mon passion";
}

.order > i:nth-of-type(4)::after, label[for="order"]::before {
  content: "# compulsively ordering everything because my life has no order";
}

i::after {display: inline-block;}

details > label {
  display: block;
  margin: 0.5em 0;
  padding: 0 3px;
  cursor: pointer;
}

details > label, a:link, a:visited {
  text-decoration: none;
  border-radius: 3px;
  color: #000080;
  transition: background-color 0.3s ease,color 0.5s ease;
}

a { padding: 2px;}

#details:checked ~ details > [for="details"], #fapple:checked ~ details > [for="fapple"], #design:checked ~ details > [for="design"], #order:checked ~ details > [for="order"], #notag:checked ~ details > [for="notag"], a:hover {
  color: blue; background: #dadada; box-shadow: 2px 2px 0px #555;
  transition: background-color 0.3s ease,color 0.5s ease;
}

input[type="checkbox"], main > div {
  display: none;
}

#details:checked ~ .details, #fapple:checked ~ .fapple, #design:checked ~ .design, #order:checked ~ .order, #notag:checked ~ .notag {
  display: block;
}

code, i::after {
    font-size: 0.9em; 
}

code { background: #333; color: #ccc; border-radius: 3px; padding: 2px 4px;}


/*
div > strong:first-of-type { display: block; text-align: center; }
*/


              
            
!

JS

              
                
              
            
!
999px

Console