~johanvandegriff/vandy.land

8650cc61b116874574c675120bc27e25decfb42a — Johan Vandegriff 1 year, 4 months ago 266e37b
added some sample text
2 files changed, 108 insertions(+), 74 deletions(-)

M index.html
M style.css
M index.html => index.html +66 -48
@@ 1,38 1,43 @@
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">
<!--
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <!--
This HTML source code is licensed under the GNU Affero General Public License 3.0. (https://www.gnu.org/licenses/agpl-3.0.html)

The code is available at: https://gitlab.com/johanvandegriff/vandy.land
-->
<!--[if lt IE 9]>
  <!--[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 href="https://fonts.googleapis.com/css?family=Titan+One&display=swap" rel="stylesheet"> -->
<script src="css-doodle-0.7.3.min.js"></script>
<title>vandy land</title>

<meta charset="utf-8">
<meta name="description" content="">
<meta name="robots" content="index, follow">
<meta name="author" content="Johan Vandegriff">

<meta property="og:type" content="website">
<meta property="og:title" content="vandy land">
<meta property="og:site_name" content="vandy land">
<meta property="og:url" content="vandy.land">
<meta property="og:description" content="">
<meta property="og:image" content="">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="vandy.land">
<meta name="twitter:title" content="vandy land">
<meta name="twitter:description" content="">
<meta name="twitter:image" content="">

<link rel="icon" href="/favicon.ico?" type="image/x-icon">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
  <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>
  <title>vandy land</title>

  <meta charset="utf-8">
  <meta name="description" content="">
  <meta name="robots" content="index, follow">
  <meta name="author" content="Johan Vandegriff">

  <meta property="og:type" content="website">
  <meta property="og:title" content="vandy land">
  <meta property="og:site_name" content="vandy land">
  <meta property="og:url" content="vandy.land">
  <meta property="og:description" content="">
  <meta property="og:image" content="">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="vandy.land">
  <meta name="twitter:title" content="vandy land">
  <meta name="twitter:description" content="">
  <meta name="twitter:image" content="">

  <link rel="icon" href="/favicon.ico?" type="image/x-icon">
  <!-- <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>


@@ 40,24 45,37 @@ The code is available at: https://gitlab.com/johanvandegriff/vandy.land
  <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>

<div class="loaderWrapper">
  <div class="loader"></div>
</div>
<br/>
<br/>
<h1 style="text-align: center;">Site under construction!</h1>
<section>
</section>
<footer>
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>

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

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

  <div class="loaderWrapper">
    <div class="loader"></div>
  </div>
  <br />
  <br />
  <h1 style="text-align: center;">Site under construction!</h1>
  <section>
    <h1>Heading 1</h1>
    <p>Laudantium laboriosam repellendus officiis cupiditate voluptatem. Saepe cumque ut ipsam vitae aut sit. Numquam esse ab exercitationem velit sequi voluptatem. Et eveniet tenetur laboriosam quaerat ut iure.</p>
    <h2>Heading 2</h2>
    <p>Consectetur est non delectus et. Quis quia sit quisquam repudiandae ducimus. Sit fugiat rerum repudiandae sed. Aliquid non non et cum consequuntur debitis quis. Saepe cum quis corporis accusamus voluptates et accusamus. Maiores facere aliquid et enim ratione. Minus velit et et eum iusto et error nulla. Aliquam similique asperiores 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>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>
  <br/>
  <br/>
  <br/>
  <footer>
    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>

</html>
\ No newline at end of file

M style.css => style.css +42 -26
@@ 1,9 1,23 @@
@charset "UTF-8";
section {
  margin: 40px auto;
  max-width: 650px;
  line-height: 1.6;
  font-size: 22px;
  padding: 0 10px;
  /* z-index: 7; */
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.2
}

body {
  position: relative;
  margin: 0;
  padding: 0;
  height: 100vh;
  /* height: 100vh; */
  /* width: 100vw; */
  /* display: flex; */
  /* flex-direction: column; */
  /* align-items: center; */


@@ 11,8 25,9 @@ body {
  background: #CDF0F3;
  background-color: #CDF0F3;
  /* background: linear-gradient(to bottom, #e6f8f9 20%, #b1e8ed 100%); */
  overflow: hidden;
  overflow-x: hidden;
}

body .siteTitle {
  background-size: 30px 30px;
  font-family: Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;


@@ 27,6 42,7 @@ body .siteTitle {
  animation: textBounce 12s infinite 5s cubic-bezier(0, 0.03, 0.83, 1.41) both;
  text-align: center;
}

body .loaderWrapper {
  border-radius: 50px;
  width: 400px;


@@ 36,6 52,7 @@ body .loaderWrapper {
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
  margin: auto;
}

body .loaderWrapper .loader {
  height: 60px;
  width: 800px;


@@ 44,9 61,10 @@ body .loaderWrapper .loader {
  box-shadow: 0px 0px 10px rgba(255, 50, 0, 0.8) inset;
  animation: load 3s linear -0.1s infinite;
}

body footer {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  position: absolute;
  position: fixed;
  /* align-self: center; */
  bottom: 0;
  /* font-style: italic; */


@@ 70,6 88,7 @@ body footer {
    transform: translateX(-35px);
  }
}

@keyframes textBounce {
  from, 10% {
    transform: rotate(0deg);


@@ 81,6 100,7 @@ body footer {
    transform: rotate(-5deg);
  }
}

css-doodle {
  --rule: ( :doodle {
    position: absolute;


@@ 92,12 112,12 @@ css-doodle {
  opacity: @r(0.3, 1);
  @place-cell: @r(100%) @r(100%);
  @random(.3) {
  :after {
    content: '🍭';
    position: absolute;
    font-size: @r(25px, 35px);
    transform: rotate(@r(360deg));
  }
    :after {
      content: '🍭';
      position: absolute;
      font-size: @r(25px, 35px);
      transform: rotate(@r(360deg));
    }
  }
  @random(.2) {
    :after {


@@ 129,7 149,6 @@ css-doodle {
      transform: rotate(@r(360deg));
    }
  }

  @keyframes bounce {
    0% {
      transform: translateY(@r(-101vh, -110vh));


@@ 141,9 160,6 @@ css-doodle {
  );
}




.candy {
  display: block;
  margin: 35px;


@@ 156,7 172,7 @@ css-doodle {
  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;
  animation: PARTY 1s linear infinite;
}

.candy-loader {


@@ 166,7 182,7 @@ css-doodle {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  align-items: center;
  align-self: flex-end;
  box-shadow: 0px 0px 10px rgba(255, 50, 0, 0.8) inset;
  background: #D33144;


@@ 174,6 190,7 @@ css-doodle {
  /* -webkit-animation: load 1s ease-in infinite;
          animation: load 1s ease-in infinite; */
}

.candy-loader::after {
  content: "";
  background-color: #CDF0F3;


@@ 186,6 203,7 @@ css-doodle {
  display: flex;
  align-self: flex-end;
}

.candy-loader::before {
  content: "";
  background-color: #CDF0F3;


@@ 199,39 217,37 @@ css-doodle {
@-webkit-keyframes PARTY {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
  }
  25% {
    -webkit-transform: rotate(10deg) scale(1);
            transform: rotate(10deg) scale(1);
    transform: rotate(10deg) scale(1);
  }
  50% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
  }
  75% {
    -webkit-transform: rotate(-10deg) scale(1);
            transform: rotate(-10deg) scale(1);
    transform: rotate(-10deg) scale(1);
  }
}

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


}
\ No newline at end of file