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 2 years 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

48
gallery.html
Unescape Escape View File

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

220
static/style.css
Unescape Escape View File

@ -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;

17
welcome.html
Unescape Escape View File

@ -3,12 +3,13 @@
<title>
How to be a social justice warrior
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<div class="fullcontainer">
<body id="welcomepage">
<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 class="buttoncontainer">
<button class="gotobutton">
@ -17,18 +18,18 @@
</a>
</button>
<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
</a>
</button>
</div>
<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 racist, sexist, antisemitic and other discriminatory content.
<div class="descriptioncontainer">
<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 racist, sexist, antisemitic and other discriminatory content.
</div>

1
whatsasocialjusticewarrior/index.html
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save