view preview on codepen
-
Edit 1
- index.html
- style.scss
- index.pug
- style.css
- half-1.css
- half-2.css
-
Edit 2
- style.scss
- style.css
-
Sociallity
- Codepen
- Gist
Last active
June 10, 2021 04:12
-
-
Save mikoloism/ef79d17edd10a5958db651a498625761 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* YEK (https://github.com/yek-org) | |
| -------------------------------------- */ | |
| /* variables | |
| ---------------------------- */ | |
| /* 3D-BOX ($bx-) | |
| ------------------------- */ | |
| /* resets | |
| ---------------------------- */ | |
| * { | |
| box-sizing: border-box; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| body { | |
| display: flex; | |
| flex-direction: column; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| align-content: center; | |
| width: 100%; | |
| height: 100vh; | |
| background-color: #ccc; | |
| font-size: 1rem; | |
| } | |
| li { | |
| list-style: none; | |
| } | |
| a { | |
| color: #69c; | |
| text-decoration: none; | |
| cursor: pointer; | |
| } | |
| /* stylesheets | |
| ---------------------------- */ | |
| .yek-social { | |
| width: 750px; | |
| height: 190px; | |
| /* animaitons | |
| ------------------------- */ | |
| } | |
| .yek-social__list, .yek-social__item, .yek-social__link, .yek-social__button { | |
| display: flex; | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| align-content: center; | |
| } | |
| .yek-social__list, .yek-social__link { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .yek-social__list { | |
| justify-content: space-between; | |
| } | |
| .yek-social__item { | |
| width: 24%; | |
| height: 100%; | |
| } | |
| .yek-social__button { | |
| width: 72px; | |
| height: 72px; | |
| background-color: #fff; | |
| box-shadow: -20px 20px 5px rgba(68, 68, 68, 0.5); | |
| transition: 0.5s 0.15s; | |
| } | |
| .yek-social__button { | |
| position: relative; | |
| transform: perspective(1000px) rotate(-25deg) skew(25deg); | |
| } | |
| .yek-social__button::before, .yek-social__button::after { | |
| content: ""; | |
| position: absolute; | |
| } | |
| .yek-social__button::before { | |
| width: 21px; | |
| height: 100%; | |
| top: 10px; | |
| left: -20px; | |
| background-color: #9f9f9f; | |
| transition: 0.5s 0.15s; | |
| transform: rotate(0deg) skewY(-45deg); | |
| } | |
| .yek-social__button::after { | |
| width: 100%; | |
| height: 21px; | |
| bottom: -20px; | |
| left: -10px; | |
| transition: 0.8s 0.15s; | |
| background-color: #c3c3c3; | |
| transform: rotate(0deg) skewX(-45deg); | |
| } | |
| .yek-social__icon { | |
| color: #444; | |
| font-size: 1.7em; | |
| transition-delay: 0.2s; | |
| } | |
| .yek-social__link:hover .yek-social__icon { | |
| color: #fff; | |
| } | |
| .yek-social__link:hover .yek-social__button { | |
| transform: perspective(1000px) rotate(-25deg) skew(25deg) translate(20px, -20px); | |
| } | |
| .yek-social__link:hover .yek-social__button--youtube { | |
| background-color: #c4302b; | |
| box-shadow: -50px 50px 20px rgba(196, 48, 43, 0.5); | |
| } | |
| .yek-social__link:hover .yek-social__button--youtube::before { | |
| background-color: #d5433e; | |
| } | |
| .yek-social__link:hover .yek-social__button--youtube::after { | |
| background-color: #db5f5b; | |
| } | |
| .yek-social__link:hover .yek-social__button--twitter { | |
| background-color: #00acee; | |
| box-shadow: -50px 50px 20px rgba(0, 172, 238, 0.5); | |
| } | |
| .yek-social__link:hover .yek-social__button--twitter::before { | |
| background-color: #13bdff; | |
| } | |
| .yek-social__link:hover .yek-social__button--twitter::after { | |
| background-color: #36c7ff; | |
| } | |
| .yek-social__link:hover .yek-social__button--telegram { | |
| background-color: #0088cc; | |
| box-shadow: -50px 50px 20px rgba(0, 136, 204, 0.5); | |
| } | |
| .yek-social__link:hover .yek-social__button--telegram::before { | |
| background-color: #00a0f0; | |
| } | |
| .yek-social__link:hover .yek-social__button--telegram::after { | |
| background-color: #14b1ff; | |
| } | |
| .yek-social__link:hover .yek-social__button--instagram { | |
| background-color: #c13584; | |
| box-shadow: -50px 50px 20px rgba(193, 53, 132, 0.5); | |
| } | |
| .yek-social__link:hover .yek-social__button--instagram::before { | |
| background-color: #ce4c95; | |
| } | |
| .yek-social__link:hover .yek-social__button--instagram::after { | |
| background-color: #d668a6; | |
| } | |
| .follow-me { | |
| display: inline-block; | |
| position: fixed; | |
| bottom: 14px; | |
| left: 14px; | |
| padding: 9px; | |
| border-radius: 9px; | |
| font-family: "ubuntu"; | |
| background-color: #fff; | |
| } | |
| .follow-me .link { | |
| transition: 0.3s 0.2s linear; | |
| border-radius: 4px; | |
| padding: 4px; | |
| color: #69c; | |
| } | |
| .follow-me .link:hover { | |
| margin: 4px; | |
| color: #fff; | |
| background-color: #69c; | |
| } | |
| .follow-me .mute { | |
| color: #444; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* YEK (https://github.com/yek-org) | |
| -------------------------------------- */ | |
| * { box-sizing: border-box; padding: 0; margin: 0; } | |
| body { | |
| display: grid; place-self: center; | |
| width: 100%; height: 100vh; | |
| background-color: #ccc; | |
| font-size: 1rem; | |
| } | |
| li { | |
| list-style: none; | |
| } | |
| a { | |
| color: #69c; | |
| text-decoration: none; | |
| cursor: pointer; | |
| } | |
| /* lets coding... | |
| ---------------------------- */ | |
| .yek-social__list, .yek-social__item, | |
| .yek-social__link, .yek-social__button { | |
| display: flex; | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| align-content: center; | |
| } | |
| .yek-social__list, .yek-social__link { width: 100%; height: 100%; } | |
| .yek-social__list { justify-content: space-between; } | |
| .yek-social__button { | |
| width: 72px; height: 72px; | |
| background: #fff; transition: 0.5s 0.15s; | |
| box-shadow: -20px 20px 10px rgba(68, 68, 68, 0.5); | |
| } | |
| .yek-social__button { | |
| position: relative; | |
| transform: perspective(1000px) rotate(-25deg) skew(25deg); | |
| } | |
| .yek-social__button::before, .yek-social__button::after { | |
| content: ""; | |
| position: absolute; | |
| } | |
| .yek-social__button::before { | |
| width: 21px; height: 100%; | |
| top: 10px; left: -20px; | |
| transition: 0.5s 0.15s; | |
| background-color: #9f9f9f; | |
| transform: rotate(0deg) skewY(-45deg); | |
| } | |
| .yek-social__button::after { | |
| width: 100%; height: 21px; | |
| bottom: -20px; left: -10px; | |
| transition: 0.8s 0.15s; | |
| background-color: #b1b1b1; | |
| transform: rotate(0deg) skewX(-45deg); | |
| } | |
| .yek-social__icon { | |
| color: #444; font-size: 1.7em; | |
| transition-delay: 0.2s; | |
| } | |
| .yek-social__link:hover .yek-social__icon { color: #fff; } | |
| .yek-social__link:hover .yek-social__button { | |
| transform: perspective(1000px) rotate(-25deg) skew(25deg) translate(20px, -20px); | |
| } | |
| .yek-social__link:hover .yek-social__button--youtube { | |
| background-color: #c4302b; | |
| box-shadow: -50px 50px 20px rgba(196, 48, 43, 0.5); | |
| } | |
| .yek-social__link:hover .yek-social__button--youtube::before { | |
| background-color: #d5433e; | |
| } | |
| .yek-social__link:hover .yek-social__button--youtube::after { | |
| background-color: #db5f5b; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- powered by YEK (https://github.com/yek-org) --> | |
| <!-- Instagram : @mikoloism --> | |
| <!-- Codepen : @miko-github --> | |
| <div class="yek-social"> | |
| <ul class="yek-social__list"> | |
| <li class="yek-social__item"> | |
| <a class="yek-social__link" href="#"> | |
| <span class="yek-social__button yek-social__button--youtube"> | |
| <i class="yek-social__icon fab fa-youtube"></i> | |
| </span> | |
| </a> | |
| </li> | |
| <li class="yek-social__item"> | |
| <a class="yek-social__link" href="#"> | |
| <span class="yek-social__button yek-social__button--twitter"> | |
| <i class="yek-social__icon fab fa-twitter"></i> | |
| </span> | |
| </a> | |
| </li> | |
| <li class="yek-social__item"> | |
| <a class="yek-social__link" href="#"> | |
| <span class="yek-social__button yek-social__button--telegram"> | |
| <i class="yek-social__icon fab fa-telegram"></i> | |
| </span> | |
| </a> | |
| </li> | |
| <li class="yek-social__item"> | |
| <a class="yek-social__link" href="#"> | |
| <span class="yek-social__button yek-social__button--instagram"> | |
| <i class="yek-social__icon fab fa-instagram"></i> | |
| </span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <a title="GITHUB | INSTAGRAM | CODEPEN" href="https://github.com/miko-githu" class="follow-me"> | |
| <span class="mute">follow</span> | |
| <span class="link"> @mikoloism </span> | |
| <span class="mute">for more</span> | |
| </a> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //- <!-- powered by YEK (https://github.com/yek-org) --> | |
| //- <!-- Instagram : @mikoloism --> | |
| //- <!-- Codepen : @miko-github --> | |
| - let items = [{ | |
| - id: 0, href: '#', name: 'youtube', icon: 'youtube' }, { | |
| - id: 1, href: '#', name: 'twitter', icon: 'twitter' }, { | |
| - id: 2, href: '#', name: 'telegram', icon: 'telegram' }, { | |
| - id: 3, href: '#', name: 'instagram', icon: 'instagram' | |
| - }]; | |
| mixin yek-social(props) | |
| li.yek-social__item | |
| a.yek-social__link(href=`${props.href || '#'}`) | |
| span.yek-social__button(class=`yek-social__button--${name}`) | |
| i.fab.yek-social__icon(class=`fa-${icon}`) | |
| .yek-social | |
| ul.yek-social__list | |
| each item in items | |
| +yek-social(item) | |
| a(title="GITHUB | INSTAGRAM | CODEPEN", href="https://github.com/miko-githu", class="follow-me") | |
| span.mute follow | |
| span.link @mikoloism | |
| span.mute for more |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // OOOPS, I removed on codepen, when i hand around backspace, pls, be careful with `BACKSPACE` button |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* YEK (https://github.com/yek-org) | |
| -------------------------------------- */ | |
| /* resets | |
| ---------------------------- */ | |
| * { box-sizing: border-box; padding: 0; margin: 0; } | |
| body { display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; align-content: center; width: 100%; height: 100vh; background-color: #ccc; font-size: 1rem; } | |
| li { list-style: none; } | |
| a { color: #69c; text-decoration: none; cursor: pointer; } | |
| /* stylesheets | |
| ---------------------------- */ | |
| .yek-social { width: 750px; height: 190px; } | |
| .yek-social__list, .yek-social__item, | |
| .yek-social__link, .yek-social__button { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-content: center; } | |
| .yek-social__list, .yek-social__link { width: 100%; height: 100%; } | |
| .yek-social__list { justify-content: space-between; } | |
| .yek-social__item { width: 24%; height: 100%; } | |
| .yek-social__button { width: 72px; height: 72px; background-color: #fff; transition: 0.5s 0.15s; box-shadow: -20px 20px 5px rgba(68, 68, 68, 0.5); } | |
| .yek-social__button { position: relative; transform: perspective(1000px) rotate(-25deg) skew(25deg); } | |
| .yek-social__button::before, .yek-social__button::after { content: ""; position: absolute; } | |
| .yek-social__button::before {width: 21px; height: 100%; top: 10px; left: -20px; background-color: #9f9f9f; transition: 0.5s 0.15s; transform: rotate(0deg) skewY(-45deg); } | |
| .yek-social__button::after { width: 100%; height: 21px; bottom: -20px; left: -10px; transition: 0.8s 0.15s; background-color: #c3c3c3; transform: rotate(0deg) skewX(-45deg); } | |
| .yek-social__icon { color: #444; font-size: 1.7em; transition-delay: 0.2s; } | |
| .yek-social__link:hover .yek-social__icon { color: #fff; } | |
| .yek-social__link:hover .yek-social__button { transform: perspective(1000px) rotate(-25deg) skew(25deg) translate(20px, -20px); } | |
| /* YouTube */ | |
| .yek-social__link:hover .yek-social__button--youtube { background-color: #c4302b; box-shadow: -50px 50px 20px rgba(196, 48, 43, 0.5); } | |
| .yek-social__link:hover .yek-social__button--youtube::before { background-color: #d5433e; } | |
| .yek-social__link:hover .yek-social__button--youtube::after { background-color: #db5f5b; } | |
| /* Twitter */ | |
| .yek-social__link:hover .yek-social__button--twitter { background-color: #00acee; box-shadow: -50px 50px 20px rgba(0, 172, 238, 0.5); } | |
| .yek-social__link:hover .yek-social__button--twitter::before { background-color: #13bdff; } | |
| .yek-social__link:hover .yek-social__button--twitter::after { background-color: #36c7ff; } | |
| .yek-social__link:hover .yek-social__button--telegram { background-color: #0088cc; box-shadow: -50px 50px 20px rgba(0, 136, 204, 0.5); } | |
| .yek-social__link:hover .yek-social__button--telegram::before { background-color: #00a0f0; } | |
| .yek-social__link:hover .yek-social__button--telegram::after { background-color: #14b1ff; } | |
| .yek-social__link:hover .yek-social__button--instagram { background-color: #c13584; box-shadow: -50px 50px 20px rgba(193, 53, 132, 0.5); } | |
| .yek-social__link:hover .yek-social__button--instagram::before { background-color: #ce4c95; } | |
| .yek-social__link:hover .yek-social__button--instagram::after { background-color: #d668a6; } | |
| .follow-me { display: inline-block; position: fixed; bottom: 14px; left: 14px; padding: 9px; border-radius: 9px; font-family: "ubuntu"; background-color: #fff; } | |
| .follow-me .link { transition: 0.3s 0.2s linear; border-radius: 4px; padding: 4px; color: #69c; } | |
| .follow-me .link:hover { margin: 4px; color: #fff; background-color: #69c; } | |
| .follow-me .mute { color: #444; } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* YEK (https://github.com/yek-org) | |
| -------------------------------------- */ | |
| @import './_yek-sass.scss'; | |
| /* variables | |
| ---------------------------- */ | |
| $COLOR_YOUTUBE: #c4302b; | |
| $COLOR_TWITTER: #00acee; | |
| $COLOR_TELEGRAM: #0088cc; | |
| $COLOR_INSTAGRAM: #c13584; | |
| // color | |
| $body-bg: #ccc; | |
| /* 3D-BOX ($bx-) | |
| ------------------------- */ | |
| $bx-color--side: #b1b1b1; | |
| $bx-shadow: -20px 20px 5px rgba($yek-gray--800, 0.5); | |
| $bx-skew--before: skewY(-45deg); | |
| $bx-skew--after: skewX(-45deg); | |
| $bx-rotate--side: rotate(0deg); | |
| $bx-skew--target: skew(25deg); | |
| $bx-rotate--target: rotate(-25deg); | |
| $bx-transform--before: $bx-rotate--side $bx-skew--before; | |
| $bx-transform--after: $bx-rotate--side $bx-skew--after; | |
| $bx-transform--target: perspective(1000px) $bx-rotate--target $bx-skew--target; | |
| $bx-transform-target--hover: $bx-transform--target translate(20px, -20px); | |
| // MIXIN | |
| @mixin bx-variant($e, $c) { | |
| &--#{$e} { | |
| background-color: $c; | |
| box-shadow: -50px 50px 20px rgba($c, 0.5); // blur: 20px | |
| &::before { | |
| background-color: lighten($c, 7); | |
| } | |
| &::after { | |
| background-color: lighten($c, 14); | |
| } | |
| } | |
| } | |
| /* resets | |
| ---------------------------- */ | |
| * { | |
| box-sizing: border-box; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| body { | |
| @include yek-center(column); | |
| @include yek-size($h: 100vh); | |
| background-color: $body-bg; | |
| font-size: 1rem; | |
| } | |
| li { | |
| list-style: none; | |
| } | |
| a { | |
| color: $yek-blue--600; | |
| text-decoration: none; | |
| cursor: pointer; | |
| } | |
| /* stylesheets | |
| ---------------------------- */ | |
| .yek-social { @include yek-size(750px, 190px); } | |
| .yek-social_{ | |
| &_list, &_item, &_link, &_button { @include yek-center; } | |
| &_list, &_link { @include yek-size; } | |
| &_list { justify-content: space-between; } | |
| &_item { @include yek-size(24%); } | |
| // link style | |
| &_button { | |
| @include yek-fab; | |
| background-color: #fff; | |
| box-shadow: $bx-shadow; | |
| transition: 0.5s 0.15s; | |
| } | |
| // box style | |
| &__button { | |
| position: relative; transform: $bx-transform--target; | |
| &::before, &::after { content: ""; position: absolute; } | |
| &::before { | |
| @include yek-size($w: 21px); | |
| top: 10px; left: -20px; | |
| background-color: darken($bx-color--side, 7); | |
| transition: 0.5s 0.15s; | |
| transform: $bx-transform--before; | |
| } | |
| &::after { | |
| @include yek-size($h: 21px); | |
| bottom: -20px; left: -10px; | |
| transition: 0.8s 0.15s; | |
| background-color: lighten($bx-color--side, 7); | |
| transform: $bx-transform--after; | |
| } | |
| } | |
| &_icon { color: $yek-gray--800; font-size: 1.7em; transition-delay: 0.2s; } | |
| // Animation | |
| &_link:hover &_icon { color: $yek-light; } | |
| &_link:hover &_button { | |
| transform: $bx-transform-target--hover; | |
| @include bx-variant("youtube", $COLOR_YOUTUBE); | |
| @include bx-variant("twitter", $COLOR_TWITTER); | |
| @include bx-variant("telegram", $COLOR_TELEGRAM); | |
| @include bx-variant("instagram", $COLOR_INSTAGRAM); | |
| } | |
| } | |
| .follow-me { display: inline-block; position: fixed; bottom: 14px; left: 14px; padding: 9px; border-radius: 9px; font-family: "ubuntu"; background-color: #fff; } | |
| .follow-me .link { transition: 0.3s 0.2s linear; border-radius: 4px; padding: 4px; color: $yek-blue--600; } | |
| .follow-me .link:hover { margin: 4px; color: $yek-light; background-color: $yek-blue--600; } | |
| .follow-me .mute { color: $yek-gray--800; } | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $yek-light: #fff; | |
| $yek-gray--100: #f9f9f9; | |
| $yek-gray--400: #f4f4f4; | |
| $yek-gray--800: #444; | |
| $yek-blue--600: #69c; | |
| @function _yek-btn--size($s: "md") { | |
| $_s: map-get(( | |
| small: 42px, sm: 42px, | |
| medium: 60px, md: 60px, | |
| larg: 72px, lg: 72px | |
| ), $s); | |
| @return $_s; | |
| } | |
| @mixin yek-flex($d: row, $w: wrap) { display: flex; flex-direction: $d; flex-wrap: $w; } | |
| @mixin yek-size($w: 100%, $h: 100%) { width: $w; height: $h; } | |
| @mixin yek-transition($dr: 0.5s, $dl: 0.3s, $tf: auto, $el: all) { transition: $dr $dl $el $tf; } | |
| @mixin yek-center($d: row, $w: wrap) { @include yek-flex($d, $w); justify-content: center; align-content: center; } | |
| @mixin yek-button($s: "md", $w: 144px) { $_size: _yek-btn--size($s); @include yek-size($w, $_size); } | |
| @mixin yek-fab($s: "lg", $r: 1) { $_size: _yek-btn--size($s) * $r; @include yek-size($_size, $_size); } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment