feat: basic mobile layout

This commit is contained in:
Orangerot 2024-12-06 04:07:43 +01:00
parent b5b7ca1f8b
commit 2a0bad598b

View file

@ -9,8 +9,8 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<title>Imagine - Image Editor</title> <title>Imagine - Image Editor</title>
</head> </head>
<body> <body style="padding-top: 100vh">
<div class="navbar columns is-mobile"> <div class="navbar columns is-mobile is-fixed-top" style="z-index: -1">
<div class="column"> <div class="column">
<div class="hero is-fullheight"> <div class="hero is-fullheight">
<div class="hero-body"> <div class="hero-body">
@ -88,5 +88,52 @@
</aside> </aside>
</div> </div>
</div> </div>
<div class="notification is-fullwidth is-hidden-desktop">
<button class="button is-primary">
Save Image
</button>
<button class="button is-secondary">
Share
</button>
<p class="menu-label">
Color Correction
</p>
<div class="field">
<label class="label">Brightness</label>
<div class="control">
<input type="range"
id="slider0"
class="slider is-fullwidth is-primary"
min="0" max="100" value="50" step="1">
</div>
</div>
<div class="field">
<label class="label">Saturation</label>
<div class="control">
<input type="range"
id="slider0"
class="slider is-fullwidth is-primary"
min="0" max="100" value="50" step="1">
</div>
</div>
<div class="field">
<label class="label">Contrast</label>
<div class="control">
<input type="range"
id="slider0"
class="slider is-fullwidth is-primary"
min="0" max="100" value="50" step="1">
</div>
</div>
<p class="menu-label">
Distortion
</p>
<p class="menu-label">
Blur and Sharpen
</p>
</div>
</body> </body>
</html> </html>