feat: added portfolio and projects page (#272)

Alexander Bilz

13.19.2021 0d412d3a37f6317dd1a8b231444077fecbbf522c

 assets/css/style.css

@@ -474,13 +474,13 @@
.post .post-content a {
  text-decoration: none;
  letter-spacing: 1px;
  color: #2660ab;
  color: var(--link-color);
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.post .post-content a:hover {
  color: #2f69b3;
  color: var(--link-color);
}

.post .post-content h3 {
@@ -896,6 +896,7 @@
  font-weight: 400;
  font-style: normal;
  border-radius: 999em;
  padding: 10px;
}

.btn:hover {
@@ -934,6 +935,55 @@
  padding: 6px 12px;
}

/* Portfolio */
.cta {
  padding-bottom: 1em;
}

.box-wrapper {
  padding: 48px;
  position: relative;
  z-index: 0;
}

.box-image {
  display: block;
  background-color: #fff;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.box-image img {
  width: 100%;
  box-shadow: #000;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
  object-fit: cover;
  border-bottom: 0px;
  display: block;
}

.box-image--right,
.box-image--left {
  margin-right: auto;
  margin-left: auto;
  width: calc(100% - 64px);
  background-color: var(--bg-color);
  max-width: 400px;
  z-index: -1;
}

.box {
  background-color: var(--bg-color);
  padding: 32px;
}

.box--left,
.box--right {
  margin-top: -24px;
}

/* Menu */
.menu {
  float: right;
@@ -1094,6 +1144,61 @@
  .footer--base {
    display: none;
  }

  .box {
    padding: 48px;
    box-shadow: 0 0 48px var(--border-color);
    background-color: #fff;
    border-radius: 0.5em;
  }

  .box-wrapper::before {
    border: 1px solid var(--border-color);
    content: '';
    z-index: -1;
    position: absolute;
    top: 10%;
    left: 10%;
    bottom: 10%;
    right: 10%;
    background: transparent;
    border-radius: 0.5em;
  }

  .box-image--right,
  .box-image--left {
    width: 60%;
    object-fit: contain;
    max-width: none;
  }

  .box-image--right {
    margin-right: 0;
    margin-left: auto;
    border-top-right-radius: 0.5em;
    border-top-left-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
  }

  .box-image--left {
    margin-right: auto;
    margin-left: 0;
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
    border-bottom-left-radius: 0.5em;
  }

  .box--left,
  .box--right {
    width: 60%;
    margin-top: -48px;
    z-index: 3;
    background: var(--blockquote-border-color);
  }

  .box--right {
    margin-left: auto;
  }
}

@media screen and (max-width: 960px) {
@@ -1236,6 +1341,24 @@
    width: 80%;
  }

  .box--right,
  .box--left {
    border-bottom: 1px solid var(--border-color);
  }

  .box-image--left,
  .box-image--right {
    padding: 32px 32px 0px 32px;
    max-width: inherit;
  }

  .box-wrapper {
    padding-left: 48px;
    padding-right: 48px;
    padding-bottom: 0px;
    padding-top: 48px;
  }

  .triangle {
    display: none;
  }