main.sass

@import '~css-reset-and-normalize/scss/reset-and-normalize'
@import '~rfs/scss'

$break-large: 800px

$color0: #444fff
$color1: #b097fd  // light purlple
$color2: rgb(255, 8, 131)  // pink
$color3: #fa52d1
$color4: #938dff
$color5: #81eafd  // lightblue
$color6: #ef64ee

/* colors with opacity 0.1 */
$color1-light-opacity: rgba(176, 151, 253, 0.1)

$medium-border-radius: 1rem

$outside-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1)
$inside-shadow: inset $outside-shadow
$large-outside-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2)
$large-inside-shadow: inset $large-outside-shadow

/* Fonts */

@font-face
    font-family: 'Roboto-Light'
    font-style: normal
    font-weight: 100
    font-display: swap
    src: url("./font/Roboto-Light.ttf") format("truetype")

@font-face
    font-family: 'Roboto-Regular'
    font-style: normal
    font-weight: 100
    font-display: swap
    src: url("./font/Roboto-Regular.ttf") format("truetype")

body
  color: #555
  font-family: "Roboto", "Helvetica Neue", "Arial", sans-serif

main
  line-height: 1.4

.anchor
  display: block
  height: 115px
  margin-top: -115px
  visibility: hidden

a, a:visited
  color: $color0
  transition: all 200ms linear
  text-decoration: none
  &:hover
    color: $color3

h1
  @include font-size(2.5rem)
  margin-top: 5rem
  margin-bottom: 3.5rem
  text-align: center

h2
  @include font-size(2.2rem)
h3
  @include font-size(1.9rem)
h4
  @include font-size(1.7rem)
h5
  @include font-size(1.5rem)
h6
  @include font-size(1.35rem)
p, li, div
  @include font-size(1.25rem)
code, pre
  @include font-size(1.15rem)

h1, h2, h3, h4, h5, h6
  color: $color3
  font-weight: 300
  font-family: Raleway, sans-serif
  margin: 0 0 .5em 0

  a, a:visited, a:link, a:active
    text-decoration: none
    color: $color0
    &:hover
      color: $color6

ol li
  list-style-type: decimal

p
  margin: 0 0 1em 0
  font-family: Roboto-Light

time
  color: #525252
  line-height: 2.8em

ul, ol
  margin-left: 1.6rem
  margin-bottom: 1em

ul li
  list-style: none

@mixin bullet
  content: "\2022"
  color: $color3
  font-weight: bolder
  display: inline-block
  width: 1em
  margin-left: -1em

ul li::before
  @include bullet


@media screen and (min-width: 800px)
  section.right
    text-align: right

    ul li::before
      content: ""

    ul li::after
      @include bullet
      margin-right: -1em
      margin-left: 0

    ul li
      margin-left: 0
      margin-right: 1.6rem
      text-align: right

section
  display: flex
  justify-content: center
  align-items: center

  @media screen and (max-width: 800px)
    flex-direction: column
    text-align: center
    flex-wrap: wrap

  h2
    font-weight: bold

  h2
    margin: 1.6rem 0

  div
    padding-left: .4rem

  ul
    margin-bottom: 3rem
    text-align: left

  p
    margin: .4rem 0

  img
    margin: 2rem
    @media screen and (max-width: 800px)
      margin: .5rem
      height: 33vh
    @media screen and (min-width: 800px)
      width: 30vw

hr
  margin: 4rem 0
  height: 1px
  border: none
  background-color: $color6

img
  max-width: 100%
  height: auto

.container
  max-width: 80em
  margin: .5rem

  @media screen and (min-width: 1000px)
    max-width: 950px
    margin: 2rem auto

blockquote
  display: block
  @include font-size(1.3rem)
  padding: 1rem 1rem 1rem 3.5rem
  background-image: url(/img/icon-quote.svg)
  background-position-x: 1rem
  background-size: 32px
  background-repeat: no-repeat
  background-color: rgba(0, 0, 0, 0.03)
  border-radius: $medium-border-radius
  border-left: 15px $color1 solid
  text-align: center
  margin: 2rem 0

  img
    height: 80px

  footer
    color: $color4
    @include font-size(1.25rem)
    padding: .7rem .7rem 36px .7rem
    background-image: url(/img/glider-transparent.png)
    background-size: 32px
    background-repeat: no-repeat
    background-position: center bottom

a.read-more, a.read-more:link, a.read-more:active, a.read-more:visited
  display: block
  margin-top: 1.8em
  margin-bottom: 3em
  text-align: center
  line-height: 2
  color: $color3
  border: 1px solid $color3
  text-decoration: none
  transition: all 177ms linear

  &:hover
    color: white
    background-color: $color3
    border: 1px solid white

pre
  background: $color1-light-opacity
  border-radius: $medium-border-radius
  margin: 0 0 1em 0
  overflow-x: auto;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;

  code
    padding: 0

code
  margin: 0 0 1em 0
  vertical-align: text-bottom

pre
  padding: 1em

body a.action, body a.action:visited
  border-radius: 7px
  padding: .9rem 1.4rem
  text-align: center
  border: 3px solid $color2
  color: $color2
  font-weight: bold

.logos
  text-align: center

  img
    width: 90%

    @media screen and (min-width: 400px)
      width: 35vw

    @media screen and (min-width: 800px)
      width: 19%

    filter: grayscale(100%)
    transition: all 400ms linear

    &:hover
      filter: grayscale(0)

