make-look-better.css

/* ------------------------------------------------------------------------ *\
|* If CSS Variables (Custom Properties) are supported...
\* ------------------------------------------------------------------------ */
:root {
  /* Colors */
  --main-color: #FF5733;
  --text-color: #fff;

  /* Fonts */
  --font-typo-base: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-typo-code: 'Source Code Pro', monospace;
  --font-size-code: 18px;
  --font-size-text: 16px;
  --font-size-text-small: 14px;

  /* Code HTML, CSS emulate */
  --tag-char-color: #c6e8f1;
  --tag-attr-color: #dd998a;

  /* Cursors */
  --cursor-twitter: url("assets/cursor-twitter.png");
  --cursor-github: url("assets/cursor-github.png");
  --cursor-codepen: url("assets/cursor-codepen.png");
  --cursor-stackoverflow: url("assets/cursor-stackoverflow.png");
  --cursor-linkedin: url("assets/cursor-linkedin.png");
  --cursor-viblo: url("assets/cursor-viblo.png");

  /* Spacing*/
  --indent: 40px;
  --height-footer: 50px;
  --line-height: 1.7;

  /* Animations */
  --duration: 0.5;
  @media (prefers-reduced-motion: reduce) {
    --duration: 0;
  }
  --timing-easeOutQuad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
  --timing-easeOutQuint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
  --timing-easeOutBack: cubic-bezier(0.175, 0.885, 0.320, 1.275);
}

/* ------------------------------------------------------------------------ *\
|* Reset CSS
\* ------------------------------------------------------------------------ */
*, *:before, *:after {
  box-sizing: border-box;
}

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, a, address, em, img, strong, dl, dt, dd, ul, li, fieldset, form, label, legend {
  border: 0;
  font-family: inherit;
  font-size: 100%;
  margin: 0;
  outline: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
}

img {
  vertical-align: middle;
  -ms-interpolation-mode: bicubic;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

:focus {
  outline: 0 !important;
}

::selection {
  background-color: var(--main-color);
  color: #fff;
}

/*
 * CSS Selector Level 4
 * :-webkit-any only working on Chrome
 * Need some effort to working well on Firefox (:-moz-any), Safari (:matches)
 */
a:-webkit-any(:link, :visited, :hover, :focus) {
  text-decoration: none;
}

/* ------------------------------------------------------------------------ *\
|* Main stylistic
\* ------------------------------------------------------------------------ */
@keyframes morph {
  0% {border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;}
  10% {border-radius: 30% 70% 70% 30% / 30% 57% 43% 70%;}
  20% {border-radius: 54% 46% 70% 30% / 50% 57% 43% 50%;}
  30% {border-radius: 38% 62% 50% 50% / 50% 33% 67% 50%;}
  40% {border-radius: 38% 62% 50% 50% / 72% 74% 26% 28%;}
  50% {border-radius: 78% 22% 29% 71% / 30% 74% 26% 70%;}
  60% {border-radius: 63% 37% 80% 20% / 30% 47% 53% 70%;}
  70% {border-radius: 31% 69% 36% 64% / 30% 17% 83% 70%;}
  80% {border-radius: 15% 85% 14% 86% / 61% 14% 86% 39%;}
  90% {border-radius: 42% 58% 40% 60% / 61% 44% 56% 39%;}
  100% {border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;}
}

body {
  font-family: var(--font-typo-base);
  color: #fff;
  background-color: #20303e;
  line-height: var(--line-height);
  cursor: url('assets/cursor_default.svg') 0 0, default;
}

.wrapper {
  /* Sticky footer: https://css-tricks.com/couple-takes-sticky-footer/#there-is-calc-reduced-height-wrappers */
  height: calc(100vh - var(--height-footer));
}

.wrapper__inner {
  display: flex;
  height: 100%;
}

.file-name {
  background: #0a181e;
  border-bottom: 1px solid #283b4d;
  display: flex;
  align-items: flex-end;
}

.file-name__inner {
  display: inline-flex;
  border-bottom: 2px solid #ffeb3b;
  font-family: var(--font-typo-base);
  font-size: 14px;
  padding: 9px 15px;
}

.file-name svg {
  width: 20px;
  margin-right: 6px;
}

.file-name .icon-html5 {
  fill: #E34F26;
}

.file-name .icon-css3 {
  fill: #1572B6;
}

.pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-left: 1px solid #375773;
}

.pane__inner {
  flex: 1;
  margin-left: 50px;
  padding: 0 10px 10px;
  border-left: 1px solid #283b4d;
  background-color: #0F222B;
}

