hexo-theme-sb/source/css/style.critical.css

Clean and simple theme for Hexo blog framework

@charset "UTF-8";

html {
  line-height: 1.15;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

body {
  margin: 0;
}

footer,
header,
nav {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */
}

img {
  border-style: none;
}

input {
  font-family: sans-serif;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

input {
  /* 1 */
  overflow: visible;
}

[type="checkbox"] {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

html {
  font-size: 14px;
}

@media screen and (min-width: 332px) {
  html {
    font-size: calc(14px + 4 * (100vw - 332px) / 328);
  }
}

@media screen and (min-width: 660px) {
  html {
    font-size: 18px;
  }
}

body {
  font-size: 1rem;
  line-height: 1.6;
}

h1 {
  font-size: 1.29454rem;
  margin-top: 1.78755rem;
}

p {
  margin-top: 1.06667rem;
}

body {
  color: #232323;
  font-family: serif;
  font-style: normal;
  font-weight: 400;
}

h1 {
  letter-spacing: calc(50 / 1000 * 1em);
  font-style: normal;
  font-weight: bold;
  text-transform: uppercase;
}

.fonts-stage-1 body {
  font-family: "Vollkorn Subset";
  font-style: normal;
  font-weight: 400;
}

.fonts-stage-1 h1 {
  font-family: "Playfair Display Bold Subset";
}

.header {
  background-image: radial-gradient(circle at center bottom, rgba(224, 18, 71, 0.4), rgba(224, 18, 88, 0.6)), -webkit-gradient(linear, left top, right top, color-stop(50%, rgba(224, 18, 88, 0.5)), color-stop(50%, rgba(224, 18, 88, 0.4)));
  background-image: radial-gradient(circle at center bottom, rgba(224, 18, 71, 0.4), rgba(224, 18, 88, 0.6)), linear-gradient(to right, rgba(224, 18, 88, 0.5) 50%, rgba(224, 18, 88, 0.4) 50%);
}

@media (min-width: 41.25em) {
  .header {
    background-image: radial-gradient(circle at center bottom, rgba(224, 18, 71, 0.6), rgba(224, 18, 88, 0.4)), -webkit-gradient(linear, left top, left bottom, color-stop(48%, rgba(224, 18, 88, 0.4)), color-stop(48%, rgba(224, 18, 88, 0.7)));
    background-image: radial-gradient(circle at center bottom, rgba(224, 18, 71, 0.6), rgba(224, 18, 88, 0.4)), linear-gradient(to bottom, rgba(224, 18, 88, 0.4) 48%, rgba(224, 18, 88, 0.7) 48%);
  }
}

.nav__checkbox {
  left: -9999px;
  position: absolute;
}

.nav__toggle {
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #e01258), color-stop(20%, transparent), color-stop(40%, transparent), color-stop(40%, #e01258), color-stop(60%, #e01258), color-stop(60%, transparent), color-stop(80%, transparent), color-stop(80%, #e01258));
  background-image: linear-gradient(to bottom, #e01258 20%, transparent 20%, transparent 40%, #e01258 40%, #e01258 60%, transparent 60%, transparent 80%, #e01258 80%);
  border-radius: calc(0.27778 * 1rem);
  display: block;
  height: calc(1.66667 * 1rem);
  position: absolute;
  right: calc(1.11111 * 1rem);
  text-indent: -9999px;
  top: calc(1.94444 * 1rem);
  width: calc(1.66667 * 1rem);
  z-index: 1;
}

@media (min-width: 41.25em) {
  .nav__toggle {
    display: none;
  }
}

.nav__list {
  margin: 0;
  padding: 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  list-style: none;
}

@media (min-width: 41.25em) {
  .nav__list {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

.nav__item {
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  font-size: 0.77248rem;
}

@media (max-width: 41.24em) {
  .nav__item {
    width: 100%;
  }

  .nav__item:not(:nth-child(1)) {
    display: none;
  }
}

@media (min-width: 41.25em) {
  .nav__list--4 .nav__item {
    max-width: calc(6.66667 * 1rem);
    width: calc(100% / 5);
  }

  .nav__list--4 .nav__item:nth-child(-n + 3) {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
  }

  .nav__list--4 .nav__item:nth-child(n + 4) {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
  }
}

[class*="nav__list--"] .nav__item:nth-child(1) {
  min-height: calc(5.55556 * 1rem);
}

@media (min-width: 41.25em) {
  [class*="nav__list--"] .nav__item:nth-child(1) {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }
}

.nav__link {
  text-shadow: 0 1px 1px #e01258;
  letter-spacing: calc(100 / 1000 * 1em);
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: calc(0.83333 * 1rem) calc(0.27778 * 1rem);
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.footer {
  background-image: radial-gradient(circle at center bottom, rgba(250, 196, 210, 0.6), rgba(250, 196, 214, 0.4)), -webkit-gradient(linear, left top, left bottom, color-stop(48%, rgba(250, 196, 214, 0.4)), color-stop(48%, rgba(250, 196, 214, 0.7)));
  background-image: radial-gradient(circle at center bottom, rgba(250, 196, 210, 0.6), rgba(250, 196, 214, 0.4)), linear-gradient(to bottom, rgba(250, 196, 214, 0.4) 48%, rgba(250, 196, 214, 0.7) 48%);
  color: #e01258;
  font-family: sans-serif;
  font-size: 0.7242rem;
  margin-top: calc(1.11111 * 1rem);
  text-align: center;
}

.footer:not(:empty) {
  padding: calc(0.27778 * 1rem);
}

.footer p {
  margin: calc(0.55556 * 1rem) 0;
}

.contact {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact__item + .contact__item {
  margin-left: calc(0.55556 * 1rem);
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.wrapper {
  margin-left: auto;
  margin-right: auto;
  max-width: calc(100% - calc(1.11111 * 1rem));
  padding: calc(0.55556 * 1rem);
}

@media (min-width: 41.25em) {
  .wrapper {
    padding: calc(0.55556 * 1rem) 0;
    width: 640px;
  }
}

.tally {
  letter-spacing: calc(50 / 1000 * 1em);
  -webkit-box-shadow: 0 1px 4px -1px rgba(35, 35, 35, 0.6);
  box-shadow: 0 1px 4px -1px rgba(35, 35, 35, 0.6);
  text-shadow: 0 1px 1px #e01258;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-image: radial-gradient(circle at center bottom, rgba(224, 18, 71, 0.6), rgba(224, 18, 88, 0.4)), -webkit-gradient(linear, left top, left bottom, color-stop(48%, rgba(224, 18, 88, 0.4)), color-stop(48%, rgba(224, 18, 88, 0.7)));
  background-image: radial-gradient(circle at center bottom, rgba(224, 18, 71, 0.6), rgba(224, 18, 88, 0.4)), linear-gradient(to bottom, rgba(224, 18, 88, 0.4) 48%, rgba(224, 18, 88, 0.7) 48%);
  border-radius: calc(0.22222 * 1rem);
  color: #fff;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-family: "Vollkorn";
  font-size: 0.77248rem;
  margin-bottom: calc(0.27778 * 1rem);
  margin-top: calc(0.27778 * 1rem);
  padding: calc(0.27778 * 1rem) calc(0.83333 * 1rem) calc(0.11111 * 1rem);
  position: relative;
  text-decoration: none;
}

.tally span {
  text-transform: capitalize;
}

.tally[href*="//twitter"] {
  text-shadow: 0 1px 1px #55acee;
  background-image: radial-gradient(circle at center bottom, rgba(39, 133, 233, 0.6), rgba(39, 149, 233, 0.4)), -webkit-gradient(linear, left top, left bottom, color-stop(48%, rgba(39, 149, 233, 0.4)), color-stop(48%, rgba(39, 149, 233, 0.7)));
  background-image: radial-gradient(circle at center bottom, rgba(39, 133, 233, 0.6), rgba(39, 149, 233, 0.4)), linear-gradient(to bottom, rgba(39, 149, 233, 0.4) 48%, rgba(39, 149, 233, 0.7) 48%);
}

.tally[href*="//github"] {
  text-shadow: 0 1px 1px #2f2f2f;
  background-image: radial-gradient(circle at center bottom, rgba(47, 47, 47, 0.6), rgba(47, 47, 47, 0.4)), -webkit-gradient(linear, left top, left bottom, color-stop(48%, rgba(47, 47, 47, 0.4)), color-stop(48%, rgba(47, 47, 47, 0.7)));
  background-image: radial-gradient(circle at center bottom, rgba(47, 47, 47, 0.6), rgba(47, 47, 47, 0.4)), linear-gradient(to bottom, rgba(47, 47, 47, 0.4) 48%, rgba(47, 47, 47, 0.7) 48%);
}

.home {
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: calc(1.11111 * 1rem);
}

.home a {
  color: inherit;
  word-break: break-word;
}

.home a:after {
  content: '→';
  display: inline-block;
  margin-left: calc(0.55556 * 1rem);
  -webkit-transform: rotate(-270deg) scale(0);
  transform: rotate(-270deg) scale(0);
}

@supports (display: grid) {
  .home {
    display: grid;
    grid-row-gap: calc(1.66667 * 1rem);
    grid-template-columns: repeat(3, minmax(auto, 1fr));
    grid-template-rows: repeat(4, 1fr);
  }
}

.home__box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding: calc(2.22222 * 1rem) calc(1.11111 * 1rem) calc(1.11111 * 1rem);
}

.home__box:not(:last-of-type) {
  margin-bottom: calc(1.66667 * 1rem);
}

.home__box:nth-of-type(odd) {
  background-image: radial-gradient(circle at center bottom, rgba(224, 18, 71, 0.4), rgba(224, 18, 88, 0.6)), -webkit-gradient(linear, left top, right top, color-stop(50%, rgba(224, 18, 88, 0.5)), color-stop(50%, rgba(224, 18, 88, 0.4)));
  background-image: radial-gradient(circle at center bottom, rgba(224, 18, 71, 0.4), rgba(224, 18, 88, 0.6)), linear-gradient(to right, rgba(224, 18, 88, 0.5) 50%, rgba(224, 18, 88, 0.4) 50%);
}

@supports (display: grid) {
  .home__box:nth-of-type(odd) {
    grid-column: 1 / span 2;
  }
}

.home__box:nth-of-type(even) {
  background-image: radial-gradient(circle at center bottom, rgba(35, 35, 35, 0.4), rgba(35, 35, 35, 0.6)), -webkit-gradient(linear, left top, right top, color-stop(50%, rgba(35, 35, 35, 0.5)), color-stop(50%, rgba(35, 35, 35, 0.4)));
  background-image: radial-gradient(circle at center bottom, rgba(35, 35, 35, 0.4), rgba(35, 35, 35, 0.6)), linear-gradient(to right, rgba(35, 35, 35, 0.5) 50%, rgba(35, 35, 35, 0.4) 50%);
}

@supports (display: grid) {
  .home__box:nth-of-type(even) {
    grid-column: 2 / span 2;
  }
}

.home__box h1 {
  letter-spacing: calc(100 / 1000 * 1em);
}

.home__box p {
  letter-spacing: calc(50 / 1000 * 1em);
  margin-bottom: 0;
  margin-top: 0;
}

.home__box ul {
  margin: 0;
}

@supports (display: grid) {
  .home__box {
    min-height: unset;
  }

  .home__box:not(:last-of-type) {
    margin-bottom: unset;
  }
}

@supports (display: grid) {
  .home__box:nth-of-type(1) {
    grid-row: 1;
  }

  .home__box:nth-of-type(2) {
    grid-row: 2;
  }

  .home__box:nth-of-type(3) {
    grid-row: 3;
  }

  .home__box:nth-of-type(4) {
    grid-row: 4;
  }
}

body {
  color: #383738;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
}

.wrapper {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}