Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

Save Automatically?

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

              
                <button class="icon-button e-dark-mode-button u-animation-click" id="darkMode" aria-label="Dark Mode"><span class="icon" aria-hidden="true">🌜</span></button>
<div class="common-structure">
  <header class="main-header u-flex">
    <div class="start u-flex">
       <a class="logo">f</a>
       <div class="search-box-wrapper">
         <input type="search" class="search-box" placeholder="Search Facebook">
         <span class="icon-search" aria-label="hidden">πŸ”Ž</span>
      </div>
    </div>
    <nav class="main-nav">
      <ul class="main-nav-list u-flex">
        <li class="main-nav-item u-only-wide"><a aria-label="Homepage" class="main-nav-button alt-text is-selected"><span class="icon" aria-hidden="true">🏠</span></a></li>
        <li class="main-nav-item u-only-wide"><a aria-label="Pages" class="main-nav-button alt-text"><span class="icon" aria-hidden="true">🏁</span></a></li>
        <li class="main-nav-item u-only-wide"><a aria-label="Watch" class="main-nav-button alt-text"><span class="icon" aria-hidden="true">πŸ“Ί</span></a></li>
        <li class="main-nav-item u-only-wide"><a aria-label="Marketplace" class="main-nav-button alt-text"><span class="icon" aria-hidden="true">πŸͺ</span></a></li>
        <li class="main-nav-item u-only-wide"><a aria-label="Groups" class="main-nav-button alt-text"><span class="icon" aria-hidden="true">πŸ‘¨β€πŸ‘¦β€πŸ‘¦</span></a></li>
        <li class="main-nav-item u-only-small"><button aria-label="Menu" class="main-nav-button u-animation-click" id="menuButton"><span class="icon icon-hamburger" aria-hidden="true"></span></button></li>
      </ul>
    </nav>
    <div class="end"></div>
  </header>
  <nav class="user-nav">
      <ul class="user-nav-list u-flex">
        <li class="user-nav-item">
          <a class="user">
            <img class="user-image" src="https://assets.codepen.io/65740/internal/avatars/users/default.png" height="28" width="28" alt="">
            <span class="user-name">Elad</span>
          </a>
        </li>
        <li class="user-nav-item">
          <button class="icon-button alt-text" aria-label="Create"><span class="icon" aria-hidden="true">βž•</span></button>
        </li>
        <li class="user-nav-item">
          <button class="icon-button alt-text" aria-label="Messenger"><span class="icon" aria-hidden="true">πŸ’¬</span></button>
        </li>
        <li class="user-nav-item">
          <button class="icon-button alt-text" aria-label="Notifications"><span class="icon" aria-hidden="true">πŸ””</span></button>
        </li>
        <li class="user-nav-item">
          <button class="icon-button alt-text" aria-label="Account"><span class="icon" aria-hidden="true">πŸ”»</span></button>
        </li>
      </ul>
    </nav>
  <aside class="side-a">
    <section class="common-section">
      <h2 class="section-title u-hide">User Navigation</h2>
      <ul class="common-list">
        <li class="common-list-item">
          <a href="https://www.facebook.com/eladsc/" target="_blank" class="common-list-button">
            <span class="icon">
              <img class="user-image" src="https://assets.codepen.io/65740/internal/avatars/users/default.png" height="36" width="36" alt="">
            </span>
            <span class="text">Elad Shechter</span>
          </a>
        </li>
        <li class="common-list-item">
          <a class="common-list-button">
