fujin/gruvbox-wallpapers
1
0
Fork 0
mirror of https://github.com/AngelJumbo/gruvbox-wallpapers.git synced 2026-10-14 21:26:18 +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> </head>
<body> <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> <main>
<h1>Gruvbox Wallpapers</h1>" > ./index.html <h1>Gruvbox Wallpapers</h1>" > ./index.html
@@ -128,22 +140,6 @@ echo "
} }
</script>" >> ./index.html </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 " echo "
</body> </body>
layout.css
+7 -15
View File
@@ -1,3 +1,4 @@
main { main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -5,41 +6,32 @@ main {
flex-grow: 1; flex-grow: 1;
} }
footer { @media screen and (min-width: 640px) {
position: sticky;
bottom: 0;
margin-top: 2rem;
display: flex;
flex-direction: row;
justify-content: end;
}
@container (min-width: 640px) {
main { main {
padding: 0 4rem; padding: 0 4rem;
} }
} }
@container (min-width: 768px) { @media screen and (min-width: 768px) {
main { main {
padding: 0 8rem; padding: 0 8rem;
} }
} }
@container (min-width: 1024px) { @media screen and (min-width: 1024px) {
main { main {
padding: 0 12rem; padding: 0 12rem;
} }
} }
@container (min-width: 1280px) { @media screen and (min-width: 1280px) {
main { main {
padding: 0 14rem; padding: 0 14rem;
} }
} }
@container (min-width: 1536px) { @media screen and (min-width: 1536px) {
main { main {
padding: 0 18rem; padding: 0 18rem;
} }
} }
style.css
+4 -1
View File
@@ -32,7 +32,7 @@
body { body {
background-color: var(--bg-color); background-color: var(--bg-color);
container-type: inline-size; /*container-type: inline-size;*/
font-family: "Curier New", monospace; font-family: "Curier New", monospace;
margin: 0; margin: 0;
min-height: 100svh; min-height: 100svh;
@@ -137,6 +137,9 @@ img:hover {
} }
.float-btns { .float-btns {
position: fixed;
bottom: 0;
right: 0;
margin-bottom: 1rem; margin-bottom: 1rem;
margin-right: 1rem; margin-right: 1rem;
display: flex; display: flex;