xiaowang/assets/css/style.scss

// ===========================================================================
// FONT-FACE
// ===========================================================================

// Nunito

@font-face {
	font-family: 'Nunito';
	src: url(../fonts/nunito/Nunito-Regular.ttf) format('truetype');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Nunito';
	src: url(../fonts/nunito/Nunito-Italic.ttf) format('truetype');
	font-weight: 400;
	font-style: italic;
}

@font-face {
	font-family: 'Nunito';
	src: url(../fonts/nunito/Nunito-Medium.ttf) format('truetype');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'Nunito';
	src: url(../fonts/nunito/Nunito-MediumItalic.ttf) format('truetype');
	font-weight: 500;
	font-style: italic;
}

@font-face {
	font-family: 'Nunito';
	src: url(../fonts/nunito/Nunito-SemiBold.ttf) format('truetype');
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: 'Nunito';
	src: url(../fonts/nunito/Nunito-SemiBoldItalic.ttf) format('truetype');
	font-weight: 600;
	font-style: italic;
}

@font-face {
	font-family: 'Nunito';
	src: url(../fonts/nunito/Nunito-Bold.ttf) format('truetype');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'Nunito';
	src: url(../fonts/nunito/Nunito-BoldItalic.ttf) format('truetype');
	font-weight: 700;
	font-style: italic;
}

// Gloria Hallelujah

@font-face {
	font-family: 'Gloria Hallelujah';
	src: url(../fonts/gloria-hallelujah/GloriaHallelujah-Regular.ttf) format('truetype');
	font-weight: 400;
	font-style: normal;
}

// ===========================================================================
// VARIABLES
// ===========================================================================

:root {

  // Fonts

  --text-font-family: 'Nunito', Verdana, sans-serif;
  --title-font-family: 'Gloria Hallelujah', Verdana, sans-serif;
  --regular-font-weight: 400;
	--medium-font-weight: 500;
	--semi-bold-font-weight: 600;
	--bold-font-weight: 700;
  --text-font-size: 1rem;
	--small-text-font-size: 0.8rem;
	--h1-font-size: 1.8rem;
	--h2-font-size: 1.4rem;
	--h3-font-size: 1.4rem;
	--h4-font-size: 1.2rem;

  // Dimensions

  --content-max-width: 140rem;
  --text-max-width: 70rem;
  --icon-size: 2.5rem;
  --header-bar-vertical-padding: 2rem;
  --header-bar-horizontal-padding: 2rem;
  --header-bar-height: calc((var(--header-bar-vertical-padding) * 2) + var(--h1-font-size));
  --footer-bar-vertical-padding: 1rem;
  --footer-bar-horizontal-padding: 2rem;
  --footer-bar-height: calc((var(--footer-bar-vertical-padding) * 2) + var(--icon-size) + 1rem + var(--text-font-size));
  --generic-section-vertical-padding: 2rem;
  --generic-section-horizontal-padding: 1rem;
  --home-section-min-height: calc(100vh - var(--header-bar-height) - var(--footer-bar-height));
  --home-nav-gap: 1rem;
  --home-nav-item-size: 2rem;
  --home-nav-item-translation: 0;
  --home-nav-image-max-height: calc(100vh - var(--header-bar-height) - ((var(--generic-section-vertical-padding) + var(--home-nav-item-size) + var(--home-nav-gap)) * 2) - var(--footer-bar-height));

  // Colors

	--black: #000;
  --jet: #333333;
  --white: #fff;
}

// Media queries

$tablet-media-query: 48rem;
$desktop-media-query: 62rem;

@media screen and (min-width: $tablet-media-query) {

  :root {

    // Fonts

    --text-font-size: 1.2rem;
  	--small-text-font-size: 1rem;
  	--h1-font-size: 2rem;
  	--h2-font-size: 1.6rem;
  	--h3-font-size: 1.6rem;
  	--h4-font-size: 1.4rem;

    // Dimensions

    --icon-size: 3rem;
    --header-bar-horizontal-padding: 4rem;
    --footer-bar-vertical-padding: 2rem;
    --footer-bar-horizontal-padding: 4rem;
    --footer-bar-height: calc((var(--footer-bar-vertical-padding) * 2) + var(--icon-size));
    --generic-section-horizontal-padding: 2rem;
	}
}

// ===========================================================================
// ANIMATIONS
// ===========================================================================

@-webkit-keyframes wave-up {
  0% {
		top: 0;
	}
  60% {
		top: -0.5rem;
	}
	100% {
		top: 0;
	}
}