<span class="icon" aria-hidden="true">πŸ’¬</span>
            <span class="text">Messenger</span>
          </a>
        </li>
        <li class="common-list-item">
          <a class="common-list-button">
            <span class="icon">πŸ‘¨&zwj;πŸ‘¦&zwj;πŸ‘¦</span>
            <span class="text">Groups</span>
          </a>
        </li>
        <li class="common-list-item">
          <a class="common-list-button">
            <span class="icon">πŸͺ</span>
            <span class="text">Marketplace</span>
          </a>
        </li>
        <li class="common-list-item">
          <a class="common-list-button">
            <span class="icon">πŸ“Ί</span>
            <span class="text">Videos</span>
          </a>
        </li>
      </ul>
      <button class="common-more">
        <span class="text">See More</span>
        <span class="icon">πŸ”»</span>
      </button>
    </section>
    <section class="common-section">
      <h2 class="section-title">Shortcuts</h2>
      <ul class="common-list">
        <li class="common-list-item">
          <a href="https://bit.ly/3fl9RLV" target="_blank" class="common-list-button">
            <span class="icon" aria-hidden="true">
              <img src="https://scontent.ftlv1-1.fna.fbcdn.net/v/t1.0-0/cp0/c23.0.50.50a/p50x50/94671938_10156774842886933_854458879973523456_o.jpg?_nc_cat=104&_nc_sid=ca434c&_nc_ohc=fgV9zrVZoW0AX8o6u--&_nc_ht=scontent.ftlv1-1.fna&oh=c8a69ca97d2ed0bd8a27b9e4f653dcf9&oe=5F013738" alt="">
            </span>
            <span class="text">CSS Class</span>
          </a>
        </li>
        <li class="common-list-item">
          <a href="https://www.facebook.com/groups/css.masters.israel" target="_blank" class="common-list-button">
            <span class="icon">
              <img src="https://scontent.ftlv1-1.fna.fbcdn.net/v/t1.0-0/cp0/c40.0.50.50a/p50x50/96018871_10156797924731933_8952430699365793792_n.jpg?_nc_cat=105&_nc_sid=ca434c&_nc_ohc=IeqrI6DbUWkAX8FXQs7&_nc_ht=scontent.ftlv1-1.fna&oh=370e999a657281ecbaf5237802520a2a&oe=5F0102F9" alt="">
            </span>
            <span class="text">CSS Masters Israel</span>
          </a>
        </li>      
      </ul>
      <button class="common-more">
        <span class="text">See More</span>
        <span class="icon">πŸ”»</span>
      </button>
    </section>
  </aside>
  <main class="main-feed">
    <ul class="main-feed-list">
      <li class="main-feed-item">
        <article class="common-post">
          <header class="common-post-header u-flex">
            <img src="https://assets.codepen.io/65740/internal/avatars/users/default.png" class="user-image" width="40" height="40" alt="">
            <div class="common-post-info">
              <div class="user-and-group u-flex">
                <a href="https://www.facebook.com/eladsc" target="_blank">Elad Shechter</a>
                <span class="icon icon-arrow-block-end"></span>
                <a href="https://bit.ly/3fl9RLV" target="_blank">CSS Class</a>
              </div>
              <div class="time-and-privacy"><time datetime="">June 14 at 1:51 PM</time><span class="icon icon-privacy">🌎</span></div>
            </div>
            <button class="icon-button-2 u-margin-inline-start" aria-label="more options"><span class="icon-menu"></span></button>
          </header>
          <div class="common-post-content common-content">
            <p><b>The Coronavirus Invaders!</b></p>
            <p>
              My Pure CSS Game! (No JS).<br>
              How many Coronavirus are you able to eliminate?πŸ˜€<br>
            </p>
            <a class="embed-content" href="https://bit.ly/2N0jLWY" target="_blank">
              <img class="embed-content-image" src="https://cssclasscom.files.wordpress.com/2020/05/corona1-1.gif?w=660" alt="">
              <div class="embed-content-text">
                <aside class="embed-content-info"><span class="text">codepen.io</span></aside>
                <h2 class="embed-content-title">Coronavirus Invaders - CSS Pure Game (No JS!)</h2>
              </div>
            </a>    
          </div>
          <div class="summary u-flex">
            <div class="reactions">❀️</div>
            <div class="reactions-total">1</div>
            <div class="total-comments u-margin-inline-start">
              <a>1 Shares</a>
            </div>
          </div>
          <section class="actions-buttons">
            <ul class="actions-buttons-list u-flex">
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ‘</span><span class="text">Like</span></button></li>
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ’¬</span><span class="text">Comment</span></button></li>
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ’Œ</span><span class="text">Share</span></button></li>
            </ul>
          </section>
        </article>
      </li>
      <li class="main-feed-item">
        <article class="common-post">
          <header class="common-post-header u-flex">
            <img src="https://assets.codepen.io/65740/internal/avatars/users/default.png" class="user-image" width="40" height="40" alt="">
            <div class="common-post-info">
              <div class="user-and-group u-flex">
                <a href="https://www.facebook.com/eladsc" target="_blank">Elad Shechter</a>
                <span class="icon icon-arrow-block-end"></span>
                <a href="https://bit.ly/3fl9RLV" target="_blank">CSS Class</a>
              </div>
              <div class="time-and-privacy"><time datetime="">May 25 at 5:21 PM</time><span class="icon icon-privacy">🌎</span></div>
            </div>
            <button class="icon-button-2 u-margin-inline-start" aria-label="more options"><span class="icon-menu"></span></button>
          </header>
          <div class="common-post-content common-content">
            <p><b>The New CSS Logical Properties</b></p>
            <p>In my new talk, I will explain to you how the new world of CSS Logical Properties is going to change all the way you are working with CSS. In this new way, you will get better support for different types of languages, without the need to create different styles for every type of language.</p>         
            <a class="embed-content" href="https://bit.ly/30Fi3T3o" target="_blank">
              <img class="embed-content-image" src="https://cssclasscom.files.wordpress.com/2020/05/css-claass-talk.png?w=741" alt="">
              <div class="embed-content-text">
                <aside class="embed-content-info"><span class="text">medium.com</span></aside>
                <h2 class="embed-content-title">The New CSS Logical Properties</h2>
                <p class="embed-content-paragraph">CSS Logical Properties – New world in CSS, which will give you new abilities with this new technology to support all types of languages, like Hebrew / Englis...</p>
              </div>
            </a>           
          </div>
          <div class="summary u-flex">
            <div class="reactions">❀️</div>
            <div class="reactions-total">3</div>
            <div class="total-comments u-margin-inline-start">
              <a>5 Shares</a>
            </div>
          </div>
          <section class="actions-buttons">
            <ul class="actions-buttons-list u-flex">
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ‘</span><span class="text">Like</span></button></li>
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ’¬</span><span class="text">Comment</span></button></li>
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ’Œ</span><span class="text">Share</span></button></li>
            </ul>
          </section>
        </article>
      </li>
      <li class="main-feed-item">
        <article class="common-post">
          <header class="common-post-header u-flex">
            <img src="https://assets.codepen.io/65740/internal/avatars/users/default.png" class="user-image" width="40" height="40" alt="">
            <div class="common-post-info">
              <div class="user-and-group u-flex">
                <a href="https://www.facebook.com/eladsc/" target="_blank">Elad  Shechter</a>
                <span class="icon icon-arrow-block-end"></span>
                <a href="https://bit.ly/3fl9RLV" target="_blank">CSS Class</a>
              </div>
              <div class="time-and-privacy"><time datetime="">June 3 at 12:26 PM</time><span class="icon icon-privacy">🌎</span></div>
            </div>
            <button class="icon-button-2 u-margin-inline-start" aria-label="more options"><span class="icon-menu"></span></button>
          </header>
          <div class="common-post-content common-content">
            <p><b>The β€˜unset’ keywords behave</b> like 'inherit' if the property is a property that has natural inherit by default, and act like 'initial' if it hasn’t.<p>
            <p>The reason for it to exists is to reset all properties together with the β€˜all’ property.</p>
            <p><b>From my Talk:</b><br>
              <a href="https://bit.ly/3flTJtr" target="_blank">https://youtu.be/8IaKXJHRSXc</a></p>
            <img src="https://scontent.ftlv1-2.fna.fbcdn.net/v/t1.0-9/101673130_10156884723716933_5600395856562880512_o.jpg?_nc_cat=110&_nc_sid=825194&_nc_ohc=KHRwezsav6gAX8h4U7p&_nc_ht=scontent.ftlv1-2.fna&oh=f372d27e69a67f2b38f205dfa74038c7&oe=5F050911" alt="">
          </div>
          <div class="summary u-flex">
            <div class="reactions">❀️</div>
            <div class="reactions-total">8</div>
            <div class="total-comments u-margin-inline-start">
              <a>12 Comments</a>
              <a>2 Shares</a>
            </div>
          </div>
          <section class="actions-buttons">
            <ul class="actions-buttons-list u-flex">
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ‘</span><span class="text">Like</span></button></li>
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ’¬</span><span class="text">Comment</span></button></li>
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ’Œ</span><span class="text">Share</span></button></li>
            </ul>
          </section>
        </article>
      </li>
      <li class="main-feed-item">
        <article class="common-post">
          <header class="common-post-header u-flex">
            <img src="https://scontent.ftlv1-1.fna.fbcdn.net/v/t1.0-1/cp0/p40x40/94574850_120774326271393_6089794718378491904_n.png?_nc_cat=111&_nc_sid=dbb9e7&_nc_ohc=40vzgxq-2kYAX8gOAZN&_nc_ht=scontent.ftlv1-1.fna&oh=ece0eaf59732b7da4471b7ee57cab487&oe=5F01FF5D" class="user-image" width="40" height="40" alt="">
            <div class="common-post-info">
              <div class="user-and-group u-flex">
                <a href="https://bit.ly/2Y2Kito" target="_blank">CSS Class</a>
              </div>
              <div class="time-and-privacy"><time datetime="">May 18 at 5:58 PM</time><span class="icon icon-privacy">🌎</span></div>
            </div>
            <button class="icon-button-2 u-margin-inline-start" aria-label="more options"><span class="icon-menu"></span></button>
          </header>
          <div class="common-post-content common-content">
            <p><b>CSS Basics for Typography</b></p>
            <p>Many beginner and experienced developers find it challenging to understand the world of CSS, and it is difficult to understand what is really possible in CSS.</p>
            <p>In Elad Shechter's first article on CSS Basics Things, He let developers know the CSS definitions of text typography, and actually understand what and how to control it.</p>
            <p>This article has lots of visual examples and live code examples that will allow you to enter the CSS world more pleasantly.</p>    
            <a class="embed-content" href="https://bit.ly/2AoSfA5" target="_blank">
              <img class="embed-content-image" src="https://miro.medium.com/max/552/1*8gDOmNQeKOji22wisw96aA.jpeg" alt="">
              <div class="embed-content-text">
                <aside class="embed-content-info"><span class="text">medium.com</span></aside>
                <h2 class="embed-content-title">CSS Basics for Typography</h2>
                <p class="embed-content-paragraph">CSS Basics</p>
              </div>
            </a>      
          </div>
          <div class="summary u-flex">
            <div class="reactions">😲❀️</div>
            <div class="reactions-total">16</div>
            <div class="total-comments u-margin-inline-start">
              <a>5 Shares</a>
            </div>
          </div>
          <section class="actions-buttons">
            <ul class="actions-buttons-list u-flex">
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ‘</span><span class="text">Like</span></button></li>
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ’¬</span><span class="text">Comment</span></button></li>
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ’Œ</span><span class="text">Share</span></button></li>
            </ul>
          </section>
        </article>
      </li>
      <li class="main-feed-item">
        <article class="common-post">
          <header class="common-post-header u-flex">
            <img src="https://scontent.ftlv1-1.fna.fbcdn.net/v/t1.0-1/cp0/p40x40/37042540_559247564477083_8353849942070001664_n.png?_nc_cat=105&_nc_sid=1eb0c7&_nc_ohc=kjtkpY7LCZQAX8W3v8r&_nc_ht=scontent.ftlv1-1.fna&oh=ca77f68f63e8b9a67be2af87e64570c9&oe=5F01CAD6" class="user-image" width="40" height="40" alt="">
            <div class="common-post-info">
              <div class="user-and-group u-flex">
                <a href="https://www.facebook.com/frontendfocus" target="_blank">Frontend Focus</a>
              </div>
              <div class="time-and-privacy"><time datetime="">April 1</time><span class="icon icon-privacy">🌎</span></div>
            </div>
            <button class="icon-button-2 u-margin-inline-start" aria-label="more options"><span class="icon-menu"></span></button>
          </header>
          <div class="common-post-content common-content">
            <a class="embed-content" href="https://blog.animaapp.com/reverse-engineering-whatsapp-webs-css-9239293009f4" target="_blank">
              <img class="embed-content-image" src="https://i1.wp.com/eladsc.com/wp-content/uploads/2020/03/1_iNB0Teq9n7bgfjPsvwkOfQ.jpg?fit=660%2C302&ssl=1" alt="">
              <div class="embed-content-text">
                <aside class="embed-content-info"><span class="text">medium.com</span></aside>
                <h2 class="embed-content-title">Reverse Engineering WhatsApp Web’s CSS</h2>
                <p class="embed-content-paragraph">If you’re like the majority of readers, recreating CSS and HTML by reverse engineering might look suspicious to you, and you might wonder…</p>
              </div>
            </a>
          </div>
          <div class="summary u-flex">
            <div class="reactions">😲</div>
            <div class="reactions-total">5</div>
            <div class="total-comments u-margin-inline-start">
              <a>5 Comments</a>
              <a>1 Shares</a>
            </div>
          </div>
          <section class="actions-buttons">
            <ul class="actions-buttons-list u-flex">
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ‘</span><span class="text">Like</span></button></li>
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ’¬</span><span class="text">Comment</span></button></li>
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ’Œ</span><span class="text">Share</span></button></li>
            </ul>
          </section>
        </article>
      </li>
      <li class="main-feed-item">
        <article class="common-post">
          <header class="common-post-header u-flex">
            <img src="https://scontent.ftlv1-1.fna.fbcdn.net/v/t1.0-1/cp0/p40x40/10155133_602098699885921_18816108_n.png?_nc_cat=104&_nc_sid=1eb0c7&_nc_ohc=LlEImNjGB-oAX8q8Y-V&_nc_ht=scontent.ftlv1-1.fna&oh=a31a91a5eee7ea43a90a62a8ec3f9fa2&oe=5F04B668" class="user-image" width="40" height="40" alt="">
            <div class="common-post-info">
              <div class="user-and-group u-flex">
                <a href="https://www.facebook.com/CSSWeekly" target="_blank">CSS Weekly</a>
              </div>
              <div class="time-and-privacy"><time datetime="">March 11</time><span class="icon icon-privacy">🌎</span></div>
            </div>
            <button class="icon-button-2 u-margin-inline-start" aria-label="more options"><span class="icon-menu"></span></button>
          </header>
          <div class="common-post-content common-content">
            <p>Elad Shechter explains why the world needs CSS developers.</p>            
            <a class="embed-content" href="https://medium.com/@elad/why-the-world-needs-css-developers-318025a6f5c1" target="_blank">
              <img class="embed-content-image" src="https://miro.medium.com/max/1400/1*65c_DA3NOmVk-NvkKLnSDA.png" alt="">
              <div class="embed-content-text">
                <aside class="embed-content-info"><span class="text">medium.com</span></aside>
                <h2 class="embed-content-title">Why the World Needs CSS Developers</h2>
                <p class="embed-content-paragraph">In the last ten years, give or take a few, CSS has grown extensively with the addition of more and more features, thus gradually becoming…</p>
              </div>
            </a>
          </div>
          <div class="summary u-flex">
            <div class="reactions">πŸ‘β€οΈ</div>
            <div class="reactions-total">7</div>
            <div class="total-comments u-margin-inline-start">
              <a>57 Comments</a>
              <a>8 Shares</a>
            </div>
          </div>
          <section class="actions-buttons">
            <ul class="actions-buttons-list u-flex">
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ‘</span><span class="text">Like</span></button></li>
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ’¬</span><span class="text">Comment</span></button></li>
              <li class="actions-buttons-item"><button class="actions-buttons-button"><span class="icon">πŸ’Œ</span><span class="text">Share</span></button></li>
            </ul>
          </section>
        </article>
      </li>
    </ul>
  </main>
  <aside class="side-b">
    <section class="common-section">
      <h2 class="section-title">Sponsored</h2>
      <ul class="common-list">
        <li class="common-list-item">
          <a href="http://bit.ly/2Nd05lW" target="_blank" class="common-list-button is-ads">
            <div class="image"><img src="https://bit.ly/3cY5ncE" width="115" alt=""></div>
            <div class="text">
              <h4 class="ads-title">Export Sketch to HTML with a click</h4>
              <p class="ads-url">animaapp.com</p>
            </div>
          </a>
        </li>
        <li class="common-list-item">
          <a href="http://bit.ly/2Nd05lW" target="_blank" class="common-list-button is-ads">
            <div class="image"><img src="https://cssclasscom.files.wordpress.com/2020/06/14.png?w=300" width="115" alt=""></div>
            <div class="text">
              <h4 class="ads-title">Front-end developers, prepare to be amazed</h4>
              <p class="ads-url">animaapp.com</p>
            </div>
          </a>
        </li>      
      </ul>
      <button class="common-more">
        <span class="text">See More</span>
        <span class="icon">πŸ”»</span>
      </button>
    </section>
  </aside>
