tristan/capitalismkills.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix mobile view- hopefully

Browse source
This commit is contained in:
Tristan 2024-12-17 00:20:42 -05:00
parent aecb1472f7
commit 10d3202cda
1 changed files with 34 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
styles.css
View file

@ -1,3 +1,4 @@
/* Base Styles */
html, body { html, body {
height: 100%; height: 100%;
margin: 0; margin: 0;
@ -8,8 +9,8 @@ html, body {
} }
.container { .container {
width: 60%; width: 90%; /* Make it responsive and fit within the screen */
max-width: 950px; max-width: 950px; /* Set a max width */
margin: auto; margin: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -18,7 +19,8 @@ html, body {
height: 100vh; height: 100vh;
text-align: center; text-align: center;
position: relative; position: relative;
z-index: 1; padding: 1rem; /* Add breathing room for small screens */
box-sizing: border-box;
} }
.background-image { .background-image {
@ -27,15 +29,15 @@ html, body {
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 100%; width: 100%;
max-width: 600px; /* Limit size */
height: auto; height: auto;
opacity: 0.2; opacity: 0.15; /* Light transparency for clarity */
z-index: 0; z-index: 0;
pointer-events: none; pointer-events: none;
} }
blockquote { blockquote {
font-size: 1.8rem; font-size: clamp(1.2rem, 2vw, 1.8rem); /* Responsive font size */
font-style: italic; font-style: italic;
margin: 0; margin: 0;
line-height: 1.5; line-height: 1.5;
@ -43,16 +45,16 @@ blockquote {
} }
.author { .author {
margin-top: 1.5rem; margin-top: 1rem;
font-size: 1.2rem; font-size: clamp(1rem, 1.5vw, 1.2rem); /* Responsive font size */
font-style: italic; font-style: italic;
color: #bbbbbb; color: #bbbbbb;
z-index: 1; z-index: 1;
} }
.source { .source {
margin-top: 1rem; margin-top: 0.5rem;
font-size: 1rem; font-size: clamp(0.9rem, 1.2vw, 1rem);
color: #999999; color: #999999;
z-index: 1; z-index: 1;
} }
@ -69,3 +71,24 @@ blockquote {
color: #d1d1d1; color: #d1d1d1;
border-color: #d1d1d1; border-color: #d1d1d1;
} }
/* Mobile Responsive Styles */
@media (max-width: 768px) {
.container {
width: 95%;
height: auto; /* Allow the container to grow naturally */
padding: 2rem 1rem;
}
.background-image {
max-width: 400px;
opacity: 0.1;
}
}
@media (max-width: 480px) {
.background-image {
max-width: 300px;
opacity: 0.08;
}
}