@keyframes wave-up {
	0% {
		top: 0;
	}
  60% {
		top: -0.5rem;
	}
	100% {
		top: 0;
	}
}

@-webkit-keyframes wave-down {
  0% {
		bottom: 0;
	}
  60% {
		bottom: -0.5rem;
	}
	100% {
		bottom: 0;
	}
}

@keyframes wave-down {
  0% {
		bottom: 0;
	}
  60% {
		bottom: -0.5rem;
	}
	100% {
		bottom: 0;
	}
}

// ===========================================================================
// GENERALITIES
// ===========================================================================

// Fonts and colors

body {
    font-family: var(--text-font-family);
    font-size: var(--text-font-size);
    line-height: var(--text-font-size);
    color: var(--jet);
    background-color: var(--white);
}

h1,
h2,
h3,
h4 {
  color: var(--black);
}

h1 {
  font-family: var(--title-font-family);
  font-size: var(--h1-font-size);
  line-height: var(--h1-font-size);
}

h2 {
  font-family: var(--title-font-family);
  font-size: var(--h2-font-size);
  line-height: var(--h2-font-size);
  margin: 2rem 0 0 0;
}

h3 {
  font-family: var(--text-font-family);
  font-size: var(--h3-font-size);
  line-height: var(--h3-font-size);
  margin: 1rem 0;
}

h4 {
  font-family: var(--text-font-family);
  font-size: var(--h4-font-size);
  line-height: var(--h4-font-size);
  margin: 1rem 0;
}

p {
	text-align: justify;
}

// Link style

a {
  color: var(--jet);
	text-decoration: underline;
  -webkit-transition: color 200ms ease-in-out;
	-o-transition: color 200ms ease-in-out;
	transition: color 200ms ease-in-out;

  &:hover,
  &:focus,
  &:active {
    color: var(--black);
  }
}


// General grid layout

body {
  min-height: 100vh;
	overflow-x: hidden;
  display: -ms-grid;
  display: grid;
  grid:
  	'header' auto
  	'main' 1fr
  	'footer' auto
  	/ 1fr;
}

header {
  grid-area: header;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
}

// ===========================================================================
// HEADER
// ===========================================================================

// Header bar

.header-bar {
  max-width: var(--content-max-width);
  height: var(--header-bar-height);
  margin: auto;
  padding: var(--header-bar-vertical-padding) var(--header-bar-horizontal-padding);
}

.header-bar__logo {
  width: max-content;
}

.header-bar__logo-link {
  text-decoration: none;
}

// ===========================================================================
// MAIN
// ===========================================================================

// Home section

