main
Mirischoeb 1 year ago
parent be88fe27b0
commit 40365bad0c

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 406 KiB

After

Width:  |  Height:  |  Size: 181 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 423 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 524 KiB

After

Width:  |  Height:  |  Size: 196 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 MiB

After

Width:  |  Height:  |  Size: 564 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 234 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 553 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 135 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

@ -9,7 +9,7 @@ How to be a social justice warrior
<button onclick="history.back()" class="buttonback">Go Back</button> <button onclick="history.back()" class="buttonback">Go Back</button>
<button class="printbutton"> <button class="printbutton">
<a href="welcomepagecontent\Masterthesis_MiriamSchöb_TheLeftCanMeme.pdf"> <a href="welcomepagecontent\Masterthesis_MiriamSchöb_TheLeftCanMeme.pdf">
&#9113; Print Stickers &#9113;Print Stickers
</a> </a>
</button> </button>
</div> </div>

@ -4,7 +4,7 @@
How to be a social justice warrior How to be a social justice warrior
</title> </title>
</head> </head>
<body> <body id="swiperpages">
<div class="buttoncontainerslides"> <div class="buttoncontainerslides">
<button onclick="history.back()" class="buttonback">Go Back</button> <button onclick="history.back()" class="buttonback">Go Back</button>
<button class="printbutton"> <button class="printbutton">

@ -4,7 +4,7 @@
How to be a social justice warrior How to be a social justice warrior
</title> </title>
</head> </head>
<body> <body id="swiperpages">
<div class="buttoncontainerslides"> <div class="buttoncontainerslides">
<button onclick="history.back()" class="buttonback">Go Back</button> <button onclick="history.back()" class="buttonback">Go Back</button>
<button class="printbutton"> <button class="printbutton">

@ -4,7 +4,7 @@
How to be a social justice warrior How to be a social justice warrior
</title> </title>
</head> </head>
<body> <body id="swiperpages">
<div class="buttoncontainerslides"> <div class="buttoncontainerslides">
<button onclick="history.back()" class="buttonback">Go Back</button> <button onclick="history.back()" class="buttonback">Go Back</button>
<button class="printbutton"> <button class="printbutton">

@ -4,7 +4,7 @@
How to be a social justice warrior How to be a social justice warrior
</title> </title>
</head> </head>
<body> <body id="swiperpages">
<div class="buttoncontainerslides"> <div class="buttoncontainerslides">
<button onclick="history.back()" class="buttonback">Go Back</button> <button onclick="history.back()" class="buttonback">Go Back</button>
<button class="printbutton"> <button class="printbutton">

@ -4,7 +4,7 @@
How to be a social justice warrior How to be a social justice warrior
</title> </title>
</head> </head>
<body> <body id="swiperpages">
<div class="buttoncontainerslides"> <div class="buttoncontainerslides">
<button onclick="history.back()" class="buttonback">Go Back</button> <button onclick="history.back()" class="buttonback">Go Back</button>
<button class="printbutton"> <button class="printbutton">

@ -5,7 +5,7 @@
How to be a social justice warrior How to be a social justice warrior
</title> </title>
</head> </head>
<body> <body id="swiperpages">
<div class="buttoncontainerslides"> <div class="buttoncontainerslides">
<button onclick="history.back()" class="buttonback">Go Back</button> <button onclick="history.back()" class="buttonback">Go Back</button>
<button class="printbutton"> <button class="printbutton">

@ -4,7 +4,7 @@
How to be a social justice warrior How to be a social justice warrior
</title> </title>
</head> </head>
<body> <body id="swiperpages">
<div class="buttoncontainerslides"> <div class="buttoncontainerslides">
<button onclick="history.back()" class="buttonback">Go Back</button> <button onclick="history.back()" class="buttonback">Go Back</button>
<button class="printbutton"> <button class="printbutton">

@ -5,7 +5,7 @@
How to be a social justice warrior How to be a social justice warrior
</title> </title>
</head> </head>
<body> <body id="swiperpages">
<div class="buttoncontainerslides"> <div class="buttoncontainerslides">
<button onclick="history.back()" class="buttonback">Go Back</button> <button onclick="history.back()" class="buttonback">Go Back</button>
<button class="printbutton"> <button class="printbutton">

