39 lines
No EOL
2 KiB
HTML
39 lines
No EOL
2 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">
|
|
<button class="sb_button">lorem ipsum</button>
|
|
<button class="sb_button">dolor sit amet</button>
|
|
</div>
|
|
<div class="box-content-1">
|
|
<div class="box-v">
|
|
<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>
|
|
<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.</p>
|
|
<button>Test again</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |