conzer12/yaru.css
1
0
Fork 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity Actions

Fix sudevars abd scrolling, ready to ship

Browse source
This commit is contained in:
conzer 2024-12-05 15:12:02 -05:00
parent 45c765a6bc
commit d28f8ee07e
4 changed files with 112 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

25
example.html
View file

@ -13,11 +13,13 @@
</div>
<div class="box">
<div class="sidebar">
<button class="sb_button">lorem ipsum</button>
<button class="sb_button">dolor sit amet</button>
<a href="#top"><button class="sb_button">top of page</button></a>
<a href="#mid"><button class="sb_button">middle of page</button></a>
<a href="#bot"><button class="sb_button">bottom of page</button></a>
</div>
<div class="box-content-1">
<div class="box-v">
<section id="top">
<div class="box-content-1">
<h1>Hello yaru!</h1>
<h2>Hello yaru!</h2>
@ -25,6 +27,7 @@
<p>yaru.css is a css library attempting to recreate the Ubuntu Yaru style in a web format. it also works as it's own implementation of something like bootstrap with built in GTK style elements like Boxes and Popovers. This is a simple test page showing the different elements.</p>
<button>Test</button>
</div>
<section id="mid">
<div class="box-content-1">
<h1>Hello again yaru!</h1>
<h2>Hello again yaru!</h2>
@ -32,6 +35,24 @@
<p>You may have noticed this is a different item. yaru.css has the "box-v" div class for stacking different "box-content-1"s ontop of eachother, as long as the box-v is wrapped inside a box-content-1 of it's own. If you do not want this centering, just use two individual "box-content-1" classes.</p>
<button>Test again</button>
</div>
<div class="box-content-1">
<div class="col-btn">
<button>Lorum ipsum</button>
<button>dolor sit amet</button>
<button>idk</button>
<button>Lorum ipsum</button>
<button>dolor sit amet</button>
<button>idk</button>
<button>Lorum ipsum</button>
<button>dolor sit amet</button>
<button>idk</button>
<button>Lorum ipsum</button>
<button>dolor sit amet</button>
<button>idk</button>
</div>
<section id="bot"></section>
</div>
</div>
</div>
</div>