Code post archive prototype


by Jeremy Caudle
code

I’m not quite sure how I want to display the 100 posts from my 100 Days of Code challenge, but I tried out an idea today using flexbox and progressive enhancement. I want to find a fun and interesting way to display the posts outside of their current blog listing format.

100 Days of Code (2021/02/09–2021/05/19)

  1. Practice begins anew
  2. Playing with clip-path and an orange cat
  3. Quiz Prototype
  4. Palindrome flip
  5. Spinning Record
  6. Flexbox and SVG traffic light
  7. Final Fetch
  8. Web Audio API Practice
  9. Learning about fluid typography and CSS clamp
  10. Trying Horizontal Scrolling
  11. A Quick Test of Scroll Snap
  12. Clamp Wrapper
  13. Dark Mode and CSS Variables
  14. Working with prefer-reduced-motion
  15. Style Customizer Prototype
  16. Practice with the matchMedia method
  17. Wrong about CSS Variable fallbacks
  18. Fun with pseudo-elements
  19. Goofing around with grid and more
  20. Adding more books to the bookshelf
  21. Simple Button Animation Name Swap
  22. Simple Flexbox Header
  23. Object-fit and scaling images within an overflow container
  24. Picture Element Practice
  25. Playing with backdrop-filter
  26. Making bubbles
  27. Making Moving Bubblers
  28. Mock Recipe Listing
  29. Shifting Position Within A Grid
  30. Video Graphics Done With HTML, CSS, and JavaScript
  31. Animating with audio playback
  32. Trying out a Glitch animation
  33. Tricky times with CSS Grid
  34. Playing with an SVG of my old logo
  35. Making Faces - SVG and JavaScript
  36. Fun link styling
  37. Full-bleeds in CSS Grid
  38. Variable Font Refresher
  39. CSS Triangles and the Details Element
  40. Text on a path in SVG
  41. Simple Background Color Changer
  42. Improving my Background Color Changer
  43. CSS Only Tooltip
  44. Working more with loading JSON
  45. No Frills Card
  46. Swiping Cards
  47. Styling a newsletter signup
  48. Getting the hang of emoji
  49. Counting the days
  50. Post listing mockup using a three column grid
  51. First attempt at a scroll indicator
  52. Trying out new ways to style margins and padding
  53. Trying a Secret of Mana-esque menu
  54. Simple article with table of contents
  55. Sakura petals take shape
  56. More Clip Path Practice
  57. Update links when audio plays
  58. The Address Element
  59. Potential address for site footer
  60. Scroll Behavior Practice
  61. Finding the time and displaying it
  62. Grid Area and Grid Template Area Practice
  63. Search to remove
  64. Playing with the Fullscreen API
  65. Trying a keyboard shortcut with Vanilla JS
  66. Practice with the IS selector
  67. Spicing up links
  68. Simple Spotlight
  69. Practicing with Switch statements
  70. Goofing around with clip path
  71. Simple transition using clip-path
  72. Grid row and column span practice
  73. Send words into The Void
  74. Interesting float and flexbox technique
  75. Learning about a few modern CSS Pseudo Class Selectors
  76. Card display with horizontal scrolling
  77. Vanilla JS Lightbox Challenge
  78. Tiny tweaks to my Lightbox script
  79. Additional tweaks to my lightbox
  80. Table Practice
  81. Possible responsive table solution
  82. CSS Grid Fidget Toy
  83. Neat responsive flexbox layout
  84. Quick post prototype
  85. Learning About Regular Expressions
  86. Cursor styles reference
  87. We meet again slider
  88. Mocking up a sign up form
  89. Learning to build a better slider
  90. Learning to build a better slider part two
  91. Learning to build a better slider part three
  92. Learning to build a better slider part four
  93. Practice with grid and cat photos
  94. Randomizing cat photos in a grid
  95. Iterating through cats and JavaScript
  96. Cat gallery tweaks
  97. Working with toggles, cat photos, and classList
  98. This Post
  99. Coming May 18, 2021
  100. Coming May 18, 2021