@ -5,15 +5,8 @@
</title> </title>
</head> </head>
<body id="welcomepage"> <body id="welcomepage">
<div class="header"> <div class="header">
<img class="headerimage"src="https://images.cooltext.com/5661013.png" alt="How to be a social justice warrior" /> <img class="headerimage"src="https://images.cooltext.com/5661013.png" alt="How to be a social justice warrior" />
<p id="introquestion">
If the far-right is able to mobilise people to be politically active in real life,
to attend white supremacist rallies or to storm the capitol by means of memes,
what could the left learn from the far-right's cyber tactics?
And how can anti-fascists counteract?
</p>
</div> </div>
<div class="buttoncontainer"> <div class="buttoncontainer">
<button class="gotobutton"> <button class="gotobutton">
@ -22,24 +15,19 @@
</a> </a>
</button> </button>
<button class="thesisbutton"> <button class="thesisbutton">
<a href="welcomepagecontent\Masterthesis_MiriamSchöb_TheLeftCanMeme.pdf"> <a href="assets/welcomepagecontent/Masterthesis_MiriamSchöb_TheLeftCanMeme.pdf">
Read Thesis Read Thesis
</a> </a>
</button> </button>
</div> </div>
<p id="description">
<div id="description">
<span id="description_color">How to be a social justice warrior</span> <span id="description_color">How to be a social justice warrior</span>
is an online platform that dives into the digital propaganda strategies employed by the far-right, and explores possible counter-action strategies. It's a website packed with printable guides, memes, gifs and educational material, ranging from tips for leftist meme-making, to information about trolling strategies, up to instructions on how to install an Instagram report bot. Pick whatever suits your activism best. is an online platform that dives into the digital propaganda strategies employed by the far-right, and explores possible counter-action strategies. It's a website packed with printable guides, memes, gifs and educational material, ranging from tips for leftist meme-making, to information about trolling strategies, up to instructions on how to install an Instagram report bot. Pick whatever suits your activism best.
<br></br> <br></br>
<span id="description_color">Content Warning:</span> <span id="description_color">Content Warning:</span>
This publication includes examples of racist, sexist, antisemitic and other discriminatory content. This publication includes racist, sexist, antisemitic and other discriminatory content.
</p> </div>
<div class="infowrapper">
<div class="infobox" id="moredescription">
That memes are not only silly images but can have a political effect has long been understood by the far-right. When it comes to the creation and dissemination of weaponised memes, they are unquestionably ahead of the left-wing. Backed up by a powerful network and well-coordinated organisational structures, fascist trolls have not only managed to infiltrate political neutral spaces, but also the ones of the left. When white supremacists are manipulating elections by means of memes, sockpuppet trolls are paid to spread disinformation online, and right-wing troll armies successfully conquer online territories, the battle against fascism extends beyonds the streets.
<br></br>
Miriam Schöb is ...
</div>
</body> </body>

@ -4,7 +4,7 @@
How to be a social justice warrior How to be a social justice warrior
</title> </title>
</head> </head>
<body> <body id="swiperpages">
<div class="buttoncontainerslides"> <div class="buttoncontainerslides">
<button onclick="history.back()" class="buttonback">Go Back</button> <button onclick="history.back()" class="buttonback">Go Back</button>
<button class="printbutton"> <button class="printbutton">

@ -4,13 +4,7 @@
How to be a social justice warrior How to be a social justice warrior
</title> </title>
</head> </head>
<head> <body id="swiperpages">
<link rel="stylesheet" href="/static/style.css">
<title>
How to be a social justice warrior
</title>
</head>
<body>
<div class="buttoncontainerslides"> <div class="buttoncontainerslides">
<button onclick="history.back()" class="buttonback">Go Back</button> <button onclick="history.back()" class="buttonback">Go Back</button>
<button class="printbutton"> <button class="printbutton">

@ -4,7 +4,7 @@
How to be a social justice warrior How to be a social justice warrior
</title> </title>
</head> </head>
<body> <body id="swiperpages">
<div class="buttoncontainerslides"> <div class="buttoncontainerslides">
<button onclick="history.back()" class="buttonback">Go Back</button> <button onclick="history.back()" class="buttonback">Go Back</button>
<button class="printbutton"> <button class="printbutton">