</div>
              
            
!

CSS

              
                /****** More of My Resets *******/
*,
*::before,
*::after{box-sizing:border-box;}
button{font-family:inherit; font-size:inherit; background-color:transparent; color:inherit; border-width:0; padding:0; margin:0; cursor:pointer; text-align:inherit;}
a{text-decoration:none; color:inherit; cursor:pointer;}
img{display:block; max-width:100%;}

/* Responsive Variables */
$break1: "(max-width:700px)";
$break2: "(min-width:701px) and (max-width:900px)";
$break2open:"(min-width:701px)";
$break3: "(min-width:901px) and (max-width:1100px)";
$break3open:"(min-width:901px)";
$break4open: "(min-width:1101px)";

.u-only-small{
  @media #{$break4open}{
    display:none!important;
  }
}
.u-only-wide{
  @media #{$break1} , #{$break2}, #{$break3}{
    display:none!important;
  }
}

/* Native CSS variables */
:root{
  /* colors */
  --main-color:#1877f2;
  --text-color:#050505;
  --full-color:255 255 255;
  --empty-color:0 0 0;

  /* white default*/
  --abalance1:rgba(var(--full-color) / 1);
  --abalance80:rgba(var(--full-color) / 0.80);
  
  /* black default*/
  --balance1:rgb(var(--empty-color) / 0.05);
  --balance2:rgb(var(--empty-color) / 0.10);
  --balance3:rgb(var(--empty-color) / 0.15);
  --balance4:rgb(var(--empty-color) / 0.20);
  --balance8:rgb(var(--empty-color) / 0.60);
  --balance10:rgb(var(--empty-color) / 0.80);
  --balance-full:#f0f2f5;
  
  /* sizes */
  --height-header:40px;
  
  /* common sizes */
  --size1:4px;
  --size2:calc(var(--size1) * 2);
  --size3:calc(var(--size1) * 3);
  --size4:calc(var(--size1) * 4);
}

