introduction-website/src/css/main.css

360 lines
7.7 KiB
CSS
Raw Normal View History

2024-08-29 17:12:40 +00:00
/* Root Variables */
2024-08-21 20:22:27 +00:00
:root {
2024-08-29 17:12:40 +00:00
--font-weight: 350;
2024-11-24 23:26:13 +00:00
--font-family: 'space-mono';
2024-08-29 17:12:40 +00:00
--bigger-font-weight: 700;
2024-08-25 17:53:45 +00:00
--link-border-radius: 1000px;
2024-08-29 17:12:40 +00:00
--page-max-width: 700px;
2024-11-24 23:26:13 +00:00
--color-primary: #FF5053;
--color-highlight: #FEF2FF;
--color-accent-a: #B2AAFF;
--color-accent-b: #6A5FDB;
--color-accent-c: #29114C;
--color-accent-d: #261A66;
--color-accent-e: #190B2F;
--color-background: #0F000A;
}
@font-face {
font-family: 'pilowlava';
/*src: URL('../fonts/pilowlava/Fonts/webfonts/Pilowlava-Regular.woff2') format('woff2');*/
src: url('../fonts/pilowlava/Fonts/webfonts/Pilowlava-Regular.woff2') format('woff2');
}
@font-face {
font-family: 'spacegrotesk';
src: url('../fonts/space-grotesk-1.1.4/webfont/SpaceGrotesk-Regular.woff2') format('woff2');
}
@font-face {
font-family: 'space-mono';
src: url('../fonts/space-mono/SpaceMono-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'uncut-sans';
src: url('../fonts/uncut-sans/Webfonts/UncutSans-Regular.woff2') format('woff2');
2024-08-21 20:22:27 +00:00
}
2024-08-29 17:12:40 +00:00
/* General Styles */
2024-08-21 20:22:27 +00:00
body {
2024-11-24 23:26:13 +00:00
background-color: var(--color-background);
color: var(--color-accent-a);
2024-08-21 20:22:27 +00:00
font-family: var(--font-family), monospace;
font-weight: var(--font-weight);
overflow-x: hidden;
2024-08-29 17:12:40 +00:00
margin: 0;
position: relative;
height: 100%;
2024-08-27 19:50:30 +00:00
}
2024-08-21 20:22:27 +00:00
2024-08-29 17:12:40 +00:00
h1, p {
margin: 0;
2024-08-21 20:22:27 +00:00
}
main {
2024-08-29 17:12:40 +00:00
position: relative;
2024-11-24 23:26:13 +00:00
z-index: 2;
2024-08-21 20:22:27 +00:00
max-width: var(--page-max-width);
margin: 0 auto;
2024-08-27 19:50:30 +00:00
padding: 20px;
2024-11-24 23:26:13 +00:00
/*filter: drop-shadow(0 0 2px var(--color-primary)) brightness(1);*/
2024-08-27 19:50:30 +00:00
}
::selection {
2024-11-24 23:26:13 +00:00
color: var(--color-background);
background: var(--color-primary);
}
/* 38c3 */
.blobs {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1; /* Keep the container behind all content */
pointer-events: none; /* Prevent interaction */
overflow: hidden;
}
.blobs img {
pointer-events: none; /* Ensure the images don't block anything */
will-change: transform; /* Improve performance for animations */
}
.grid {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2; /* Ensure the grid is behind the blobs */
display: grid;
pointer-events: none; /* Prevent interaction */
opacity: 0.5;
background-image: linear-gradient(var(--color-accent-e) 1px, transparent 1px),
linear-gradient(90deg, var(--color-accent-e) 1px, transparent 1px);
background-size: 60px 60px; /* Adjust the grid spacing */
background-color: var(--color-background); /* Base color for the grid */
2024-08-21 20:22:27 +00:00
}
2024-11-24 23:26:13 +00:00
2024-08-29 17:12:40 +00:00
/* Header Styles */
2024-08-21 20:22:27 +00:00
header {
text-align: center;
width: max-content;
margin: 0 auto;
2024-11-24 23:26:13 +00:00
/*background-color: var(--color-background);*/
/*border: 1px var(--color-accent-e) solid;*/
2024-08-29 17:12:40 +00:00
}
2024-08-21 20:22:27 +00:00
2024-08-29 17:12:40 +00:00
header .names {
width: min-content;
white-space: nowrap;
}
2024-08-21 20:22:27 +00:00
2024-08-29 17:12:40 +00:00
header h1, header p {
text-align: left;
2024-11-24 23:26:13 +00:00
font-size: 35px;
color: var(--color-primary);
font-family: pilowlava, monospace;
}
header p {
font-family: space-mono, monospace;
font-size: 25px;
2024-08-29 17:12:40 +00:00
}
2024-08-21 20:22:27 +00:00
2024-08-29 17:12:40 +00:00
header img {
border-radius: 50%;
max-width: 300px;
padding: 0;
2024-08-21 20:22:27 +00:00
}
2024-11-24 23:26:13 +00:00
/* Description */
header, .description, .linkGroup, .timer, footer {
background-color: rgba(15, 0, 10, 0.9);
/*border: 1px var(--color-primary) solid;*/
border: 1px var(--color-accent-c) solid;
}
header, .description, .linkGroup, .timer {
padding: 5px;
}
2024-08-29 17:12:40 +00:00
/* Links Styles */
2024-08-25 18:46:40 +00:00
h2 {
width: 100%;
2024-11-24 23:26:13 +00:00
font-size: 30px;
2024-08-25 18:46:40 +00:00
margin: 0;
2024-11-24 23:26:13 +00:00
color: var(--color-accent-a);
font-family: pilowlava, monospace;
2024-08-25 18:46:40 +00:00
@media only screen and (max-width: 480px) {
2024-08-29 17:12:40 +00:00
text-align: center; /* slim */
2024-08-25 18:46:40 +00:00
margin: 10px auto;
}
2024-08-29 17:12:40 +00:00
@media only screen and (min-width: 480px) {
2024-11-24 23:26:13 +00:00
text-align: center; /* wide */
2024-08-29 17:12:40 +00:00
margin: 0;
}
2024-08-25 18:46:40 +00:00
}
2024-08-25 17:42:04 +00:00
2024-09-05 12:02:50 +00:00
.text-link::before {
content: "[";
}
.text-link::after {
content: "]";
}
2024-08-25 17:42:04 +00:00
.text-link {
2024-11-24 23:26:13 +00:00
color: var(--color-primary);
2024-09-05 12:02:50 +00:00
text-decoration: none;
2024-08-25 17:42:04 +00:00
position: relative;
2024-09-05 12:02:50 +00:00
padding: 5px;
white-space: nowrap;
display: inline-block;
2024-08-25 17:42:04 +00:00
}
.text-link:hover {
2024-11-24 23:26:13 +00:00
filter: drop-shadow(0 0 5px var(--color-primary)) brightness(1.02);
2024-08-25 17:42:04 +00:00
top: -2px;
}
2024-08-29 17:12:40 +00:00
/* Links Container */
2024-08-25 18:46:40 +00:00
.links {
2024-11-24 23:26:13 +00:00
padding: 0 0;
2024-08-25 18:46:40 +00:00
}
2024-08-29 17:12:40 +00:00
/* Link Group */
2024-08-21 20:22:27 +00:00
.linkGroup {
2024-08-25 18:46:40 +00:00
margin: auto;
2024-08-21 20:22:27 +00:00
@media only screen and (min-width: 480px) {
display: flex;
2024-08-29 17:12:40 +00:00
flex-wrap: wrap; /* wide */
}
}
2024-11-24 23:26:13 +00:00
.linkGroup * {
color: var(--color-accent-a);
border: none;
}
2024-08-29 17:12:40 +00:00
/* Link Styles */
.link {
height: fit-content;
position: relative;
transition: top 100ms ease, filter 100ms ease; /* Added filter transition */
@media only screen and (max-width: 480px) {
margin: 10px 5%; /* slim */
2024-08-21 20:22:27 +00:00
}
2024-08-29 17:12:40 +00:00
@media only screen and (min-width: 480px) {
padding: 5px; /* wide */
2024-08-21 20:22:27 +00:00
}
}
2024-08-29 17:12:40 +00:00
/* Button Styles */
2024-08-21 20:22:27 +00:00
.linkButton {
2024-08-29 17:12:40 +00:00
font-weight: var(--bigger-font-weight);
2024-08-21 20:22:27 +00:00
font-size: 25px;
2024-08-27 19:50:30 +00:00
line-height: 25px;
2024-08-21 20:22:27 +00:00
text-align: center;
text-decoration: none;
2024-08-25 18:46:40 +00:00
text-transform: lowercase;
2024-11-24 23:26:13 +00:00
color: var(--color-background);
background-color: var(--color-primary);
2024-08-21 20:22:27 +00:00
display: block;
box-sizing: border-box;
padding: 10px 20px;
border-radius: var(--link-border-radius);
2024-08-29 17:12:40 +00:00
width: 100%; /* slim */
2024-08-21 20:22:27 +00:00
2024-08-29 17:12:40 +00:00
@media only screen and (min-width: 480px) {
width: auto; /* wide */
2024-11-24 23:26:13 +00:00
padding: 5px 20px;
2024-08-21 20:22:27 +00:00
}
2024-08-29 17:12:40 +00:00
}
2024-08-21 20:22:27 +00:00
2024-08-29 17:12:40 +00:00
.linkButton .icon {
width: 25px;
height: 25px;
padding-right: 10px;
padding-bottom: 2px;
vertical-align: middle;
2024-08-21 20:22:27 +00:00
}
2024-08-29 17:12:40 +00:00
/* Default Hover Effect */
.hoverHighlight:hover {
@media only screen and (min-width: 480px) {
2024-11-24 23:26:13 +00:00
filter: drop-shadow(0 0 8px var(--color-primary)) brightness(1.1);
2024-08-29 17:12:40 +00:00
top: -2px;
}
}
.links:hover .hoverHighlight:not(:hover) {
@media only screen and (min-width: 480px) {
2024-09-27 16:58:16 +00:00
filter: brightness(0.8);
2024-08-29 17:12:40 +00:00
}
2024-08-21 20:22:27 +00:00
}
2024-08-29 17:12:40 +00:00
/* Search Highlighting */
.highlightSearch {
2024-11-24 23:26:13 +00:00
filter: drop-shadow(0 0 8px var(--color-primary)) brightness(1.1);
2024-08-29 17:12:40 +00:00
z-index: 1;
2024-08-27 19:50:30 +00:00
@media only screen and (min-width: 480px) {
2024-08-29 17:12:40 +00:00
top: -2px;
2024-08-27 19:50:30 +00:00
}
2024-08-29 17:12:40 +00:00
}
2024-08-27 19:50:30 +00:00
2024-08-29 17:12:40 +00:00
.notHighlightSearch {
filter: brightness(0.5);
@media only screen and (max-width: 480px) {
display: none;
}
2024-08-21 20:22:27 +00:00
}
2024-08-24 19:46:09 +00:00
.linkButton:active {
2024-08-27 19:50:30 +00:00
transform: scale(0.95);
2024-08-29 17:12:40 +00:00
top: 2px;
2024-08-24 19:46:09 +00:00
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
2024-08-29 17:12:40 +00:00
/* Search Input Field Styles */
.fuzzysearch {
2024-08-29 17:28:06 +00:00
margin: 10px auto;
2024-08-29 17:12:40 +00:00
text-align: center;
max-width: var(--page-max-width);
}
#link-search {
2024-11-24 23:26:13 +00:00
background-color: var(--color-background);
color: var(--color-accent-a);
border: 2px solid var(--color-primary);
2024-08-29 17:12:40 +00:00
border-radius: 50px;
padding: 10px 15px;
font-size: 16px;
text-align: center;
font-weight: var(--bigger-font-weight);
width: 100%;
max-width: 400px; /* Adjust width as needed */
/*box-shadow: 0 0 5px var(--secondary-color2);*/
transition: background-color 100ms ease, border-color 100ms ease, box-shadow 100ms ease;
}
#link-search::placeholder {
2024-11-24 23:26:13 +00:00
color: var(--color-accent-a);
2024-08-29 17:12:40 +00:00
opacity: 0.9; /* Placeholder text opacity */
}
#link-search:focus::placeholder {
2024-11-24 23:26:13 +00:00
color: var(--color-accent-e);
2024-08-29 17:12:40 +00:00
opacity: 0.9; /* Placeholder text opacity */
}
#link-search:focus {
outline: none;
2024-11-24 23:26:13 +00:00
background-color: var(--color-background);
box-shadow: 0 0 10px var(--color-primary);
border-color: var(--color-primary);
color: var(--color-primary);
2024-08-29 17:12:40 +00:00
}
2024-08-24 19:46:09 +00:00
2024-08-29 17:12:40 +00:00
@media only screen and (max-width: 480px) {
#link-search {
padding: 8px 12px;
max-width: 90%; /* Responsive width for small screens */
}
}
2024-08-27 19:50:30 +00:00
2024-08-29 17:12:40 +00:00
@media only screen and (min-width: 480px) {
#link-search {
padding: 10px 15px;
}
}
/* Timers Styles */
2024-11-24 23:26:13 +00:00
.timer {
}
2024-08-21 20:22:27 +00:00
.timer p {
@media only screen and (max-width: 480px) {
2024-08-29 17:12:40 +00:00
margin-bottom: 20px; /* slim */
2024-08-21 20:22:27 +00:00
}
}
.timer p span {
2024-11-24 23:26:13 +00:00
color: var(--color-primary);
/*color: var(--color-primary);*/
2024-08-21 20:22:27 +00:00
text-decoration: none;
}
2024-08-29 17:12:40 +00:00
/* Footer Styles */
2024-08-21 20:22:27 +00:00
footer {
text-align: center;
2024-08-29 17:12:40 +00:00
}