fujin/gruvbox-wallpapers
1
0
Fork 0
mirror of https://github.com/AngelJumbo/gruvbox-wallpapers.git synced 2026-08-12 00:42:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Start fixing sticky floating buttons

Browse Source
This commit is contained in:
Katy248
2024-06-05 14:35:27 +00:00
parent 4a1caafdfe
commit 0dfad27294
2 changed files with 88 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
build.sh
+19 -15
View File
@@ -49,20 +49,8 @@ echo "<!DOCTYPE html>
</head>
<body>
<div class='float-btns'>
<a href='https://github.com/AngelJumbo/gruvbox-wallpapers' target='_blank' class='btn float-btn' title='Source code' >
<span>
<i class='fa-brands fa-github'></i>
</span>
</a>
<button onclick='switchTheme()' class='btn float-btn' title='Switch theme'>
<span>
<i id='light-icon' class='fa-solid fa-sun'></i>
<i id='dark-icon' class='fa-solid fa-moon'></i>
</span>
</button>
</div>
<main>
<h1>Gruvbox Wallpapers</h1>" > ./index.html
color=1
@@ -122,7 +110,7 @@ do
color=1
fi
done
echo "</main>" >> ./index.html
echo "<script>
window.onload = () => {" >> ./index.html
echo "hideAll();" >> ./index.html
@@ -136,6 +124,22 @@ echo "
}
</script>" >> ./index.html
echo "
<sidebar class='float-container'>
<div class='float-btns'>
<a href='https://github.com/AngelJumbo/gruvbox-wallpapers' target='_blank' class='btn float-btn' title='Source code' >
<span>
<i class='fa-brands fa-github'></i>
</span>
</a>
<button onclick='switchTheme()' class='btn float-btn' title='Switch theme'>
<span>
<i id='light-icon' class='fa-solid fa-sun'></i>
<i id='dark-icon' class='fa-solid fa-moon'></i>
</span>
</button>
</div>
</sidebar>" >> ./index.html
echo "
</body>
style.css
+69 -5
View File
@@ -31,11 +31,61 @@
body {
background-color: var(--bg-color);
padding-left: 15%;
padding-right: 15%;
container-type: inline-size;
font-family: "Curier New", monospace;
margin: 0;
min-height: 100svh;
}
main {
display: flex;
flex-direction: column;
padding-left: 1rem;
padding-right: 1rem;
/* height: 100svh; */
}
@container (min-width: 640px) {
main {
padding-left: 4rem;
padding-right: 4rem;
}
}
@container (min-width: 768px) {
main {
padding-left: 8rem;
padding-right: 8rem;
}
}
@container (min-width: 1024px) {
main {
padding-left: 12rem;
padding-right: 12rem;
}
}
@container (min-width: 1280px) {
main {
padding-left: 14rem;
padding-right: 14rem;
}
}
@container (min-width: 1536px) {
main {
padding-left: 18rem;
padding-right: 18rem;
}
}
* {
color: var(--fg-color);
border: none;
@@ -186,13 +236,27 @@ img:hover {
display: none;
}
.float-container {
position: sticky;
top: 0;
/* width: 100vw; */
/* height: 100vh; */
display: flex;
flex-direction: row;
justify-content: end;
align-content: centers;
}
.float-btns {
position: fixed;
bottom: 1rem;
right: 2rem;
/* position: static; */
margin-bottom: 1rem;
margin-right: 2rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
justify-content: end;
}
.btn.float-btn {