Mobile Navbar attempt

This commit is contained in:
nelle 2023-02-16 17:51:43 -07:00
parent 2d8e93b5fe
commit ff7a0262b0
12 changed files with 381 additions and 25 deletions

View file

@ -6,7 +6,7 @@
<link rel = "icon" href = "assets/branding/obo-icon.png">
<title>LimePot - Socials</title>
<link rel="stylesheet" href="mybulma/css/mystyles.css">
</head>
<body>
@ -92,8 +92,7 @@
</h1>
<div class="content">
<a href="https://snowdin.town/LimePotato">Fediverse</a>
<iframe allowfullscreen sandbox="allow-top-navigation allow-scripts allow-popups allow-popups-to-escape-sandbox" width="800" height="800" src="https://www.mastofeed.com/apiv2/feed?userurl=https%3A%2F%2Fsnowdin.town%2Fusers%2Flimepotato&theme=dark&size=100&header=true&replies=false&boosts=false"></iframe>
<br><br>
<br>
<a href="https://limpot.xyz/redir/discord">Discord</a>
<script src='https://storage.ko-fi.com/cdn/scripts/overlay-widget.js'></script>
@ -106,14 +105,20 @@
});
</script>
<br><br><br>
<a href="https://bulma.io">
<img
src="https://bulma.io/images/made-with-bulma.png"
alt="Made with Bulma"
width="128"
height="24">
<br>
</a>
</div>
</div>
<footer class="footer">
<div class="content has-text-centered">
<p>Created using <strong><a href="https://bulma.io">Bulma and Extensions</a></strong></p>
<br>
<p>
Website by <strong><a href="about.html">LimePotato / Luna-Nelle</a></strong>
</p>
</div>
</footer>
</div>
</section>
</body>

View file

