mirror of
https://github.com/litruv/lit.ruv.wtf.git
synced 2026-07-25 11:16:02 +10:00
380 lines
8.4 KiB
CSS
380 lines
8.4 KiB
CSS
:root {
|
|
--main-bg: #242424;
|
|
--main-fg: #f0f0f0;
|
|
--accent: #2563eb;
|
|
--like: #db2777;
|
|
--github: #181717;
|
|
--youtube: #FF0000;
|
|
--steam: #1b2838;
|
|
--discord: #7289da;
|
|
--bluesky: #3E5BFF;
|
|
--post-bg: #fff;
|
|
--post-border: #000;
|
|
--avatar-bg: #f0f0f0;
|
|
--avatar-border: #000;
|
|
--shadow-light: rgba(0, 0, 0, 0.1);
|
|
--shadow-heavy: rgba(0, 0, 0, 1);
|
|
--shadow-mid: rgba(0, 0, 0, 0.05);
|
|
--header-shadow1: #ffffff52;
|
|
--header-shadow2: #000;
|
|
}
|
|
|
|
html {
|
|
box-sizing: border-box;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
*, *::before, *::after {
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
background: var(--main-bg);
|
|
font-family: monospace;
|
|
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v20H0V0zm2 2v16h16V2H2z' fill='%23000000' fill-opacity='0.05'/%3E%3C/svg%3E");
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.bg-pattern {
|
|
position: fixed;
|
|
inset: 0;
|
|
opacity: 0.05;
|
|
z-index: 0;
|
|
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px; /* set max width */
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
padding: 2rem 0 2rem 0;
|
|
position: relative;
|
|
z-index: 1;
|
|
padding-top: 160px; /* increased from 100px */
|
|
box-sizing: border-box;
|
|
overflow: visible; /* ensure expanded content is visible */
|
|
}
|
|
|
|
header {
|
|
text-align: center;
|
|
margin-bottom: 80px;
|
|
color: var(--main-fg);
|
|
font-size: 20px;
|
|
padding-top: 2rem; /* add extra space above header */
|
|
overflow: visible;
|
|
}
|
|
|
|
h1 {
|
|
transition: all 0.3s ease;
|
|
text-shadow: 2px 2px 0 var(--header-shadow1), 3px 3px 0 var(--header-shadow2);
|
|
margin-bottom: 0.5rem;
|
|
transform-origin: center;
|
|
cursor: pointer;
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.social-links {
|
|
margin-top: 1rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.social-links a {
|
|
margin: 0 10px;
|
|
color: var(--main-fg);
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
font-size: 2rem;
|
|
display: inline-block;
|
|
}
|
|
|
|
.social-links a:hover {
|
|
color: var(--accent);
|
|
transform: scale(1.1);
|
|
transition: transform 0.3s ease;
|
|
text-shadow: 0 0 3px white;
|
|
}
|
|
|
|
.social-links a:hover .fab.fa-github {
|
|
color: var(--github);
|
|
}
|
|
|
|
social-links a:hover .fab.fa-youtube {
|
|
color: var(--youtube);
|
|
}
|
|
|
|
.social-links a:hover .fab.fa-steam {
|
|
color: var(--steam);
|
|
}
|
|
|
|
.social-links a:hover .fab.fa-discord {
|
|
color: var(--discord);
|
|
}
|
|
|
|
.social-links a:hover .fa-brands.fa-bluesky {
|
|
color: var(--bluesky);
|
|
}
|
|
|
|
#posts {
|
|
max-width: 1200px;
|
|
width: 100%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-bottom: 2rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
padding-left: 80px; /* Increase left padding to balance the negative margin */
|
|
padding-right: 40px;
|
|
box-sizing: border-box;
|
|
text-align: left;
|
|
min-height: 0; /* Prevent flex container from causing jumps */
|
|
/* Add stable height to prevent jumps */
|
|
contain: layout style;
|
|
}
|
|
|
|
.masonry-col {
|
|
flex: 1 1 0;
|
|
min-width: 320px;
|
|
max-width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0; /* Remove gap so negative margins overlap */
|
|
transition: none; /* Prevent transitions during layout changes */
|
|
will-change: auto; /* Prevent unnecessary layer promotion */
|
|
/* Prevent reflow during resize */
|
|
contain: layout;
|
|
}
|
|
|
|
@media (max-width: 799px) {
|
|
#posts {
|
|
flex-direction: column;
|
|
gap: 0;
|
|
transition: none; /* Prevent transitions during layout changes */
|
|
/* Remove the min-height that was causing issues */
|
|
min-height: auto;
|
|
/* Use layout containment to minimize reflow */
|
|
contain: layout style size;
|
|
}
|
|
.masonry-col {
|
|
min-width: 0;
|
|
width: 100%;
|
|
/* Prevent content reflow during breakpoint change */
|
|
contain: layout style;
|
|
/* Hide overflow columns on mobile */
|
|
}
|
|
.masonry-col:not(:first-child) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.post {
|
|
background: var(--post-bg);
|
|
padding: 2rem 1.5rem;
|
|
margin-bottom: -0.2rem;
|
|
margin-top: -0.2rem;
|
|
margin-left: -40px;
|
|
margin-right: -40px;
|
|
border: 2px solid var(--post-border);
|
|
position: relative;
|
|
box-shadow: 3px 3px 0 var(--shadow-light), 6px 6px 0 var(--shadow-mid);
|
|
transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.27, 1.55),
|
|
box-shadow 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55),
|
|
opacity 0.2s ease;
|
|
display: inline-block;
|
|
width: 100%;
|
|
min-width: 320px;
|
|
break-inside: avoid;
|
|
z-index: 1;
|
|
|
|
/* Dynamic rotation based on height */
|
|
--post-height: 300px; /* Default fallback */
|
|
--min-rotation: 0.5deg; /* Minimum rotation for tall posts */
|
|
--max-rotation: 3deg; /* Maximum rotation for short posts */
|
|
--rotation-factor: clamp(var(--min-rotation), calc(var(--max-rotation) - (var(--post-height) - 200px) * 0.005), var(--max-rotation));
|
|
|
|
/* Apply rotation with random direction */
|
|
transform: rotate(var(--rotation-factor));
|
|
}
|
|
|
|
/* Alternate rotation directions for visual variety */
|
|
.post:nth-child(odd) {
|
|
transform: rotate(calc(-1 * var(--rotation-factor)));
|
|
}
|
|
|
|
.post:nth-child(even) {
|
|
transform: rotate(var(--rotation-factor));
|
|
}
|
|
|
|
.post-header {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.avatar {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: var(--avatar-bg);
|
|
border: 2px solid var(--avatar-border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
transform: rotate(-2deg);
|
|
box-shadow: 2px 2px 0 var(--avatar-border);
|
|
}
|
|
|
|
.post-content {
|
|
text-shadow: 1px 1px 0 #fff;
|
|
}
|
|
|
|
.image-placeholder {
|
|
margin-top: 1rem;
|
|
border: 4px solid var(--post-border);
|
|
background: var(--avatar-bg);
|
|
text-align: center;
|
|
transform: rotate(1deg);
|
|
box-shadow: 4px 4px 0 var(--post-border);
|
|
}
|
|
|
|
.post-actions {
|
|
margin-top: 1rem;
|
|
display: flex;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.action-btn {
|
|
border: none;
|
|
background: none;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.action-btn.like {
|
|
color: var(--like);
|
|
transform: rotate(-1deg);
|
|
}
|
|
|
|
.action-btn.repost {
|
|
color: var(--accent);
|
|
transform: rotate(1deg);
|
|
}
|
|
|
|
.avatar-img {
|
|
width: 250px;
|
|
margin: 20px auto;
|
|
display: block;
|
|
}
|
|
|
|
.post:hover {
|
|
transform: scale(1.1) translateY(-5px) rotate(0deg) !important;
|
|
box-shadow: 6px 6px 30px var(--shadow-heavy);
|
|
z-index: 10;
|
|
}
|
|
|
|
.subtext {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
@keyframes shake {
|
|
|
|
0%,
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
25% {
|
|
transform: translateX(-5px) translateY(5px);
|
|
}
|
|
|
|
50% {
|
|
transform: translateX(5px) translateY(-5px);
|
|
}
|
|
|
|
75% {
|
|
transform: translateX(-5px) translateY(-5px);
|
|
}
|
|
}
|
|
|
|
h1:hover {
|
|
animation:
|
|
wildSpin 3s ease-in-out,
|
|
rainbow 3s linear,
|
|
shake 0.5s ease-in-out infinite;
|
|
}
|
|
|
|
social-links a {
|
|
position: relative;
|
|
}
|
|
|
|
social-links a::after {
|
|
content: attr(title);
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
color: white;
|
|
padding: 0.3rem;
|
|
border-radius: 0.3rem;
|
|
font-size: 0.875rem;
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
social-links a:hover::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.project-links {
|
|
margin-top: 2rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.project-links a {
|
|
display: inline-block;
|
|
margin: 0.5rem 0;
|
|
padding: 0.5rem 1rem;
|
|
background: var(--post-bg);
|
|
color: var(--main-bg);
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
border-radius: 20px;
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
.project-links a:hover {
|
|
background: var(--accent);
|
|
color: var(--post-bg);
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
margin-top: 3rem;
|
|
margin-bottom: 2rem;
|
|
font-size: 0.9rem;
|
|
color: var(--main-fg);
|
|
}
|
|
|
|
footer a {
|
|
color: var(--main-fg);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
footer a:hover {
|
|
color: var(--accent);
|
|
}
|
|
|