zyqunix/tools
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

forgot tbh

Browse source
This commit is contained in:
zyqunix 2024-10-30 23:37:32 +01:00
parent 63c5a6598f
commit 788edf270f
2 changed files with 34 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
index.html
View file

@ -29,6 +29,7 @@
</div> </div>
<a id="visit" class="visit-tool" href="/click.html">Test It</a> <a id="visit" class="visit-tool" href="/click.html">Test It</a>
</div> </div>
</div> </div>
<script src="theme.js"></script> <script src="theme.js"></script>

52
style.css
View file

@ -9,25 +9,33 @@ body {
transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s;
color: #f0f0f0; color: #f0f0f0;
flex-direction: column; flex-direction: column;
overflow-x: hidden;
} }
::selection { ::selection {
background-color: #3c7855; background-color: #3c7855;
} }
img {
user-select: none;
}
.topbar { .topbar {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 20px; justify-content: start;
gap: 2vw;
width: 100%; width: 100%;
max-width: 100vw;
position: fixed; position: fixed;
background-color: rgba(59, 59, 59, 0.885); background-color: rgba(59, 59, 59, 0.885);
padding: 20px; padding: 1.5vh 2vw;
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
font-size: large; font-size: large;
top: 0; top: 0;
border-bottom: 1px solid rgba(70, 70, 70, 0.885); border-bottom: 1px solid rgba(70, 70, 70, 0.885);
z-index: 9999; z-index: 9999;
overflow-x: hidden;
} }
.home { .home {
@ -41,7 +49,7 @@ body {
margin-left: 25px; margin-left: 25px;
margin-right: -10px; margin-right: -10px;
user-select: none; user-select: none;
cursor: pointer !important; cursor: pointer !important;
} }
.theme-button { .theme-button {
@ -60,7 +68,15 @@ body {
.welcome { .welcome {
text-align: center; text-align: center;
margin: 0; margin: 0;
width: 100%; width: 100vw;
max-width: 1920px;
line-height: 1.4;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 25px;
padding-top: 60px;
box-sizing: border-box;
overflow-wrap: break-word;
} }
.welcome * { .welcome * {
@ -70,14 +86,15 @@ body {
.tools-main { .tools-main {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 40px; gap: 2.5vw;
justify-content: center; justify-content: center;
min-height: 10vh; min-height: 10vh;
padding-top: 5vh; max-width: 100vw;
padding-bottom: 50px;
} }
#tool-div { #tool-div {
padding: 10px 30px 30px 30px; padding: 1vh 3vw;
background-color: rgba(75, 75, 75, 1); background-color: rgba(75, 75, 75, 1);
border: 2px solid rgba(80, 80, 80, 1); border: 2px solid rgba(80, 80, 80, 1);
border-radius: 7px; border-radius: 7px;
@ -87,8 +104,8 @@ body {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 75%; height: auto;
width: 500px; max-width: 90vw;
box-shadow: 0 4px 10px rgba(16, 16, 16, 0.5); box-shadow: 0 4px 10px rgba(16, 16, 16, 0.5);
} }
@ -103,7 +120,7 @@ body {
font-weight: normal; font-weight: normal;
} }
.tool-media { .tool-media {
height: 200px; height: 200px;
border-radius: 10px; border-radius: 10px;
margin: 10px; margin: 10px;
@ -115,11 +132,7 @@ body {
} }
.visit-tool { .visit-tool {
padding-top: 10px; padding: 10px 20px;
padding-bottom: 12px;
padding-right: 20px;
padding-left: 20px;
background-color: rgb(60, 120, 85); background-color: rgb(60, 120, 85);
color: #f0f0f0; color: #f0f0f0;
border: 2px solid rgb(75, 135, 100); border: 2px solid rgb(75, 135, 100);
@ -127,8 +140,7 @@ body {
transition: 0.1s; transition: 0.1s;
font-weight: bolder; font-weight: bolder;
font-size: large; font-size: large;
margin-bottom: 15px; margin: 5px 0 15px 0;
margin-top: 5px;
} }
.visit-tool:hover { .visit-tool:hover {
@ -136,17 +148,19 @@ body {
border-color: rgb(90, 150, 115); border-color: rgb(90, 150, 115);
} }
.slideshow-container { .slideshow-container {
position: relative; position: relative;
width: 100%; width: 90vw;
max-width: 500px; max-width: 500px;
margin: auto; margin: auto;
} }
.tool-image { .tool-image {
width: 100%; width: 100%;
max-width: 90vw;
max-height: 40vh;
border-radius: 10px; border-radius: 10px;
object-fit: contain;
} }
.prev, .next { .prev, .next {