@ -4,7 +4,7 @@
How to be a social justice warrior How to be a social justice warrior
</title> </title>
</head> </head>
<body> <body id="swiperpages">
<div class="buttoncontainerslides"> <div class="buttoncontainerslides">
<button onclick="history.back()" class="buttonback">Go Back</button> <button onclick="history.back()" class="buttonback">Go Back</button>
<button class="printbutton"> <button class="printbutton">

@ -4,7 +4,7 @@
How to be a social justice warrior How to be a social justice warrior
</title> </title>
</head> </head>
<body> <body id="swiperpages">
<div class="buttoncontainerslides"> <div class="buttoncontainerslides">
<button onclick="history.back()" class="buttonback">Go Back</button> <button onclick="history.back()" class="buttonback">Go Back</button>
<button class="printbutton"> <button class="printbutton">

@ -9,17 +9,26 @@
<button onclick="history.back()" class="buttonback">Go Back</button> <button onclick="history.back()" class="buttonback">Go Back</button>
<div class="header"> <div class="header">
<a href="https://cooltext.com"> <a href="https://cooltext.com">
<img class="headerimage"src="https://images.cooltext.com/5661013.png" alt="How to be a social justice warrior" /> <img class="headerimage"src="https://images.cooltext.com/5661013.png" alt="How to be a social justice warrior" loading="lazy" />
</a> </a>
<img class="fiona" src="assets/png-clipart-fiona.png"> <img class="backgroundgifs" id="nyancat" src="assets/nyancat.gif" loading="lazy">
<img class="nyancat" src="assets/nyancat.gif"> <img class="backgroundgifs" id="babyoncat" src="assets/babyoncat.gif" loading="lazy">
<img class="babyoncat" src="assets/babyoncat.gif"> <img class="backgroundgifs" id="confusedgirl" src="assets/confusedgirl.gif" loading="lazy">
<img class="confusedgirl" src="assets/confusedgirl.gif"> <img class="backgroundgifs" id="doge" src="assets/doge.gif" loading="lazy">
<img class="doge" src="assets/doge.gif"> <img class="backgroundgifs" id="travolta" src="/assets/travolta.gif" loading="lazy">
<img class="backgroundgifs" id="angrydog" src="assets/angrydog.gif" loading="lazy">
<img class="backgroundgifs" id="simpsons" src="assets/simpsons.gif" loading="lazy">
<img class="backgroundgifs" id="heartrain" src="assets/heartrain.gif" loading="lazy">
<img class="backgroundgifs" id="dance" src="assets/dance.gif" loading="lazy">
</div> </div>
<div class="grid"> <div class="grid">
<div class="subpage">
<a href="whatsasocialjusticewarrior/index.html">
<img class="overviewimage" src="whatsasocialjusticewarrior/WhatsaSJW_1.png">
</a>
</div>
<div class="subpage"> <div class="subpage">
<a href="howtoidentifyasockpuppettroll/index.html"> <a href="howtoidentifyasockpuppettroll/index.html">
<img class="overviewimage" src="howtoidentifyasockpuppettroll/Howtoidentifyatroll_1.png"> <img class="overviewimage" src="howtoidentifyasockpuppettroll/Howtoidentifyatroll_1.png">
@ -61,11 +70,6 @@
<img class="overviewimage" src="nicolascagelookingatpedropascal/parentspaying.jpg"> <img class="overviewimage" src="nicolascagelookingatpedropascal/parentspaying.jpg">
</a> </a>
</div> </div>
<div class="subpage">
<a href="whatsasocialjusticewarrior/index.html">
<img class="overviewimage" src="whatsasocialjusticewarrior/WhatsaSJW_1.png">
</a>
</div>
<div class="subpage"> <div class="subpage">
<a href="whatisameme/index.html"> <a href="whatisameme/index.html">
<img class="overviewimage" src="whatisameme/Whatisameme_1.png"> <img class="overviewimage" src="whatisameme/Whatisameme_1.png">

@ -4,7 +4,7 @@
How to be a social justice warrior How to be a social justice warrior
</title> </title>
</head> </head>
<body> <body id="swiperpages">
<div class="buttoncontainerslides"> <div class="buttoncontainerslides">
<button onclick="history.back()" class="buttonback">Go Back</button> <button onclick="history.back()" class="buttonback">Go Back</button>
<button class="printbutton"> <button class="printbutton">