/* utilities classes (always with !important)*/
.u-flex{display:flex!important;}
.u-hide{display:none!important;}
.u-margin-inline-start{margin-inline-start:auto!important;}

/* animation */
@keyframes clickableAnimation {
  0% {transform:scale(1);}
  95% {transform:scale(1);}
  96% {transform:scale(1.5) rotate(-30deg);}
  97% {transform:scale(1.5) rotate(30deg);}
  100% {transform:scale(1);}
}
.u-animation-click{animation: clickableAnimation 10s ease-in-out -7s infinite;}

/* icons */
.icon-arrow-block-end{
  width:0; height:0; border:solid 0 transparent; border-width:5px 7px; border-inline-start-color:var(--balance10);
  margin:auto 0;
}
.icon-privacy{filter:grayscale(1) opacity(0.8);}
.icon-menu{
  text-align:center;
  &::before{
    content:""; display:inline-block; vertical-align:middle; width:4px; height:4px;  border-radius:50%;
    background-color:var(--balance10); box-shadow:-6px 0px var(--balance10), 6px 0px var(--balance10);
  }
}
.icon-hamburger{
  width:20px; height:3px; background-color:var(--balance10);  box-shadow:0px 10px, 0px -10px;
}
.icon-search{filter:grayscale(1) opacity(0.8); transition:0.3s;}
/*mixin*/
@mixin trim{text-overflow:ellipsis; white-space:nowrap; overflow:hidden; display:block;}
@mixin side-size{width:320px;}
@mixin scroll{overflow-y:auto; scrollbar-width:thin;}

/*scrolls*/
 ::-webkit-scrollbar {width:6px!important; height:6px!important; }
 ::-webkit-scrollbar-thumb {background-color:rgba(0,0,0,0);}
 :hover::-webkit-scrollbar-thumb {background-color:rgba(0,0,0,.2);}
 ::-webkit-scrollbar-track {background-color:rgba(255, 255, 255, 0);}

/* typography */ 
html{font-size: 1px;/*for using REM units*/}
body{font-family:Arial; font-size:15rem; line-height:1.3; color:var(--text-color); background-color:var(--balance-full); overflow-x:hidden;}
.is-nav-open{
  @media #{$break1}, #{$break2}, #{$break3}{
    body{overflow:hidden;}
  }
}
/* Grid Layout */
.common-structure{
  display:grid;
  > *:not(.main-header):not(.user-nav){padding:var(--size4) var(--size2);}
  @media #{$break1}{
    grid-template-areas:"header" "main";
    grid-template-columns:100%;
    .end{display:none;}
  }
  @media #{$break2}{
    grid-template-areas:"header header" "main main";
    grid-template-columns:1fr 1fr;
    .side-a,
    .side-b{display:none;}
  }
   @media #{$break1}, #{$break2}{
    .side-a,
    .side-b{display:none;}
  }
  @media #{$break3open}{
    justify-content:space-between;
  }
  @media #{$break3}{
    grid-template-areas:"header header" "main side-b";
    grid-template-columns:minmax(300px, 1fr) auto;    
    .side-a{display:none;}
  }
  @media #{$break4open}{
    grid-template-areas:"header header header" "side-a main side-b";
    grid-template-columns:auto minmax(300px, 680px) auto;
  }
}
.main-header{grid-area:header;}
.side-a{     grid-area:side-a;}
.main-feed{  grid-area:main;}
.side-b{     grid-area:side-b;}

