~johanvandegriff/vandy.land

340d911917d9d2ae8df18fd9231462a06e4c32c1 — Johan Vandegriff 1 year, 4 months ago 5a02a08
improved title
3 files changed, 79 insertions(+), 15 deletions(-)

A FSPimlicoGlowVF.woff2
M index.html
M style.css
A FSPimlicoGlowVF.woff2 => FSPimlicoGlowVF.woff2 +0 -0
M index.html => index.html +4 -4
@@ 11,9 11,9 @@ The code is available at: https://gitlab.com/johanvandegriff/vandy.land
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" type="text/css" href="/style.css">
  <!-- <link href="https://fonts.googleapis.com/css?family=Titan+One&display=swap" rel="stylesheet"> -->
  <script src="css-doodle-0.7.3.min.js"></script>
  <script src="/css-doodle-0.7.3.min.js"></script>
  <title>vandy land</title>

  <meta charset="utf-8">


@@ 48,7 48,7 @@ The code is available at: https://gitlab.com/johanvandegriff/vandy.land

  <css-doodle use="var(--rule)"></css-doodle>

  <div class="siteTitle">vandy land</div>
  <div class="siteTitle" data-text="vandy land">vandy land</div>

  <div class="loaderWrapper">
    <div class="loader"></div>


@@ 84,7 84,7 @@ The code is available at: https://gitlab.com/johanvandegriff/vandy.land
      quam labore rerum magnam ea. Est culpa quis repudiandae aut. Modi dolor labore adipisci eaque nemo voluptas
      occaecati.</p>
    <p>Natus doloribus sequi sed. Assumenda et et distinctio velit et. Nemo et qui nisi quia.</p>
    <h3 class= "warning">Heading 3</h3>
    <h3 class="warning">Heading 3</h3>
    <p>Et et non expedita. Occaecati repellat at ea et dolorum et a. Non iure voluptate temporibus. Quidem omnis
      dignissimos voluptatem sint. Aliquid est quam voluptatum.</p>
  </section>

M style.css => style.css +75 -11
@@ 1,4 1,10 @@
@charset "UTF-8";
@font-face {
  src: url('/FSPimlicoGlowVF.woff2');
  font-family: 'Pimlico Glow';
  font-style: normal;
}

section {
  background-color: #FBFBFB;
  border-radius: 20px;


@@ 27,24 33,82 @@ body {
  overflow-x: hidden;
}

body .siteTitle {
/* body .siteTitle {
  background-size: 30px 30px;
  font-family: Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-variant: small-caps;
  font-weight: bolder;
  font-size: 100px;
  color: #d33144;
  color: #ed283f;
  -webkit-text-stroke: 3px #ffffee;
  z-index: 5;
  padding-bottom: 40px;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  animation: textBounce 12s infinite 5s cubic-bezier(0, 0.03, 0.83, 1.41) both;
  text-align: center;
} */

body .siteTitle {
  font-family: 'Pimlico Glow';
  font-variant: small-caps;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  align-content: center;
  text-align: center;
  font-weight: 400;
  width: 100%;
  text-align: center;
  /* font-size: 100px; */
  font-size: 15vw;
  font-variation-settings: 'GLOW' 0;
  color: rgba(255, 255, 255, 0.5);
  animation: textBounce 12s infinite 5s cubic-bezier(0, 0.03, 0.83, 1.41) both;
}

body .siteTitle::before {
  content: attr(data-text);
  font-variation-settings: 'GLOW' 1000;
  -webkit-filter: invert(0.7) grayscale(1);
  filter: invert(0.7) grayscale(1);
  position: absolute;
  z-index: 2;
  text-shadow: 16px 10px 5px rgba(255, 255, 255, 0.25), 8px 5px 5px rgba(138, 0, 0, 0.53);
  /* text-shadow: 20px 20px 10px rgba(255, 255, 255, 0.2), 16px 10px 5px rgba(255, 255, 255, 0.3), 8px 5px 5px rgba(138, 0, 0, 0.3), 4px 4px 5px white; */
}

body .siteTitle::after {
  content: attr(data-text);
  position: absolute;
  z-index: 3;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(-45deg, #ed283f 25%, white 25%, white 50%, #ed283f 50%, #ed283f 75.2%, white 75%, white);
  background-size: 20px 20px;
  background-position: 0 0;
  mix-blend-mode: overlay;
  -webkit-animation: stripes 4s linear infinite;
  animation: stripes 4s linear infinite;
}

@-webkit-keyframes stripes {
  100% {
    background-position: 20px 0, 20px 0, 20px 0;
  }
}

@keyframes stripes {
  100% {
    background-position: 20px 0, 20px 0, 20px 0;
  }
}

body .loaderWrapper {
  border-radius: 50px;
  width: 400px;
  width: 600px;
  border: 5px solid #ffffee;
  z-index: 5;
  overflow: hidden;


@@ 55,7 119,7 @@ body .loaderWrapper {
body .loaderWrapper .loader {
  height: 60px;
  width: 800px;
  background-image: linear-gradient(-45deg, #d33144 25%, #ffffee 25%, #ffffee 50%, #d33144 50%, #d33144 75%, #ffffee 75%, #ffffee 100%);
  background-image: linear-gradient(-45deg, #ed283f 25%, #ffffee 25%, #ffffee 50%, #ed283f 50%, #ed283f 75%, #ffffee 75%, #ffffee 100%);
  background-size: 55px 55px;
  box-shadow: 0px 0px 10px rgba(255, 50, 0, 0.8) inset;
  animation: load 3s linear -0.1s infinite;


@@ 92,10 156,10 @@ body footer {
    transform: rotate(0deg);
  }
  1%, 3%, 5%, 7%, 9% {
    transform: rotate(5deg);
    transform: rotate(3deg);
  }
  2%, 4%, 6%, 8% {
    transform: rotate(-5deg);
    transform: rotate(-3deg);
  }
}



@@ 171,7 235,7 @@ css-doodle {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  background-color: #CDF0F3;
  box-shadow: 40px 20px 15px -30px rgba(255, 0, 0, 0.1);
  box-shadow: 40px 20px 15px -30px rgba(138, 0, 0, 0.3);
  -webkit-animation: PARTY 1s linear infinite;
  animation: PARTY 1s linear infinite;
  z-index: -2;


@@ 193,8 257,8 @@ css-doodle {
  align-items: center;
  align-self: flex-end;
  box-shadow: 0px 0px 10px rgba(255, 50, 0, 0.8) inset;
  background: #D33144;
  background: repeating-linear-gradient(45deg, #FFFFEE, #FFFFEE 15px, #D33144 15px, #D33144 30px);
  background: #ed283f;
  background: repeating-linear-gradient(45deg, #FFFFEE, #FFFFEE 15px, #ed283f 15px, #ed283f 30px);
}

.candy-loader::after {


@@ 260,7 324,7 @@ css-doodle {

.warning {
  color: white;
  background-color: #D33144;
  background-color: #ed283f;
  padding: 10px 20px;
  border-radius: 15px;
}
\ No newline at end of file