@ -7,7 +7,6 @@
<title>LimePot - Home</title>
<link rel="stylesheet" href="mybulma/css/mystyles.css">
</head>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
@ -16,15 +15,9 @@
<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-menu">
<div class="navbar-start">
<a class="navbar-item" href="https://limepot.xyz/">
Home
@ -78,7 +71,11 @@
</div>
<div class="navbar-end">
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
</div>
</div>
@ -93,8 +90,10 @@
Hello World
</h1>
<div class="content">
<br><br>
<br>
<a href="#">0 Days since last incident.</a>
<p>THIS WEBSITE IS BROKEN ON MOBILE <strong><a href="https://limepot.xyz/ALPHA">Please use the Alpha Site</a></strong></p>
<br><br>
<p class="subtitle">"Forever - is composed of Nows</p>
<p class="subtitle">`Tis not a different time -</p>
@ -116,7 +115,7 @@
'floating-chat.donateButton.text-color': '#fff'
});
</script>
<br><br><br>
<br><br>
<a href="https://bulma.io">
<img
src="https://bulma.io/images/made-with-bulma.png"

7
node_modules/.package-lock.json generated vendored
View file

@ -1,5 +1,5 @@
{
"name": "BETA",
"name": "limepot.xyz",
"lockfileVersion": 2,
"requires": true,
"packages": {
@ -12,6 +12,11 @@
"version": "0.0.5",
"resolved": "https://registry.npmjs.org/bulma-start/-/bulma-start-0.0.5.tgz",
"integrity": "sha512-Sl8mdbmxa8eZJmvAfvUqQ1yptGG/kC+VvxixH3oWj1n87rpzFetotcrIs0mldD8t6Cby3Nv+hxA/2pkzDwkaBQ=="
},
"node_modules/bulma-toast": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/bulma-toast/-/bulma-toast-2.4.2.tgz",
"integrity": "sha512-c3ehyeXhhvxevKICP1VKsFtZlQH+H6/S+yYY4TFyLRfkbw3mh71eGazlNc/YEIvXQSbxHpD2f+WDc02xECuV9g=="
}
}
}

21
node_modules/bulma-toast/LICENSE generated vendored Normal file
View file

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2018 Rafael Franco
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.

192
node_modules/bulma-toast/README.md generated vendored Normal file
View file

@ -0,0 +1,192 @@
# bulma-toast
[![npm version](https://badge.fury.io/js/bulma-toast.svg)](https://badge.fury.io/js/bulma-toast)
![Publish](https://github.com/rfoel/bulma-toast/workflows/Publish/badge.svg)
Bulma's pure JavaScript extension to display toasts. Basically a Bulma's [notification](https://bulma.io/documentation/elements/notification) implemented as a toast plugin.
[Demo](https://rfoel.github.io/bulma-toast/)
![Bulma Toast](https://raw.githubusercontent.com/rfoel/bulma-toast/master/bulma-toast.png)
## Options
The plugin comes with the following options:
- `message`: The actual message to be displayed. It can be a string, a template string, or a DOM node. [See examples](#examples). This is **required**.
- `type`: Essentially a Bulma's css class. It can be `is-primary`, `is-link`, `is-info`, `is-success`, `is-warning`, `is-danger`, or any other custom class. Default is a whitesmoke background with dark text as shown [here](https://bulma.io/documentation/elements/notification).
- `duration`: Duration of the notification in milliseconds. Default is `2000` milliseconds.
- `position`: Position where the notification will be shown. The default is `top-right`, so if you want it to be on the top-left just add `top-left` to this option. The available options are: `top-left`, `top-center`, `top-right`, `center`, `bottom-left`, `bottom-center`, and `bottom-right`.
- `dismissible`: Whether the notification will have a close button or not. Default is `false`.
- `pauseOnHover`: Pauses delay when hovering the notification. Default is `false`.
- `single`: Only show a single toast in `appendTo`. Default is `false`.
- `closeOnClick`: Dismisses the notification when clicked. Default is `true`.
- `opacity`: The notification's container opacity. Default is `1`.
- `animate`: [See here](#animate). Default is no animations.
- `appendTo`: By default, the notification will be appended to [`document.body`](https://developer.mozilla.org/en-US/docs/Web/API/Document/body). Pass a different [Node](https://developer.mozilla.org/en-US/docs/Web/API/Node) to have it appended else where in the [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model).
- `extraClasses`: Adds classes for styling the toast notification.
## Install
```
npm install bulma-toast
```
or
```
yarn add bulma-toast
```
## Quick Start
1. Link to bulma-toast.min.js
```html
<script src="bulma-toast.min.js"></script>
```
2. Use bulma-toast to display a toast
```js
bulmaToast.toast({ message: 'Hello There' })
bulmaToast.toast({ message: 'General Kenobi', type: 'is-danger' })
```
## ES Modules
```js
// Import the toast function
import * as bulmaToast from 'bulma-toast'
// Or use
// import { toast as superToast } from 'bulma-toast'
// to rename your import
toast({
message: 'Hello There',
type: 'is-success',
dismissible: true,
animate: { in: 'fadeIn', out: 'fadeOut' },
})
```
## Default config
A simple default object to prevent errors. Your options will be merged with these and the defaults will be used if the fields are not provided.
```json
{
"duration": 2000,
"position": "top-right",
"closeOnClick": true,
"opacity": 1,
"single": false,
"offsetTop": 0,
"offsetBottom": 0,
"offsetLeft": 0,
"offsetRight": 0
}
```
The default config can be updated using the funcion `setDefaults`. Also, it's possible to reset to the default config using `resetDefaults`
```js
bulmaToast.setDefaults({
duration: 1000,
position: 'top-left',
closeOnClick: false,
})
```
## Change document context
```js
bulmaToast.setDoc(window.document)
```
This can be changed before each toast call and can be set to eny element.
## Animate
Bulma Toast supports [animate.css](https://daneden.github.io/animate.css/) (and maybe others?). You MUST include [animate.css](https://daneden.github.io/animate.css/) on your document's `<head>`
```html
<head>
<link rel="stylesheet" href="animate.min.css" />
<!-- or -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/animate.css@4.0.0/animate.min.css"
/>
<!-- or -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"
/>
</head>
```
Accepts a object with `in` and `out` with css classes to add animations. Using Animate.css you would pass a object like this:
```js
{
message: "I'm animated! Yay!",
duration: 2000,
position: "top-right",
animate: { in: 'fadeIn', out: 'fadeOut' }
}
```
_Warning_: Don't use `opacity` when using animations. Some of them use the opacity property like fade in and fade out.
## Examples
```js
import { toast } from 'bulma-toast'
toast({
message: 'Hello There',
type: 'is-success',
dismissible: true,
pauseOnHover: true,
})
toast({
message: '<h1>LOOK HERE</h1>',
type: 'is-danger',
dismissible: true,
pauseOnHover: true,
animate: { in: 'fadeIn', out: 'fadeOut' },
})
const myMessage = `It's ${new Date().toDateString()}`
toast({
message: myMessage,
type: 'is-primary',
position: 'center',
closeOnClick: true,
pauseOnHover: true,
opacity: 0.8,
})
const elm = document.createElement('a')
elm.text = 'Visit my website!'
elm.href = 'https://rfoel.com'
toast({
message: elm,
type: 'is-warning',
position: 'center',
closeOnClick: true,
pauseOnHover: true,
animate: { in: 'fadeIn', out: 'fadeOut' },
})
```
## Contributing
Issues and pull requests are welcome.
## License
[MIT](https://github.com/rfoell/bulma-toast/blob/master/LICENSE)

6
node_modules/bulma-toast/dist/bulma-toast.cjs.js generated vendored Normal file

File diff suppressed because one or more lines are too long

6
node_modules/bulma-toast/dist/bulma-toast.esm.js generated vendored Normal file

File diff suppressed because one or more lines are too long

6
node_modules/bulma-toast/dist/bulma-toast.min.js generated vendored Normal file

File diff suppressed because one or more lines are too long

46
node_modules/bulma-toast/index.d.ts generated vendored Normal file
View file

@ -0,0 +1,46 @@
export function toast(options: Options): void;
export function setDefaults(options: Options): void;
export function resetDefaults(): void;
export interface Options {
message?: string | HTMLElement;
type?: ToastType;
duration?: number;
position?: ToastPosition;
dismissible?: boolean;
pauseOnHover?: boolean;
closeOnClick?: boolean;
single?: boolean;
opacity?: number;
animate?: ToastAnimation;
appendTo?: Node;
extraClasses?: string;
}
export type ToastType = 'is-primary'
| 'is-link'
| 'is-info'
| 'is-success'
| 'is-warning'
| 'is-danger'
| 'is-white'
| 'is-black'
| 'is-light'
| 'is-dark';
export type ToastPosition = 'top-left'
| 'top-right'
| 'top-center'
| 'center'
| 'bottom-left'
| 'bottom-center'
| 'bottom-right';
export interface ToastAnimation {
in?: string;
out?: string;
}
export function setDoc(newDoc: HTMLElement): void;

58
node_modules/bulma-toast/package.json generated vendored Normal file
View file

@ -0,0 +1,58 @@
{
"name": "bulma-toast",
"version": "2.4.2",
"description": "Bulma's pure JavaScript extension to display toasts",
"main": "dist/bulma-toast.cjs.js",
"module": "dist/bulma-toast.esm.js",
"browser": "dist/bulma-toast.min.js",
"scripts": {
"build": "rollup -c",
"prepare": "npm run build",
"start": "rollup -c -w",
"test": "jest"
},
"repository": {
"type": "git",
"url": "git+https://github.com/rfoel/bulma-toast.git"
},
"keywords": [
"bulma",
"bulma",
"extensions",
"bulma.io"
],
"author": "@rfoel <rafaelfr@outlook.com>",
"license": "MIT",
"bugs": {
"url": "https://github.com/rfoel/bulma-toast/issues"
},
"homepage": "https://rfoel.com/bulma-toast",
"devDependencies": {
"@babel/preset-env": "^7.15.0",
"@semantic-release/changelog": "^5.0.1",
"@semantic-release/commit-analyzer": "^8.0.1",
"@semantic-release/git": "^9.0.0",
"@semantic-release/github": "^7.2.3",
"@semantic-release/npm": "^7.1.3",
"@semantic-release/release-notes-generator": "^9.0.3",
"jest": "^27.0.6",
"jest-environment-jsdom-sixteen": "^2.0.0",
"rollup": "^2.56.3",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-babel-minify": "^10.0.0",
"semantic-release": "^17.4.6"
},
"files": [
"dist",
"index.d.ts"
],
"types": "index.d.ts",
"jest": {
"collectCoverageFrom": [
"src/index.js",
"!**/node_modules/**",
"!**/dist/**"
],
"testEnvironment": "jest-environment-jsdom-sixteen"
}
}

15
package-lock.json generated
View file

@ -1,12 +1,13 @@
{
"name": "BETA",
"name": "limepot.xyz",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"dependencies": {
"bulma": "^0.9.4",
"bulma-start": "^0.0.5"
"bulma-start": "^0.0.5",
"bulma-toast": "^2.4.2"
}
},
"node_modules/bulma": {
@ -18,6 +19,11 @@
"version": "0.0.5",
"resolved": "https://registry.npmjs.org/bulma-start/-/bulma-start-0.0.5.tgz",
"integrity": "sha512-Sl8mdbmxa8eZJmvAfvUqQ1yptGG/kC+VvxixH3oWj1n87rpzFetotcrIs0mldD8t6Cby3Nv+hxA/2pkzDwkaBQ=="
},
"node_modules/bulma-toast": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/bulma-toast/-/bulma-toast-2.4.2.tgz",
"integrity": "sha512-c3ehyeXhhvxevKICP1VKsFtZlQH+H6/S+yYY4TFyLRfkbw3mh71eGazlNc/YEIvXQSbxHpD2f+WDc02xECuV9g=="
}
},
"dependencies": {
@ -30,6 +36,11 @@
"version": "0.0.5",
"resolved": "https://registry.npmjs.org/bulma-start/-/bulma-start-0.0.5.tgz",
"integrity": "sha512-Sl8mdbmxa8eZJmvAfvUqQ1yptGG/kC+VvxixH3oWj1n87rpzFetotcrIs0mldD8t6Cby3Nv+hxA/2pkzDwkaBQ=="
},
"bulma-toast": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/bulma-toast/-/bulma-toast-2.4.2.tgz",
"integrity": "sha512-c3ehyeXhhvxevKICP1VKsFtZlQH+H6/S+yYY4TFyLRfkbw3mh71eGazlNc/YEIvXQSbxHpD2f+WDc02xECuV9g=="
}
}
}

View file

@ -1,6 +1,7 @@
{
"dependencies": {
"bulma": "^0.9.4",
"bulma-start": "^0.0.5"
"bulma-start": "^0.0.5",
"bulma-toast": "^2.4.2"
}
}