2024-12-05 05:33:27 +00:00
< html >
< head >
<!-- This is the Ubuntu Font beginning. INCLUDE THIS! -->
< link rel = "preconnect" href = "https://fonts.googleapis.com" >
< link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin >
< link href = "https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel = "stylesheet" >
<!-- This is the Ubuntu Font ending. INCLUDE THIS! -->
< link href = './output/yaru-dark.css' rel = 'stylesheet' >
< / head >
< body >
< div class = "header" >
Hello yaru!
< / div >
2024-12-05 07:18:52 +00:00
< div class = "box" >
< div class = "sidebar" >
2024-12-05 20:12:02 +00:00
< 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 >
2024-12-05 07:18:52 +00:00
< / div >
< div class = "box-content-1" >
2024-12-05 07:22:09 +00:00
< div class = "box-v" >
2024-12-05 20:12:02 +00:00
< section id = "top" >
2024-12-05 07:22:09 +00:00
< div class = "box-content-1" >
< h1 > Hello yaru!< / h1 >
< h2 > Hello yaru!< / h2 >
< h3 > Hello yaru!< / h3 >
< 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 >
2024-12-05 20:12:02 +00:00
< section id = "mid" >
2024-12-05 07:22:09 +00:00
< div class = "box-content-1" >
< h1 > Hello again yaru!< / h1 >
< h2 > Hello again yaru!< / h2 >
< h3 > Hello again yaru!< / h3 >
< 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 >
2024-12-05 20:12:02 +00:00
< 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 >
2024-12-05 07:22:09 +00:00
< / div >
2024-12-05 07:18:52 +00:00
< / div >
< / div >
2024-12-05 05:33:27 +00:00
< / body >
< / html >
