Violets-Purgatory/static/style.css

344 lines
5.9 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-05-30 22:31:16 -05:00
@font-face {
font-display: swap;
font-family: 'RubikBold';
font-style: bold;
font-weight: 600;
src: url('./fonts/rubik-v28-latin-600.woff2') format('woff2');
}
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 {
2024-06-26 19:18:44 -05:00
background-color: rgb(75, 50, 125, 0.5);
2024-04-24 15:55:11 -05:00
width: 100%;
padding: 1vh 0px;
2024-06-26 19:18:44 -05:00
margin-bottom: 1vh;
/* position: sticky; */
2024-04-24 15:55:11 -05:00
left: 0px;
top: 0px;
z-index: 10;
2024-06-26 19:18:44 -05:00
/* opacity: 0.5; */
2024-04-24 15:55:11 -05:00
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-06-25 19:33:49 -05:00
main:nth-of-type(1), .mainDiv {
2024-04-24 15:55:11 -05:00
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-09-29 16:07:36 -05:00
background-color: rgb(20, 4, 50);
2024-07-14 16:15:16 -05:00
background: linear-gradient(rgb(30, 4, 75), black);
2024-02-10 21:41:53 -06:00
background-attachment: local;
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-05-30 21:59:08 -05:00
br {
display: block;
margin: 3px 0;
}
2024-06-29 17:34:54 -05:00
@media screen and (min-width: 1000px) {
.activity-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.activity {
flex: 0 0 49%;
margin: auto;
padding: 0;
margin: 0;
align-content: center;
}
}
2024-04-24 15:55:11 -05:00
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;
max-width: 650px;
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);
2024-07-02 16:01:25 -05:00
transition: transform 1s cubic-bezier(0.075, 0.82, 0.165, 1);
2024-02-18 08:28:36 -06:00
}
.activity>.smallimg:hover {
transform: scale(1);
}
2024-04-24 15:55:11 -05:00
ul, ol {
2024-06-26 19:18:44 -05:00
display: inline-block;
max-width: 90%;
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-06-26 19:18:44 -05:00
padding: 5px 0;
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);
2024-07-09 18:16:34 -05:00
display: block;
2024-09-22 13:51:30 -05:00
width: calc(100% - 110px);
2024-06-29 17:34:54 -05:00
margin: auto;
2024-07-09 18:16:34 -05:00
height: 12px;
2024-04-25 20:01:42 -05:00
padding: 0;
overflow: hidden;
2024-07-09 18:16:34 -05:00
float: left;
transform: translateY(7px);
2024-04-25 20:01:42 -05:00
border-radius: 5px;
}
.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;
}
span {
color: inherit
}
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-05-20 11:04:49 -05:00
}
video {
width: 95%;
max-height: 90vh;
2024-05-20 14:50:08 -05:00
border: 2px rgb(125, 100, 155) solid;
border-radius: 15px;
z-index: 5;
2024-05-20 14:50:08 -05:00
}
2024-05-20 11:34:25 -05:00
sup {
color: gray;
}
.noteList {
list-style: none;
}
.noteList > * {
counter-increment: noteList;
color: gray;
font-size: 1rem;
}
.noteList > li::before {
content: "*" counter(noteList) ". ";
}
2024-05-20 14:54:43 -05:00
em, b, s {
2024-05-20 11:34:25 -05:00
color: inherit;
2024-05-30 22:31:16 -05:00
}
2024-06-18 07:34:57 -05:00
b, b > *, .activityTitle, .activityTitle > *, .bold {
2024-05-30 22:31:16 -05:00
font-family: "RubikBold", Verdana, Geneva, Tahoma, sans-serif;
}
.activityTitle {
text-decoration: underline;
2024-07-09 18:16:34 -05:00
}
.durationBarFormatter {
float: right;
2024-02-08 12:45:32 -06:00
}