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

remove footer because it does not allow the selection of the botom sections

Browse Source
This commit is contained in:
AngelJumbo
2024-06-08 08:20:51 -05:00
parent cbe2e52507
commit 4899b3d32d
3 changed files with 24 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
build.sh
+13 -17
View File
@@ -49,7 +49,19 @@ 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
@@ -128,22 +140,6 @@ echo "
}
</script>" >> ./index.html
echo "
<footer>
<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>
</footer>" >> ./index.html
echo "
</body>
layout.css
+7 -15
View File
@@ -1,3 +1,4 @@
main {
display: flex;
flex-direction: column;
@@ -5,41 +6,32 @@ main {
flex-grow: 1;
}
footer {
position: sticky;
bottom: 0;
margin-top: 2rem;
display: flex;
flex-direction: row;
justify-content: end;
}
@container (min-width: 640px) {
@media screen and (min-width: 640px) {
main {
padding: 0 4rem;
}
}
@container (min-width: 768px) {
@media screen and (min-width: 768px) {
main {
padding: 0 8rem;
}
}
@container (min-width: 1024px) {
@media screen and (min-width: 1024px) {
main {
padding: 0 12rem;
}
}
@container (min-width: 1280px) {
@media screen and (min-width: 1280px) {
main {
padding: 0 14rem;
}
}
@container (min-width: 1536px) {
@media screen and (min-width: 1536px) {
main {
padding: 0 18rem;
}
}
}
style.css
+4 -1
View File
@@ -32,7 +32,7 @@
body {
background-color: var(--bg-color);
container-type: inline-size;
/*container-type: inline-size;*/
font-family: "Curier New", monospace;
margin: 0;
min-height: 100svh;
@@ -137,6 +137,9 @@ img:hover {
}
.float-btns {
position: fixed;
bottom: 0;
right: 0;
margin-bottom: 1rem;
margin-right: 1rem;
display: flex;