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
Show stats Download patch file Download diff file Expand all files Collapse all files

25
example.html
View file

@ -13,11 +13,13 @@
</div> </div>
<div class="box"> <div class="box">
<div class="sidebar"> <div class="sidebar">
<button class="sb_button">lorem ipsum</button> <a href="#top"><button class="sb_button">top of page</button></a>
<button class="sb_button">dolor sit amet</button> <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>
<div class="box-content-1"> <div class="box-content-1">
<div class="box-v"> <div class="box-v">
<section id="top">
<div class="box-content-1"> <div class="box-content-1">
<h1>Hello yaru!</h1> <h1>Hello yaru!</h1>
<h2>Hello yaru!</h2> <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> <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> <button>Test</button>
</div> </div>
<section id="mid">
<div class="box-content-1"> <div class="box-content-1">
<h1>Hello again yaru!</h1> <h1>Hello again yaru!</h1>
<h2>Hello again yaru!</h2> <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> <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> <button>Test again</button>
</div> </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> </div>
</div> </div>

25
exampledark.html
View file

@ -13,11 +13,13 @@
</div> </div>
<div class="box"> <div class="box">
<div class="sidebar"> <div class="sidebar">
<button class="sb_button">lorem ipsum</button> <a href="#top"><button class="sb_button">top of page</button></a>
<button class="sb_button">dolor sit amet</button> <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>
<div class="box-content-1"> <div class="box-content-1">
<div class="box-v"> <div class="box-v">
<section id="top">
<div class="box-content-1"> <div class="box-content-1">
<h1>Hello yaru!</h1> <h1>Hello yaru!</h1>
<h2>Hello yaru!</h2> <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> <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> <button>Test</button>
</div> </div>
<section id="mid">
<div class="box-content-1"> <div class="box-content-1">
<h1>Hello again yaru!</h1> <h1>Hello again yaru!</h1>
<h2>Hello again yaru!</h2> <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> <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> <button>Test again</button>
</div> </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> </div>
</div> </div>

33
scss/yaru-dark.scss
View file

@ -3,6 +3,10 @@
$variant: 'dark'; $variant: 'dark';
html {
scroll-behavior: smooth;
}
body { body {
background-color: $bg_color; background-color: $bg_color;
color: $fg_color; color: $fg_color;
@ -52,6 +56,9 @@ button:hover {
}; };
.header { .header {
position: fixed;
top: 0;
z-index: 1000;
width: 100%; width: 100%;
padding: 10px; padding: 10px;
background-color: $headerbar_bg_color; background-color: $headerbar_bg_color;
@ -62,17 +69,19 @@ button:hover {
} }
.sidebar { .sidebar {
position: fixed;
top: 50px;
width: 200px; width: 200px;
height: 100%; height: 100%;
background-color: $sidebar_bg_color; background-color: $headerbar_bg_color;
color: $text_color; color: $text_color;
border-radius: 0 20px 20px 0; border-radius: 0 20px 20px 0;
padding: 20px; padding: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
overflow-y: hidden;
} }
.sb_button { .sb_button {
min-height: 48px; min-height: 48px;
width: 185px; width: 185px;
@ -121,3 +130,23 @@ button:hover {
max-width: 400px; max-width: 400px;
margin: auto; margin: auto;
} }
.col-btn {
display: flex;
flex-direction: column;
width: 200px;
}
.col-btn:first-child {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.col-btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
.col-btn:last-child {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}

36
scss/yaru-light.scss
View file

@ -4,6 +4,11 @@
$variant: 'light'; $variant: 'light';
html {
scroll-behavior: smooth;
}
body { body {
background-color: $bg_color; background-color: $bg_color;
color: $fg_color; color: $fg_color;
@ -53,6 +58,9 @@ button:hover {
}; };
.header { .header {
position: fixed;
top: 0;
z-index: 1000;
width: 100%; width: 100%;
padding: 10px; padding: 10px;
background-color: $headerbar_bg_color; background-color: $headerbar_bg_color;
@ -63,8 +71,10 @@ button:hover {
} }
.sidebar { .sidebar {
position: fixed;
top: 50px;
width: 200px; width: 200px;
height: 100%; height: calc(100vh - 50px);
background-color: $porcelain; background-color: $porcelain;
color: $text_color; color: $text_color;
border-radius: 0 20px 20px 0; border-radius: 0 20px 20px 0;
@ -72,6 +82,7 @@ button:hover {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
overflow-y: hidden;
} }
.sb_button { .sb_button {
@ -123,3 +134,26 @@ button:hover {
margin: auto; margin: auto;
} }
.col-btn {
display: flex;
flex-direction: column;
width: 200px;
}
.col-btn:first-child {
background-color: $porcelain;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.col-btn:not(:first-child):not(:last-child) {
border-radius: 0;
background-color: $porcelain;
}
.col-btn:last-child {
background-color: $porcelain;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}