<div class="main-grid">
<nav class="main-nav">
<a class="logo js-home" href="javascript: void(0)"><span class="icon">🦉</span></a>
<ul class="main-nav-list">
<li class="main-nav-item"><a class="menu-item is-selected js-home" href="javascript: void(0)"><span class="icon">🏠</span><span class="text">Home</span></a></li>
<li class="main-nav-item is-only-break1"><button class="menu-item"><span class="icon">🔎</span><span class="text">Search</span></button></li>
<li class="main-nav-item is-hide-break1"><a class="menu-item"><span class="icon icon-explore">#</span><span class="text">Explore</span></a></li>
<li class="main-nav-item"><a class="menu-item"><span class="icon">🔔</span><span class="text">Notifications</span></a></li>
<li class="main-nav-item"><a class="menu-item"><span class="icon">✉️</span><span class="text">Messages</span></a></li>
<li class="main-nav-item is-hide-break1"><a class="menu-item"><span class="icon">🔖</span><span class="text">Bookmarks</span></a></li>
<li class="main-nav-item is-hide-break1"><a class="menu-item"><span class="icon">📄</span><span class="text">Lists</span></a></li>
<li class="main-nav-item is-hide-break1">
<a class="menu-item u-animation-click js-profile" href="javascript: void(0)">
<span class="icon"><img class="profile-image" src="https://bit.ly/3b6qNEw" alt="Elad Shechter"></span>
<span class="text">Profile</span>
</a>
</li>
<li class="main-nav-item is-hide-break1"><a class="menu-item"><span class="icon icon-more"></span><span class="text">More</span></a></li>
<li class="main-nav-item tweet-button"><button class="common-button is-full-width is-height-big js-tweet"><span class="icon icon-tweet">✒️</span><span class="text">Tweet</span></button></li>
</ul>
</nav>
<main class="main-content">
<header class="main-header">
<button class="icon-button icon-back js-home u-hide"><span class="icon">←</span></button>
<div class="main-header-content">
<h1 class="section-title js-title">Home</h1>
</div>
<button class="icon-button u-margin-start-auto" aria-label="Top Tweets on"><span class="icon">✨</span></button>
</header>
<section class="profile-box u-hide">
<img src="https://pbs.twimg.com/profile_banners/221782882/1585581667/1500x500" alt="">
<div class="profile-box-content u-common-padding">
<img class="profile-image" src="https://pbs.twimg.com/profile_images/595840995675217920/8uRl8-5A_200x200.jpg" alt="Elad Shechter">
<h2 class="section-title">Elad Shechter</h2>
<div class="usercode u-margin-bottom">@eladsc</div>
<p class="u-margin-bottom">CSS/HTML Expert, Speaker, Writer</p>
<ul class="profile-box-info u-margin-bottom">
<li><a class="common-link" href="https://eladsc.com/" target="_blank"><span class="icon">🔗</span><span class="text">eladsc.com</span></a></li>
<li><span class="icon">📅</span><span class="text">Joined December 2010</span></li>
</ul>
<ul class="profile-box-info is-list-counters">
<li><span class="common-title">218</span> <span class="text">Following</span></li>
<li><span class="common-title">1,481</span> <span class="text">Followers</span></li>
</ul>
</div>
<nav class="common-nav">
<ul class="common-nav-list">
<li class="common-nav-item"><a class="is-selected">Tweets</a></li>
<li class="common-nav-item"><a>Tweets & replies</a></li>
<li class="common-nav-item"><a>Media</a></li>
<li class="common-nav-item"><a>Likes</a></li>
</ul>
</nav>
</section>
<section class="message-box">
<div class="profile-image-wrap">
<img class="profile-image" src="https://bit.ly/3b6qNEw" alt="Elad Shechter">
</div>
<div class="message-box-content" contenteditable="true" placeholder="What's happening?"></div>
<nav class="message-box-nav u-flex">
<ul class="u-flex">
<li><button class="icon-button"><span class="icon">🌇</span></button></li>
<li><button class="icon-button"><span class="icon icon-gif"></span></button></li>
<li><button class="icon-button"><span class="icon icon-poll">📊</span></button></li>
<li><button class="icon-button"><span class="icon">🙂</span></button></li>
</ul>
<button class="common-button u-margin-start-auto"><span class="text">Tweet</span></button>
</nav>
</section>
<section class="feed">
<ul class="feed-list">
<li class="feed-item">
<article class="tweet-item">
<img class="profile-image" src="https://s.cdpn.io/profiles/user/65740/80.jpg?1576332014" alt="codetalks.tv">
<header class="tweet-item-info u-flex">
<a class="tweet-item-info-user" href="https://twitter.com/eladsc" target="_blank">
<span class="common-title">Elad Shechter</span>
<span class="usercode">@eladsc</span>
</a>
<time datetime="">Jun 10</time>
<button class="icon-button u-flex u-margin-start-auto" style="--icon-button-size:27px;"><span class="icon icon-arrow-down u-margin-auto"></span></button>
</header>
<div class="common-content">
<p>
Do you want to know how I made CSS reverse engineering of the Twitter website?! 😃 I just wrote a full article on it.
</p>
<a class="embed-content" href="https://medium.com/@elad/reverse-engineering-twitters-css-289c91040008" target="_blank">
<img class="embed-content-image" src="https://miro.medium.com/max/1104/1*bWhVp9YmZbYyGshS2hpNPw.jpeg" alt="">
<div class="embed-content-text">
<h2 class="embed-content-title">Reverse Engineering Twitter’s CSS</h2>
<p class="embed-content-paragraph">As someone who loves CSS and appreciates its importance in this day and age, it is very unclear to me how the web industry’s most…</p>
<footer class="embed-content-info"><span class="icon">🔗</span><span class="text">medium.com</span></footer>
</div>
</a>
</div>
<ul class="message-options u-flex u-space-between">
<li class="message-options-item">
<label>
<button class="icon-button"><span class="icon">💬</span></button>
<span class="text"></span>
</label>
</li>
<li class="message-options-item">
<label>
<button class="icon-button"><span class="icon">🔃</span></button>
<span class="text">0</span>
</label>
</li>
<li class="message-options-item">
<label>
<button class="icon-button"><span class="icon">❤</span></button>
<span class="text">2</span>
</label>
</li>
<li class="message-options-item">
<label>
<button class="icon-button"><span class="icon">📤</span></button>
<span class="text"></span>
</label>
</li>
</ul>
</article>
</li>
<li class="feed-item">
<article class="tweet-item">
<img class="profile-image" src="https://pbs.twimg.com/profile_images/1105621862556545024/k5HJkj-p_reasonably_small.png" alt="codetalks.tv">
<header class="tweet-item-info u-flex">
<a class="tweet-item-info-user" href="https://twitter.com/codetalkstv" target="_blank">
<span class="common-title">codetalks.tv</span>
<span class="usercode">@codetalkstv</span>
</a>
<time datetime="">Jun 4</time>
<button class="icon-button u-flex u-margin-start-auto" style="--icon-button-size:27px;"><span class="icon icon-arrow-down u-margin-auto"></span></button>
</header>
<div class="common-content">
<p>The New <a href="https://twitter.com/hashtag/CSS" target="_blank">#CSS</a> Logical Properties (English) - by Elad Shechter</p>
<a class="embed-content" href="https://codetalks.tv/talk/the-new-css-logical-properties-english-by-elad-shechter-emdg4aj8o6u" target="_blank">
<img class="embed-content-image" src="https://pbs.twimg.com/card_img/1268078644146118656/pk5ViuZO?format=png&name=small" alt="">
<div class="embed-content-text">
<h2 class="embed-content-title">Understanding the “Initial”, “Inherit” and “Unset” CSS Keywords</h2>
<p class="embed-content-paragraph">CSS has default keywords for various values. In this article I’m going to talk about three of them: initial, inherit, and the relatively…</p>
<footer class="embed-content-info"><span class="icon">🔗</span><span class="text">medium.com</span></footer>
</div>
</a>
</div>
<ul class="message-options u-flex u-space-between">
<li class="message-options-item">
<label>
<button class="icon-button"><span class="icon">💬</span></button>
<span class="text"></span>
</label>
</li>
<li class="message-options-item">
<label>
<button class="icon-button"><span class="icon">🔃</span></button>
<span class="text">1</span>
</label>
</li>
<li class="message-options-item">
<label>
<button class="icon-button"><span class="icon">❤</span></button>
<span class="text">2</span>
</label>
</li>
<li class="message-options-item">
<label>
<button class="icon-button"><span class="icon">📤</span></button>
<span class="text"></span>
</label>
</li>
</ul>
</article>
</li>
<li class="feed-item">
<article class="tweet-item">
<img class="profile-image" src="https://s.cdpn.io/profiles/user/65740/80.jpg?1576332014" alt="codetalks.tv">
<header class="tweet-item-info u-flex">
<a class="tweet-item-info-user" href="https://twitter.com/eladsc" target="_blank">
<span class="common-title">Elad Shechter</span>
<span class="usercode">@eladsc</span>
</a>
<time datetime="">Apr 5</time>
<button class="icon-button u-flex u-margin-start-auto" style="--icon-button-size:27px;"><span class="icon icon-arrow-down u-margin-auto"></span></button>
</header>
<div class="common-content">
<p>
The Coronavirus Invaders!<br>
I just created Pure CSS Game! (No JS).<br>
Try, how many Coronavirus are you able to eliminate?😃<br><br>
Full page game:<br>
<a href="https://codepen.io/elad2412/full/wvabjXy" target="_blank">https://codepen.io/elad2412/full/wvabjXy</a><br><br>
Editor view:<br>
<a href="https://codepen.io/elad2412/pen/wvabjXy" target="_blank">https://codepen.io/elad2412/pen/wvabjXy</a><br>
</p>
<img class="content-image" src="https://i0.wp.com/eladsc.com/wp-content/uploads/2020/04/corona1-1.gif?fit=660%2C371&ssl=1" alt="">
</div>
<ul class="message-options u-flex u-space-between">
<li class="message-options-item">
<label>
<button class="icon-button"><span class="icon">💬</span></button>
<span class="text"></span>
</label>
</li>
<li class="message-options-item">
<label>
<button class="icon-button"><span class="icon">🔃</span></button>
<span class="text">13</span>
</label>
</li>
<li class="message-options-item">
<label>
<button class="icon-button"><span class="icon">❤</span></button>
<span class="text">36</span>
</label>
</li>
<li class="message-options-item">
<label>
<button class="icon-button"><span class="icon">📤</span></button>
<span class="text"></span>
</label>
</li>
</ul>
</article>
</li>
<li class="feed-item">
<article class="tweet-item">
<img class="profile-image" src="https://s.cdpn.io/profiles/user/65740/80.jpg?1576332014" alt="Elad Shechter">
<header class="tweet-item-info u-flex">
<a class="tweet-item-info-user" href="https://twitter.com/eladsc" target="_blank">
<span class="common-title">Elad Shechter</span>
<span class="usercode">@eladsc</span>
</a>
<time datetime="">Mar 1</time>
<button class="icon-button u-flex u-margin-start-auto" style="--icon-button-size:27px;"><span class="icon icon-arrow-down u-margin-auto"></span></button>
</header>
<div class="common-content">
<p>
"Why the World Needs CSS Developers"<br><br>
In the last 10 years, the web standards have been grown rapidly. But the FED job titles stayed the same.<br>
In my new article, I will explain, from my perspective, why it's time to change and adapt new job titles!<br>
</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/552/1*65c_DA3NOmVk-NvkKLnSDA.png" alt="">
<div class="embed-content-text">
<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>
<footer class="embed-content-info"><span class="icon">🔗</span><span class="text">medium.com</span></footer>
</div>
</a>
</div>
<ul class="message-options u-flex u-space-between">
<li class="message-options-item">
<label>
<button class="icon-button"><span class="icon">💬</span></button>
<span class="text"></span>
</label>
</li>
<li class="message-options-item">
<label>
<button class="icon-button"><span class="icon">🔃</span></button>
<span class="text">1</span>
</label>
</li>
<li class="message-options-item">
<label>
<button class="icon-button"><span class="icon">❤</span></button>
<span class="text">3</span>
</label>
</li>
<li class="message-options-item">
<label>
<button class="icon-button"><span class="icon">📤</span></button>
<span class="text"></span>
</label>
</li>
</ul>
</article>
</li>
<li class="feed-item">
<article class="tweet-item">
<img class="profile-image" src="http://bit.ly/2SGZ46r" alt="CSS Weekly">
<header class="tweet-item-info u-flex">
<a class="tweet-item-info-user" href="https://twitter.com/CSSWeekly" target="_blank">
<span class="common-title">CSS Weekly</span>
<span class="usercode">@CSSWeekly</span>
</a>
<time datetime="">Jan 31</time>
<button class="icon-button u-flex u-margin-start-auto" style="--icon-button-size:27px;"><span class="icon icon-arrow-down u-margin-auto"></span></button>
</header>
<div class="common-content">
<p>Elad Shechter (<a href="https://twitter.com/eladsc" target="_blank">@eladsc</a>) explains how initial, inherit and unset keywords work.</p>
<a class="embed-content" href="https://buff.ly/2uizb2S" target="_blank">
<img class="embed-content-image" src="https://miro.medium.com/max/880/1*dn3FzkpQs3gaRAApsTcI6A.png" alt="">
<div class="embed-content-text">
<h2 class="embed-content-title">Understanding the “Initial”, “Inherit” and “Unset” CSS Keywords</h2>
<p class="embed-content-paragraph">CSS has default keywords for various values. In this article I’m going to talk about three of them: initial, inherit, and the relatively…</p>
<footer class="embed-content-info"><span class="icon">🔗</span><span class="text">medium.com</span></footer>
</div>
</a>
</div>
<ul class="message-options u-flex u-space-between">
<li class="message-options-item">
<label>
<button class="icon-button"><span class="icon">💬</span></button>
<span class="text"></span>
</label>
</li>
<li class="message-options-item">
<label>
<button class="icon-button"><span class="icon">🔃</span></button>
<span class="text">1</span>
</label>
</li>
<li class="message-options-item">
<label>
<button class="icon-button"><span class="icon">❤</span></button>
<span class="text">3</span>
</label>
</li>
<li class="message-options-item">
<label>
<button class="icon-button"><span class="icon">📤</span></button>
<span class="text"></span>
</label>
</li>
</ul>
</article>
</li>
<li class="feed-item">
<article class="tweet-item">
<img class="profile-image" src="https://pbs.twimg.com/profile_images/3304895288/5c6b1f60dd5f179f7b2da2cea0ad787a_bigger.png" alt="CSS Weekly">
<header class="tweet-item-info u-flex">
<a class="tweet-item-info-user" href="https://twitter.com/SidebarIO" target="_blank">
<span class="common-title">Sidebar</span>
<span class="usercode">@SidebarIO</span>
</a>
<time datetime="">Jan 31</time>
<button class="icon-button u-flex u-margin-start-auto" style="--icon-button-size:27px;"><span class="icon icon-arrow-down u-margin-auto"></span></button>
</header>
<div class="common-content">
<p>Why CSS HSL Colors are Better!</p>
<a class="embed-content" href="https://t.co/j4wJpK6OYo" target="_blank">
<img class="embed-content-image" src="https://miro.medium.com/max/792/1*mMdxAEl-r0qa44MgzsAX6w.png" alt="">
<div class="embed-content-text">
<h2 class="embed-content-title">Why CSS HSL Colors are Better!</h2>
<p class="embed-content-paragraph">With the Power of CSS Variables</p>
<footer class="embed-content-info"><span class="icon">🔗</span><span class="text">medium.com</span></footer>
</div>
</a>
</div>
<ul class="message-options u-flex u-space-between">
<li class="message-options-item">
<label>
<button class="icon-button"><span class="icon">💬</span></button>
<span class="text"></span>
</label>
</li>
<li class="message-options-item">
<label>
<button class="icon-button"><span class="icon">🔃</span></button>
<span class="text">1</span>
</label>
</li>
<li class="message-options-item">
<label>
<button class="icon-button"><span class="icon">❤</span></button>
<span class="text">16</span>
</label>
</li>
<li class="message-options-item">
<label>
<button class="icon-button"><span class="icon">📤</span></button>
<span class="text"></span>
</label>
</li>
</ul>
</article>
</li>
</ul>
</section>
</main>
<aside class="main-side">
<div class="main-side-searchbox">
<label class="search-box">
<span class="icon">🔎</span>
<input type="search" placeholder="Search tweets">
</label>
</div>
<section class="common-box">
<header class="common-box-header u-flex">
<h2 class="section-title">Trends for you</h2>
<button class="icon-button u-margin-start-auto"><span class="icon icon-settings">⚙️</span></button>
</header>
<ul class="common-list">
<li class="common-list-item">
<a class="u-block u-common-padding">
<div class="trend-category">Web Technology</div>
<h3 class="common-title">CSS</h3>
<p>105K Tweets</p>
</a>
<button class="icon-button u-flex u-margin-start-auto"><span class="icon icon-arrow-down u-margin-auto"></span></button>
</li>
<li class="common-list-item">
<a class="u-block u-common-padding">
<div class="trend-category">Web Technology</div>
<h3 class="common-title">SVG</h3>
<p>21K Tweets</p>
</a>
<button class="icon-button u-flex u-margin-start-auto"><span class="icon icon-arrow-down u-margin-auto"></span></button>
</li>
<li class="common-list-item">
<a class="u-block u-common-padding">
<div class="trend-category">Web Technology</div>
<h3 class="common-title">Responsive Design</h3>
<p>251K Tweets</p>
</a>
<button class="icon-button u-flex u-margin-start-auto"><span class="icon icon-arrow-down u-margin-auto"></span></button>
</li>
</ul>
<a class="common-more" href="/">Show more</a>
</section>
<section class="common-box">
<header class="common-box-header u-flex">
<h2 class="section-title">Who to follow</h2>
</header>
<ul class="common-list">
<li class="common-list-item u-flex">
<a class="user-item u-common-padding" href="https://twitter.com/css" target="_blank">
<img class="profile-image" src="https://pbs.twimg.com/profile_images/1080202898372362240/akqRGyta_200x200.jpg" alt="CSS Tricks">
<h3 class="common-title">CSS-Tricks</h3>
<span class="usercode">@css</span>
<div class="common-button is-invert" tabindex="0" role="button"><span class="text">Follow</span></div>
</a>
</li>
<li class="common-list-item u-flex">
<a class="user-item u-common-padding" href="https://twitter.com/smashingmag" target="_blank">
<img class="profile-image" src="https://pbs.twimg.com/profile_images/1242374315703664641/qIJwxb3i_400x400.jpg" alt="Smashing Magazine">
<h3 class="common-title">Smashing Magazine</h3>
<span class="usercode">@smashingmag</span>
<div class="common-button is-invert" tabindex="0" role="button"><span class="text">Follow</span></div>
</a>
</li>
<li class="common-list-item u-flex">
<a class="user-item u-common-padding" href="https://twitter.com/SidebarIO" target="_blank">
<img class="profile-image" src="https://pbs.twimg.com/profile_images/3304895288/5c6b1f60dd5f179f7b2da2cea0ad787a_bigger.png" alt="CSSbar">
<h3 class="common-title">Sidebar</h3>
<span class="usercode">@SidebarIO</span>
<div class="common-button is-invert" tabindex="0" role="button"><span class="text">Follow</span></div>
</a>
</li>
<li class="common-list-item u-flex">
<a class="user-item u-common-padding" href="https://twitter.com/CSSWeekly" target="_blank">
<img class="profile-image" src="https://bit.ly/2SGZ46r" alt="CSS Weekly">
<h3 class="common-title">CSS Weekly</h3>
<span class="usercode">@CSSWeekly</span>
<div class="common-button is-invert" tabindex="0" role="button"><span class="text">Follow</span></div>
</a>
</li>
</ul>
<a class="common-more" href="/">Show more</a>
</section>
</aside>
</div>
/****** More of My Resets *******/
*,
*::before,
*::after{box-sizing:border-box;}
:focus{outline:none;}
button{background-color:transparent; color:inherit; border-width:0; padding:0; margin:0; cursor:pointer;}
img{display:block; max-width:100%;}
a{text-decoration:none; cursor:pointer;}
/* Responsive Variables */
$break1: "(max-width:499px)";
$break2: "(min-width:500px) and (max-width:1004px)";
$break2open:"(min-width:500px)";
$break3: "(min-width:1005px) and (max-width:1094px)";
$break3open:"(min-width:1005px)";
$break4: "(min-width:1095px) and (max-width:1281px)";
$break4open:"(min-width:1095px)";
$break5open:"(min-width:1282px)";
.is-hide-break1{
@media #{$break1}{display:none!important;}
}
.is-only-break1{
@media #{$break2open}{display:none!important;}
}
/* Multi direcrtion Languages Support Variables*/
$start-direction: left !default;
$end-direction: right !default;
/* typography */
html{font-size:1px;/*for using REM units*/}
body{
font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
font-size:16rem; line-height:1.3;
}
/* utilities classes */
.u-hide{display:none!important;}
.u-block{display:block!important;}
.u-flex{display:flex!important;}
.u-space-between{justify-content:space-between!important;}
.u-common-padding{padding:10px 15px!important;}
.u-margin-auto{margin:auto!important;}
.u-margin-start-auto{margin-#{$start-direction}:auto!important;}
.u-margin-bottom{margin-bottom:10px!important;}
/* colors */
:root{
--white:#fff;
--black:#000;
--grayA:#657786;
--gray-light:#f8f5fa;
--border-color:#e6ecf0;
/* common blue */
--base-color:203; /* base hue of blue*/
--main-color:hsla(var(--base-color), 89%, 53%, 1);
--hover-color:hsla(var(--base-color), 89%, 47%, 1);
--bg-hover-color:hsla(var(--base-color), 89%, 53%, 0.1);
}
/*mixin*/
@mixin trim{text-overflow:ellipsis; white-space:nowrap; overflow:hidden; display:block;}
@mixin scroll{overflow-y:auto; scrollbar-width:thin; /*-webkit-overflow-scrolling:touch;*/}
/*scrolls*/
::-webkit-scrollbar {width:6px!important; height:6px!important; background-color:#f5f5f5;}
::-webkit-scrollbar-thumb {background-color:rgba(0,0,0,.2);}
::-webkit-scrollbar-track {background-color:rgba(255, 255, 255, 0.08);}
/* animation */
@keyframes clickableAnimation {
0% {transform:scale(1);}
95% {transform:scale(1);}
96% {transform:scale(1.25);}
97% {transform:scale(1.25);}
100% {transform:scale(1);}
}
.u-animation-click{animation: clickableAnimation 20s ease-in-out -17s infinite;}
/* icons */
.icon{filter:grayscale(1) opacity(0.8);}
.icon-explore{font-size:28px; color:var(--main-color);}
.icon-more{
display:flex; width:24px; height:24px; border:solid 1px var(--black); border-radius:50%;
&::before{content:""; width:4px; height:4px; margin:auto; background-color:var(--black); border-radius:inherit; box-shadow:6px 0px var(--black), -6px 0px var(--black);}
}
.icon-gif{
display:inline-flex; vertical-align:bottom; width:20px; height:20px; border:solid 1px var(--black); text-transform:uppercase; font-size:8px; font-weight:800;
&::before{content:"gif"; margin:auto; }
}
.icon-poll{display:inline-flex; transform:rotateZ(90deg);}
.icon-arrow-down{
position:relative; #{$start-direction}:-2px;
&::before,
&::after{content:""; position:absolute; display:block; height:2px; width:8px; background:var(--grayA);}
&::before{transform:translateX(-4px) rotateZ(45deg);}
&::after{transform:rotateZ(-45deg);}
}
.icon-tweet{filter:grayscale(1) opacity(0.8) brightness(1.5);}
/* Grid Layout */
.main-grid{
display:grid; justify-content:center; min-height:100vh; margin:0 auto;
@media #{$break1}, #{$break2}{ .main-side{display:none;} }
@media #{$break2}{ grid-template-columns:auto minmax(auto, 600px); max-width:705px;}
@media #{$break3open}{grid-template-columns:auto 600px minmax(290px, 380px); padding:0 10px; box-sizing:content-box;}
@media #{$break4open}{max-width:1235px;}
}
/*elemenets*/
.profile-image{border-radius:50%;}
.common-link{
color:var(--main-color);
&:hover, &:focus{text-decoration:underline;}
}
.common-button{
--button-height:40px;
--button-padding:15px;
background-color:var(--main-color); height:var(--button-height); padding:0 var(--button-padding); border-radius:calc( var(--button-height) / 2 ) / 50%;
color:var(--white); font-size:15rem; font-weight:bold;
&.is-full-width{width:100%;}
&.is-height-big{--button-height:50px;}
&.is-invert{
background-color:transparent; border:solid 1px var(--main-color); color:var(--main-color);
&:hover, &:focus{background-color:var(--bg-hover-color);}
}
&:hover, &:focus{background-color:var(--hover-color);}
}
.icon-button{
--icon-button-size:40px;
height:var(--icon-button-size); width:var(--icon-button-size); border-radius:50%;
&:hover,
&:focus{background-color:var(--bg-hover-color);}
}
.tweet-button{
@media #{$break1}{
position:fixed; #{$start-direction}:auto; #{$end-direction}:15px; bottom:75px;
.common-button{
width:auto; box-shadow:rgba(101, 119, 134, 0.2) 0px 0px 8px, rgba(101, 119, 134, 0.25) 0px 1px 3px 1px;
.text{display:none;}
}
}
@media #{$break2}, #{$break3}, #{$break4}{
.common-button{
padding:0;
.text{display:none;}
}
}
@media #{$break5open}{
.common-button .icon{display:none;}
}
}
.section-title{font-size:19rem; font-weight:800;}
.common-title{font-size:15rem; font-weight:700; color:var(--black);}
.trend-category{font-size:13rem; color:var(--grayA); margin-bottom:5px;}
.usercode{color:var(--grayA); font-size:15rem;}
.logo{
display:block; width:50px; height:50px; border-radius:50%; margin:2px 0;
font-size:24px; line-height:50px; text-decoration:none; text-align:center;
.icon{
display:block;
filter:hue-rotate(175deg) opacity(0.8); transform:scale(-1, 1);
}
&:hover, &:focus{background-color:var(--bg-hover-color);}
}
.menu-item{
display:flex; align-items:center; width:fit-content; padding:10px; border-radius:20px / 50%;
font-weight:bold; font-size:19rem;
.icon{
width:26px; height:26px;
line-height:26px; text-align:center; filter:grayscale(1) opacity(0.8); transition:0.2s;
&-explore{filter:grayscale(1) opacity(1) brightness(0.5);}
}
.text{color:var(--black); padding-#{$end-direction}:15px; margin-#{$start-direction}:20px; }
&:hover, &:focus{background-color:var(--bg-hover-color);}
&:hover,
&:focus,
&.is-selected{
.text{color:var(--main-color);}
.icon{filter:grayscale(0.3) opacity(1);}
}
@media #{$break1}, #{$break2}, #{$break3}, #{$break4}{
.text{display:none;}
.common-button{
.text{display:none;}
}
}
}
.search-box{
--search-height:42px;
position:relative; display:flex; transition:0.2s;
border:solid 1px transparent; border-radius:calc(var(--search-height) / 2) / 50%; background-color:var(--border-color);
&:focus-within{
background-color:transparent; border-color:var(--main-color);
.icon{filter:grayscale(0) opacity(1);}
}
.icon{margin:auto 10px; transform:scale(-1, 1);}
input{
-webkit-appearance:none; appearance:none;
background-color:transparent; border:none; /* reset input */
padding:5px 10px; width:100%; height:var(--search-height);
&::-webkit-input-placeholder {font-size:15rem; overflow:visible; line-height:1;}
&::-moz-placeholder{font-size:15rem; overflow:visible; line-height:1;}
&:placeholder {font-size:15rem; overflow:visible; line-height:1;}
}
}
.common-more{display:block; padding:10px 15px; color:var(--main-color); border-radius:0 0 10px 10px;}
/*components */
.main-nav{
@include scroll();
position:sticky; top:0; max-height:100vh; overflow:auto;
&-item{padding:7px 0;}
@media #{$break1}{
position:fixed; z-index:4; #{$start-direction}:0; #{$end-direction}:0; bottom:0; top:auto;
background-color:var(--white); border-top:solid 1px var(--border-color);
.logo{display:none;}
&-list{display:flex; justify-content:space-between; padding:0 15px;}
}
@media #{$break2}, #{$break3}, #{$break4}{
width:68px; padding:0 10px;
}
@media #{$break5open}{
min-width:88px; width:255px; padding-#{$end-direction}:44px;
}
}
.main-content{border:solid 0 var(--border-color); border-width:0 1px;}
.main-side{
margin-#{$start-direction}:30px;
&-searchbox{position:sticky; z-index:2; top:0; padding-top:10px; padding-bottom:10px; background-color:var(--white);}
}
.main-header{
position:-webkit-sticky;/* Safari */ position:sticky; z-index:2; top:0; background-color:var(--white);
display:flex; height:50px; padding:0 15px; border-bottom:solid 1px var(--border-color);
&-content{display:flex; height:100%; flex-direction:column; justify-content:center;}
.icon-button{margin-top:auto; margin-bottom:auto;}
.icon-back{margin-#{$end-direction}:10px; font-size:22px;}
}
.common-nav{
border-bottom:solid 1px var(--border-color);
&-list{display:flex; overflow:auto; max-width:100vw;}
&-item{
flex:1 auto;
a{display:block; padding:15px; text-align:center; font-size:15rem; font-weight:700; color:var(--grayA); white-space:nowrap;}
.is-selected{border-bottom:solid 2px CurrentColor; color:var(--main-color);}
}
}
.profile-box{
.profile-image{
--image-size:142px;
display:inline-block; width:var(--image-size); background-color:var(--white); border:solid 4px var(--white); margin-top:calc( var(--image-size) / 2 * -1);
}
&.is-list-counters{
.common-title{padding-#{$end-direction}:5px;}
li + li{margin-#{$start-direction}:15px;}
}
&-info{
display:flex;
li:not(:first-child){margin-#{$start-direction}:10px;}
.icon + .text{padding-#{$start-direction}:5px;}
}
}
.message-box{
display:grid; grid-template-columns:50px auto; grid-gap:10px;
grid-template-areas:"image content"
"image nav";
padding:10px 15px; border-bottom:solid 10px var(--border-color);
&-content{
padding:10px 0; font-size:19rem;
&::before{content:"What's happening?"; color:#9197a3;}
&:not(:empty)::before{content:"";}
&:focus{
outline:none;
&::before{color:#bdc1c9;}
}
}
&-nav{
grid-area:nav;
.icon-button{font-size:18px;}
}
}
.feed{
&-item{
border-bottom:solid 1px var(--border-color);
}
}
.tweet-item{
display:grid; grid-template-columns:50px auto; grid-column-gap:10px;
grid-template-areas:"image user"
"image content"
"image options";
padding:10px 15px;
.profile-image{grid-area:image;}
&-info{grid-area:user;}
.common-content{grid-area:content;}
.message-options{grid-area:options;}
&-info-user{
&:hover, &:focus{
.common-title{text-decoration:underline;}
}
}
time{
color:var(--grayA);
&::before{content:"·"; margin:0 5px;}
}
&:hover{background:var(--gray-light);}
}
.message-options{
.icon{opacity:0.8; font-size:18rem;}
.text{color:var(--grayA);}
}
.common-content{
a:not(.embed-content){
color:var(--main-color);
&:hover, &:focus{text-decoration:underline;}
}
}
.embed-content{
--border-color:#ccd6dd;
display:block; border:solid 1px var(--border-color); border-radius:10px; margin-top:10px; margin-bottom:5px;
&:focus{border-color:var(--main-color);}
&-image{border-radius:10px 10px 0 0; border-bottom:solid 1px; border-color:inherit;}
&-title{color:var(--black); margin-bottom:5px;}
&-paragraph{color:var(--grayA);}
&-info{
color:var(--grayA); margin-top:5px;
.icon{margin-#{$end-direction}:5px;}
}
&-text{padding:10px; font-size:15px; text-decoration:none;}
}
.common-box{
background-color:#f5f8fa; border-radius:10px; margin-bottom:15px;
a{
&:hover, &:focus{background-color:#edf1f4;}
}
&-header{
padding:10px 15px; border-bottom:solid 1px var(--border-color);
.icon-button{--icon-button-size:27px;}
}
}
.content-image{border-radius:10px; margin-top:10px;}
.common-list{
&-item{
position:relative;
border-bottom:solid 1px var(--border-color);
.common-title{margin-bottom:5px;}
p{color:var(--grayA); font-size:15rem;}
.icon-button{--icon-button-size:27px; position:absolute; #{$end-direction}:10px; top:10px;}
}
}
.user-item{
display:grid; grid-template-columns:50px 1fr auto; grid-column-gap:10px; flex:1;
grid-template-areas:"image title button"
"image usercode button";
.profile-image{grid-area:image; font-size:8rem; text-align:center; background-color:var(--grayA); height:50px; overflow:hidden;}
.common-title{grid-area:title; margin-bottom:0; align-self:end;}
.usercode{grid-area:usercode; align-self:start;}
.common-button{
grid-area:button; display:flex; margin:auto; margin-#{$end-direction}:10px; --button-height:30px;
.text{margin:auto;}
}
&:hover, &:focus{background-color:transparent;}
}
View Compiled
/*JS isn't my expertise 😉.
This is only to demonstrate how will look the profile page*/
$(document).ready(function() {
$(".js-profile").on("click", function(){
$(".menu-item").removeClass("is-selected");
$(this).addClass("is-selected");
$(".icon-back, .profile-box").removeClass("u-hide");
$(".message-box").addClass("u-hide");
$(".js-title").text("Elad Shechter");
});
$(".js-home").on("click", function(){
$(".menu-item").removeClass("is-selected");
$(".menu-item.js-home").addClass("is-selected");
$(".icon-back, .profile-box").addClass("u-hide");
$(".message-box").removeClass("u-hide");
$(".js-title").text("Home");
});
$(".js-tweet").on("click", function(){
$(".message-box").removeClass("u-hide");
$(".message-box-content").focus();
});
});
This Pen doesn't use any external CSS resources.