View the code:

HTML and JS 
<div class="code-block">
           
            <div class="code-grid">

                <h2>100 Days of Code (2021/02/09–2021/05/19)</h2>

                <ol class="code-posts">
                    <li><a href="https://jeremycaudle.com/code/practice-begins-anew" title=""><span>Practice begins anew</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/playing-with-clip-path-and-an-orange-cat" title=""><span>Playing with clip-path and an orange cat</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/quiz-prototype" title=""><span>Quiz Prototype</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/palindrome-flip" title=""><span>Palindrome flip</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/spinning-record" title=""><span>Spinning Record</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/flexbox-and-svg-traffic-light" title=""><span>Flexbox and SVG traffic light</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/final-fetch" title=""><span>Final Fetch</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/web-audio-api-practice" title=""><span>Web Audio API Practice</span></a> </li>
                    <li><a href="https://jeremycaudle.com/code/learning-about-fluid-typography-and-css-clamp" title=""><span>Learning about fluid typography and CSS clamp</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/trying-horizontal-scrolling" title=""><span>Trying Horizontal Scrolling</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/a-quick-test-of-scroll-snap" title=""><span>A Quick Test of Scroll Snap</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/clamp-wrapper" title=""><span>Clamp Wrapper</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/dark-mode-and-css-variables" title=""><span>Dark Mode and CSS Variables</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/working-with-prefers-reduced-motion" title=""><span>Working with prefer-reduced-motion</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/style-customizer-prototype" title=""><span>Style Customizer Prototype</span></a> </li>
                    <li><a href="https://jeremycaudle.com/code/practice-with-the-matchmedia-method" title=""><span>Practice with the matchMedia method</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/practice-with-the-matchmedia-method" title=""><span>Wrong about CSS Variable fallbacks</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/fun-with-pseudo-elements" title=""><span>Fun with pseudo-elements</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/goofing-around-with-grid-and-more" title=""><span>Goofing around with grid and more</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/adding-more-books-to-the-bookshelf" title=""><span>Adding more books to the bookshelf</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/simple-button-animation-name-swap" title=""><span>Simple Button Animation Name Swap</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/simple-flexbox-header" title=""><span>Simple Flexbox Header</span></a> </li>
                    <li><a href="https://jeremycaudle.com/code/object-fit-and-scaling-images-within-an-overflow-container" title=""><span>Object-fit and scaling images within an overflow container</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/picture-element-practice" title=""><span>Picture Element Practice</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/playing-with-backdrop-filter" title=""><span>Playing with backdrop-filter</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/making-bubbles" title=""><span>Making bubbles</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/making-moving-bubbles" title=""><span>Making Moving Bubblers</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/mock-recipe-listing" title=""><span>Mock Recipe Listing</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/shifting-position-within-a-grid" title=""><span>Shifting Position Within A Grid</span></a> </li>
                    <li><a href="https://jeremycaudle.com/code/video-graphics-done-with-html-css-and-javascript" title=""><span>Video Graphics Done With HTML, CSS, and JavaScript</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/animating-with-audio-playback" title=""><span>Animating with audio playback</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/trying-out-a-glitch-animation" title=""><span>Trying out a Glitch animation</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/tricky-times-with-css-grid" title=""><span>Tricky times with CSS Grid </span></a></li>
                    <li><a href="https://jeremycaudle.com/code/playing-with-an-svg-of-my-old-logo" title=""><span>Playing with an SVG of my old logo</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/making-faces-svg-and-javascript" title=""><span>Making Faces - SVG and JavaScript</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/fun-link-styling" title=""><span>Fun link styling</span></a> </li>
                    <li><a href="https://jeremycaudle.com/code/full-bleeds-in-css-grid" title=""><span>Full-bleeds in CSS Grid</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/variable-font-refresher" title=""><span>Variable Font Refresher</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/css-triangles-and-the-details-element" title=""><span>CSS Triangles and the Details Element</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/text-on-a-path-in-svg" title=""><span>Text on a path in SVG</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/simple-background-color-changer" title=""><span>Simple Background Color Changer</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/improving-my-background-color-changer" title=""><span>Improving my Background Color Changer</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/css-only-tooltip" title=""><span>CSS Only Tooltip</span></a> </li>
                    <li><a href="https://jeremycaudle.com/code/working-more-with-loading-json" title=""><span>Working more with loading JSON</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/no-frills-card" title=""><span>No Frills Card</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/swiping-cards" title=""><span>Swiping Cards</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/styling-a-newsletter-signup" title=""><span>Styling a newsletter signup</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/getting-the-hang-of-emoji" title=""><span>Getting the hang of emoji</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/counting-the-days" title=""><span>Counting the days</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/post-listing-mockup-using-a-three-column-grid" title=""><span>Post listing mockup using a three column grid</span></a> </li>
                    <li><a href="https://jeremycaudle.com/code/first-attempt-at-a-scroll-indicator" title=""><span>First attempt at a scroll indicator</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/trying-out-new-ways-to-style-margins-and-padding" title=""><span>Trying out new ways to style margins and padding</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/trying-a-secret-of-mana-esque-menu" title=""><span>Trying a Secret of Mana-esque menu</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/simple-article-with-table-of-contents" title=""><span>Simple article with table of contents</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/sakura-petals-take-shape" title=""><span>Sakura petals take shape</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/more-clip-path-practice" title=""><span>More Clip Path Practice</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/update-links-when-audio-plays" title=""><span>Update links when audio plays</span></a> </li>
                    <li><a href="https://jeremycaudle.com/code/the-address-element" title=""><span>The Address Element</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/potential-address-for-site-footer" title=""><span>Potential address for site footer</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/scroll-behavior-practice" title=""><span>Scroll Behavior Practice</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/finding-the-time-and-displaying-it" title=""><span>Finding the time and displaying it</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/grid-area-and-grid-template-area-practice" title=""><span>Grid Area and Grid Template Area Practice</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/search-to-remove" title=""><span>Search to remove</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/playing-with-the-fullscreen-api" title=""><span>Playing with the Fullscreen API</span></a> </li>
                    <li><a href="https://jeremycaudle.com/code/trying-a-keyboard-shortcut-with-vanilla-js" title=""><span>Trying a keyboard shortcut with Vanilla JS</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/practice-with-the-is-selector" title=""><span>Practice with the IS selector</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/spicing-up-links" title=""><span>Spicing up links</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/simple-spotlight" title=""><span>Simple Spotlight</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/practicing-with-switch-statements" title=""><span>Practicing with Switch statements</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/goofing-around-with-clip-path" title=""><span>Goofing around with clip path</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/simple-transition-using-clip-path" title=""><span>Simple transition using clip-path</span></a> </li>
                    <li><a href="https://jeremycaudle.com/code/grid-row-and-column-span-practice" title=""><span>Grid row and column span practice</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/send-words-into-the-void" title=""><span>Send words into The Void</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/interesting-float-and-flexbox-technique" title=""><span>Interesting float and flexbox technique</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/learning-about-a-few-modern-css-pseudo-class-selectors" title=""><span>Learning about a few modern CSS Pseudo Class Selectors</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/card-display-with-horizontal-scrolling" title=""><span>Card display with horizontal scrolling</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/vanilla-js-lightbox-challenge" title=""><span>Vanilla JS Lightbox Challenge</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/tiny-tweaks-to-my-lightbox-script" title=""><span>Tiny tweaks to my Lightbox script</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/additional-tweaks-to-my-lightbox" title=""><span>Additional tweaks to my lightbox</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/table-practice" title=""><span>Table Practice</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/possible-responsive-table-solution" title=""><span>Possible responsive table solution</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/css-grid-fidget-toy" title=""><span>CSS Grid Fidget Toy</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/neat-responsive-flexbox-layout" title=""><span>Neat responsive flexbox layout</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/quick-post-prototype" title=""><span>Quick post prototype</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/learning-about-regular-expressions" title=""><span>Learning About Regular Expressions</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/cursor-styles-reference" title=""><span>Cursor styles reference</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/we-meet-again-slider" title=""><span>We meet again slider</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/mocking-up-a-sign-up-form" title=""><span>Mocking up a sign up form</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/learning-to-build-a-better-slider" title=""><span>Learning to build a better slider</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/learning-to-build-a-better-slider-part-two" title=""><span>Learning to build a better slider part two</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/learning-to-build-a-better-slider-part-three" title=""><span>Learning to build a better slider part three</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/learning-to-build-a-better-slider-part-four" title=""><span>Learning to build a better slider part four</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/practice-with-grid-and-cat-photos" title=""><span>Practice with grid and cat photos</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/randomizing-cat-photos-in-a-grid" title=""><span>Randomizing cat photos in a grid</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/iterating-through-cats-and-javascript" title=""><span>Iterating through cats and JavaScript</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/cat-gallery-tweaks" title=""><span>Cat gallery tweaks</span></a></li>
                    <li><a href="https://jeremycaudle.com/code/working-with-toggles-cat-photos-and-classlist" title=""><span>Working with toggles, cat photos, and classList</span></a></li>
                    <li><a href="" title=""><span>This Post</span></a></li>
                    <li><a href="" title=""><span>Coming May 18, 2021</span></a></li>
                    <li><a href="" title=""><span>Coming May 18, 2021</span></a></li>
                </ol>    

            </div>

        </div>
