zyqunix/pages
1
0
Fork 0
mirror of https://github.com/zyqunix/tools.git synced 2025-07-05 22:10:31 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

main

Browse source
This commit is contained in:
zyqunix 2025-06-12 11:37:10 +02:00
parent b2150a6161
commit 3a18f71575
3 changed files with 56 additions and 140 deletions
Download patch file Download diff file Expand all files Collapse all files

130
assets/css/style.css
View file

@ -13,7 +13,7 @@ body {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text-align: center; text-align: center;
background-color: #1e1e2e; background-color: var(--base);
min-height: 100vh; min-height: 100vh;
overflow-x: hidden; overflow-x: hidden;
} }
@ -35,7 +35,7 @@ strong {
width: 150px; width: 150px;
height: 150px; height: 150px;
border-radius: 50%; border-radius: 50%;
border: 3px solid #b4befe; border: 3px solid var(--lavender);
} }
.name { .name {
@ -47,26 +47,26 @@ strong {
.weather { .weather {
font-size: 18px; font-size: 18px;
margin-bottom: 10px; margin-bottom: 10px;
color: #bac2de; color: var(--subtext1);
} }
.age { .age {
font-size: 18px; font-size: 18px;
margin-top: 5px; margin-top: 5px;
color: #bac2de; color: var(--subtext1);
} }
.hobbies { .hobbies {
margin-top: 10px; margin-top: 10px;
font-size: 16px; font-size: 16px;
color: #bac2de; color: var(--subtext1);
display: block; display: block;
} }
.cards { .cards {
margin-top: 30px !important; margin-top: 30px !important;
background-color: #313244; background-color: var(--surface0);
border: 2px solid #45475a; border: 2px solid var(--surface1);
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
width: 600px !important; width: 600px !important;
@ -76,7 +76,7 @@ strong {
} }
.cards:hover { .cards:hover {
border: 2px solid #585b70; border: 2px solid var(--surface2);
} }
footer { footer {
@ -86,7 +86,7 @@ footer {
#status { #status {
font-weight: bold; font-weight: bold;
margin: 10px 0 15px 10px; margin: 10px 0 15px 10px;
color: #bac2de; color: var(--subtext1);
} }
.activity { .activity {
@ -101,7 +101,7 @@ footer {
#activity-name { #activity-name {
flex-grow: 1; flex-grow: 1;
text-align: left; text-align: left;
color: #bac2de; color: var(--subtext1);
} }
#activity-image { #activity-image {
@ -119,7 +119,7 @@ footer {
.language-item { .language-item {
display: block; display: block;
background-color: #313244; background-color: var(--surface0);
padding: 10px 15px; padding: 10px 15px;
border-radius: 8px; border-radius: 8px;
transition: background-color 0.3s, transform 0.2s; transition: background-color 0.3s, transform 0.2s;
@ -128,13 +128,13 @@ footer {
} }
.language-item:hover { .language-item:hover {
background-color: #45475a; background-color: var(--surface1);
transform: translateY(-5px); transform: translateY(-5px);
} }
.language-item:hover span, .language-item:hover span,
.language-item:hover .language-name { .language-item:hover .language-name {
color: #f5e0dc; color: var(--rosewater);
} }
.name-percent-container { .name-percent-container {
@ -153,14 +153,14 @@ div[class="name-percent-container"] > img.image {
.language-item .language-name { .language-item .language-name {
cursor: default; cursor: default;
font-size: 18px; font-size: 18px;
color: #a6adc8; color: var(--subtext0);
display: inline-block; display: inline-block;
margin-right: 10px; margin-right: 10px;
} }
.language-item .percent { .language-item .percent {
font-size: 16px; font-size: 16px;
color: #a6adc8; color: var(--subtext0);
font-weight: bold; font-weight: bold;
} }
@ -168,7 +168,7 @@ div[class="name-percent-container"] > img.image {
display: block; display: block;
width: 100%; width: 100%;
height: 8px; height: 8px;
background-color: #585b70; background-color: var(--surface2);
margin-top: 10px; margin-top: 10px;
border-radius: 5px; border-radius: 5px;
position: relative; position: relative;
@ -179,13 +179,13 @@ div[class="name-percent-container"] > img.image {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 5px; border-radius: 5px;
background: linear-gradient(to right, #b4befe 0%, #cba6f7 50%, #b4befe 100%); background: linear-gradient(to right, var(--lavender) 0%, var(--mauve) 50%, var(--lavender) 100%);
background-size: 200% 100%; background-size: 200% 100%;
animation: shimmer 2s infinite ease-in; animation: shimmer 2s infinite ease-in;
} }
.language-item:hover .percentage-bar .bar-after { .language-item:hover .percentage-bar .bar-after {
background: linear-gradient(to right, var(--text) 0%, #b4befe 50%, var(--text) 100%); background: linear-gradient(to right, var(--text) 0%, var(--lavender) 50%, var(--text) 100%);
animation: shimmer 2s infinite ease-in; animation: shimmer 2s infinite ease-in;
background-size: 200% 100%; background-size: 200% 100%;
} }
@ -204,8 +204,8 @@ a[class^="software-item tooltip"]::after {
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
bottom: 125%; bottom: 125%;
background-color: #1e1e2e; background-color: var(--base);
border: 1px solid #6c7086; border: 1px solid var(--overlay0);
color: var(--text); color: var(--text);
padding: 5px 10px; padding: 5px 10px;
border-radius: 5px; border-radius: 5px;
@ -272,7 +272,7 @@ a[class^="software-item tooltip"]::after {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: #313244; background-color: var(--surface0);
padding: 15px; padding: 15px;
border-radius: 8px; border-radius: 8px;
transition: background-color 0.3s, transform 0.2s; transition: background-color 0.3s, transform 0.2s;
@ -288,13 +288,13 @@ a[class^="software-item tooltip"]::after {
.skill-item:hover, .skill-item:hover,
.software-item:hover { .software-item:hover {
background-color: #45475a; background-color: var(--surface1);
transform: translateY(-5px); transform: translateY(-5px);
filter: brightness(1); filter: brightness(1);
} }
.skill-item:hover .skill-name { .skill-item:hover .skill-name {
color: #ffffff; color: var(--white);
} }
.skill-item > .image, .skill-item > .image,
@ -321,14 +321,14 @@ a[class^="software-item tooltip"]::after {
.skill-name { .skill-name {
font-size: 16px; font-size: 16px;
color: #a6adc8; color: var(--subtext0);
transition: 0.1s; transition: 0.1s;
} }
.contact-name, .contact-name,
.software-name { .software-name {
font-size: 16px; font-size: 16px;
color: #bac2de; color: var(--subtext1);
margin-left: 10px; margin-left: 10px;
transition: 0.1s; transition: 0.1s;
} }
@ -347,19 +347,19 @@ a[class^="software-item tooltip"]::after {
.contact-item:hover .contact-name, .contact-item:hover .contact-name,
.software-item:hover .software-name { .software-item:hover .software-name {
color: #ffffff; color: var(--white);
} }
.github-contact { .github-contact {
background-color: #11111b; background-color: var(--crust);
} }
.github-contact:hover { .github-contact:hover {
background-color: #1e1e2e; background-color: var(--base);
} }
.instagram-contact { .instagram-contact {
background-color: #b4befe; background-color: var(--lavender);
} }
.instagram-contact > span, .instagram-contact > span,
@ -369,15 +369,15 @@ a[class^="software-item tooltip"]::after {
} }
.instagram-contact:hover { .instagram-contact:hover {
background-color: #cba6f7; background-color: var(--mauve);
} }
.twitter-contact { .twitter-contact {
background-color: #89b4fa; background-color: var(--blue);
} }
.twitter-contact:hover { .twitter-contact:hover {
background-color: #b5befe; background-color: var(--lavender);
} }
.youtube-contact { .youtube-contact {
@ -550,7 +550,7 @@ div[class="stats cards"] > h2 {
div[class="stats cards"] > p { div[class="stats cards"] > p {
text-align: left; text-align: left;
color: #a6adc8; color: var(--subtext0);
} }
div[class="cards sitemap shadow"] > h3, div[class="cards sitemap shadow"] > h3,
@ -582,20 +582,20 @@ div[class="cards sitemap shadow"] > h4 {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background-color: #313244ee; background-color: var(--surface0)ee;
width: 600px; width: 600px;
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
visibility: hidden; visibility: hidden;
border: 2px solid #45475a; border: 2px solid var(--surface1);
opacity: 0; opacity: 0;
transition: 0.3s; transition: 0.3s;
z-index: 9999; z-index: 9999;
} }
.popup:hover { .popup:hover {
border: 2px solid #585b70; border: 2px solid var(--surface2);
} }
.top { .top {
@ -608,8 +608,8 @@ div[class="cards sitemap shadow"] > h4 {
padding: 4px; padding: 4px;
height: 32px; height: 32px;
width: 32px; width: 32px;
background-color: #e06c75; background-color: var(--red);
color: #ffffff; color: var(--white);
border: none; border: none;
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
@ -644,7 +644,7 @@ div[class="cards sitemap shadow"] > h4 {
} }
#artist:hover { #artist:hover {
color: #cba6f7; color: var(--mauve);
} }
#song-cover { #song-cover {
@ -655,7 +655,7 @@ div[class="cards sitemap shadow"] > h4 {
#song-url { #song-url {
display: flex; display: flex;
background-color: #89b4fa; background-color: var(--blue);
padding: 4px; padding: 4px;
border-radius: 6px; border-radius: 6px;
margin-right: 5px; margin-right: 5px;
@ -666,7 +666,7 @@ div[class="cards sitemap shadow"] > h4 {
#refresh { #refresh {
display: flex; display: flex;
background-color: #a6e3a1; background-color: var(--green);
padding: 4px; padding: 4px;
border-radius: 6px; border-radius: 6px;
max-width: 24px; max-width: 24px;
@ -680,16 +680,16 @@ div[class="cards sitemap shadow"] > h4 {
} }
#song-url:hover { #song-url:hover {
background-color: #89b4fa; background-color: var(--blue);
} }
#song-url:hover > svg { #song-url:hover > svg {
color: #ffffff; color: var(--white);
} }
#overlay { #overlay {
z-index: 10; z-index: 10;
background-color: #101010bb; background-color: rgba(16, 16, 16, 0.733);
width: 100%; width: 100%;
height: 100%; height: 100%;
position: fixed; position: fixed;
@ -700,45 +700,3 @@ div[class="cards sitemap shadow"] > h4 {
visibility: hidden; visibility: hidden;
transition: 0.3s; transition: 0.3s;
} }
.palette {
position: fixed;
right: 30px !important;
top: 30px !important;
width: 32px;
cursor: pointer;
pointer-events: all !important;
transition: transform 0.1s;
}
.palette:hover {
transform: scale(1.04);
}
.palette:active {
transform: scale(0.98);
}
.themes > button {
font-size: 16px;
cursor: pointer;
color: var(--text);
border-radius: 3px;
padding: 4px;
margin-right: 10px;
}
.themes {
font-size: 0;
}
.selected-theme {
background: #313244;
border: 2px solid #45475a;
cursor: not-allowed !important;
}
.unselected-theme {
background: #252734;
border: 2px solid #353646;
}

5
projects/index.html
View file

@ -8,10 +8,7 @@
<link rel="shortcut icon" href="https://rimgo.pussthecat.org/RFbdMMB.png" type="image/x-icon"> <link rel="shortcut icon" href="https://rimgo.pussthecat.org/RFbdMMB.png" type="image/x-icon">
</head> </head>
<body> <body>
<div class="cards shadow">
<div class="header-main">fentseller.lol needs your help! Donate crypto <a href="/bio">here</a> to keep these sites up!</div>
<div class="main">
<div class="header"> <div class="header">
<img class="img_header" src="https://rimgo.pussthecat.org/RFbdMMB.png" alt="zyqunix' projects image"> <img class="img_header" src="https://rimgo.pussthecat.org/RFbdMMB.png" alt="zyqunix' projects image">
<h2>My Projects:</h2> <h2>My Projects:</h2>

61
projects/style.css
View file

@ -7,44 +7,16 @@ img[class="img_header"] {
border-radius: 5px; border-radius: 5px;
} }
div.header-main { .cards {
width: 100%; width: 90% !important;
padding: 15px 20px 20px 20px; max-width: 85% !important;
display: flex;
position: fixed;
top: 0;
left: 0;
background-color: rgba(59, 59, 59, 0.885);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
div.header-main {
height: 1rem;
}
div.header-main a {
color: #c099ff;
margin: 0 5px 0 5px;
}
div.header {
width: 100%;
display: flex;
justify-content: center;
text-align: center;
}
.main {
width: 90%;
max-width: 85%;
text-align: center; text-align: center;
margin-bottom: 50px; margin-bottom: 50px;
margin-top: 50px; margin-top: 50px;
} }
h2 { h2 {
color: #ffffff; color: var(--white);
margin-bottom: 40px; margin-bottom: 40px;
font-size: 2rem; font-size: 2rem;
} }
@ -52,7 +24,7 @@ h2 {
.projects h2 { .projects h2 {
font-size: 1rem; font-size: 1rem;
margin-bottom: 20px; margin-bottom: 20px;
color: #ffffff; color: var(--white);
} }
.projects { .projects {
@ -67,7 +39,7 @@ h2 {
width: calc(33% - 40px); width: calc(33% - 40px);
max-width: 350px; max-width: 350px;
padding: 20px; padding: 20px;
background-color: rgba(59, 59, 59, 0.885); background-color: var(--surface0);
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
text-align: center; text-align: center;
@ -75,14 +47,14 @@ h2 {
.project-div *, .project-div *,
.futureproject-div * { .futureproject-div * {
color: white; color: var(--white);
} }
.project-div .visit-project, .project-div .visit-project,
.futureproject-div .visit-futureproject { .futureproject-div .visit-futureproject {
padding: 10px 20px; padding: 10px 20px;
background-color: #569470; background-color: var(--green);
color: #cfcfcf; color: var(--mantle);
border-radius: 5px; border-radius: 5px;
text-decoration: none; text-decoration: none;
margin: 0; margin: 0;
@ -97,18 +69,7 @@ h2 {
.project-div .visit-project strong, .project-div .visit-project strong,
.futureproject-div .visit-futureproject strong { .futureproject-div .visit-futureproject strong {
color: #cfcfcf; color: var(--mantle);
}
.project-div .visit-project:hover,
.futureproject-div .visit-futureproject:hover {
background-color: #47785b;
color: #ffffff;
}
.project-div .visit-project:hover strong,
.futureproject-div .visit-futureproject:hover strong {
color: #ffffff;
} }
.project-desc, .project-desc,
@ -124,7 +85,7 @@ h2 {
.project-desc a:hover, .project-desc a:hover,
.futureproject-desc a:hover { .futureproject-desc a:hover {
color: #c099ff; color: var(--pastel-violet);
} }
@media (max-width: 768px) { @media (max-width: 768px) {