Update 'About' page

2023-01-27 20:10:55 -07:00 · 2023-01-27 20:10:55 -07:00 · db99de2c86
commit db99de2c86
parent d7b5c0d52a
15 changed files with 676 additions and 5 deletions
--- a/Socials.html
+++ b/Socials.html
@ -103,6 +103,13 @@
    'floating-chat.donateButton.text-color': '#fff'
  });
 </script>
+<a href="https://bulma.io">
+  <img
+    src="https://bulma.io/images/made-with-bulma.png"
+    alt="Made with Bulma"
+    width="128"
+    height="24">
+</a>
        </div>
    </div>
  </section>
--- a/about.html
+++ b/about.html
@ -0,0 +1,197 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel = "icon" href = "assets/branding/obo-icon.png">
+    <title>LimePot - About</title>
+    <link rel="stylesheet" href="mybulma/css/mystyles.css">
+
+
+    <style>
+        *{
+            box-sizing: border-box;
+            font-family: 'Courier New', Courier, monospace;
+            margin: 0;
+            padding: 0;
+        }
+        .wrapper{
+            font-size: 4vw;
+            width: 50vw;
+            text-align: center;
+            display: flex;
+            
+        }
+        .normal-text{
+            color: white;
+            width: 35%;
+            display: inline-block;
+            text-align: left;
+        }
+        .dynamic-text {
+            display: inline-block;
+            height: 5vw;
+            overflow: hidden;
+        }
+        .dynamic-text li{
+            color: rgb(0, 255, 204);
+            margin: 0 0 2% 5px;
+            position: relative;
+            width: fit-content;
+            animation: slid 18s steps(3) infinite;
+            -webkit-animation: slid 18s steps(3) infinite;
+        }
+        .dynamic-text li::before{
+            content: "";
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            border-left: 2px solid rgb(0, 255, 204);
+            left: 0;
+            background: #332e33;
+            animation: typing 3s steps(12) infinite;
+            -webkit-animation: typing 3s steps(12) infinite;
+        }
+        @keyframes typing {
+            50%{left:100%}
+            100%{left:0%}
+        }
+        @keyframes slid {
+           
+             50%{
+                 transform: translateY(calc(-15.5vw));
+                 -webkit-transform: translateY(calc(-15.5vw));
+                 -moz-transform: translateY(calc(-15.5vw));
+                 -ms-transform: translateY(calc(-15.5vw));
+                 -o-transform: translateY(calc(-15.5vw));
+        }
+             100%{ transform: translateY(0px);
+                 -webkit-transform: translateY(0px);
+                  -moz-transform: translateY(0px); 
+                  -ms-transform: translateY(0px); 
+                  -o-transform: translateY(0px);}
+        }
+            </style>
+
+
+  </head>
+  <body>
+    <nav class="navbar" role="navigation" aria-label="main navigation">
+        <div class="navbar-brand">
+          <a class="navbar-item" href="https://limepot.xyz/">
+            <img src="assets/obo-icon.png">
+            LimePot
+          </a>
+      
+          <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+          </a>
+        </div>
+      
+        <div id="navbarBasicExample" class="navbar-menu">
+          <div class="navbar-start">
+            <a class="navbar-item" href="https://limepot.xyz/">
+              Home
+            </a>
+      
+            <a class="navbar-item" href="https://limepot.xyz/about">
+              About
+            </a>
+            <div class="navbar-item has-dropdown is-hoverable">
+                <a class="navbar-link" href="https://limepot.xyz/projects">
+                Projects
+              </a>
+              <div class="navbar-dropdown">
+                <a class="navbar-item" href="https://github.com/LimePotato">
+                    Github
+                </a>
+                <a class="navbar-item" href="https://limepot.xyz/photography">
+                    Photography
+                  </a>
+                  <a class="navbar-item" href="https://limepot.xyz/videography">
+                    Youtube
+                  </a>
+                </div>
+            </div>
+            
+      
+            <div class="navbar-item has-dropdown is-hoverable">
+              <a class="navbar-link">
+                More
+              </a>
+      
+              <div class="navbar-dropdown">
+                <a class="navbar-item" href="https://limepot.xyz/Socials">
+                    Socials
+                  </a>
+                  <hr class="navbar-divider">
+                <a class="navbar-item" href="https://limepot.xyz/Contact">
+                  Contact
+                </a>
+                <a class="navbar-item" href="https://limepot.xyz/old">
+                    Old Site
+                  </a>
+                  <a class="navbar-item" href="https://limepot.xyz/ALPHA">
+                    Alpha Site
+                  </a>
+              </div>
+            </div>
+          </div>
+      
+          <div class="navbar-end">
+            
+              </div>
+            </div>
+          </div>
+        </div>
+      </nav>
+
+
+
+  <section class="section">
+    <div class="container">
+      <div class="content">
+        
+<div class="wrapper">
+        <div class="normal-text"> I'm a: </div> 
+        <ul class="dynamic-text">
+            <li>Developer.</li>
+            <li>Crazy Lady.</li>
+            <li>🏳️‍⚧️Transwoman.</li>
+        </ul>
+    </div>
+
+    <script>
+        const menuToggle = document.querySelector('.menuToggle');
+        const navigation = document.querySelector('.navigation');
+        menuToggle.onclick = function(){
+            navigation.classList.toggle('open')
+        }
+
+        const list = document.querySelectorALl('.list');
+        function activeLink(){
+            list.forEach((item) =>
+            item.classList.remove('active'));
+            this.classList.add('active');
+        }
+        list.forEach((item) =>
+        item.addEventListener('click',activeLink))
+    </script>
+
+       
+        <script src='https://storage.ko-fi.com/cdn/scripts/overlay-widget.js'></script>
+<script>
+  kofiWidgetOverlay.draw('limepot', {
+    'type': 'floating-chat',
+    'floating-chat.donateButton.text': 'Support Me',
+    'floating-chat.donateButton.background-color': '#00bfa5',
+    'floating-chat.donateButton.text-color': '#fff'
+  });
+</script>
+        </div>
+    </div>
+  </section>
+  </body>
+</html>
--- a/discord.html
+++ b/discord.html
@ -1 +1,2 @@
+<div class="pageloader" is-active="true"><span class="title">Pageloader</span></div>
 <meta http-equiv="Refresh" content="0; url='https://discord.gg/XZWHzQ8DUY'"/>
