main
Mirischoeb 2 years 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 class="printbutton">
<a href="welcomepagecontent\Masterthesis_MiriamSchöb_TheLeftCanMeme.pdf">
&#9113; Print Stickers
&#9113;Print Stickers
</a>
</button>
</div>

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

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

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

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

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

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

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

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

@ -5,15 +5,8 @@
</title>
</head>
<body id="welcomepage">
<div class="header">
<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>
<img class="headerimage"src="https://images.cooltext.com/5661013.png" alt="How to be a social justice warrior" />
</div>
<div class="buttoncontainer">
<button class="gotobutton">
@ -22,24 +15,19 @@
</a>
</button>
<button class="thesisbutton">
<a href="welcomepagecontent\Masterthesis_MiriamSchöb_TheLeftCanMeme.pdf">
<a href="assets/welcomepagecontent/Masterthesis_MiriamSchöb_TheLeftCanMeme.pdf">
Read Thesis
</a>
</button>
</div>
<p id="description">
<div id="description">
<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.
<br></br>
<span id="description_color">Content Warning:</span>
This publication includes examples of racist, sexist, antisemitic and other discriminatory content.
</p>
<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>
This publication includes racist, sexist, antisemitic and other discriminatory content.
</div>
</body>

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

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

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

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

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

@ -9,17 +9,26 @@
<button onclick="history.back()" class="buttonback">Go Back</button>
<div class="header">
<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>
<img class="fiona" src="assets/png-clipart-fiona.png">
<img class="nyancat" src="assets/nyancat.gif">
<img class="babyoncat" src="assets/babyoncat.gif">
<img class="confusedgirl" src="assets/confusedgirl.gif">
<img class="doge" src="assets/doge.gif">
<img class="backgroundgifs" id="nyancat" src="assets/nyancat.gif" loading="lazy">
<img class="backgroundgifs" id="babyoncat" src="assets/babyoncat.gif" loading="lazy">
<img class="backgroundgifs" id="confusedgirl" src="assets/confusedgirl.gif" loading="lazy">
<img class="backgroundgifs" id="doge" src="assets/doge.gif" loading="lazy">
<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 class="grid">
<div class="subpage">
<a href="whatsasocialjusticewarrior/index.html">
<img class="overviewimage" src="whatsasocialjusticewarrior/WhatsaSJW_1.png">
</a>
</div>
<div class="subpage">
<a href="howtoidentifyasockpuppettroll/index.html">
<img class="overviewimage" src="howtoidentifyasockpuppettroll/Howtoidentifyatroll_1.png">
@ -61,11 +70,6 @@
<img class="overviewimage" src="nicolascagelookingatpedropascal/parentspaying.jpg">
</a>
</div>
<div class="subpage">
<a href="whatsasocialjusticewarrior/index.html">
<img class="overviewimage" src="whatsasocialjusticewarrior/WhatsaSJW_1.png">
</a>
</div>
<div class="subpage">
<a href="whatisameme/index.html">
<img class="overviewimage" src="whatisameme/Whatisameme_1.png">

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

