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

about page, changed css names

Browse source
This commit is contained in:
Tristan 2024-12-24 18:37:14 -05:00
parent 10d3202cda
commit 37840c019f
4 changed files with 209 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
about.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>capitalism kills</title>
<link rel="stylesheet" href="styles.css?v=1.1">
</head>
<body>
<main>
<div class="container">
<div class="header">
<h1>About</h1>
<p>Why capitalismkills.net?</p>
</div>
<div class="content">
<h2>Capitalism is incompitent</h2>
<p>The growing income inequality is evident enough for the lay person to make the argument that capitalism in incompatible with humanity. One cannot presume that a billionaire can exist along with the unhoused and ascertain that capitalism can provide a healthy society.</p>
<p>As Marx stated in chapter 1 of <a href="https://www.marxists.org/archive/marx/works/1848/communist-manifesto/ch01.htm" target="_blank">The Communist Manifesto</a>:</p>
<div class="sidebar">
<p>Hitherto, every form of society has been based, as we have already seen, on the antagonism of oppressing and oppressed classes. But in order to oppress a class, certain conditions must be assured to it under which it can, at least, continue its slavish existence. The serf, in the period of serfdom, raised himself to membership in the commune, just as the petty bourgeois, under the yoke of the feudal absolutism, managed to develop into a bourgeois. The modern labourer, on the contrary, instead of rising with the process of industry, sinks deeper and deeper below the conditions of existence of his own class. He becomes a pauper, and pauperism develops more rapidly than population and wealth. And here it becomes evident, that the bourgeoisie is unfit any longer to be the ruling class in society, and to impose its conditions of existence upon society as an over-riding law. It is unfit to rule because it is incompetent to assure an existence to its slave within his slavery, because it cannot help letting him sink into such a state, that it has to feed him, instead of being fed by him. Society can no longer live under this bourgeoisie, in other words, its existence is no longer compatible with society. </p>
</div>
<h2>Capitalism produces dispair</h2>
<p>The 2020 article published by Stanford School of Humanities and Sciences is very telling on the state of capitalism. Or, at least, American Capitalism, as stated in their article <a href="https://ethicsinsociety.stanford.edu/news/american-capitalism-causing-deaths-despair" target="_blank">American Capitalism is Causing Deaths of Despair</a>. We learn how Ronald Reagan's <a href="https://theintercept.com/2022/08/25/student-loans-debt-reagan/" target="_blank">plan</a> took root in the United States.</p>
<div class="sidebar">
<p>Whites without bachelor's degrees also suffer from chronic pain, difficulty socializing and relaxing, mental distress, high BMIs and low wages. Many are not married and do not practice a religion. In 2016, they were less likely to vote because they believed elections were controlled by the rich and big corporations.</p>
</div>
<p>This is not the only thing we learn from this article; I'd rather not fill this page with quotes from it directly, rather, link the source for you to read directly.</p>
</div>
<div class="footer">
<p>&#127279 <a href="https://capitalismkills.net">capitalismkills.net</a></p>
</div>
</div>
</main>
</body>
</html>

3
index.html
View file

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>capitalism kills</title>
<link rel="stylesheet" href="styles.css?v=1.1">
<link rel="stylesheet" href="styles_index.css?v=1.1">
</head>
<body>
<main>
@ -17,6 +17,7 @@
<p class="source">
From: <a href="https://www.marxists.org/archive/marx/works/1845/condition-working-class/ch07.htm" target="_blank">Condition of the Working Class in England, 1845</a>
</p>
<a href="about.html">about</a>
</div>
</main>
</body>

127
styles.css
View file

