mirror of
https://github.com/zyqunix/tools.git
synced 2025-07-05 14:00:31 +02:00
remove some bullshit and change to vars
This commit is contained in:
zyqunix
parent
6316f390d7
commit
3631d57309
14 changed files with 90 additions and 510 deletions
10
404.css
10
404.css
|
|
@ -1,15 +1,5 @@
|
|||
@import url(global.css);
|
||||
|
||||
.main {
|
||||
text-align: center;
|
||||
background-color: #4b4b4b;
|
||||
border-radius: 8px;
|
||||
padding: 30px 100px;
|
||||
box-shadow: 0 4px 10px rgba(16, 16, 16, 0.5);
|
||||
width: 30vw;
|
||||
max-width: 30vw;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
|
|
|||
2
404.html
2
404.html
|
|
@ -8,7 +8,7 @@
|
|||
<link rel="stylesheet" href="/404.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="main">
|
||||
<div class="cards">
|
||||
<h1>❌ Eror: 404 Not Found ❌</h1>
|
||||
<h2>Looks like you found an unfinished site or were redirected to the wrong page!</h2>
|
||||
<h2>Go back to the <a href="https://fentseller.lol">main page</a> or <a href="https://github.com/zyqunix/tools/issues/new">open an issue on my GitHub</a></h2>
|
||||
|
|
|
|||
|
|
@ -1,311 +0,0 @@
|
|||
@import url(/global.css);
|
||||
|
||||
img {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #4c4f69;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background-color: #eff1f5;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.languages {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 900;
|
||||
color: #1e66f5;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
#profile-picture {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 24px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.time,
|
||||
.weather,
|
||||
.age,
|
||||
.hobbies {
|
||||
font-size: 18px;
|
||||
color: #5c5f77;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.hobbies {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.cards {
|
||||
background-color: #e6e9ef;
|
||||
border: 2px solid #bcc0cc;
|
||||
}
|
||||
|
||||
.cards:hover {
|
||||
border: 2px solid #acb0be;
|
||||
}
|
||||
|
||||
#status {
|
||||
font-weight: bold;
|
||||
margin: 10px 0 15px 10px;
|
||||
color: #7287fd;
|
||||
}
|
||||
|
||||
.activity {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
#activity-name {
|
||||
flex-grow: 1;
|
||||
text-align: left;
|
||||
color: #5c5f77;
|
||||
}
|
||||
|
||||
#activity-image {
|
||||
display: block;
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
.languages,
|
||||
.contact,
|
||||
.software {
|
||||
margin-top: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.language-item {
|
||||
display: block;
|
||||
background-color: #dde0e8;
|
||||
padding: 10px 15px;
|
||||
border-radius: 8px;
|
||||
transition: background-color 0.3s, transform 0.2s;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.language-item:hover {
|
||||
background-color: #ccd0da;
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.language-item:hover span,
|
||||
.language-item:hover .language-name {
|
||||
color: #1e66f5;
|
||||
}
|
||||
|
||||
.name-percent-container {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div[class="name-percent-container"] > img.image {
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.language-item .language-name,
|
||||
.language-item .percent {
|
||||
font-size: 16px;
|
||||
color: #6c6f85;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.percentage-bar {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background-color: #bcc0cc;
|
||||
margin-top: 10px;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.percentage-bar .bar-after {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, #40a02b 0%, #a6e3a1 50%, #40a02b 100%);
|
||||
border-radius: 5px;
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 2s infinite ease-in;
|
||||
}
|
||||
|
||||
.language-item:hover .percentage-bar .bar-after {
|
||||
background: linear-gradient(to right, #179299 0%, #04a5e5 50%, #179299 100%);
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tooltip::after,
|
||||
a[class="skill-item tooltip"]::after,
|
||||
a[class^="software-item tooltip"]::after {
|
||||
content: attr(data-tooltip);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 125%;
|
||||
background-color: #dce0e8;
|
||||
border: 2px solid #ccd0da;
|
||||
color: #4c4f69;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.3s, visibility 0.3s;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.tooltip:hover::after {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: 100% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -100% 0;
|
||||
}
|
||||
}
|
||||
|
||||
#skills-div:not(#skills-div > h2) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 15px;
|
||||
margin: 20px auto 0 auto;
|
||||
width: calc(100% - 40px);
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.software:not(.software > h2) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.skill-item,
|
||||
.contact-item,
|
||||
.software-item {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #dde0e8;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
transition: background-color 0.3s, transform 0.2s;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
|
||||
text-align: center;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.skill-item {
|
||||
flex-direction: column;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.skill-item:hover,
|
||||
.software-item:hover {
|
||||
background-color: #ccd0da;
|
||||
transform: translateY(-5px);
|
||||
filter: brightness(1);
|
||||
}
|
||||
|
||||
.skill-item:hover .skill-name {
|
||||
color: #1e66f5;
|
||||
}
|
||||
|
||||
.skill-item > .image,
|
||||
.software-item > .image {
|
||||
margin-bottom: 10px;
|
||||
filter: brightness(0.75);
|
||||
}
|
||||
|
||||
.skill-item:hover > .image,
|
||||
.software-item:hover > .image {
|
||||
filter: brightness(1);
|
||||
}
|
||||
|
||||
.image {
|
||||
height: 50px;
|
||||
border-radius: 5px;
|
||||
transition: 0.1s;
|
||||
}
|
||||
|
||||
.software-item > .image {
|
||||
height: 50px !important;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.skill-name,
|
||||
.contact-name,
|
||||
.software-name {
|
||||
font-size: 16px;
|
||||
color: #6c6f85;
|
||||
transition: 0.1s;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
color: #4c4f69;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.contact-item:hover .contact-name,
|
||||
.software-item:hover .software-name {
|
||||
color: #1e66f5;
|
||||
}
|
||||
|
||||
.github-contact {
|
||||
background-color: #dce0e8;
|
||||
}
|
||||
|
||||
.github-contact:hover {
|
||||
background-color: #ccd0da;
|
||||
}
|
||||
|
||||
.instagram-contact {
|
||||
background-color: #f2d5cf;
|
||||
}
|
||||
|
||||
.instagram-contact:hover {
|
||||
background-color: #eebebe;
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@ img {
|
|||
}
|
||||
|
||||
body {
|
||||
color: #cdd6f4;
|
||||
color: var(--text);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
|
|
@ -24,7 +24,7 @@ body {
|
|||
|
||||
strong {
|
||||
font-weight: 900;
|
||||
color: #cdd6f4;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.info {
|
||||
|
|
@ -185,7 +185,7 @@ div[class="name-percent-container"] > img.image {
|
|||
}
|
||||
|
||||
.language-item:hover .percentage-bar .bar-after {
|
||||
background: linear-gradient(to right, #cdd6f4 0%, #b4befe 50%, #cdd6f4 100%);
|
||||
background: linear-gradient(to right, var(--text) 0%, #b4befe 50%, var(--text) 100%);
|
||||
animation: shimmer 2s infinite ease-in;
|
||||
background-size: 200% 100%;
|
||||
}
|
||||
|
|
@ -206,7 +206,7 @@ a[class^="software-item tooltip"]::after {
|
|||
bottom: 125%;
|
||||
background-color: #1e1e2e;
|
||||
border: 1px solid #6c7086;
|
||||
color: #cdd6f4;
|
||||
color: var(--text);
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
|
|
@ -339,7 +339,7 @@ a[class^="software-item tooltip"]::after {
|
|||
}
|
||||
|
||||
.card-header {
|
||||
color: #cdd6f4;
|
||||
color: var(--text);
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
grid-column: span 2;
|
||||
|
|
@ -722,7 +722,7 @@ div[class="cards sitemap shadow"] > h4 {
|
|||
.themes > button {
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
color: #cdd6f4;
|
||||
color: var(--text);
|
||||
border-radius: 3px;
|
||||
padding: 4px;
|
||||
margin-right: 10px;
|
||||
|
|
|
|||
|
|
@ -9,11 +9,7 @@
|
|||
<link rel="shortcut icon" href="https://rimgo.pussthecat.org/RFbdMMB.png" type="image/x-icon">
|
||||
</head>
|
||||
<body>
|
||||
<marquee id="ad" behavior="scroll" direction="left" aria-label="Site donation message">
|
||||
Help maintain this site by <a href="https://fentseller.lol/bio">donating crypto</a> (server costs are $2/month). If you don't want to or can't, that's alright :)! You can submit audios <a href="https://github.com/zyqunix/tools/issues">here</a>
|
||||
</marquee>
|
||||
|
||||
<div class="main" id="main">
|
||||
<div class="cards" id="main">
|
||||
<h3 id="played">No sound played. Press the button!</h3>
|
||||
<button id="sound1 playButton">Play <strong>autist</strong>
|
||||
<audio src="wav/sound1.wav"></audio>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,9 @@
|
|||
@import url(/global.css);
|
||||
|
||||
.top {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
marquee {
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
padding: 10px 0;
|
||||
background-color: #454545;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button:not(#toggle) {
|
||||
color: white;
|
||||
background-color: #b49cdf;
|
||||
border: 2px solid #9f8ac7;
|
||||
color: var(--white);
|
||||
background-color: var(--mauve);
|
||||
border: 2px solid var(--mauve);
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
transition: 0.1s ease-in-out;
|
||||
|
|
@ -26,29 +12,7 @@ button:not(#toggle) {
|
|||
|
||||
}
|
||||
|
||||
#toggle {
|
||||
left: 10px;
|
||||
bottom: 10px;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
color: #c0c0c0;
|
||||
background-color: #454545;
|
||||
border: 2px solid #404040;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#toggle:hover {
|
||||
color: #b49cdf;
|
||||
background-color: #404040;
|
||||
}
|
||||
|
||||
button:hover:not(#toggle) {
|
||||
background-color: #9f8ac7;
|
||||
border-color: #947fb9;
|
||||
}
|
||||
|
||||
.main {
|
||||
.cards {
|
||||
max-width: 80%;
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
|
|
@ -59,7 +23,7 @@ button:hover:not(#toggle) {
|
|||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.main {
|
||||
.cards {
|
||||
max-width: 50%;
|
||||
padding: 40px;
|
||||
transform: scale(1.2);
|
||||
|
|
@ -69,14 +33,10 @@ button:hover:not(#toggle) {
|
|||
padding: 12px 30px;
|
||||
}
|
||||
|
||||
marquee {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1023px) {
|
||||
.main {
|
||||
.cards {
|
||||
max-width: 70%;
|
||||
padding: 35px;
|
||||
}
|
||||
|
|
@ -84,27 +44,15 @@ button:hover:not(#toggle) {
|
|||
button {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
marquee {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.main {
|
||||
.cards {
|
||||
max-width: 100%;
|
||||
padding: 20px;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
marquee {
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
|
|
|
|||
55
global.css
55
global.css
|
|
@ -8,6 +8,38 @@
|
|||
src: url('/Fonts/JetBrainsMono/JetBrainsMono-Regular.woff2');
|
||||
}
|
||||
|
||||
:root {
|
||||
--white: #fff;
|
||||
--pastel-violet: #c099ff;
|
||||
--rosewater: #f5e0dc;
|
||||
--flamingo: #f2cdcd;
|
||||
--pink: #f5c2e7;
|
||||
--mauve: #cba6f7;
|
||||
--red: #f38ba8;
|
||||
--maroon: #eba0ac;
|
||||
--peach: #fab387;
|
||||
--yellow: #f9e2af;
|
||||
--green: #a6e3a1;
|
||||
--teal: #94e2d5;
|
||||
--sky: #89dceb;
|
||||
--sapphire: #74c7ec;
|
||||
--blue: #89b4fa;
|
||||
--lavender: #b4befe;
|
||||
--text: #cdd6f4;
|
||||
--subtext1: #bac2de;
|
||||
--subtext0: #a6adc8;
|
||||
--overlay2: #9399b2;
|
||||
--overlay1: #7f849c;
|
||||
--overlay0: #6c7086;
|
||||
--surface2: #585b70;
|
||||
--surface1: #45475a;
|
||||
--surface0: #313244;
|
||||
--base: #1e1e2e;
|
||||
--mantle: #181825;
|
||||
--crust: #11111b;
|
||||
--bg-primary: #1e1e2e;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -16,8 +48,8 @@ body {
|
|||
min-height: 100vh;
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
background-color: #1e1e2e;
|
||||
color: #cdd6f4;
|
||||
background-color: var(--base);
|
||||
color: var(--text);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -26,16 +58,17 @@ body {
|
|||
}
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
a:hover, svg:hover {
|
||||
color: #c099ff;
|
||||
a:hover,
|
||||
svg:hover {
|
||||
color: var(--pastel-violet);
|
||||
}
|
||||
|
||||
.cards {
|
||||
background-color: #313244;
|
||||
border: 2px solid #45475a;
|
||||
background-color: var(--mantle);
|
||||
border: 2px solid var(--surface1);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
width: 600px !important;
|
||||
|
|
@ -44,7 +77,7 @@ a:hover, svg:hover {
|
|||
}
|
||||
|
||||
.cards:hover {
|
||||
border: 2px solid #585b70;
|
||||
border: 2px solid var(--surface2);
|
||||
}
|
||||
|
||||
.shadow {
|
||||
|
|
@ -63,9 +96,9 @@ a:hover, svg:hover {
|
|||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 125%;
|
||||
background-color: #1e1e2e;
|
||||
border: 1px solid #6c7086;
|
||||
color: #cdd6f4;
|
||||
background-color: var(--base);
|
||||
border: 1px solid var(--overlay0);
|
||||
color: var(--text);
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
|
|
|
|||
|
|
@ -11,38 +11,17 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div id="topbar" class="topbar">
|
||||
<button id="themeToggle" class="theme-button" title="Toggle Dark/Light Mode">
|
||||
<svg fill="#747474" height="24px" width="24px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 472.618 472.618" xml:space="preserve"
|
||||
style="--darkreader-inline-fill: #747474;" data-darkreader-inline-fill="">
|
||||
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
||||
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
|
||||
<g id="SVGRepo_iconCarrier">
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M380.525,337.291c-135.427,0-245.302-109.773-245.302-245.302c0-32.502,6.338-63.575,17.991-91.988 C63.372,36.286,0,124.39,0,227.315c0,135.427,109.875,245.302,245.302,245.302c102.923,0,191.029-63.472,227.316-153.315 C444.201,330.954,413.129,337.291,380.525,337.291z">
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div id="welcome" class="welcome">
|
||||
<h3 id="welcome-title">Welcome!</h3>
|
||||
<h4 id="welcome-description">This is a website for future tools. The source code can be found on my <a
|
||||
href="https://github.com/zyqunix/tools" target="_blank">GitHub</a>!</h4>
|
||||
<h4 id="welcome-test-it">Clicking "Test It" will open the tool in the current tab.</h4>
|
||||
<h4 id="welcome-future">More tools will come in the future.</h4>
|
||||
<select title="Change Language" name="Language" id="langauge-selector">
|
||||
<option value="en">English 🇬🇧</option>
|
||||
<option value="de">Deutsch 🇩🇪</option>
|
||||
</select>
|
||||
|
||||
<h6>why is this one so much worse than /projects T_T T_T T_T</h6>
|
||||
</div>
|
||||
|
||||
<div id="welcome" class="welcome">
|
||||
<h1 id="welcome-title">Welcome!</h1>
|
||||
<h2 id="welcome-description">This is a website for future tools. The source code can be found on my <a href="https://github.com/zyqunix/tools" target="_blank">GitHub</a>!</h2>
|
||||
<h3 id="welcome-test-it">Clicking "Test It" will open the tool in the current tab.</h3>
|
||||
<h3 id="welcome-future">More tools will come in the future.</h3>
|
||||
</div>
|
||||
|
||||
<div class="tools-main" id="toolsMain"></div>
|
||||
|
|
|
|||
|
|
@ -1,59 +1,13 @@
|
|||
@font-face {
|
||||
font-family: 'Hack';
|
||||
src: url('/Fonts/Hack/Hack-Regular.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'JetBrainsMono';
|
||||
src: url('/Fonts/JetBrainsMono/JetBrainsMono-Regular.woff2');
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
font-family: monospace;
|
||||
font-size: 1rem;
|
||||
background-color: #2a2a2a;
|
||||
color: #f0f0f0;
|
||||
overflow-x: hidden;
|
||||
font-family: 'Hack', 'JetBrainsMono', monospace;
|
||||
}
|
||||
@import url(/global.css);
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: #c099ff;
|
||||
color: #2a2a2a;
|
||||
}
|
||||
|
||||
#motd {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
gap: 2vw;
|
||||
width: 100%;
|
||||
max-width: 100vw;
|
||||
position: fixed;
|
||||
background-color: rgba(59, 59, 59, 0.885);
|
||||
backdrop-filter: blur(5px);
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
font-size: large;
|
||||
top: 0;
|
||||
border-bottom: 1px solid rgba(70, 70, 70, 0.885);
|
||||
z-index: 9999;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.welcome {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
|
|
@ -73,14 +27,9 @@ html {
|
|||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.tools-main {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2.5vw;
|
||||
justify-content: center;
|
||||
min-height: 10vh;
|
||||
max-width: 80vw;
|
||||
margin-bottom: 100px;
|
||||
.cards {
|
||||
margin-top: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tool-div {
|
||||
|
|
@ -98,18 +47,13 @@ html {
|
|||
max-width: 90vw;
|
||||
width: 50vw;
|
||||
box-shadow: 0 4px 10px rgba(16, 16, 16, 0.5);
|
||||
scale: 0.79;
|
||||
margin-bottom: -100px;
|
||||
}
|
||||
|
||||
.tool-header {
|
||||
margin-bottom: 0;
|
||||
padding-top: 15px;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.tool-desc {
|
||||
margin: 5px;
|
||||
font-weight: normal;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
|
@ -117,24 +61,23 @@ html {
|
|||
.tool-media {
|
||||
max-width: 30vw;
|
||||
border-radius: 5px;
|
||||
margin: 10px;
|
||||
margin: 25px 10px;
|
||||
}
|
||||
|
||||
.visit-tool {
|
||||
padding: 10px 20px;
|
||||
background-color: rgb(40, 100, 65);
|
||||
color: #fff;
|
||||
color: var(--subtext1);
|
||||
border: 2px solid rgb(75, 135, 100);
|
||||
border-radius: 4px;
|
||||
transition: 0.1s;
|
||||
font-weight: bolder;
|
||||
font-size: large;
|
||||
margin: 5px 0 15px 0;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.visit-tool:hover {
|
||||
background-color: rgb(35, 95, 60);
|
||||
border-color: rgb(90, 150, 115);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.slideshow-container {
|
||||
|
|
@ -160,8 +103,12 @@ html {
|
|||
margin-left: 30px;
|
||||
}
|
||||
|
||||
#langauge-selector, option {
|
||||
color: var(--surface0) !important;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.tools-main {
|
||||
.cards {
|
||||
max-width: 100%;
|
||||
gap: 1.5vw;
|
||||
}
|
||||
|
|
@ -174,7 +121,7 @@ html {
|
|||
}
|
||||
|
||||
.tool-header {
|
||||
font-size: 1.2rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.tool-desc {
|
||||
|
|
@ -199,7 +146,7 @@ html {
|
|||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.tools-main {
|
||||
.cards {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -25,12 +25,12 @@ function renderTools(filteredTools, language = 'en') {
|
|||
};
|
||||
|
||||
const toolItem = document.createElement("div");
|
||||
toolItem.className = "tool-div";
|
||||
toolItem.className = "cards";
|
||||
|
||||
toolItem.innerHTML = `
|
||||
<h1 class="tool-header">↬ ${toolData.name} ↫</h1>
|
||||
<h2 class="tool-subhead">${toolData.subheader}</h2>
|
||||
<h2 class="tool-desc">${toolData.description}</h2>
|
||||
<h3 class="tool-header">↬ ${toolData.name} ↫</h3>
|
||||
<h4 class="tool-subhead">${toolData.subheader}</h4>
|
||||
<h4 class="tool-desc">${toolData.description}</h4>
|
||||
<img class="tool-media" src="assets/${tool.name}.png" alt="${tool.name} Image">
|
||||
<a id="visit" class="visit-tool" href="${toolData.url}">Visit "${toolData.name}"!</a>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<title>zy's Timer</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main">
|
||||
<div class="cards shadow">
|
||||
<span id="time">00:00:00:00</span>
|
||||
<div class="buttons">
|
||||
<button id="start">Start</button>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,16 @@
|
|||
@import url(/global.css);
|
||||
|
||||
div.main {
|
||||
div.cards {
|
||||
padding: 60px;
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
background-color: #3a3a3a;
|
||||
border-radius: 10px;
|
||||
margin: 50px auto;
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
|
||||
max-width: 600px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.main button {
|
||||
div.cards button {
|
||||
margin: 0 10px;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue