mirischoeb
/
WebsiteMasterProject
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

responsive update but still not good

Browse Source
main
Mirischoeb 1 year ago
parent 0fa63cee6e
commit e1efb458c7
5 changed files with 190 additions and 96 deletions
Show Stats Download Patch File Download Diff File

BIN
assets/htbasjw_title.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 128 KiB

46
gallery.html
Unescape Escape View File

@ -9,23 +9,37 @@
<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"> <img class="headerimage" id="headerimagegallery" src="assets/htbasjw_title.png" alt="How to be a social justice warrior" loading="lazy" />
<img class="headerimage"src="https://images.cooltext.com/5661013.png" alt="How to be a social justice warrior" loading="lazy" />
</a>
<img class="backgroundgifs" id="nyancat" src="assets/nyancat.gif" loading="lazy"> <div class="gifgrid">
<img class="backgroundgifs" id="babyoncat" src="assets/babyoncat.gif" loading="lazy"> <div class="backgroundgifs">
<img class="backgroundgifs" id="confusedgirl" src="assets/confusedgirl.gif" loading="lazy"> <img id="nyancat" src="assets/nyancat.gif" loading="lazy">
<img class="backgroundgifs" id="doge" src="assets/doge.gif" loading="lazy"> </div>
<img class="backgroundgifs" id="travolta" src="/assets/travolta.gif" loading="lazy"> <div class="backgroundgifs">
<img class="backgroundgifs" id="angrydog" src="assets/angrydog.gif" loading="lazy"> <img id="babyoncat" src="assets/babyoncat.gif" loading="lazy">
<img class="backgroundgifs" id="simpsons" src="assets/simpsons.gif" loading="lazy"> </div>
<img class="backgroundgifs" id="heartrain" src="assets/heartrain.gif" loading="lazy"> <div class="backgroundgifs">
<img class="backgroundgifs" id="dance" src="assets/dance.gif" loading="lazy"> <img id="confusedgirl" src="assets/confusedgirl.gif" loading="lazy">
<img class="backgroundgifs" id="girldance" src="assets/girldance.gif" loading="lazy"> </div>
<img class="backgroundgifs" id="happymanhat" src="assets/happymanhat.gif" loading="lazy"> <div class="backgroundgifs">
<img class="backgroundgifs" id="heartjump" src="assets/heartjump.gif" loading="lazy"> <img id="doge" src="assets/doge.gif" loading="lazy">
<img class="backgroundgifs" id="takemymoney" src="assets/takemymoney.gif" loading="lazy"> </div>
<div class="backgroundgifs">
<img id="angrydog" src="assets/angrydog.gif" loading="lazy">
</div>
<div class="backgroundgifs">
<img id="travolta" src="/assets/travolta.gif" loading="lazy">
</div>
<div class="backgroundgifs">
<img id="simpsons" src="assets/simpsons.gif" loading="lazy">
</div>
<div class="backgroundgifs">
<img id="heartrain" src="assets/heartrain.gif" loading="lazy">
</div>
<div class="backgroundgifs">
<img id="dance" src="assets/dance.gif" loading="lazy">
</div>
</div>
</div> </div>
<div class="grid"> <div class="grid">

220
static/style.css
Unescape Escape View File

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

17
welcome.html
Unescape Escape View File

@ -3,12 +3,13 @@
<title> <title>
How to be a social justice warrior How to be a social justice warrior
</title> </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> </head>
<div class="fullcontainer"> <div class="fullcontainer">
<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="assets/htbasjw_title.png" alt="How to be a social justice warrior" />
</div> </div>
<div class="buttoncontainer"> <div class="buttoncontainer">
<button class="gotobutton"> <button class="gotobutton">
@ -17,18 +18,18 @@
</a> </a>
</button> </button>
<button class="thesisbutton"> <button class="thesisbutton">
<a href="assets/welcomepagecontent/Masterthesis_MiriamSchöb_TheLeftCanMeme.pdf"> <a href="assets/welcomepagecontent/Masterthesis_MiriamSchöb_TheLeftCanMeme.pdf" id="thesiscolor">
Read Thesis Read Thesis
</a> </a>
</button> </button>
</div> </div>
<div id="description"> <div class="descriptioncontainer">
<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 racist, sexist, antisemitic and other discriminatory content. This publication includes racist, sexist, antisemitic and other discriminatory content.
</div> </div>

1
whatsasocialjusticewarrior/index.html
Unescape Escape View File

@ -3,6 +3,7 @@
<title> <title>
How to be a social justice warrior How to be a social justice warrior
</title> </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> </head>
<body id="swiperpages"> <body id="swiperpages">
<div class="buttoncontainerslides"> <div class="buttoncontainerslides">

Write Preview
Loading…
Cancel
Save