Violets-Purgatory/static/style.css

265 lines
4.6 KiB
CSS
Raw Normal View History

2024-04-24 15:55:11 -05:00
/*
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!
2024-02-12 11:12:15 -06:00
*/
2024-04-24 15:55:11 -05:00
:root {
color-scheme: dark;
}
2024-02-18 09:00:03 -06:00
2024-02-08 12:45:32 -06:00
@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;
2024-04-24 15:55:11 -05:00
margin: 0;
font-weight: 400;
2024-02-08 12:45:32 -06:00
text-align: center;
2024-04-24 15:55:11 -05:00
color: white;
2024-02-08 12:45:32 -06:00
}
2024-04-24 15:55:11 -05:00
#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);
}
2024-04-24 15:55:11 -05:00
#topbar:hover {
opacity: 1;
transform: scale(1.05);
}
2024-04-24 15:55:11 -05:00
#topbar>* {
display: inline-block;
font-size: 1.5rem;
}
2024-04-24 15:55:11 -05:00
main:nth-of-type(1) {
width: 95%;
max-width: 1000px;
margin: auto;
2024-02-12 11:12:15 -06:00
}
2024-04-24 15:55:11 -05:00
body {
overflow-x: hidden;
2024-02-08 18:28:33 -06:00
2024-04-24 15:55:11 -05:00
background-color: rgb(55, 4, 75);
background: linear-gradient(rgb(40, 4, 75), black);
2024-02-10 21:41:53 -06:00
background-attachment: local;
2024-04-24 15:55:11 -05:00
animation: hideContent 2.5s;
2024-04-20 06:50:20 -05:00
}
2024-04-24 15:55:11 -05:00
body, html {
min-height: 100%;
2024-02-08 12:45:32 -06:00
}
2024-02-10 21:41:53 -06:00
a {
display: inline-block;
transition: 1.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
}
2024-04-24 15:55:11 -05:00
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; */
}
}
2024-02-10 21:41:53 -06:00
.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);
}
2024-04-24 15:55:11 -05:00
a.chip {
2024-02-10 21:41:53 -06:00
text-decoration: none;
2024-04-24 15:55:11 -05:00
/* 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; */
2024-02-10 21:41:53 -06:00
}
.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);
}
2024-04-24 15:55:11 -05:00
.chip:hover>.smallimg {
2024-02-10 21:41:53 -06:00
background-color: rgb(10, 0, 25);
}
2024-04-24 15:55:11 -05:00
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;
}
2024-02-18 08:28:36 -06:00
.activity {
border-width: 3px;
border-radius: 10px;
overflow: hidden;
margin: auto;
padding: 0;
display: flex;
position: relative;
z-index: 3;
2024-04-24 15:55:11 -05:00
/* max-height: 200px; */
2024-02-18 08:28:36 -06:00
}
.activity>p {
width: 100%;
2024-04-24 15:55:11 -05:00
max-height: 100%;
overflow-wrap: anywhere;
text-overflow: ellipsis;
padding: 3px;
line-height: 1.5rem;
align-self: center;
2024-02-18 08:28:36 -06:00
}
.activity>img {
2024-04-24 15:55:11 -05:00
width: 40%;
2024-02-18 08:28:36 -06:00
aspect-ratio: 1/1;
object-fit: cover;
}
2024-04-24 15:55:11 -05:00
.activity>img:not(.smallimg) {
min-width: 150px;
max-width: 150px;
}
2024-02-18 08:28:36 -06:00
.activity>.smallimg {
2024-04-24 15:55:11 -05:00
width: 48px;
height: 48px;
2024-02-18 08:28:36 -06:00
position: absolute;
bottom: 0px;
2024-04-24 15:55:11 -05:00
left: 0px;
2024-02-18 08:28:36 -06:00
border-radius: 50px;
background: black;
padding: 5px;
/* border: 2px gray solid; */
transform: scale(0.9);
}
.activity>.smallimg:hover {
transform: scale(1);
}
2024-04-24 15:55:11 -05:00
ul, ol {
display: inline-block
2024-02-08 12:45:32 -06:00
}
2024-04-24 15:55:11 -05:00
li {
2024-02-18 08:28:36 -06:00
font-size: 1.2rem;
2024-04-24 15:55:11 -05:00
text-align: left;
2024-02-18 08:28:36 -06:00
}
2024-04-24 15:55:11 -05:00
.noscript {
display: none;
2024-04-25 20:01:42 -05:00
}
.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%;
}
.textBlock {
color: rgb(255, 255, 255);
white-space: pre-wrap;
background-color: rgb(20, 20, 20);
border: 2px lightgray solid;
padding: 15px;
/* font-family: 'Source Code Pro', sans-serif; */
text-align: center;
}
2024-04-25 20:01:42 -05:00
.lengthBar>span {
margin: 0;
padding: 0;
width: 100%;
background-color: rgb(200, 200, 230);
height: 20px;
display: block;
position: relative;
2024-02-08 12:45:32 -06:00
}