60 lines
No EOL
3.1 KiB
HTML
60 lines
No EOL
3.1 KiB
HTML
<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-light.css' rel='stylesheet'>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
Hello yaru!
|
|
</div>
|
|
<div class="box">
|
|
<div class="sidebar">
|
|
<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>
|
|
<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>
|
|
<section id="mid">
|
|
<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>
|
|
<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>
|
|
</body>
|
|
</html> |