/****** 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;}
}
!