@ -1,4 +1,4 @@
/* Base Styles */
/* Base Styles for Child Pages */
html, body {
height: 100%;
margin: 0;
@ -9,86 +9,87 @@ html, body {
}
.container {
width: 90%; /* Make it responsive and fit within the screen */
max-width: 950px; /* Set a max width */
width: 90%;
max-width: 950px;
margin: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
text-align: center;
position: relative;
padding: 1rem; /* Add breathing room for small screens */
padding: 2rem 1rem;
box-sizing: border-box;
}
.background-image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 600px; /* Limit size */
height: auto;
opacity: 0.15; /* Light transparency for clarity */
z-index: 0;
pointer-events: none;
.header {
text-align: center;
margin-bottom: 2rem;
}
blockquote {
font-size: clamp(1.2rem, 2vw, 1.8rem); /* Responsive font size */
font-style: italic;
margin: 0;
line-height: 1.5;
z-index: 1;
.header h1 {
font-size: clamp(2rem, 5vw, 3rem);
color: #f5f5f5;
margin: 0.5rem 0;
}
.author {
margin-top: 1rem;
font-size: clamp(1rem, 1.5vw, 1.2rem); /* Responsive font size */
font-style: italic;
.header p {
font-size: clamp(1rem, 1.5vw, 1.2rem);
color: #bbbbbb;
z-index: 1;
margin: 0.5rem 0;
}
.source {
margin-top: 0.5rem;
.content {
line-height: 1.6;
font-size: clamp(1rem, 1.5vw, 1.2rem);
}
.content h2 {
font-size: clamp(1.5rem, 3vw, 2rem);
margin-top: 2rem;
color: #f5f5f5;
}
.content p {
margin: 1rem 0;
color: #d1d1d1;
}
.content a {
color: #f5f5f5;
text-decoration: underline;
transition: color 0.3s;
}
.content a:hover {
color: #d1d1d1;
}
.sidebar {
background-color: #1c1c1c;
padding: 1rem;
border-left: 4px solid #d1d1d1;
margin: 2rem 0;
}
.sidebar h3 {
font-size: clamp(1.2rem, 2vw, 1.5rem);
color: #f5f5f5;
}
.sidebar p {
font-size: clamp(0.9rem, 1.2vw, 1rem);
color: #999999;
z-index: 1;
color: #bbbbbb;
}
.source a {
.footer {
margin-top: 2rem;
text-align: center;
font-size: clamp(0.8rem, 1.2vw, 1rem);
color: #999999;
}
.footer a {
color: #f5f5f5;
text-decoration: none;
font-weight: bold;
border-bottom: 2px solid #f5f5f5;
transition: color 0.3s, border-color 0.3s;
border-bottom: 1px solid #f5f5f5;
}
.source a:hover {
.footer a:hover {
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;
}
}

106
styles_index.css Normal file
View file

@ -0,0 +1,106 @@
/* Base Styles */
html, body {
height: 100%;
margin: 0;
font-family: 'Georgia', serif;
background-color: #121212;
color: #f5f5f5;
position: relative;
}
.container {
width: 90%;
max-width: 950px;
margin: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
text-align: center;
position: relative;
padding: 1rem;
box-sizing: border-box;
}
.background-image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 600px;
height: auto;
opacity: 0.15;
z-index: 0;
pointer-events: none;
}
blockquote {
font-size: clamp(1.2rem, 2vw, 1.8rem);
font-style: italic;
margin: 0;
line-height: 1.5;
z-index: 1;
}
.author {
margin-top: 1rem;
font-size: clamp(1rem, 1.5vw, 1.2rem);
font-style: italic;
color: #bbbbbb;
z-index: 1;
}
.source {
margin-top: 0.5rem;
font-size: clamp(0.9rem, 1.2vw, 1rem);
color: #999999;
z-index: 1;
}
.source a {
color: #f5f5f5;
text-decoration: none;
font-weight: bold;
border-bottom: 2px solid #f5f5f5;
transition: color 0.3s, border-color 0.3s;
}
.source a:hover {
color: #d1d1d1;
border-color: #d1d1d1;
}
a:visited {
color: #f5f5f5;
text-decoration: none;
font-weight: bold;
border-bottom: 2px solid #f5f5f5;
transition: color 0.3s, border-color 0.3s;
}
a:hover {
color: #d1d1d1;
border-color: #d1d1d1;
}
@media (max-width: 768px) {
.container {
width: 95%;
height: auto;
padding: 2rem 1rem;
}
.background-image {
max-width: 400px;
opacity: 0.1;
}
}
@media (max-width: 480px) {
.background-image {
max-width: 300px;
opacity: 0.08;
}
}