.code {
  font-size: var(--font-size-code);
  font-family: var(--font-typo-code);
}

.avatar {
  width: 50px;
  height: auto;
  margin: 0 5px;
  filter: grayscale(30%);
  animation: morph 10s var(--timing-easeOutBack) infinite forwards;
}

.tag {
  display: flex;
  flex-direction: column;
  position: relative;
}

.tag:before {
  content: '';
  position: absolute;
  left: 5px;
  top: 40px;
  bottom: 40px;
  border-left: 2px dashed rgba(255, 255, 255, 0.1);
}

.tag__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  white-space: nowrap;
}

.tag__line--margin-top {
  margin-top: 18px;
}

.tag__line:before {
  content: attr(data-line);
  position: absolute;
  left: -50px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  text-align: right;
  font-size: var(--font-size-text);
}

.tag__line--indent {
  padding-left: var(--indent);
}

.tag__char {
  color: var(--tag-char-color);
  font-size: 30px;
  margin: 0 2px;
}

.tag__name {
  color: var(--main-color);
}

.tag__attr,
.css__property {
  color: var(--tag-attr-color);
  font-weight: 700;
}

.tag__value {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.tag__value-separate {
  margin: 0 10px;
}

.tag__value-start {
  margin-right: 7px;
}

.tag__value-end {
  margin-left: 7px;
}

.tag__value--food {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:30px;'><text y='50%'>🥩</text></svg>") 16 0,auto;
}

.tag__value--beer {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:30px;'><text y='50%'>🍺</text></svg>") 16 0,auto;
}

.connect-with-me-via {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-top: 10px;
}

.connect-with-me-via:before {
  content: '';
  position: absolute;
  left: 5px;
  top: 40px;
  bottom: 30px;
  border-left: 2px dashed rgba(255, 255, 255, 0.1);
}

.css__line {
  display: flex;
  align-items: center;
  position: relative;
}

.css__line:before {
  content: attr(data-line);
  position: absolute;
  left: -50px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  text-align: right;
  font-size: var(--font-size-text);
}


.css__line--rule {
  padding-left: var(--indent);
}

.css__selector {
  color: var(--main-color);
}

.css__quote {
  color: var(--tag-char-color);
}

.css__quote--margin-left {
  margin-left: 3px;
}

.css__char {
  color: #fff;
  font-size: 20px;
}

.css__char--end {
  padding-left: 5px;
}

.social-contact__list {
  display: flex;
  align-items: center;
}

.social-contact__list li:not(:first-child) {
  margin-left: 15px;
  align-self: flex-start;
}

.social-contact__list img {
  height: 26px;
}

.social-contact__list a {
  display: flex;
  align-items: center;
}

.social-contact__twitter {
  cursor: var(--cursor-twitter), auto;
}

.social-contact__github {
  cursor: var(--cursor-github), auto;
}

.social-contact__codepen {
  cursor: var(--cursor-codepen), auto;
}

.social-contact__stackoverflow {
  cursor: var(--cursor-stackoverflow), auto;
}

.social-contact__linkedin {
  cursor: var(--cursor-linkedin), auto;
}

.social-contact__viblo {
  cursor: var(--cursor-viblo), auto;
}

.resume {
  font-size: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-top: 20px;
}

a.resume__link {
  position: relative;
  z-index: 1;
  margin-left: 5px;
  color: var(--text-color);

}

a.resume__link:before {
  content: "";
  height: 30%;
  width: 100%;
  background-color: #C84630;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  transition: all .3s var(--timing-easeOutBack);
}

a.resume__link:hover:before {
  height: 100%;
}

.hire-me {
  display: flex;
  justify-content: flex-end;
}

.hire-me__button {
  display: block;
  width: 200px;
  height: 40px;
  margin-top: 30px;
  border: 2px solid var(--main-color);
  text-transform: uppercase;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  transition: background-color .3s ease;
}

.hire-me__button:hover {
  background-color: var(--main-color);
  color: var(--text-color);
}

.footer {
  height: var(--height-footer);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: var(--font-size-text-small);
  background-color: #20303e;
  border-top: 1px solid #283b4d;
}

.footer span {
  margin: 0 3px;
}

a.footer__link {
  color: var(--main-color);
}

@media only screen and (max-width: 992px) {
  :root {
    --font-size-code: 16px;
    --indent: 30px;
    --line-height: 1.3;
  }

  .pane {
    padding-right: 0;
  }

  .tag__line--indent {
    padding-left: var(--indent);
  }

  .footer {
    flex-direction: column;
  }
}