.side-a, .side-b{
  @include side-size; @include scroll();
  position:sticky; top:60px; max-height:calc(100vh - 60px); overflow:auto;
}
.side-a{
  @media #{$break1}, #{$break2}, #{$break3}{
    position:fixed; z-index:1; left:0; right:0; bottom:0;
    background-color:var(--balance-full); width:auto;
    &.is-open{display:block;}
  }
}
.side-b{margin-inline-start:auto; align-self:start;}
.main-feed{
  @media #{$break1}{margin-bottom:40px;}
}
/* elements */
.section-title{color:var(--balance8); font-size:16rem; font-weight:bold; padding:var(--size1) var(--size3); padding-block-start:24px; }
.logo{
  display:block; flex-shrink:0; width:var(--height-header); height:var(--height-header); border-radius:50%;
  color:white; text-align:center; font-size:var(--height-header); font-weight:bold;
  background-image:linear-gradient(#19aeff, #0164e1);
}
.search-box{
  width:100%; padding:var(--size3); padding-inline-start:40px; border-width:0; background-color:var(--balance1); border-radius:calc(var(--height-header) / 2); transition:0.3s; -webkit-appearance:textfield;
  &:focus{
    outline:none; background-color:var(--balance2);
    + .icon-search{filter:grayscale(0.2) opacity(0.95);}
  }
  &-wrapper{
    position:relative; flex:1;
    .icon-search{position:absolute; top:10px; left:12px;}
  }
}
.icon-button{
  display:flex; width:var(--height-header); height:var(--height-header); border-radius:50%;
  background-color:var(--balance2);
  .icon{margin:auto;}
  &:hover, &:focus{background-color:var(--balance3);}
}
.icon-button-2{
  width:36px; height:36px; border-radius:50%; text-align:center;
  .icon-menu::before{vertical-align:3px;}
  &:hover, &:focus{background-color:var(--balance1);}
}
.common-more{
  background-color:var(--balance1); border-radius:var(--size2);
  height:36px; width:calc(100% - var(--size4)); margin:var(--size2); text-align:center;
  .text{font-weight:bold;}
  .icon{font-size:12rem;filter: grayscale(100%); opacity:0.8;}
  &:hover, &:focus{background-color:var(--balance2);}
}
.user{
  display:flex; padding:var(--size1); margin:auto 0; border-radius:calc(var(--height-header) / 2);
  &:hover, &:focus{background-color:var(--balance1);}
  &-image{border-radius:50%; margin-inline-end:var(--size2);}
  &-name{margin:auto 0; font-weight:bold; padding-inline-end:var(--size1);}
  &-nav{
    padding: 10px 16px;
    .icon{filter:grayscale(100%);}
    &-list{justify-content:flex-end;}
    &-item{display:flex; margin-inline-end:var(--size2);}
  }
  @media #{$break1}{
    &-nav{
      position:fixed; z-index:2; left:0; right:0; bottom:0; /*top:calc(100vh - 60px);*/ 
      width:100%; background-color:var(--abalance1); box-shadow:2px 1px 5px 2px var(--balance4);
      &-list{justify-content:space-between;}
    }
  }
  @media #{$break2open}{
    &-nav{position:sticky; top:0; z-index:3; grid-column:3; grid-row:1;}
  }
  @media #{$break2}, #{$break3}{
    &-nav{grid-column:2;}
  }
}
.alt-text{
  position:relative;
  &:hover, &:focus{
    &::before{
      content:attr(aria-label); display:block; padding:var(--size2); border-radius:var(--size1);
      position:absolute; top:calc(100% + var(--size2)); left:50%; transform:translatex(-50%);
      color:var(--abalance80); background-color:var(--balance10);
    }
  }
}
/* compnenets */
.main-header{
  position:sticky; z-index:2; top:0;
  background-color:var(--abalance1); box-shadow:-2px -1px 5px 2px var(--balance4);
  .start,
  .end{@include side-size; padding:10px 16px;}
  .start{padding:10px 16px;}
  .main-nav{flex:1; max-width:680px; margin:0 auto;}
  .logo{margin-inline-end:var(--size2);}
  @media #{$break1}{
    .main-nav{flex:0; margin:0; margin-inline-start:auto;}
    .user-nav{
      width:100%; box-shadow:-2px -1px 5px 2px var(--balance4);
      &-list{justify-content:space-between;}
    }
  }
}
.main-nav{
  &-list{height:100%;}
  &-button{
    display:flex; height:100%; text-align:center; padding:0 var(--size4); border:solid 3px transparent; border-radius:var(--size2); background-clip:padding-box; transition:background 0.3s;
    .icon{margin:auto; filter:grayscale(100%); opacity:0.8; font-size:22px;}
    &:hover, &:focus{
      outline:0;
      &:not(.is-selected){background-color:var(--balance1);}
    }
    &.is-selected{
      border-bottom-color:var(--main-color); border-radius:0;
      .icon{opacity:1; filter:grayscale(0%);}
    }
  }
  @media #{$break4open}{
    &-item{flex:1;}
  }
}
.common-section{
  color:var(--balance10);
  &:not(:first-child){
    &::before{
      content:""; display:block; margin:var(--size1) var(--size2);
      border-top:solid 1px var(--balance4);
    }
  }
}
.common-list{
  &-button{
    display:flex; height:52px; padding:var(--size2);
    > *{margin:auto 0;}
    img{border-radius:var(--size2);}
    .user-image{border-radius:50%;}
    .icon{width:36px; font-size:24px; text-align:center; margin-top:auto; margin-bottom:auto; margin-inline-end: var(--size2);}
    .text{font-weight:bold;}
    &:hover, &:focus{background-color:var(--balance1); border-radius:var(--size2);}
    &.is-ads{
      height:auto;
      .image{width:115px; flex-shrink:0; margin-inline-end:var(--size3);}
      .ads-url{font-weight:normal;}
    }
  }
}
/* post parts */
.common-post{
  padding:var(--size3) var(--size4); padding-block-end:var(--size1); margin-block-end:var(--size4); background-color:var(--abalance1); border-radius:var(--size2); box-shadow: 0 1px 2px var(--balance4);
  &-header{margin-bottom:var(--size2);}
}
.user-and-group{
  font-weight:bold;
  .icon-arrow-block-end{margin-inline-start:var(--size2);}
}
.time-and-privacy{
  font-size:13rem;
  > *:not(:first-child)::before{content:""; vertical-align:bottom; display:inline-block; width:2px; height:2px; background-color:var(--balance10); margin:var(--size2);}
}
.summary{
  > * + *{margin-inline-start:var(--size1);}
}
.total-comments{
  a{
    &:hover, &:focus{text-decoration:underline;}
  }
}
.reactions{letter-spacing:-2px;}
.common-content{
  b{font-weight:bold;}
  p{margin-bottom:var(--size1);}
  a:not(.embed-content){
    color:var(--main-color);
    &:hover, &:focus{text-decoration:underline;}
  }
  img:not(.embed-content-image){display:block; width:calc(100% + 32px); margin:16px -16px; max-width:none;}
}
.embed-content{
  display:block; background-color:var(--balance1); margin:16px -16px;
  &-text{padding:var(--size3) var(--size4);}
  &-info{text-transform:uppercase; color:var(--balance8); font-size:13rem; margin-bottom:var(--size1);}
  &-title{font-weight:bold;}
  &-paragraph{@include trim(); color:var(--balance8);}
  &-image{width:100%;}
}
.actions-buttons{
  padding-top:var(--size1); margin-top:var(--size2); border-top:solid 1px var(--balance4);
  &-item{flex:1;}
  &-button{
    width:100%; text-align:center; height:32px; border-radius:var(--size1);
    &:hover, &:focus{background-color:var(--balance1);}
    .icon{margin-inline-end:var(--size1); filter:grayscale(1);}
  }
}
/*entitiy*/
.e-dark-mode-button{
  position:fixed; z-index:2; right:var(--size4); bottom:var(--size4);
  @media #{$break1}{display:none;}
}

/* Dark mode colors */
.is-dark{
    --full-color: 0 0 0;
    --empty-color: 245 245 245;
    --text-color: #e5e5e5;
    --balance-full:#181818;
    --abalance1:rgba(var(--empty-color) / 0.05);
   .main-header{background-color:#252525;}
}

              
            
!

JS

              
                /*JS isn't my expertise πŸ˜‰*/
$(document).ready(function() {
    $("#menuButton").on("click", function(){
        $(".side-a").toggleClass("is-open");
        $("html").toggleClass("is-nav-open");
    });
      $("#darkMode").on("click", function(){
        $("html").toggleClass("is-dark");
    });
});
              
            
!
999px

Console