quinten/website-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
website-frontend/style.css
Quinten0508 9a8690ea68 first commit
2024-06-22 20:58:35 +02:00

457 lines
9.6 KiB
CSS
Raw Blame History

/* ibm-plex-mono-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
src: url('/assets/fonts/ibm-plex-mono-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ibm-plex-mono-italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 400;
src: url('/assets/fonts/ibm-plex-mono-v19-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ibm-plex-mono-500 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
src: url('/assets/fonts/ibm-plex-mono-v19-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ibm-plex-mono-500italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 500;
src: url('/assets/fonts/ibm-plex-mono-v19-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@media (max-width: 1400px) {
html {
font-size: 25px;
}
}
@media (max-width: 768px) {
html {
font-size: 16px;
}
}
@media (max-width: 450px) {
html {
font-size: 10px;
}
#subtitlebox{
height: 6rem !important;
}
#lastfm-box, #links {
flex: 25 !important;
}
#heartbeatbox, #clock-box {
flex: 13 !important;
}
}
/*
Rules for thy Sanity
h1 = title
h3 = paragraph
h5 = caption
paragraph = text
3rem vertical space between standard boxes (split into 1.5rem top and bottom)
*/
/*
ideas
* navbar as vertical element on left side
* status bar under title for lastfm, mood?, misc
* services uptime - uptime kuma integration ---- sad, no api or anything for kuma...
* socials/links/platforms in first right-aligned box
** wont work well on mobile, instead just attach it under title within same box?
* left side of that box as bio
* current weather widget to right of lastfm status -- naur, too much effort and weird?
* comets and blinking stars in background
* more animation in general - make this mf ALIVE!!!!
* fancy borders see bookmark
* make a little place for the kitty in top left (or right?)
*/
/*
The container query length units are:
cqw: 1% of a query container's width
cqh: 1% of a query container's height
cqi: 1% of a query container's inline size
cqb: 1% of a query container's block size
cqmin: The smaller value of either cqi or cqb
cqmax: The larger value of either cqi or cqb
*/
html {
background-color: #000000;
background-image: url('/assets/bg.gif');
background-repeat: repeat;
background-color: transparent;
margin: 0px;
border: 0px;
padding: 0px;
min-height: 100vh;
font-family: "IBM Plex Mono", monospace;
font-style: normal;
color: #E9E9E9;
font-weight: 400;
}
body {
margin: 0px;
border: 0px;
padding: 0px;
min-height: 100vh;
}
.container {
width: min(900px,92vw);
margin: auto;
}
#maintitlebox {
margin-top: 1rem;
margin-bottom: 0;
}
#maintitle {
font-size: 3.5rem;
text-align: center;
margin: 0;
margin: auto;
}
#subtitlebox {
display: flex;
justify-content: stretch;
align-items: stretch;
height: 4rem;
margin: 0;
padding: 0;
margin-bottom: 1.5rem;
}
#links {
padding: 0;
margin: 0;
height: 100%;
flex: 1 1 auto;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex: 3;
}
.linkbox {
margin-right: 1rem;
background: #000;
padding: 0.5rem;
}
#heartbeatbox {
margin: 0;
padding: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex: 1
}
#heartbeat-time {
font-size: 1.2rem;
}
.link {
color: #E9E9E9;
text-decoration: none;
position: relative;
}
.link::after {
content: '';
position: absolute;
width: 0;
height: 0.1rem;
display: block;
left: 0;
background: #E9E9E9;
transition: width 0.3s ease, left 0.3s ease;
}
.link:hover::after {
width: 100%;
left: 0;
}
.box {
background: #000;
border: 1px solid #E9E9E9;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
padding: 1rem;
align-self: center;
justify-self: center;
max-height: 100%;
}
.button {
background: #000;
border: 1px solid #E9E9E9;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
padding: 1rem;
align-self: center;
justify-self: center;
max-height: 100%;
cursor: pointer;
display: inline-block;
text-align: center;
text-decoration: none;
color: inherit;
font: inherit;
}
.button:active {
background: #333333; /* Lighter grey color */
}
.box:last-child {
margin-bottom: 3rem;
}
#header {
display: flex;
flex-direction: row;
margin-top: 0.75rem;
height: 8rem;
}
#lastfm-box {
background: #000;
border: 1px solid #E9E9E9;
justify-content: space-between;
display: flex;
align-items: center;
flex: 1 1 auto;
height: 8rem;
flex: 3;
}
#lastfm-contents {
font-family: "IBM Plex Mono", monospace;
font-weight: 400;
font-style: normal;
color: #E9E9E9;
line-height: 1.8;
font-size: min(1rem, 2.2cm);
overflow: hidden;
max-height: 100%; /* Adjusted to 100% */
padding: 1rem;
padding-top: 0.5rem;
display: block;
box-sizing: border-box;
}
#lastfm-artist {
font-style: normal;
}
#lastfm-timesinceplay {
font-style:italic;
color:#e9e9e9a2;
font-size: min(1rem, 2.2cqmin);
}
#lastfm-lastplayedsong, #lastfm-lastlastplayedsong{
font-style:italic;
color: #e9e9e9a2;
font-size: min(1rem, 2.2cqmin);
}
#lastfm-artbox {
padding: 1rem;
}
#lastfm-art {
border: 1px solid #E9E9E9;
padding: 0.2rem;
width: 5rem;
height: 5rem;
}
#clock-box {
background: #000;
border: 1px solid #E9E9E9;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 8rem;
gap: 0.3rem;
flex: 1;
}
#clocktitle {
padding: 0;
margin: 0;
font-size: 0.9rem;
}
#clock-contents {
display: flex;
gap: 0.3rem;
align-items: top;
justify-content: center;
}
#clock {
padding: 0;
margin: 0;
font-size: 1.8rem;
flex: 9;
padding-left: 0.5rem;
}
#clock-icon {
padding: 0;
margin: 0;
padding-top: 0.4rem;
flex: 1;
width: 1.2rem;
height: 1.2rem;
padding-right: 0.5rem;
}
.image {
width: 100%;
border: 1rem;
padding-top: 1rem;
}
#uptime {
display: flex;
align-items: stretch;
justify-content: left;
flex-direction: column;
}
.uptime-pair {
display: flex;
border: 1px solid #E9E9E9;
padding: 1rem;
flex-direction: row;
}
.uptime-name-element, .uptime-status-element {
border: 1px solid red;
padding: 1rem;
}
/* #uptime-name, #uptime-status {
align-items: center;
height: 100%;
margin: 0;
}
.uptime-name-element, .uptime-status-element {
height: 2rem;
padding: 0;
margin: 0;
border: 0;
}
.uptime-name-element {
font-style: bold;
border-bottom: 1px solid #E9E9E9;
}
.uptime-name-element:last-of-type {
border-bottom: 0;
}
.uptime-box {
background: #000;
border: 1px solid #E9E9E9;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
padding: 1rem;
max-height: 100%;
}
*/
h1 {
font-weight: 500;
font-size: 4rem;
letter-spacing: 0.2rem;
margin: 0;
padding: 0;
}
h3 {
font-weight: 500;
font-size: 2.4rem;
margin: 0;
padding: 0;
padding-bottom: 0.2rem;
text-align: left;
}
h5 {
font-size: 1.2rem;
font-style: italic;
margin: 0;
padding: 0;
padding-bottom: 1.2rem;
}
p, pre {
font-size: 1.2rem;
margin: 0;
padding: 0;
}
button {
color: #E9E9E9;
}
#stripes {
width: 100vw;
height: max(16vh, 176px);
}
Reference in New Issue View Git Blame Copy Permalink