Objects
There are multiple objects that are included with Modesta, here's a few of them:
Box container is a class made to collect everything inside a nice, flex box for you to put anything inside.
<div class="box-container">
<!-- Some nice content inside here -->
</div>Used to have labels on text to showcase that "this is important" I guess? You can combine the label class with colours too like label sun-flower-bg to get a nice yellow colour instead.
<p>My awesome app <span class="label">BETA</span></p>3 animated "sticks" to signify that something's loading. It looks like this:
<div class="loader">Loading...</div>This is used to have like a nice document shown in a paper style. ribbon is the background behind the paper at the top, you can easily change this by using <style> or custom CSS and change the background to it. An example of this usage can be shown inside https://blog.alexflipnote.dev
<section class="paper-container">
<div class="ribbon"></div>
<div class="paper">
<!-- Put some text inside here -->
</div>
</section>A parallax image that goes from left to right showing a background in fixed position all the way. You can add small, medium or large to the parallax class to change the size of how large it should be.
<div class="parallax-container">
<div class="parallax" style="put background inside here">
<div class="content">
<!-- Content shown inside parallax -->
</div>
</div>This can be used to show extra content to things you hover over. It can be applied to any elements and change directions by adding left and right.
<h1 class="tooltip" data-tooltip="Text on hover">Hello everyone</h1>
<p class="tooltip right" data-tooltip="Text from right">yes yes yes yes yes</p>Source: https://github.com/AlexFlipnote/Modesta/tree/master/scss/components/objects