@ -7,20 +7,20 @@ body{
}
#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{
background-image: url(/assets/heartrain.gif), radial-gradient(circle, aliceblue, cornflowerblue, palevioletred, salmon);
background-repeat: repeat-x,no-repeat;
font-family: 'Courier New', Courier, monospace;
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;
margin-top: 10em;
margin-bottom: 10em;
background-size: 40em, auto;
background-size: auto;
}
#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{
@ -32,75 +32,42 @@ p{
width: 1680px;
transform: translate(-50%, -50%);
}
#introquestion{
color: #b456ff;
margin-top: 10.5em;
width:1750px;
}
#description{
color: white;
margin-top: 34.5em;
text-align: left;
width: 1750px;
font-size: 1.4em;
color: #b456ff;
margin-top: 8.5em;
text-align: justify;
width: 1440px;
font-size: 1.5em;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
font-family: monospace;
}
#description_color{
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{
width:100%;
height: 10em;
position:absolute;
margin-bottom: 7em;
top:9em;
top:0;
}
.headerimage {
position:absolute;
text-align: center;
justify-content: center;
align-items: center;
transform: translate(-50%, -50%);
top: 50%;
width: 90em;
margin-top: 25em;
left: 50%;
width:105em;
filter:contrast(1.1);
transform: translate(-50%, -50%);
position: absolute;
}
.cooltext{
position: absolute;
text-align: center;
@ -113,245 +80,169 @@ p{
}
.fiona{
width: 30%;
position: absolute;
z-index: -10;
margin-top: 34em;
filter: blur(6px);
}
.nyancat{
.backgroundgifs{
position: absolute;
z-index: -10;
margin-top: 1em;
filter: blur(6px);
}
#nyancat{
left: 50%;
top: 800%;
}
.babyoncat{
position: absolute;
margin-top: 1em;
filter: blur(6px);
left: 75%;
#babyoncat{
top: 500%;
z-index: -10;
}
.confusedgirl{
position: absolute;
z-index: -9;
margin-top: 1em;
filter: blur(6px);
#confusedgirl{
left: 30%;
top: 1020%;
top: 1120%;
}
.doge{
position: absolute;
z-index: -9;
margin-top: 1em;
filter: blur(6px);
#doge{
left: 30%;
top: 700%;
}
#travolta{
left: 87%;
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 {
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: 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;
}
}
.buttonback:hover {
box-shadow: rgba(115, 102, 220, 0.5) 0 10px 30px;
transition-duration: .1s;
z-index:10;
}
@media (min-width: 768px) {
.buttonback {
padding: 0 2.6rem;
z-index:10;
}
}
.buttoncontainer {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
left: 50%;
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;
margin-top: 31em;
}
}
.gotobutton {
align-items: center;
background-color: blueviolet;
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;
min-width: 270px;
max-width: 100%;
padding: 0 25px;
position: relative;
left: auto;
right: auto;
text-align: center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
margin: 20px;
}
.gotobutton: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;
}
.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;
}
background-image: linear-gradient(90deg, rgba(153,150,244,1) 0%, rgb(62 151 207 / 55%) 50%, rgb(95 52 182 / 57%) 100%);
border-radius: 8px;
border-style: none;
box-sizing: border-box;
color: #FFFFFF;
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;
}
.gotobutton:hover {
box-shadow: rgba(115, 102, 220, 0.5) 0 1px 30px;
transition-duration: .1s;
}
@media (min-width: 768px) {
.gotobutton {
padding: 0 2.6rem;
}
}
.thesisbutton {
align-items: center;
background-color: blueviolet;
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;
min-width: 270px;
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;
margin: 20px;
}
.thesisbutton: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;
}
.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;
}
background-image: linear-gradient(90deg, rgba(153,150,244,1) 0%, rgb(62 151 207 / 55%) 50%, rgb(95 52 182 / 57%) 100%);
border-radius: 8px;
border-style: none;
box-sizing: border-box;
color: #FFFFFF;
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;
}
.thesisbutton:hover {
box-shadow: rgba(115, 102, 220, 0.5) 0 10px 30px;
transition-duration: .1s;
}
@media (min-width: 768px) {
.thesisbutton {
padding: 0 2.6rem;
}
}
.buttoncontainerslides{
position: absolute;
@ -365,65 +256,47 @@ a:-webkit-any-link {
text-decoration: none;
}
.printbutton{
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: absolute;
text-align: center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
top: 1em;
right: 1em;
}
.printbutton: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;
}
.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;
}
.printbutton {
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;
right:0;
z-index:10;
color: #a178ee;
}
.printbutton:hover {
box-shadow: rgba(115, 102, 220, 0.5) 0 10px 30px;
transition-duration: .1s;
z-index:10;
}
@media (min-width: 768px) {
.printbutton {
padding: 0 2.6rem;
z-index:10;
}
}
a:link {
color: #a178ee;
}
.grid{
display: grid;
@ -504,32 +377,55 @@ swiper-slide{
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{
content: "Content Warning";
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 4em;
.alert:hover {
transition-duration: .1s;
z-index:10;
}
.trigger:hover > img{
filter: blur(0px);
@media (min-width: 768px) {
.alert {
padding: 0 2.6rem;
z-index:10;
}
}
.trigger:hover:after{
opacity: 0;
}
.trigger:hover{
opacity: 1;
transition: opacity 1s;
#alerttext{
justify-content: center;
align-items: center;
width: 100%;
text-align: center;
}
:root {
--swiper-navigation-size: 60;
--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
</title>
</head>
<body>
<body id="swiperpages">
<div class="buttoncontainerslides">
<button onclick="history.back()" class="buttonback">Go Back</button>
<button class="printbutton">

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

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

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

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

@ -4,7 +4,7 @@
How to be a social justice warrior
</title>
</head>
<body>
<body id="swiperpages">
<div class="buttoncontainerslides">
<button onclick="history.back()" class="buttonback">Go Back</button>
<button class="printbutton">
@ -31,10 +31,20 @@ How to be a social justice warrior
<swiper-slide>
<img class="sliderimage" src="WhatsaSJW_5.png" loading="lazy">
</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">
</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">
</swiper-slide>
<swiper-slide>

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

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

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

Loading…
Cancel
Save