.section
  margin-bottom: 5rem

.hero
  background-size: cover
  background-position: top
  padding: 0
  height: 100vh
  line-height: 1.3

  .hero-inner
    min-height: 100%
    min-width: 100%
    padding: 1em
    color: white
    text-align: center
    font-weight: lighter
    display: flex
    flex-direction: column
    justify-content: center

    p
      display: flex
      justify-content: center
      align-items: center

      a
        margin: 0

  a.action
    margin-top: 3rem
    background-color: $color2
    color: white !important
    font-family: Raleway, sans-serif
    font-weight: bold

  h1, h2
    color: white
    line-height: 2rem
    text-shadow: 0 0 2px #fff
    margin: 2vh 0

  h1
    @include font-size(4rem)

  h2
    @include font-size(3rem)

  span.subtitle
    @include font-size(1.5rem)
    display: block
    margin: 2vh 0
    color: white
    text-shadow: 0 0 1px #fff

    a, a:visited
      color: $color5
      display: inline-block

    a.action
      @include font-size(1.2rem)

  @media screen and (min-width: 800px)
    .hero
      padding-left: 20vw
      padding-right: 20vw

div.hero::first
  height: 100vh

.product-container
  display: flex
  justify-content: center
  margin: auto

  .homepage-content p
    width: 50%
    margin-left: auto
    margin-right: auto
    text-align: center

    @media screen and (max-width: 700px)
      width: 90%

.services
  display: inline-flex
  flex-wrap: wrap
  justify-content: center
  margin: 3.3rem auto

  img
    max-width: 100%
    height: 180px
    margin-top: .7rem

  .service
    border: 1px solid #e9e9e9
    border-radius: 5px
    display: flex
    flex-direction: column
    text-align: center
    width: 100%
    margin: 1rem
    padding: 1.25rem
    position: relative

    &.service:hover
      box-shadow: $outside-shadow
      transform: translateX(0px) translateY(-3px)

      h2
        text-decoration: underline

    a.overlay
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: 0;

    @media screen and (min-width: 400px)
      width: 364px

    img
      border-radius: 7px

    h2
      text-align: center
      @include font-size(1.8rem)
      border: 0
      margin: .9rem .1rem .3rem .1rem
      color: $color1
      font-family: Roboto-Regular

    img, h2, a, ul
      margin: .25rem
      @media screen and (min-width: 500px)
        margin: 1.25rem

    ul
      font-family: Roboto-Light

    ul
      margin: .9rem .1rem
      padding: 0
      height: 100%

      li
        list-style-type: none
        text-align: left
        margin-left: 1rem

  strong
    color: #333

.main-header.transparent
  background-color: transparent

  a:not(.logo)
    color: white
    text-shadow: 0 0 3px #FFF

    &:hover
      color: white
      background-color: rgba(255, 255, 255, 0.1)
      border: 2px solid white

    &.active
      border: 2px solid $color2

.main-header:not(.transparent)
  background-color: white
  box-shadow: $large-outside-shadow

  a:not(.logo)
    color: $color2
    border: 2px solid transparent
    text-shadow: 0 0 3px transparent

    &:hover
      color: white
      background-color: $color2
      border: 2px solid transparent

    &.active
      border: 2px solid $color2

.main-header.hero-header
  position: fixed
  top: 0
  left: 0
  right: 0
  transition: all 200ms linear

.main-header
  z-index: 99
  text-align: center
  display: flex
  justify-content: space-evenly
  transition: all 75ms linear
  padding: 7px

  @media screen and (max-width: 500px)
    flex-wrap: wrap
    a.logo
      flex: 0 0 100%

  a:not(.logo)
    font-family: Raleway, sans-serif
    border: 2px solid transparent
    border-radius: 5px
    text-decoration: none
    margin-bottom: 0
    margin-top: auto
    padding: 5px

    @include font-size(1rem)
    @media screen and (min-width: 500px)
      @include font-size(1.2rem)
    @media screen and (min-width: 700px)
      @include font-size(1.4rem)


footer
  text-align: center
  padding: 1rem 0
  font-weight: lighter

  p
    @include font-size(1.1rem)

  h5
    border: 0

  img a
    display: block
    padding: 1rem
    color: $color5

.author-detail
  div.avatar
    @media screen and (min-width: 600px)
      float: right
      padding: 0 0 0 1.4em
    @media screen and (max-width: 600px)
      text-align: center

  .articles li
    list-style-type: none

.icon
  vertical-align: middle
  width: 45px
  height: 45px

.li-svg
  list-style-type: none
  display: inline
  margin: 1em

  a
    text-decoration: none

div.tags
  height: 3em

p.ybs-age
  text-align: center

h1.notfound
  text-align: center
  size: 34
  padding: 2.5em

ul.post-list
  padding: 0 1em
  li
    list-style-type: none

ul.tag-list
  padding: 0 1em
  li
    display: inline
    @include font-size(1rem)

.team
  text-align: center

  img
    border-radius: 50%
    width: 50px

  .team-item
    align-items: center
    display: flex
    justify-content: space-between

.author-list
  list-style-type: none
  text-align: center
  margin-top: 3em

.techno
  img
    height: 80px