Referring to the animation that plays the first time a user scrolls down to this area

Intention:

• start out far, text center aligns as you scroll
• background scrolls horizontally slowly as you scroll (scroll jacking?)

Don't worry about mobile for now.

Here's a vaguely similar example https://www.apple.com/ca/ipad-air/
The point is: stuff happens as you scroll, now when you first see it.

Why is it necessary:

Because it doesn't look very good right now.
And wilbur wants it to look differently.

Intention

see figma for more detailed specs and scrolling behaviour details

Why it's necessary

toolbar was unfinished beforehand w/filler text. Styling was also not ideal with little distinction between body & header, + font was too big.
New design decreases font size, replaces filler text with website sections, adds github clickout, our logo, and a thin bottom border for separation.

Intention:

When a user visits the website for the first time, the font will not load in during the first content paint.

Why is it necessary:

This is a jarring visual experience for the user.

Intention:

Easy to use and customize for each occasion.

Why is it necessary:

Exporting as SVG from figma messes up the logo, a svg made from illustrator is necessary as exporting PNG from figma has limited resolutions.

Intention:

Refactor the scss modules so common styles such as p, the background colors, etc, are inherited/imported/passed down as variable.

• Put all the hard-coded colors and font-sizes in one place
• Put all the "section container" margins in one place

And more I can't think of right now.

Why is it necessary:

This will help to unify style across the board and reduce code duplication.
This should be done as soon as possible to reduce workload.

Add the logo as favicon

Since there is no mobile design yet, just get it to look nice.

• Stop the overflowing
• Improve mobile layout
• Improve ultra-wide layout

What it looks like right now:

Intention:

Have it so that when the user click on links in the navbar, the page smoothly scrolls to the correct section, instead of jumping instantly.

Why is it necessary:

I think it looks better that way

Intention:

Code the mobile design of the dashboard.

Why is it necessary:

Accessibility and looks better.

Intention:

Isolate website content better

Why is it necessary:

security, control & sticky scroll sections are very crampt rn, there's not much isolation between the different sections of content

Intention:

The lodestone.cc website doesn't load on Safari, because it uses Regex features that aren't supported on the browser.

Console:

Website:

Notes:

• While the Safari Tech Preview does allow Regex lookbehinds, this feature isn't stable yet and it'll probably be a while before it is.
• https://caniuse.com/js-regexp-lookbehind
• Looking at the minified source it appears to be related to some kind of TOML-parsing library

Why is it necessary:

It makes the website unusable for anyone using Safari on their phone or computer.

This might be dependent on the mobile design.

Intention:

Get the tools section to look nice and work on mobile.
Try not to affect the current layout on desktop
Use media-queries or something.

Why is it necessary:

It looks very awkward right now...

Intention:

Increase user experience with quick navigation to certain sections of the site

Why is it necessary:

The links on the toolbar currently don't do anything, but according to the design should auto scroll to specified sections of the website

Intention:

reduce spacing between the subsections in power manage section.
could also make it dynamic

Why is it necessary:

current spacing is awkward and was for old placeholders.

Intention:

(note there's no image rn, just placeholdder text)

Note how in between the two headers, nothing shows up in the sticky image section.

Intention:

Add google analytics to the home page so we can track our traffic.

• Fix the off-centered lock
• Reduce the overall height, to make it look better

Intention:

Make the items more visible.

Why is it necessary:

Accessibility and looks better

https://github.com/Lodestone-Team/lodestone/issues

Intention:

Fix the clipping of the letter "g" that the line spacing is causing

Why is it necessary:

looks bad

Intention:

Keep packages up to date for security

https://github.com/Lodestone-Team/landing-page/security/dependabot

Why is it necessary:

So we don't have security vulnerabilities

Intention

Change the existing tickets' format to confront the template format

Why is it necessary

We should use the template whenever we can

Intention:

• Add margin between text-blocks
• Add margin to the bottom so we don't enter the footer too early
• Add maximum width of some sort to improve layout on ultra-wide

Don't worry about mobile for now, that is #3

Why is it necessary:

The amount of time/space allocated for each heading is too little.
As the user scrolls down, the image on the right fades too quickly.

The image also stops being sticky too early, before the last heading is even in the middle of the screen.

This is what it looks like right now.

Code mobile landing page design v1.3, EXCEPT the following parts

• Nav bar
• "Total Control" background animation
• Sticky image in "Power manage" section
• Footer section.

The main goal is to have all text readable, and nothing overflowing to the left/right side.

Intention:

• Implement footer with better style when design arrives

Why is it necessary:

• The current footer style on mobile is unnatural (as seen below)

Intention:

update the text on the site to be more descriptive and less repetitive

Why is it necessary:

current text is GPT-3 generated. we need to have actual human written text as this is against GPT-3 TOS (i think?) and the GPT-3 text is kinda bad

also, this might be against GPT-3 TOS. <3 PD10 kekekek

Intention:

Crucial.

Why is it necessary:

Refuses to elaborate.

• Have this section not show up at all on mobile (You can't set up a Minecraft server on your phone anyways)

What it looks like right now.

Intention:

Design a mobile version of the landing page in figma.
Preferably in a way such that the design can be achieved with just CSS changes to the existing site.

Why is it necessary:

Without a mobile design to reference, developers will come up with their own take on it, making different sections look different.