--- a/index.html
+++ b/index.html
@ -115,6 +115,14 @@
    'floating-chat.donateButton.text-color': '#fff'
  });
 </script>
+
+<a href="https://bulma.io">
+  <img
+    src="https://bulma.io/images/made-with-bulma.png"
+    alt="Made with Bulma"
+    width="128"
+    height="24">
+</a>
        </div>
    </div>
  </section>
--- a/loading.html
+++ b/loading.html
--- a/mybulma/node_modules/.package-lock.json
+++ b/mybulma/node_modules/.package-lock.json
@ -283,6 +283,11 @@
      "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==",
      "dev": true
    },
+    "node_modules/bulma-pageloader": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/bulma-pageloader/-/bulma-pageloader-0.3.0.tgz",
+      "integrity": "sha512-lbahiqhBCov5AYdziHFnC5/JOhCrJWFTpdRiAkwW49IM/mf0whCWHVe8MuejZFu2PEs1mtH8Gnz8exEks4Q+7g=="
+    },
    "node_modules/cacache": {
      "version": "16.1.3",
      "resolved": "https://registry.npmjs.org/cacache/-/cacache-16.1.3.tgz",
--- a/mybulma/node_modules/bulma-pageloader/CHANGELOG.md
+++ b/mybulma/node_modules/bulma-pageloader/CHANGELOG.md
@ -0,0 +1,76 @@
+<a name="2.2.0"></a>
+# [2.2.0](https://github.com/Wikiki/bulma-pageloader/compare/1.0.0...2.2.0) (2019-10-24)
+
+<a name="1.0.0"></a>
+# [1.0.0](https://github.com/Wikiki/bulma-pageloader/compare/0.1.7...1.0.0) (2018-02-10)
+
+
+
+<a name="0.1.7"></a>
+## [0.1.7](https://github.com/Wikiki/bulma-pageloader/compare/0.1.6...0.1.7) (2018-02-10)
+
+
+
+<a name="0.1.6"></a>
+## [0.1.6](https://github.com/Wikiki/bulma-pageloader/compare/0.1.5...0.1.6) (2018-02-10)
+
+
+### Bug Fixes
+
+* **gulp:** Use UMD modules style ([4db80f1](https://github.com/Wikiki/bulma-pageloader/commit/4db80f1))
+
+
+
+<a name="0.1.5"></a>
+## [0.1.5](https://github.com/Wikiki/bulma-pageloader/compare/0.1.4...0.1.5) (2018-02-10)
+
+
+### Bug Fixes
+
+* **gulp:** Correct dist filenames ([9dc4bee](https://github.com/Wikiki/bulma-pageloader/commit/9dc4bee))
+* **package:** Correct file paths ([8c6e9f6](https://github.com/Wikiki/bulma-pageloader/commit/8c6e9f6))
+* **travis:** Remove configuration ([d7398d7](https://github.com/Wikiki/bulma-pageloader/commit/d7398d7))
+
+
+
+<a name="0.1.4"></a>
+## [0.1.4](https://github.com/Wikiki/bulma-pageloader/compare/v0.1.0...v0.1.4) (2018-02-09)
+
+
+### Bug Fixes
+
+* **bower:** Add missing version ([c7eb58e](https://github.com/Wikiki/bulma-pageloader/commit/c7eb58e))
+
+
+### Features
+
+* **gulp:** Add gulp dependencies ([ac9f8b0](https://github.com/Wikiki/bulma-pageloader/commit/ac9f8b0))
+* **gulp:** Add release task ([71bed8d](https://github.com/Wikiki/bulma-pageloader/commit/71bed8d))
+
+
+
+# Change Log
+
+## [Unreleased](https://github.com/wikiki/bulma-pageloader/tree/HEAD)
+
+[Full Changelog](https://github.com/wikiki/bulma-pageloader/compare/v0...HEAD)
+
+**Closed issues:**
+
+- Problem with the pageloader extension with laravel-mix [\#3](https://github.com/Wikiki/bulma-pageloader/issues/3)
+
+**Merged pull requests:**
+
+- fix Wikiki/bulma-pageloader\#3 [\#4](https://github.com/Wikiki/bulma-pageloader/pull/4) ([Grummfy](https://github.com/Grummfy))
+
+## [v0](https://github.com/wikiki/bulma-pageloader/tree/v0) (2017-11-30)
+[Full Changelog](https://github.com/wikiki/bulma-pageloader/compare/v0.1.0...v0)
+
+## [v0.1.0](https://github.com/wikiki/bulma-pageloader/tree/v0.1.0) (2017-11-30)
+**Implemented enhancements:**
+
+- Opacity [\#1](https://github.com/Wikiki/bulma-pageloader/issues/1)
+
+
+
+\* *This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)*
--- a/mybulma/node_modules/bulma-pageloader/LICENSE
+++ b/mybulma/node_modules/bulma-pageloader/LICENSE
@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Wikiki
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/mybulma/node_modules/bulma-pageloader/README.md
+++ b/mybulma/node_modules/bulma-pageloader/README.md
@ -0,0 +1,17 @@
+# bulma-pageloader
+Bulma's extension to show a page loader overlay of the whole page.
+(find all my bulma's extensions [here](https://wikiki.github.io/))
+
+[![npm](https://img.shields.io/npm/v/bulma-pageloader.svg)](https://www.npmjs.com/package/bulma-pageloader)
+[![npm](https://img.shields.io/npm/dm/bulma-pageloader.svg)](https://www.npmjs.com/package/bulma-pageloader)
+[![Build Status](https://travis-ci.org/Wikiki/bulma-pageloader.svg?branch=master)](https://travis-ci.org/Wikiki/bulma-pageloader)
+
+Overview
+---
+![Pageloader Element](https://img15.hostingpics.net/pics/217768bulmapageloader.gif)
+
+To get the page-loader displayed, add `is-active` class to the pageloader element.
+
+Documentation & Demo
+---
+You can find the Documentation and a demo [here](https://wikiki.github.io/elements/pageloader/)
--- a/mybulma/node_modules/bulma-pageloader/dist/css/bulma-pageloader.min.css
+++ b/mybulma/node_modules/bulma-pageloader/dist/css/bulma-pageloader.min.css
--- a/mybulma/node_modules/bulma-pageloader/dist/css/bulma-pageloader.sass
+++ b/mybulma/node_modules/bulma-pageloader/dist/css/bulma-pageloader.sass
@ -0,0 +1,128 @@
+$pageloader-opacity: 1 !default
+
+// keyframes mixin
+=keyframes($name)
+  @-webkit-keyframes #{$name}
+    @content
+  @-moz-keyframes #{$name}
+    @content
+  @-o-keyframes #{$name}
+    @content
+  @keyframes #{$name}
+    @content
+
+.pageloader
+  +overlay
+  position: fixed
+  padding-top: 2em
+  background: $primary
+  background: rgba( $primary, $pageloader-opacity )
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}
+      background-color: $color
+      background: rgba( $color, $pageloader-opacity )
+      &::after
+        border-color: $color-invert
+        -webkit-animation: loader-figure-#{$name} 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1)
+        -moz-animation: loader-figure-#{$name} 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1)
+        animation: loader-figure-#{$name} 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1)
+      .title
+        color: $color-invert
+  z-index: 999998
+  transition: transform .35s ease-out,-webkit-transform .35s ease-out
+  will-change: transform
+  &:not(.is-left-to-right),
+  &:not(.is-right-to-left)
+  &:not(.is-bottom-to-top)
+    -webkit-transform: translateY(-100%)
+    transform: translateY(-100%)
+  &.is-bottom-to-top
+    -webkit-transform: translateY(100%)
+    transform: translateY(100%)
+  &.is-left-to-right
+    -webkit-transform: translateX(-100%)
+    transform: translateX(-100%)
+  &.is-right-to-left
+    -webkit-transform: translateX(100%)
+    transform: translateX(100%)
+  &.is-active
+    &:not(.is-left-to-right),
+    &:not(.is-right-to-left)
+      -webkit-transform: translateY(0)
+      transform: translateY(0)
+    &.is-left-to-right,
+    &.is-right-to-left
+      -webkit-transform: translateX(0)
+      transform: translateX(0)
+  &::after
+    position: absolute
+    top: 50%
+    left: 50%
+    display: block
+    border-radius: 100%
+    content: ''
+    z-index: 9999
+    -webkit-transform: translate(-50%, -50%)
+    transform: translate(-50%, -50%)
+    width: 0
+    height: 0
+    box-sizing: border-box
+    border: 0 solid $white
+    -webkit-animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1)
+    animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1)
+  .title
+    position: absolute
+    top: 50%
+    left: 50%
+    -webkit-transform: translateX(-50%)
+    transform: translateX(-50%)
+    margin: 2em 0 0 0
+    font-size: 0.875em
+    letter-spacing: 0.1em
+    line-height: 1.5em
+    color: $white
+    white-space: nowrap
+  +keyframes(loader-figure)
+    0%
+      height: 0
+      width: 0
+      background-color: $white
+    29%
+      background-color: $white
+    30%
+      height: 2em
+      width: 2em
+      background-color: transparent
+      border-width: 1em
+      opacity: 1
+    100%
+      height: 2em
+      width: 2em
+      border-width: 0
+      opacity: 0
+      background-color: transparent
+
+@each $name, $pair in $colors
+  $color: nth($pair, 1)
+  $color-invert: nth($pair, 2)
+  +keyframes(loader-figure-#{$name})
+    0%
+      height: 0
+      width: 0
+      background-color: $color-invert
+    29%
+      background-color: $color-invert
+    30%
+      height: 2em
+      width: 2em
+      background-color: transparent
+      border-width: 1em
+      opacity: 1
+    100%
+      height: 2em
+      width: 2em
+      border-width: 0
+      opacity: 0
+      background-color: transparent
--- a/mybulma/node_modules/bulma-pageloader/package.json
+++ b/mybulma/node_modules/bulma-pageloader/package.json
@ -0,0 +1,69 @@
+{
+  "name": "bulma-pageloader",
+  "version": "0.3.0",
+  "description": "Display a page-loader to inform user that content is loading, in different colors. ",
+  "main": "./dist/css/bulma-pageloader.min.css",
+  "sass": "./src/sass/index.sass",
+  "scripts": {
+    "build": "gulp",
+    "commit": "git-cz",
+    "travis-deploy-once": "travis-deploy-once",
+    "semantic-release": "semantic-release"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Wikiki/bulma-pageloader.git"
+  },
+  "keywords": [
+    "Bulma",
+    "bulma",
+    "bulma.io",
+    "extensions"
+  ],
+  "author": "Wikiki <wikiki@protonmail.com> (https://wikiki.github.io/bulma-extensions/overview)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Wikiki/bulma-pageloader/issues"
+  },
+  "homepage": "https://github.com/Wikiki/bulma-pageloader#readme",
+  "devDependencies": {
+    "ansi-colors": "^2.0.1",
+    "autoprefixer": "^8.6.2",
+    "babel-core": "^6.26.3",
+    "babel-jest": "^23.0.1",
+    "babel-loader": "^7.1.4",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-env": "^1.7.0",
+    "bulma": "~0.7",
+    "camelcase": "^5.0.0",
+    "commitizen": "^2.10.1",
+    "cz-conventional-changelog": "^2.1.0",
+    "del": "^3.0.0",
+    "fancy-log": "^1.3.2",
+    "gulp": "^4.0.0",
+    "gulp-autoprefixer": "^5.0.0",
+    "gulp-clean-css": "^3.9.4",
+    "gulp-concat": "^2.6.1",
+    "gulp-nop": "0.0.3",
+    "gulp-postcss": "^7.0.1",
+    "gulp-sass": "^4.0.1",
+    "gulp-uglify": "^3.0.0",
+    "jest": "^23.1.0",
+    "regenerator-runtime": "^0.11.1",
+    "semantic-release": "^15.5.2",
+    "travis-deploy-once": "^5.0.0",
+    "webpack": "^4.12.0",
+    "webpack-stream": "^4.0.3"
+  },
+  "config": {
+    "commitizen": {
+      "path": "node_modules/cz-conventional-changelog"
+    }
+  },
+  "files": [
+    "dist/**",
+    "src/**",
+    "LICENSE",
+    "README.md"
+  ]
+}
--- a/mybulma/node_modules/bulma-pageloader/src/sass/index.sass
+++ b/mybulma/node_modules/bulma-pageloader/src/sass/index.sass
@ -0,0 +1,128 @@
+$pageloader-opacity: 1 !default
+
+// keyframes mixin
+=keyframes($name)
+  @-webkit-keyframes #{$name}
+    @content
+  @-moz-keyframes #{$name}
+    @content
+  @-o-keyframes #{$name}
+    @content
+  @keyframes #{$name}
+    @content
+
+.pageloader
+  +overlay
+  position: fixed
+  padding-top: 2em
+  background: $primary
+  background: rgba( $primary, $pageloader-opacity )
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}
+      background-color: $color
+      background: rgba( $color, $pageloader-opacity )
+      &::after
+        border-color: $color-invert
+        -webkit-animation: loader-figure-#{$name} 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1)
+        -moz-animation: loader-figure-#{$name} 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1)
+        animation: loader-figure-#{$name} 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1)
+      .title
+        color: $color-invert
+  z-index: 999998
+  transition: transform .35s ease-out,-webkit-transform .35s ease-out
+  will-change: transform
+  &:not(.is-left-to-right),
+  &:not(.is-right-to-left)
+  &:not(.is-bottom-to-top)
+    -webkit-transform: translateY(-100%)
+    transform: translateY(-100%)
+  &.is-bottom-to-top
+    -webkit-transform: translateY(100%)
+    transform: translateY(100%)
+  &.is-left-to-right
+    -webkit-transform: translateX(-100%)
+    transform: translateX(-100%)
+  &.is-right-to-left
+    -webkit-transform: translateX(100%)
+    transform: translateX(100%)
+  &.is-active
+    &:not(.is-left-to-right),
+    &:not(.is-right-to-left)
+      -webkit-transform: translateY(0)
+      transform: translateY(0)
+    &.is-left-to-right,
+    &.is-right-to-left
+      -webkit-transform: translateX(0)
+      transform: translateX(0)
+  &::after
+    position: absolute
+    top: 50%
+    left: 50%
+    display: block
+    border-radius: 100%
+    content: ''
+    z-index: 9999
+    -webkit-transform: translate(-50%, -50%)
+    transform: translate(-50%, -50%)
+    width: 0
+    height: 0
+    box-sizing: border-box
+    border: 0 solid $white
+    -webkit-animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1)
+    animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1)
+  .title
+    position: absolute
+    top: 50%
+    left: 50%
+    -webkit-transform: translateX(-50%)
+    transform: translateX(-50%)
+    margin: 2em 0 0 0
+    font-size: 0.875em
+    letter-spacing: 0.1em
+    line-height: 1.5em
+    color: $white
+    white-space: nowrap
+  +keyframes(loader-figure)
+    0%
+      height: 0
+      width: 0
+      background-color: $white
+    29%
+      background-color: $white
+    30%
+      height: 2em
+      width: 2em
+      background-color: transparent
+      border-width: 1em
+      opacity: 1
+    100%
+      height: 2em
+      width: 2em
+      border-width: 0
+      opacity: 0
+      background-color: transparent
+
+@each $name, $pair in $colors
+  $color: nth($pair, 1)
+  $color-invert: nth($pair, 2)
+  +keyframes(loader-figure-#{$name})
+    0%
+      height: 0
+      width: 0
+      background-color: $color-invert
+    29%
+      background-color: $color-invert
+    30%
+      height: 2em
+      width: 2em
+      background-color: transparent
+      border-width: 1em
+      opacity: 1
+    100%
+      height: 2em
+      width: 2em
+      border-width: 0
+      opacity: 0
+      background-color: transparent
--- a/mybulma/package-lock.json
+++ b/mybulma/package-lock.json
@ -8,6 +8,9 @@
      "name": "mybulma",
      "version": "1.0.0",
      "license": "ISC",
+      "dependencies": {
+        "bulma-pageloader": "^0.3.0"
+      },
      "devDependencies": {
        "bulma": "^0.9.4",
        "node-sass": "^8.0.0"
@ -292,6 +295,11 @@
      "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==",
      "dev": true
    },
+    "node_modules/bulma-pageloader": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/bulma-pageloader/-/bulma-pageloader-0.3.0.tgz",
+      "integrity": "sha512-lbahiqhBCov5AYdziHFnC5/JOhCrJWFTpdRiAkwW49IM/mf0whCWHVe8MuejZFu2PEs1mtH8Gnz8exEks4Q+7g=="
+    },
    "node_modules/cacache": {
      "version": "16.1.3",
      "resolved": "https://registry.npmjs.org/cacache/-/cacache-16.1.3.tgz",
@ -2582,6 +2590,11 @@
      "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==",
      "dev": true
    },
+    "bulma-pageloader": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/bulma-pageloader/-/bulma-pageloader-0.3.0.tgz",
+      "integrity": "sha512-lbahiqhBCov5AYdziHFnC5/JOhCrJWFTpdRiAkwW49IM/mf0whCWHVe8MuejZFu2PEs1mtH8Gnz8exEks4Q+7g=="
+    },
    "cacache": {
      "version": "16.1.3",
      "resolved": "https://registry.npmjs.org/cacache/-/cacache-16.1.3.tgz",
--- a/mybulma/package.json
+++ b/mybulma/package.json
@ -4,7 +4,9 @@
  "description": "",
  "main": "sass/mystyles.scss",
  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "css-build": "node-sass --omit-source-map-url sass/mystyles.scss css/mystyles.css",
+    "css-watch": "npm run css-build -- --watch",
+    "start": "npm run css-watch"
  },
  "author": "",
  "license": "ISC",
@ -12,9 +14,7 @@
    "bulma": "^0.9.4",
    "node-sass": "^8.0.0"
  },
-  "scripts": {
-    "css-build": "node-sass --omit-source-map-url sass/mystyles.scss css/mystyles.css",
-    "css-watch": "npm run css-build -- --watch",
-    "start": "npm run css-watch"
+  "dependencies": {
+    "bulma-pageloader": "^0.3.0"
  }
 }