~johanvandegriff/vandy.land

266e37b676d34ba5e6997fca8a298adb29372496 — Johan Vandegriff 1 year, 4 months ago 91424f5
added candy canes
2 files changed, 124 insertions(+), 27 deletions(-)

M index.html
M style.css
M index.html => index.html +13 -5
@@ 34,6 34,13 @@ The code is available at: https://gitlab.com/johanvandegriff/vandy.land
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
</head>
<body>
  <div class='candy' style="display: block; float: left">
    <div class='candy-loader'></div>
  </div>
  <div class='candy' style="display: block; float: right">
    <div class='candy-loader'></div>
  </div>
  
<css-doodle use="var(--rule)"></css-doodle>

<div class="siteTitle">vandy land</div>


@@ 41,15 48,16 @@ The code is available at: https://gitlab.com/johanvandegriff/vandy.land
<div class="loaderWrapper">
  <div class="loader"></div>
</div>
<section>
<br/>
<br/>
<h1>Site under construction!</section></h1>
<h1 style="text-align: center;">Site under construction!</h1>
<section>
</section>
<footer>
Site made by <a target="_blank" href="https://johanv.xyz/">Johan Vandegriff</a><br/>
<a target="_blank" href="https://gitlab.com/johanvandegriff/vandy.land">source code</a> released under the GNU AGPLv3<br/>
Theme from <a target="_blank" href="https://codemenatalie.com/blog" target="_blank">CodeMeNatalie</a> on <a target="_blank" href="https://codepen.io/CodeMeNatalie/pen/WNNadWy">CodePen</a>
made by <a target="_blank" href="https://johanv.xyz/">Johan Vandegriff</a> |
<a target="_blank" href="https://gitlab.com/johanvandegriff/vandy.land">source code</a> released under the GNU AGPLv3 |
background from <a target="_blank" href="https://codemenatalie.com/blog" target="_blank">CodeMeNatalie</a> on <a target="_blank" href="https://codepen.io/CodeMeNatalie/pen/WNNadWy">CodePen</a> |
candy canes from <a target="_blank" href="https://codepen.io/woodwoerk/pen/XXJoMa">Joe Harry on CodePen</a>
</footer>
</body>
</html>

M style.css => style.css +111 -22
@@ 4,27 4,18 @@ body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: white;
  background-color: white;
  background: linear-gradient(to bottom, #e6f8f9 20%, #b1e8ed 100%);
  /* display: flex; */
  /* flex-direction: column; */
  /* align-items: center; */
  /* justify-content: center; */
  background: #CDF0F3;
  background-color: #CDF0F3;
  /* background: linear-gradient(to bottom, #e6f8f9 20%, #b1e8ed 100%); */
  overflow: hidden;
}
body .siteTitle {
  background-size: 30px 30px;
  /* font-family: "Titan One", cursive; */
  /* font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */
  /* font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; */
  /* font-family: sans-serif; */
  /* font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; */
  /* font-family: Verdana, Geneva, Tahoma, sans-serif; */
  /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
  /* font-family: Arial, Helvetica, sans-serif; */
  font-family: Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  /* font-style: italic; */
  font-variant: small-caps;
  font-weight: bolder;
  font-size: 100px;


@@ 34,6 25,7 @@ body .siteTitle {
  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 .loaderWrapper {
  border-radius: 50px;


@@ 42,6 34,7 @@ body .loaderWrapper {
  z-index: 5;
  overflow: hidden;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
  margin: auto;
}
body .loaderWrapper .loader {
  height: 60px;


@@ 54,18 47,19 @@ body .loaderWrapper .loader {
body footer {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  position: absolute;
  /* left: calc(50% - 96px); */
  align-self: center;
  /* align-self: center; */
  bottom: 0;
  font-style: italic;
  /* font-style: italic; */
  font-size: 12px;
  color: #212121;
  background-color: white;
  padding: 10px 20px;
  padding: 10px 5%;
  border-radius: 5px 5px 0 0;
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25);
  z-index: 10;
  text-align: center;
  width: 70%;
  margin: 0 10%;
}

@keyframes load {


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


@@ 146,3 140,98 @@ css-doodle {
  }
  );
}




.candy {
  display: block;
  margin: 35px;
  overflow: hidden;
  width: 100px;
  height: 300px;
  border-radius: 100px;
  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);
  -webkit-animation: PARTY 1s linear infinite;
          animation: PARTY 1s linear infinite;
}

.candy-loader {
  height: 100%;
  width: 100%;
  z-index: 1;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          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);
  /* -webkit-animation: load 1s ease-in infinite;
          animation: load 1s ease-in infinite; */
}
.candy-loader::after {
  content: "";
  background-color: #CDF0F3;
  width: 50px;
  height: 270px;
  border-radius: 50px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  display: -webkit-box;
  display: flex;
  align-self: flex-end;
}
.candy-loader::before {
  content: "";
  background-color: #CDF0F3;
  width: 25px;
  height: 210px;
  display: -webkit-box;
  display: flex;
  align-self: flex-end;
}

@-webkit-keyframes PARTY {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  25% {
    -webkit-transform: rotate(10deg) scale(1);
            transform: rotate(10deg) scale(1);
  }
  50% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  75% {
    -webkit-transform: rotate(-10deg) scale(1);
            transform: rotate(-10deg) scale(1);
  }
}

@keyframes PARTY {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  25% {
    -webkit-transform: rotate(10deg) scale(1);
            transform: rotate(10deg) scale(1);
  }
  50% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  75% {
    -webkit-transform: rotate(-10deg) scale(1);
            transform: rotate(-10deg) scale(1);
  }
}