diff --git a/static/style.css b/static/style.css
index c516fa7..bac19c6 100644
--- a/static/style.css
+++ b/static/style.css
@@ -2,6 +2,12 @@
font-family: "subscriber";
src: url("/static/fonts/SUBSCRIBER-Regular.otf") format("opentype"); */
/* } */
+/* CSS Reset */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
body{
}
@@ -14,10 +20,14 @@ body{
}
}
+.backgroundgifs {
+ position:relative;
+}
+
.fullcontainer {
max-width: 100%;
- padding: 0 20px;
margin: 0 auto;
+ padding-bottom:24em;
}
#welcomepage{
@@ -29,12 +39,13 @@ body{
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;
+ margin-bottom: 34em;
background-size: auto;
}
#swiperpages{
background-image: radial-gradient(circle, rgba(170,159,255,1) 0%, rgba(128,132,229,1) 50%, rgba(5,7,37,1) 100%);
+ margin-bottom:2em;
}
p{
@@ -47,25 +58,27 @@ p{
transform: translate(-50%, -50%);
}
-#description{
+
+.descriptioncontainer{
color: #b456ff;
margin-top: 8.5em;
text-align: justify;
- width: 1440px;
- font-size: 1.5em;
- position: absolute;
+ width: 80%;
+ font-size: 1.2em;
+ position: relative;
left: 50%;
transform: translate(-50%,-50%);
font-family: monospace;
}
+
#description_color{
color:#87b5e7;
}
.header{
- width:100%;
+ width:99%;
height: 10em;
position:absolute;
margin-bottom: 7em;
@@ -73,13 +86,13 @@ p{
}
.headerimage {
- width: 90em;
- margin-top: 25em;
+ margin-top: 21em;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
max-width: 100%;
height: auto;
+ width:74em;
}
@@ -98,67 +111,62 @@ p{
}
-.backgroundgifs{
- position: absolute;
- z-index: -10;
- margin-top: 1em;
- filter: blur(6px);
-}
#nyancat{
- left: 50%;
- top: 800%;
+ margin-top: 13em;
+ margin-left: 4em;
}
#babyoncat{
- top: 500%;
- z-index: -10;
+ margin-left: -3em;
+ margin-top: -1em;
}
#confusedgirl{
- left: 30%;
- top: 1120%;
+ margin-left: 0em;
+ margin-top: 6em;
+ width: 12em;
}
#doge{
- left: 30%;
- top: 700%;
-}
-#travolta{
- left: 72%;
- top: 600%;
+ margin-left: 3em;
+ margin-top: 14em;
}
#angrydog{
- left: 76%;
- top: 1200%;
+ margin-left: -6em;
+ margin-top: -5em;
+ width: 13em;
+}
+#travolta{
+ margin-left: -4em;
+ margin-top: -5em;
}
#simpsons{
- left: 12%;
- top: 880%;
+ margin-left: 7em;
+ margin-top: 9em;
}
#heartrain{
- left:55%;
- top:1333%;
- width:10%;
+ margin-left: 1em;
+ margin-top: -26em;
+ width: 13em;
}
#dance{
- left:52%;
- top:450%;
+ margin-left: -19em;
+ margin-top: -5em;
}
#happymanhat{
- left: 14%;
- top: 1600%;
+ margin-left: 6em;
+ margin-top: -29em;
}
#girldance{
- left: 76%;
- top: 1590%;
+ margin-left: 2em;
+ margin-top: 3em;
}
#heartjump{
- left: 0%;
- top: 1390%;
- width: 15em;
- height: 15em;
+ margin-left: 13em;
+ margin-top: 0em;
+ width: 10em;
}
#takemymoney{
- left: 47%;
- top: 1800%;
+ margin-left: 1em;
+ margin-top:1em;
}
.buttonback {
@@ -169,9 +177,9 @@ p{
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-size: 14px;
font-weight: 500;
- height: 4rem;
+ height: 3rem;
padding: 0 1.6rem;
text-align: center;
text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
@@ -192,20 +200,15 @@ p{
z-index:10;
}
-@media (min-width: 768px) {
- .buttonback {
- padding: 0 2.6rem;
- z-index:10;
- }
-}
.buttoncontainer {
display: flex;
align-items: center;
- margin-top: 31em;
+ margin-top: 27em;
justify-content: center;
+ position:relative;
}
@@ -218,9 +221,9 @@ p{
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-size: 14px;
font-weight: 500;
- height: 4rem;
+ height: 3rem;
padding: 0 1.6rem;
text-align: center;
text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
@@ -253,9 +256,9 @@ p{
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-size: 14px;
font-weight: 500;
- height: 4rem;
+ height: 3rem;
padding: 0 1.6rem;
text-align: center;
text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
@@ -265,6 +268,9 @@ p{
touch-action: manipulation;
margin:1em;
}
+#thesiscolor{
+ color:black;
+}
.thesisbutton:hover {
box-shadow: rgba(115, 102, 220, 0.5) 0 10px 30px;
@@ -280,7 +286,7 @@ p{
.buttoncontainerslides{
position: absolute;
display: block;
- min-width: 100%;
+ min-width: 99%;
}
a:-webkit-any-link {
@@ -297,9 +303,9 @@ a:-webkit-any-link {
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-size: 14px;
font-weight: 500;
- height: 4rem;
+ height: 3rem;
padding: 0 1.6rem;
text-align: center;
text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
@@ -340,34 +346,107 @@ a:link {
margin-left:2.5em;
margin-right: 2.5em;
margin-bottom: 8em;
- margin-top: 38em;
- gap: 110px;
+ margin-top: 29em;
+ gap: 70px;
+ position: relative;
}
+.gifgrid{
+ display: grid;
+ justify-content: space-between;
+ grid-template-columns: auto auto auto;
+ margin-bottom: 8em;
+ margin-top: 29em;
+ gap: 67px;
+ position: relative;
+ z-index: -10;
+ margin-top: 37em;
+ filter: blur(6px);
+}
+
/* Styles for medium-sized screens */
@media (max-width: 768px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
+ #travolta{
+ margin-left: -42em;
+ margin-top: 43em;
+ }
+ #confusedgirl{
+ margin-left: -44em;
+ margin-top: 46em;
+ width: 12em;
+ }
+ #dance {
+ margin-left: -28em;
+ margin-top: 23em;
+ }
}
/* Styles for smaller screens */
@media (max-width: 480px) {
.grid {
- grid-template-columns: repeat(2, 1fr);
+ grid-template-columns: repeat(2, 1fr);
+ margin-top: 19em;
+ margin-left:0;
+ }
+ .swiper-container{
+ min-width: 100%;
+ }
+ .alert{
+ font-size:auto;
+ }
+
+ .buttoncontainer{
+ position: absolute;
+ justify-content: center;
+ left: 50%;
+ transform: translate(-50%,-50%);
+ width: 1em;
+ margin-top: 12em;
+ }
+ .gotobutton{
+ position:absolute;
+ right:1;
+ width:8.9em;
+ padding:0;
+ }
+ .thesisbutton{
+ position:absolute;
+ left:1;
+ width:8.9em;
+ padding:0;
+ }
+ .headerimage{
+ width: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+ #headerimagegallery{
+ margin-top: 15em;
+ max-width: 100%;
+ width: 478px;
+ }
+ .descriptioncontainer{
+ margin-top:29.5em;
+ }
+ .gifgrid{
+ grid-template-columns: none;
+ margin-top: 9em;
+ left: 3em;
}
}
.overviewimage{
object-fit: contain;
- width: 250px;
+ width: 200px;
/* box-shadow: 0 40px 80px #834b8b; */
box-shadow: 0 40px 80px #a27cc5;
background-image: url(/assets/glitter-stars.gif);
- height:250px;
- padding:10px;
- max-width: 100%;
+ height:200px;
+ padding:7px;
}
@@ -386,7 +465,7 @@ swiper-slide{
text-align: center;
}
.sliderimage{
- /* width: 100%; */
+ width: 100%;
display: block;
max-height: 95vH;
position: absolute;
@@ -431,7 +510,6 @@ swiper-slide{
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;
diff --git a/welcome.html b/welcome.html
index 43d28d4..c56b4a2 100644
--- a/welcome.html
+++ b/welcome.html
@@ -3,12 +3,13 @@
How to be a social justice warrior
+
-
-
How to be a social justice warrior
- 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.
-
-
Content Warning:
- This publication includes racist, sexist, antisemitic and other discriminatory content.
+
+ How to be a social justice warrior
+ 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.
+
+ Content Warning:
+ This publication includes racist, sexist, antisemitic and other discriminatory content.
diff --git a/whatsasocialjusticewarrior/index.html b/whatsasocialjusticewarrior/index.html
index 32a2a0f..29ba99c 100644
--- a/whatsasocialjusticewarrior/index.html
+++ b/whatsasocialjusticewarrior/index.html
@@ -3,6 +3,7 @@
How to be a social justice warrior
+
-
-
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
+ 
+
+