@ -7,20 +7,20 @@ body{
} }
#welcomepage{ #welcomepage{
background-color:#000000; /* background: linear-gradient(90deg, rgba(153,150,244,1) 0%, rgba(128,205,229,1) 50%, rgba(147,102,237,1) 100%); */
background-color: #050725;
} }
#gallery{ #gallery{
background-image: url(/assets/heartrain.gif), radial-gradient(circle, aliceblue, cornflowerblue, palevioletred, salmon); background-image: radial-gradient(circle, rgba(170,159,255,1) 0%, rgba(128,132,229,1) 50%, rgba(5,7,37,1) 100%);
background-repeat: repeat-x,no-repeat; background-repeat: repeat-x;
font-family: 'Courier New', Courier, monospace;
margin-top: 10em; margin-top: 10em;
margin-bottom: 10em; margin-bottom: 10em;
background-size: 40em, auto; background-size: auto;
} }
#swiperpages{ #swiperpages{
background-image: radial-gradient(circle, aliceblue, cornflowerblue, palevioletred, salmon); background-image: radial-gradient(circle, rgba(170,159,255,1) 0%, rgba(128,132,229,1) 50%, rgba(5,7,37,1) 100%);
} }
p{ p{
@ -32,75 +32,42 @@ p{
width: 1680px; width: 1680px;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
#introquestion{
color: #b456ff;
margin-top: 10.5em;
width:1750px;
}
#description{ #description{
color: white; color: #b456ff;
margin-top: 34.5em; margin-top: 8.5em;
text-align: left; text-align: justify;
width: 1750px; width: 1440px;
font-size: 1.4em; font-size: 1.5em;
position: absolute; position: absolute;
left: 50%;
transform: translate(-50%,-50%);
font-family: monospace;
} }
#description_color{ #description_color{
color:#87b5e7; color:#87b5e7;
} }
#moredescription{
color:#000000;
margin-top: 32.5em;
text-align: left;
}
.infobox{
padding: 31px;
text-align: left;
justify-content: center;
background-color: radial-gradient(circle, aliceblue, cornflowerblue, palevioletred, salmon);
font-family: Inter,sans-serif;
font-size: 1.1em;
color: white;
align-items: center;
display: flex;
background-color: #d095ee;
position: absolute;
top:-8em;
}
.infowrapper{
width: 1750px;
position: absolute;
align-items: center;
justify-content: center;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index:-10;
}
.header{ .header{
width:100%; width:100%;
height: 10em; height: 10em;
position:absolute; position:absolute;
margin-bottom: 7em; margin-bottom: 7em;
top:9em; top:0;
} }
.headerimage { .headerimage {
position:absolute; width: 90em;
text-align: center; margin-top: 25em;
justify-content: center;
align-items: center;
transform: translate(-50%, -50%);
top: 50%;
left: 50%; left: 50%;
width:105em; transform: translate(-50%, -50%);
filter:contrast(1.1); position: absolute;
} }
.cooltext{ .cooltext{
position: absolute; position: absolute;
text-align: center; text-align: center;
@ -113,245 +80,169 @@ p{
} }
.fiona{
width: 30%; .backgroundgifs{
position: absolute;
z-index: -10;
margin-top: 34em;
filter: blur(6px);
}
.nyancat{
position: absolute; position: absolute;
z-index: -10; z-index: -10;
margin-top: 1em; margin-top: 1em;
filter: blur(6px); filter: blur(6px);
}
#nyancat{
left: 50%; left: 50%;
top: 800%; top: 800%;
} }
.babyoncat{ #babyoncat{
position: absolute;
margin-top: 1em;
filter: blur(6px);
left: 75%;
top: 500%; top: 500%;
z-index: -10; z-index: -10;
} }
.confusedgirl{ #confusedgirl{
position: absolute;
z-index: -9;
margin-top: 1em;
filter: blur(6px);
left: 30%; left: 30%;
top: 1020%; top: 1120%;
} }
.doge{ #doge{
position: absolute;
z-index: -9;
margin-top: 1em;
filter: blur(6px);
left: 30%; left: 30%;
top: 700%;
}
#travolta{
left: 87%;
top: 600%; top: 600%;
} }
#angrydog{
left: 76%;
top: 1000%;
}
#simpsons{
left: 12%;
top: 880%;
}
#heartrain{
left:55%;
top:1333%;
width:10%;
}
#dance{
left:52%;
top:450%;
}
.buttonback {
background-color: #050725;
border-radius: 8px;
border-style: none;
box-sizing: border-box;
cursor: pointer;
flex-shrink: 0;
font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
font-size: 16px;
font-weight: 500;
height: 4rem;
padding: 0 1.6rem;
text-align: center;
text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
transition: all .5s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
margin:1em;
position: absolute;
top: 0;
z-index:10;
color: #a178ee;
}
.buttonback { .buttonback:hover {
align-items: center; box-shadow: rgba(115, 102, 220, 0.5) 0 10px 30px;
background-color: #fee6e3; transition-duration: .1s;
border: 2px solid #111; z-index:10;
border-radius: 8px; }
box-sizing: border-box;
color: #111; @media (min-width: 768px) {
cursor: pointer; .buttonback {
display: flex; padding: 0 2.6rem;
font-family: Inter,sans-serif; z-index:10;
font-size: 16px; }
height: 48px; }
justify-content: center;
line-height: 24px;
max-width: 100%;
padding: 0 25px;
position: absolute;
text-align: center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
top: 1em;
left: 1em;
}
.buttonback:after {
background-color: #111;
border-radius: 8px;
content: "";
display: block;
height: 48px;
left: 0;
width: 100%;
position: absolute;
top: -2px;
transform: translate(8px, 8px);
transition: transform .2s ease-out;
z-index: -1;
}
.buttonback:hover:after {
transform: translate(0, 0);
}
.buttonback:active {
background-color: #ffdeda;
outline: 0;
}
.buttonback:hover {
outline: 0;
}
@media (min-width: 768px) {
.buttonback {
padding: 0 40px;
}
}
.buttoncontainer { .buttoncontainer {
position: absolute;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
left: 50%; margin-top: 31em;
transform: translate(-50%, -50%);
margin-top: 35em; }
width:1750px;
background: linear-gradient(90deg, rgba(153,150,244,1) 0%, rgba(128,205,229,1) 50%, rgba(147,102,237,1) 100%);
height:10em;
}
.gotobutton { .gotobutton {
align-items: center; background-image: linear-gradient(90deg, rgba(153,150,244,1) 0%, rgb(62 151 207 / 55%) 50%, rgb(95 52 182 / 57%) 100%);
background-color: blueviolet; border-radius: 8px;
border: 2px solid #111; border-style: none;
border-radius: 8px; box-sizing: border-box;
box-sizing: border-box; color: #FFFFFF;
color: #111; cursor: pointer;
cursor: pointer; flex-shrink: 0;
display: flex; font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
font-family: Inter,sans-serif; font-size: 16px;
font-size: 16px; font-weight: 500;
height: 48px; height: 4rem;
justify-content: center; padding: 0 1.6rem;
line-height: 24px; text-align: center;
min-width: 270px; text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
max-width: 100%; transition: all .5s;
padding: 0 25px; user-select: none;
position: relative; -webkit-user-select: none;
left: auto; touch-action: manipulation;
right: auto; margin:1em;
text-align: center; }
text-decoration: none;
user-select: none; .gotobutton:hover {
-webkit-user-select: none; box-shadow: rgba(115, 102, 220, 0.5) 0 1px 30px;
touch-action: manipulation; transition-duration: .1s;
margin: 20px; }
}
@media (min-width: 768px) {
.gotobutton:after { .gotobutton {
background-color: #111; padding: 0 2.6rem;
border-radius: 8px;
content: "";
display: block;
height: 48px;
left: 0;
width: 100%;
position: absolute;
top: -2px;
transform: translate(8px, 8px);
transition: transform .2s ease-out;
z-index: -1;
}
.gotobutton:hover:after {
transform: translate(0, 0);
}
.gotobutton:active {
background-color: #ffdeda;
outline: 0;
}
.gotobutton:hover {
outline: 0;
}
@media (min-width: 768px) {
.gotobutton {
padding: 0 40px;
}
} }
}
.thesisbutton { .thesisbutton {
align-items: center; background-image: linear-gradient(90deg, rgba(153,150,244,1) 0%, rgb(62 151 207 / 55%) 50%, rgb(95 52 182 / 57%) 100%);
background-color: blueviolet; border-radius: 8px;
border: 2px solid #111; border-style: none;
border-radius: 8px; box-sizing: border-box;
box-sizing: border-box; color: #FFFFFF;
color: #111; cursor: pointer;
cursor: pointer; flex-shrink: 0;
display: flex; font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
font-family: Inter,sans-serif; font-size: 16px;
font-size: 16px; font-weight: 500;
height: 48px; height: 4rem;
min-width: 270px; padding: 0 1.6rem;
justify-content: center; text-align: center;
line-height: 24px; text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
max-width: 100%; transition: all .5s;
padding: 0 25px; user-select: none;
position: relative; -webkit-user-select: none;
text-align: center; touch-action: manipulation;
text-decoration: none; margin:1em;
user-select: none; }
-webkit-user-select: none;
touch-action: manipulation; .thesisbutton:hover {
margin: 20px; box-shadow: rgba(115, 102, 220, 0.5) 0 10px 30px;
} transition-duration: .1s;
}
.thesisbutton:after {
background-color: #111; @media (min-width: 768px) {
border-radius: 8px; .thesisbutton {
content: ""; padding: 0 2.6rem;
display: block;
height: 48px;
left: 0;
width: 100%;
position: absolute;
top: -2px;
transform: translate(8px, 8px);
transition: transform .2s ease-out;
z-index: -1;
}
.thesisbutton:hover:after {
transform: translate(0, 0);
}
.thesisbutton:active {
background-color: #ffdeda;
outline: 0;
}
.thesisbutton:hover {
outline: 0;
}
@media (min-width: 768px) {
.thesisbutton {
padding: 0 40px;
}
} }
}
.buttoncontainerslides{ .buttoncontainerslides{
position: absolute; position: absolute;
@ -365,65 +256,47 @@ a:-webkit-any-link {
text-decoration: none; text-decoration: none;
} }
.printbutton{ .printbutton {
align-items: center; background-color: #050725;
background-color: #fee6e3; border-radius: 8px;
border: 2px solid #111; border-style: none;
border-radius: 8px; box-sizing: border-box;
box-sizing: border-box; cursor: pointer;
color: #111; flex-shrink: 0;
cursor: pointer; font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
display: flex; font-size: 16px;
font-family: Inter,sans-serif; font-weight: 500;
font-size: 16px; height: 4rem;
height: 48px; padding: 0 1.6rem;
justify-content: center; text-align: center;
line-height: 24px; text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
max-width: 100%; transition: all .5s;
padding: 0 25px; user-select: none;
position: absolute; -webkit-user-select: none;
text-align: center; touch-action: manipulation;
text-decoration: none; margin:1em;
user-select: none; position: absolute;
-webkit-user-select: none; top: 0;
touch-action: manipulation; right:0;
top: 1em; z-index:10;
right: 1em; color: #a178ee;
} }
.printbutton:after { .printbutton:hover {
background-color: #111; box-shadow: rgba(115, 102, 220, 0.5) 0 10px 30px;
border-radius: 8px; transition-duration: .1s;
content: ""; z-index:10;
display: block; }
height: 48px;
left: 0; @media (min-width: 768px) {
width: 100%; .printbutton {
position: absolute; padding: 0 2.6rem;
top: -2px; z-index:10;
transform: translate(8px, 8px);
transition: transform .2s ease-out;
z-index: -1;
}
.printbutton:hover:after {
transform: translate(0, 0);
}
.printbutton:active {
background-color: #ffdeda;
outline: 0;
}
.printbutton:hover {
outline: 0;
}
@media (min-width: 768px) {
.printbutton {
padding: 0 40px;
}
} }
}
a:link {
color: #a178ee;
}
.grid{ .grid{
display: grid; display: grid;
@ -504,32 +377,55 @@ swiper-slide{
background: green; background: green;
} }
.alert {
background-color: transparent;
box-sizing: border-box;
cursor: pointer;
font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
font-size: 1.57em;
font-weight: 500;
height: 4rem;
text-align: center;
text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
transition: all .5s;
-webkit-user-select: none;
touch-action: manipulation;
top: 0;
right: 0;
z-index: 10;
color: #a178ee;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 92%;
height: 100%;
justify-content: center;
display: flex;
backdrop-filter: blur(10px);
.trigger > img{
filter:blur(10px);
transition: filter 1s;
} }
.trigger::after{ .alert:hover {
content: "Content Warning"; transition-duration: .1s;
position: fixed; z-index:10;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 4em;
} }
.trigger:hover > img{
filter: blur(0px);
@media (min-width: 768px) {
.alert {
padding: 0 2.6rem;
z-index:10;
}
} }
.trigger:hover:after{
opacity: 0; #alerttext{
} justify-content: center;
.trigger:hover{ align-items: center;
opacity: 1; width: 100%;
transition: opacity 1s; text-align: center;
} }
:root { :root {
--swiper-navigation-size: 60; --swiper-navigation-size: 60;
--swiper-theme-color: rgb(0, 89, 255); --swiper-theme-color: rgb(0, 89, 255);
@ -538,190 +434,3 @@ swiper-slide{
} }
/* E-mail form */
#fcf-form {
display:block;
}
.fcf-body {
margin: 0;
font-family: Inter,sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
padding: 30px;
padding-bottom: 10px;
max-width: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.fcf-form-group {
margin-bottom: 1rem;
}
.fcf-input-group {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: stretch;
align-items: stretch;
width: 100%;
}
.fcf-form-control {
display: block;
width: 600px;
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
background-clip: padding-box;
border: 1px solid #ced4da;
outline: none;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
background-color: #fee6e3;
border: 2px solid #111;
border-radius: 8px;
box-sizing: border-box;
color: #111;
}
.fcf-form-control:focus {
border: 1px solid #313131;
}
select.fcf-form-control[size], select.fcf-form-control[multiple] {
height: auto;
}
textarea.fcf-form-control {
font-family: -apple-system, Arial, sans-serif;
height: auto;
}
label.fcf-label {
display: inline-block;
margin-bottom: 0.5rem;
}
.fcf-btn {
align-items: center;
background-color: #fee6e3;
border: 2px solid #111;
border-radius: 8px;
box-sizing: border-box;
color: #111;
cursor: pointer;
display: flex;
font-family: Inter,sans-serif;
font-size: 16px;
height: 48px;
justify-content: center;
line-height: 24px;
max-width: 100%;
padding: 0 25px;
position: relative;
text-align: center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
width: 600px;
}
.fcf-btn:after {
background-color: #111;
border-radius: 8px;
content: "";
display: block;
height: 48px;
left: 0;
width: 100%;
position: absolute;
top: -2px;
transform: translate(8px, 8px);
transition: transform .2s ease-out;
z-index: -1;
}
.fcf-btn:hover:after {
transform: translate(0, 0);
}
.fcf-btn:active {
background-color: #ffdeda;
outline: 0;
}
.fcf-btn:hover {
outline: 0;
}
@media (min-width: 768px) {
.buttonback {
padding: 0 40px;
}
}
input[type="submit"].fcf-btn-block, input[type="reset"].fcf-btn-block, input[type="button"].fcf-btn-block {
width: 100%;
}
/* airport infotext welcome page */
/* * {
padding: 0; } */
/* .center {
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto; } */
/* .table {
min-width: 100%;
height: 150px;
background-color: #000000; }
.table .monitor-wrapper {
background: #050321;
min-width: 100%;
height: 130px;
box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.3); }
.textwrapper {
min-width: 100%;
height: 100px;
overflow: hidden;
white-space: nowrap;
box-shadow: inset 0px 5px 10px 2px rgba(0, 0, 0, 0.3); }
.p {
font-family: 'VT323', monospace;
font-size: 100px;
position: relative;
display: inline-block;
animation: move 20s infinite linear;
color: #EBB55F; }
@keyframes move {
from {
left: 800px; }
to {
left: -4800px; } } */

@ -4,7 +4,7 @@
How to be a social justice warrior How to be a social justice warrior
</title> </title>
</head> </head>
<body> <body id="swiperpages">
<div class="buttoncontainerslides"> <div class="buttoncontainerslides">
<button onclick="history.back()" class="buttonback">Go Back</button> <button onclick="history.back()" class="buttonback">Go Back</button>
<button class="printbutton"> <button class="printbutton">

@ -4,7 +4,7 @@
How to be a social justice warrior How to be a social justice warrior
</title> </title>
</head> </head>
<body> <body id="swiperpages">
<div class="buttoncontainerslides"> <div class="buttoncontainerslides">
<button onclick="history.back()" class="buttonback">Go Back</button> <button onclick="history.back()" class="buttonback">Go Back</button>
<button class="printbutton"> <button class="printbutton">

@ -4,7 +4,7 @@
How to be a social justice warrior How to be a social justice warrior
</title> </title>
</head> </head>
<body> <body id="swiperpages">
<div class="buttoncontainerslides"> <div class="buttoncontainerslides">
<button onclick="history.back()" class="buttonback">Go Back</button> <button onclick="history.back()" class="buttonback">Go Back</button>
<button class="printbutton"> <button class="printbutton">

@ -5,7 +5,7 @@
How to be a social justice warrior How to be a social justice warrior
</title> </title>
</head> </head>
<body> <body id="swiperpages">
<div class="buttoncontainerslides"> <div class="buttoncontainerslides">
<button onclick="history.back()" class="buttonback">Go Back</button> <button onclick="history.back()" class="buttonback">Go Back</button>
<button class="printbutton"> <button class="printbutton">

@ -4,7 +4,7 @@
How to be a social justice warrior How to be a social justice warrior
</title> </title>
</head> </head>
<body> <body id="swiperpages">
<div class="buttoncontainerslides"> <div class="buttoncontainerslides">
<button onclick="history.back()" class="buttonback">Go Back</button> <button onclick="history.back()" class="buttonback">Go Back</button>
<button class="printbutton"> <button class="printbutton">

@ -4,7 +4,7 @@
How to be a social justice warrior How to be a social justice warrior
</title> </title>
</head> </head>
<body> <body id="swiperpages">
<div class="buttoncontainerslides"> <div class="buttoncontainerslides">
<button onclick="history.back()" class="buttonback">Go Back</button> <button onclick="history.back()" class="buttonback">Go Back</button>
<button class="printbutton"> <button class="printbutton">
@ -31,10 +31,20 @@ How to be a social justice warrior
<swiper-slide> <swiper-slide>
<img class="sliderimage" src="WhatsaSJW_5.png" loading="lazy"> <img class="sliderimage" src="WhatsaSJW_5.png" loading="lazy">
</swiper-slide> </swiper-slide>
<swiper-slide class="trigger"> <swiper-slide>
<div class="alert">
<div class="alert" id="alerttext" onclick="this.parentElement.style.display='none';">
Content Warning: Discriminatory content</br>Click to view
</div>
</div>
<img class="sliderimage" src="WhatsaSJW_6.png" loading="lazy"> <img class="sliderimage" src="WhatsaSJW_6.png" loading="lazy">
</swiper-slide> </swiper-slide>
<swiper-slide> <swiper-slide>
<div class="alert">
<div class="alert" id="alerttext" onclick="this.parentElement.style.display='none';">
Content Warning: Discriminatory content</br>Click to view
</div>
</div>
<img class="sliderimage" src="WhatsaSJW_7.png" loading="lazy"> <img class="sliderimage" src="WhatsaSJW_7.png" loading="lazy">
</swiper-slide> </swiper-slide>
<swiper-slide> <swiper-slide>

@ -4,7 +4,7 @@
How to be a social justice warrior How to be a social justice warrior
</title> </title>
</head> </head>
<body> <body id="swiperpages">
<div class="buttoncontainerslides"> <div class="buttoncontainerslides">
<button onclick="history.back()" class="buttonback">Go Back</button> <button onclick="history.back()" class="buttonback">Go Back</button>
<button class="printbutton"> <button class="printbutton">

@ -4,7 +4,7 @@
How to be a social justice warrior How to be a social justice warrior
</title> </title>
</head> </head>
<body> <body id="swiperpages">
<div class="buttoncontainerslides"> <div class="buttoncontainerslides">
<button onclick="history.back()" class="buttonback">Go Back</button> <button onclick="history.back()" class="buttonback">Go Back</button>
<button class="printbutton"> <button class="printbutton">

@ -4,7 +4,7 @@
How to be a social justice warrior How to be a social justice warrior
</title> </title>
</head> </head>
<body> <body id="swiperpages">
<div class="buttoncontainerslides"> <div class="buttoncontainerslides">
<button onclick="history.back()" class="buttonback">Go Back</button> <button onclick="history.back()" class="buttonback">Go Back</button>
<button class="printbutton"> <button class="printbutton">

Loading…
Cancel
Save