Its here!!! its finally here!!!!

This commit is contained in:
bingus_violet 2024-04-24 15:55:11 -05:00
parent f34bcea44a
commit 80ad607d92
6 changed files with 136 additions and 425 deletions

View file

@ -2,8 +2,8 @@
<html lang="en"> <html lang="en">
<head> <head>
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="stylesheet" type="text/css" href="/root.css"> <link rel="stylesheet" type="text/css" href="/root.css">
<link rel="stylesheet" type="text/css" href="/global.css">
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

View file

@ -2,8 +2,8 @@
<html lang="en"> <html lang="en">
<head> <head>
<link rel="stylesheet" type="text/css" href="../global.css"> <link rel="stylesheet" type="text/css" href="/style.css">
<link rel="stylesheet" type="text/css" href="../subpage.css"> <link rel="stylesheet" type="text/css" href="/subpage.css">
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

View file

@ -1,234 +0,0 @@
/*
This is the GLOBAL css file.
Any changes made in here, will apply to the ENTIRE site.
Only put changes here if you intend to put changes across
the whole site!
*/
:root {
color-scheme: dark;
}
@font-face {
font-display: swap;
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
src: url('./fonts/rubik-v28-latin-regular.woff2') format('woff2');
}
* {
font-family: 'Rubik', Verdana, Geneva, Tahoma, sans-serif;
padding: 0;
margin: 0;
font-weight: 400;
text-align: center;
color: white;
}
#topbar {
background-color: rgb(75, 50, 125);
width: 100%;
padding: 1vh 0px;
position: sticky;
left: 0px;
top: 0px;
z-index: 10;
opacity: 0.5;
transform: scale(1);
transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
#topbar:hover {
opacity: 1;
transform: scale(1.05);
}
#topbar>* {
display: inline-block;
font-size: 1.5rem;
}
main:nth-of-type(1) {
width: 95%;
max-width: 1000px;
margin: auto;
}
body {
overflow-x: hidden;
background-color: rgb(55, 4, 75);
background: linear-gradient(rgb(40, 4, 75), black);
background-attachment: local;
animation: hideContent 2.5s;
}
body, html {
min-height: 100%;
}
a {
display: inline-block;
transition: 1.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
}
a[href] {
color: rgb(175, 225, 255);
}
h3 {
font-size: 1.5rem;
padding: 10px;
}
@media screen and (min-width: 650px) {
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
.grid-child {
margin: auto;
align-content: center;
/* border: 2px white solid; */
}
}
.chip {
position: relative;
z-index: 3;
font-size: 1.3rem;
border: 2px gray solid;
border-radius: 6px;
background-color: black;
padding: 8px;
margin: 3px;
display: inline-block;
transform: scale(0.95);
transition: transform 1.25s cubic-bezier(0.075, 0.82, 0.165, 1), background-color 2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
a.chip {
text-decoration: none;
/* background-image: linear-gradient(rgb(175, 225, 255), rgb(175, 225, 255));
background-size: calc(100% - 15px) 2px;
background-position: 50% 87.5%;
background-repeat: no-repeat; */
}
.chip:hover {
background-color: rgb(10, 0, 25);
transform: scale(1);
/* font-size: 1.35rem; */
border-color: white;
transition: transform 0.75s cubic-bezier(0.075, 0.82, 0.165, 1), background-color 3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.chip:hover>.smallimg {
background-color: rgb(10, 0, 25);
}
hr {
color: white;
border: white solid;
opacity: 0.25;
border-width: 2px;
margin: 15px 10%;
/* background-color: none; */
}
p {
font-size: 1.25rem;
margin: 5px;
line-height: 2rem;
text-wrap: pretty;
}
img {
width: 100%;
/* max-width: 135px; */
}
h2 {
font-size: 1.8rem;
}
.note {
color: darkgray;
font-size: 1rem;
}
.striked {
text-decoration: line-through;
text-decoration-color: white;
}
.activity {
border-width: 3px;
border-radius: 10px;
overflow: hidden;
margin: auto;
padding: 0;
display: flex;
position: relative;
z-index: 3;
/* max-height: 200px; */
}
.activity>p {
width: 100%;
max-height: 100%;
overflow-wrap: anywhere;
text-overflow: ellipsis;
padding: 3px;
line-height: 1.5rem;
align-self: center;
}
.activity>img {
width: 40%;
aspect-ratio: 1/1;
object-fit: cover;
}
.activity>img:not(.smallimg) {
min-width: 150px;
max-width: 150px;
}
.activity>.smallimg {
width: 48px;
height: 48px;
position: absolute;
bottom: 0px;
left: 0px;
border-radius: 50px;
background: black;
padding: 5px;
/* border: 2px gray solid; */
transform: scale(0.9);
}
.activity>.smallimg:hover {
transform: scale(1);
}
ul, ol {
display: inline-block
}
li {
font-size: 1.2rem;
text-align: left;
}
.noscript {
display: none;
}

View file

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<link rel="stylesheet" type="text/css" href="./global.css"> <link rel="stylesheet" type="text/css" href="./style.css">
<link rel="stylesheet" type="text/css" href="./root.css"> <link rel="stylesheet" type="text/css" href="./root.css">
<noscript> <noscript>
<link rel="stylesheet" href="./noScript.css"> <link rel="stylesheet" href="./noScript.css">

View file

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<link rel="stylesheet" type="text/css" href="../global.css"> <link rel="stylesheet" type="text/css" href="../style.css">
<link rel="stylesheet" type="text/css" href="../subpage.css"> <link rel="stylesheet" type="text/css" href="../subpage.css">
<script src="../main.js"></script> <script src="../main.js"></script>

View file

@ -1,10 +1,13 @@
/* /*
DO NOT MODIFY IF YOU ARE TRYING TO CHANGE THINGS ON THE SITE!!! This is the GLOBAL css file.
This exists for compatibility with services on Violet's purgatory Any changes made in here, will apply to the ENTIRE site.
Soon, this will be removed, and replaced with a CDN or something... Only put changes here if you intend to put changes across
the whole site!
*/ */
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"); :root {
color-scheme: dark;
}
@font-face { @font-face {
font-display: swap; font-display: swap;
@ -17,72 +20,85 @@ Soon, this will be removed, and replaced with a CDN or something...
* { * {
font-family: 'Rubik', Verdana, Geneva, Tahoma, sans-serif; font-family: 'Rubik', Verdana, Geneva, Tahoma, sans-serif;
padding: 0; padding: 0;
margin: 0;
font-weight: 400;
text-align: center; text-align: center;
}
h1 {
color: rgb(225, 215, 255);
font-size: 2.5rem;
}
h2 {
font-size: 2rem;
color: rgb(225, 215, 255)
}
h3 {
font-size: 1.65rem
}
h3,
li {
color: white; color: white;
} }
ul, ol { #topbar {
display: inline-block background-color: rgb(75, 50, 125);
width: 100%;
padding: 1vh 0px;
position: sticky;
left: 0px;
top: 0px;
z-index: 10;
opacity: 0.5;
transform: scale(1);
transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
} }
li { #topbar:hover {
font-size: 1.2rem; opacity: 1;
text-align: left; transform: scale(1.05);
} }
body, #topbar>* {
html { display: inline-block;
overflow-x: hidden; font-size: 1.5rem;
}
main:nth-of-type(1) {
width: 95%;
max-width: 1000px;
margin: auto; margin: auto;
background-color: rgb(15, 4, 45);
background: linear-gradient(rgb(20, 4, 55), black);
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
background-attachment: local;
}
html {
background-color: black;
} }
body { body {
padding: 2.5%; overflow-x: hidden;
background-color: rgb(55, 4, 75);
background: linear-gradient(rgb(40, 4, 75), black);
background-attachment: local;
animation: hideContent 2.5s;
} }
.fadediv { body, html {
animation-name: fade-in; min-height: 100%;
animation-duration: .75s;
animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
margin: auto;
max-width: 1000px;
} }
a { a {
color: rgb(175, 225, 255);
display: inline-block; display: inline-block;
transition: 1.5s all cubic-bezier(0.075, 0.82, 0.165, 1); transition: 1.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
} }
a[href] {
color: rgb(175, 225, 255);
}
h3 {
font-size: 1.5rem;
padding: 10px;
}
@media screen and (min-width: 650px) {
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
.grid-child {
margin: auto;
align-content: center;
/* border: 2px white solid; */
}
}
.chip { .chip {
position: relative; position: relative;
z-index: 3; z-index: 3;
@ -97,9 +113,12 @@ a {
transition: transform 1.25s cubic-bezier(0.075, 0.82, 0.165, 1), background-color 2s cubic-bezier(0.075, 0.82, 0.165, 1); transition: transform 1.25s cubic-bezier(0.075, 0.82, 0.165, 1), background-color 2s cubic-bezier(0.075, 0.82, 0.165, 1);
} }
.chip, a.chip {
.chip>* {
text-decoration: none; text-decoration: none;
/* background-image: linear-gradient(rgb(175, 225, 255), rgb(175, 225, 255));
background-size: calc(100% - 15px) 2px;
background-position: 50% 87.5%;
background-repeat: no-repeat; */
} }
.chip:hover { .chip:hover {
@ -114,6 +133,43 @@ a {
background-color: rgb(10, 0, 25); background-color: rgb(10, 0, 25);
} }
hr {
color: white;
border: white solid;
opacity: 0.25;
border-width: 2px;
margin: 15px 10%;
/* background-color: none; */
}
p {
font-size: 1.25rem;
margin: 5px;
line-height: 2rem;
text-wrap: pretty;
}
img {
width: 100%;
/* max-width: 135px; */
}
h2 {
font-size: 1.8rem;
}
.note {
color: darkgray;
font-size: 1rem;
}
.striked {
text-decoration: line-through;
text-decoration-color: white;
}
.activity { .activity {
border-width: 3px; border-width: 3px;
border-radius: 10px; border-radius: 10px;
@ -123,25 +179,36 @@ a {
display: flex; display: flex;
position: relative; position: relative;
z-index: 3; z-index: 3;
/* max-height: 200px; */
} }
.activity>p { .activity>p {
width: 100%; width: 100%;
overflow-wrap: break-word; max-height: 100%;
overflow-wrap: anywhere;
text-overflow: ellipsis;
padding: 3px;
line-height: 1.5rem;
align-self: center;
} }
.activity>img { .activity>img {
width: 128px; width: 40%;
aspect-ratio: 1/1; aspect-ratio: 1/1;
object-fit: cover; object-fit: cover;
} }
.activity>img:not(.smallimg) {
min-width: 150px;
max-width: 150px;
}
.activity>.smallimg { .activity>.smallimg {
width: 64px; width: 48px;
height: 64px; height: 48px;
position: absolute; position: absolute;
bottom: 0px; bottom: 0px;
left: 72px; left: 0px;
border-radius: 50px; border-radius: 50px;
background: black; background: black;
padding: 5px; padding: 5px;
@ -153,137 +220,15 @@ a {
transform: scale(1); transform: scale(1);
} }
a:hover { ul, ol {
color: white; display: inline-block
transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
} }
p { li {
color: white;
font-size: 1.2rem; font-size: 1.2rem;
padding: 0; text-align: left;
margin: 10px;
} }
img:not(.project-inner > div > img) { .noscript {
width: 100%; display: none;
max-width: 135px;
transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.pfp {
border-radius: 15px;
border: darkgray 4px solid;
width: 60%;
aspect-ratio: 1/1;
transform: scale(0.9);
border-radius: 50%;
}
.pfp:hover {
transform: scale(1);
border-color: rgb(255, 200, 255);
object-fit: cover;
}
.emoji {
width: 32px;
border-radius: 10%;
/* border: 1px gray solid; */
}
hr {
color: white;
opacity: 0.25;
border-width: 2px;
margin: 15px 10%;
}
#card {
background-color: rgb(15, 5, 80);
padding: 15px;
border: 2px white solid;
margin: 20px auto;
width: 95%;
max-width: 800px;
z-index: 3;
position: relative;
}
.me {
border-color: limegreen;
}
.project {
background-color: rgba(35, 35, 35, 0.8);
padding: 15px;
border: 2px gray solid;
margin: 20px 0px;
border-radius: 15px;
}
.project-inner {
overflow: hidden;
padding: 0;
margin: auto;
z-index: 3;
}
.project-inner>div>img {
object-fit: cover;
border: 2px white solid;
width: 80%;
max-width: 500px;
margin: auto;
border-radius: 10px;
}
.project>p {
display: inline-block;
}
.minipfp {
width: 70px;
display: inline-block;
margin-right: 10px;
border: 2px lightgray solid;
border-radius: 5px;
}
.lengthBar {
background-color: rgb(50, 40, 60);
display: inline-block;
width: 80%;
height: 10px;
padding: 0;
overflow: hidden;
border-radius: 5px;
margin-right: 1.9%;
}
.lengthBar>span {
margin: 0;
padding: 0;
width: 100%;
background-color: rgb(200, 200, 230);
height: 20px;
display: block;
position: relative;
}
.note {
font-size: 0.95rem;
color: lightgray;
}
@keyframes fade-in {
0% {
opacity: 0;
transform: translateY(50vh);
}
100% {
opacity: 1;
transform: none;
}
} }