CSS 
.code-block {
                font-family: Helvetica, Arial, sans-serif;
            }

            /* base styles for any browser */

            .code-block h2 {
                text-align: center;
                margin: 1rem 0;
            }

            ol.code-posts {
                margin: 1rem auto;
                line-height: 1.65;
                list-style: none;
                counter-reset: code-post;
                }

            ol.code-posts li {
                padding: .25rem;
                position: relative;
                counter-increment: code-post;
            }

            ol.code-posts li::before {
                content: counter(code-post, decimal-leading-zero);
                margin-right: .5rem;
                min-width: 3em;
                transition: color .25s ease-out;
            }

            ol.code-posts li a {
                text-decoration: underline;
                text-decoration-thickness: 2px;
                text-underline-offset: 1px;
                text-decoration-color: blue;
                transition: text-underline-offset .125s ease-out, text-decoration-color .25s ease-out, color .25s ease-out, background-color .25s ease-out;
            }

            ol.code-posts li a:hover, ol.code-posts li a:focus {
                color: purple;
                text-decoration-color: purple;
                text-underline-offset: 3px;
            }

    @supports (display: flex) {


        ol.code-posts {
            margin: 1rem auto;
            max-width: 98%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            z-index: 1;
        }

        ol.code-posts li {
            min-height: 5em;
            flex-basis: 31%;
            margin: 1%;
            border: solid 1px #dedede;
            background: #efefef;
            max-width: 40ch;
            z-index: 2;
        }

        ol.code-posts li:hover {
            border: solid 1px orange;
        }

        ol.code-posts li::before {
                content: counter(code-post, decimal-leading-zero);
                margin: 0;
                min-width: auto;
                color: rgba(255, 255, 255, .5);
                font-size: 2rem;
                z-index: 3;
                display: block;
                position: absolute;
                padding: 0;
                bottom: 0;
                right: .5rem;
                
            }

            ol.code-posts li:hover::before {
                color: gray;
            }

        ol.code-posts li a {
            display: flex;
            flex-direction: column;
            height: 100%;
            width: 100%;
            position: relative;
            z-index: 4;
            padding: .5rem;
            text-decoration: none;
        }

        ol.code-posts li a:hover, ol.code-posts li a:focus {
            background-color: rgba(255, 166, 0, 0.705);
            color: #010101;
        }

Tags