.home-section {
  max-width: var(--content-max-width);
  min-height: var(--home-section-min-height);
  margin: auto;
  padding: var(--generic-section-vertical-padding) var(--generic-section-horizontal-padding);
  display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
	-webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.home__nav {
  height: 100%;
  display: -ms-grid;
  display: grid;
  grid:
    'top-left top top-right' var(--home-nav-item-size)
    'left center right' auto
    'bottom-left bottom bottom-right' var(--home-nav-item-size)
    / var(--home-nav-item-size) auto var(--home-nav-item-size);
  place-content: center center;
  gap: var(--home-nav-gap);
  line-height: 0;
}

.home__nav-image {
  grid-area: center;

  img {
    min-width: 12rem;
    min-height: 12rem;
    max-height: var(--home-nav-image-max-height);
  }
}

.home__nav--2-items {

  .home__nav-item-1 {
    grid-area: top;
    place-self: end center;
  }

  .home__nav-item-2 {
    grid-area: bottom;
    place-self: start center;
  }
}

.home__nav--3-items {

  .home__nav-item-1 {
    grid-area: top-left;
    place-self: end end;
    -webkit-transform:
      rotate(-45deg)
      translateY(var(--home-nav-item-translation));
		-ms-transform:
      rotate(-45deg)
      translateY(var(--home-nav-item-translation));
		transform:
      rotate(-45deg)
      translateY(var(--home-nav-item-translation));
  }

  .home__nav-item-2 {
    grid-area: top-right;
    place-self: end start;
    -webkit-transform:
      rotate(45deg)
      translateY(var(--home-nav-item-translation));
		-ms-transform:
      rotate(45deg)
      translateY(var(--home-nav-item-translation));
		transform:
      rotate(45deg)
      translateY(var(--home-nav-item-translation));
  }

  .home__nav-item-3 {
    grid-area: bottom;
    place-self: start center;
  }
}

.home__nav--4-items {

  .home__nav-item-1 {
    grid-area: top;
    place-self: end center;
  }

  .home__nav-item-2 {
    grid-area: left;
    place-self: center end;
    -webkit-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		transform: rotate(-90deg);
  }

  .home__nav-item-3 {
    grid-area: right;
    place-self: center start;
    -webkit-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		transform: rotate(90deg);
  }

  .home__nav-item-4 {
    grid-area: bottom;
    place-self: start center;
  }
}

.home__nav--5-items {

  .home__nav-item-1 {
    grid-area: top-left;
    place-self: end end;
    -webkit-transform:
      rotate(-45deg)
      translateY(var(--home-nav-item-translation));
		-ms-transform:
      rotate(-45deg)
      translateY(var(--home-nav-item-translation));
		transform:
      rotate(-45deg)
      translateY(var(--home-nav-item-translation));
  }

  .home__nav-item-2 {
    grid-area: top-right;
    place-self: end start;
    -webkit-transform:
      rotate(45deg)
      translateY(var(--home-nav-item-translation));
		-ms-transform:
      rotate(45deg)
      translateY(var(--home-nav-item-translation));
		transform:
      rotate(45deg)
      translateY(var(--home-nav-item-translation));
  }

  .home__nav-item-3 {
    grid-area: left;
    place-self: center end;
    -webkit-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		transform: rotate(-90deg);
  }

  .home__nav-item-4 {
    grid-area: right;
    place-self: center start;
    -webkit-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		transform: rotate(90deg);
  }

  .home__nav-item-5 {
    grid-area: bottom;
    place-self: start center;
  }
}

.home__nav--6-items {

  .home__nav-item-1 {
    grid-area: top;
    place-self: end center;
  }

  .home__nav-item-2 {
    grid-area: top-left;
    place-self: end end;
    -webkit-transform:
      rotate(-45deg)
      translateY(var(--home-nav-item-translation));
		-ms-transform:
      rotate(-45deg)
      translateY(var(--home-nav-item-translation));
		transform:
      rotate(-45deg)
      translateY(var(--home-nav-item-translation));
  }

  .home__nav-item-3 {
    grid-area: top-right;
    place-self: end start;
    -webkit-transform:
      rotate(45deg)
      translateY(var(--home-nav-item-translation));
		-ms-transform:
      rotate(45deg)
      translateY(var(--home-nav-item-translation));
		transform:
      rotate(45deg)
      translateY(var(--home-nav-item-translation));
  }

  .home__nav-item-4 {
    grid-area: left;
    place-self: center end;
    -webkit-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		transform: rotate(-90deg);
  }

  .home__nav-item-5 {
    grid-area: right;
    place-self: center start;
    -webkit-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		transform: rotate(90deg);
  }

  .home__nav-item-6 {
    grid-area: bottom;
    place-self: start center;
  }
}

.home__nav--7-items {

  .home__nav-item-1 {
    grid-area: top-left;
    place-self: end end;
    -webkit-transform:
      rotate(-45deg)
      translateY(var(--home-nav-item-translation));
		-ms-transform:
      rotate(-45deg)
      translateY(var(--home-nav-item-translation));
		transform:
      rotate(-45deg)
      translateY(var(--home-nav-item-translation));
  }

  .home__nav-item-2 {
    grid-area: top-right;
    place-self: end start;
    -webkit-transform:
      rotate(45deg)
      translateY(var(--home-nav-item-translation));
		-ms-transform:
      rotate(45deg)
      translateY(var(--home-nav-item-translation));
		transform:
      rotate(45deg)
      translateY(var(--home-nav-item-translation));
  }

  .home__nav-item-3 {
    grid-area: left;
    place-self: center end;
    -webkit-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		transform: rotate(-90deg);
  }

  .home__nav-item-4 {
    grid-area: right;
    place-self: center start;
    -webkit-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		transform: rotate(90deg);
  }

  .home__nav-item-5 {
    grid-area: bottom-left;
    place-self: start end;
    -webkit-transform:
      rotate(45deg)
      translateY(calc(var(--home-nav-item-translation) * -1));
		-ms-transform:
      rotate(45deg)
      translateY(calc(var(--home-nav-item-translation) * -1));
		transform:
      rotate(45deg)
      translateY(calc(var(--home-nav-item-translation) * -1));
  }

  .home__nav-item-6 {
    grid-area: bottom-right;
    place-self: start start;
    -webkit-transform:
      rotate(-45deg)
      translateY(calc(var(--home-nav-item-translation) * -1));
		-ms-transform:
      rotate(-45deg)
      translateY(calc(var(--home-nav-item-translation) * -1));
		transform:
      rotate(-45deg)
      translateY(calc(var(--home-nav-item-translation) * -1));
  }

  .home__nav-item-7 {
    grid-area: bottom;
    place-self: start center;
  }
}

.home__nav--8-items {

  .home__nav-item-1 {
    grid-area: top;
    place-self: end center;
  }

  .home__nav-item-2 {
    grid-area: top-left;
    place-self: end end;
    -webkit-transform:
      rotate(-45deg)
      translateY(var(--home-nav-item-translation));
		-ms-transform:
      rotate(-45deg)
      translateY(var(--home-nav-item-translation));
		transform:
      rotate(-45deg)
      translateY(var(--home-nav-item-translation));
  }

  .home__nav-item-3 {
    grid-area: top-right;
    place-self: end start;
    -webkit-transform:
      rotate(45deg)
      translateY(var(--home-nav-item-translation));
		-ms-transform:
      rotate(45deg)
      translateY(var(--home-nav-item-translation));
		transform:
      rotate(45deg)
      translateY(var(--home-nav-item-translation));
  }

  .home__nav-item-4 {
    grid-area: left;
    place-self: center end;
    -webkit-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		transform: rotate(-90deg);
  }

  .home__nav-item-5 {
    grid-area: right;
    place-self: center start;
    -webkit-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		transform: rotate(90deg);
  }

  .home__nav-item-6 {
    grid-area: bottom-left;
    place-self: start end;
    -webkit-transform:
      rotate(45deg)
      translateY(calc(var(--home-nav-item-translation) * -1));
		-ms-transform:
      rotate(45deg)
      translateY(calc(var(--home-nav-item-translation) * -1));
		transform:
      rotate(45deg)
      translateY(calc(var(--home-nav-item-translation) * -1));
  }

  .home__nav-item-7 {
    grid-area: bottom-right;
    place-self: start start;
    -webkit-transform:
      rotate(-45deg)
      translateY(calc(var(--home-nav-item-translation) * -1));
		-ms-transform:
      rotate(-45deg)
      translateY(calc(var(--home-nav-item-translation) * -1));
		transform:
      rotate(-45deg)
      translateY(calc(var(--home-nav-item-translation) * -1));
  }

  .home__nav-item-8 {
    grid-area: bottom;
    place-self: start center;
  }
}

.home__nav-link {
  color: var(--black);
  text-decoration: none;
	opacity: 0;
	-webkit-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;

  div {
    opacity: 0;
  	-webkit-transition: opacity 1s ease-in-out;
  	-o-transition: opacity 1s ease-in-out;
  	transition: opacity 1s ease-in-out;
  }
}

.home__nav-link--visible {
	opacity: 1;

  div {
    opacity: 1;
  }
}

.home__nav-letter--wave-up {
  -webkit-animation: wave-up 600ms ease-out;
  animation: wave-up 600ms ease-in-out;
}

.home__nav-letter--wave-down {
  -webkit-animation: wave-down 600ms ease-out;
  animation: wave-down 600ms ease-in-out;
}

// ===========================================================================
// FOOTER
// ===========================================================================

// Footer bar

.footer-bar {
  max-width: var(--content-max-width);
  height: var(--footer-bar-height);
  margin: auto;
  padding: var(--footer-bar-vertical-padding) var(--footer-bar-horizontal-padding);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.footer-bar__social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;

  a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: var(--icon-size);
    height: var(--icon-size);

    svg {
      fill: var(--jet);
      width: 100%;
      height: 100%;
      -webkit-transition: fill 200ms ease-in-out;
    	-o-transition: fill 200ms ease-in-out;
    	transition: fill 200ms ease-in-out;
    }

    &:hover,
    &:focus,
    &:active {

      svg {
        fill: var(--black);
      }
    }
  }

  a + a {
    margin: 0 0 0 1rem;
  }
}

.footer-bar__copyright {
  font-size: var(--small-text-font-size);
  margin: 1rem 0 0 0;
}

@media screen and (min-width: $tablet-media-query) {

  .footer-bar {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
  }

  .footer-bar__social {
    order: 2;
  }

  .footer-bar__copyright {
    order: 1;
    margin: 0;
  }
}