diff --git a/static/style.css b/static/style.css
index e15d12a..c556b44 100644
--- a/static/style.css
+++ b/static/style.css
@@ -5,7 +5,20 @@
body{
}
+/* Add media queries for different screen sizes */
+@media screen and (max-width: 600px) {
+ /* Adjust styles for screens smaller than 600px wide */
+ .buttoncontainer {
+ flex-direction: column;
+ align-items: center;
+ }
+}
+.fullcontainer {
+ max-width: 100%;
+ padding: 0 20px;
+ margin: 0 auto;
+}
#welcomepage{
/* 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;
@@ -44,6 +57,7 @@ p{
transform: translate(-50%,-50%);
font-family: monospace;
}
+
#description_color{
color:#87b5e7;
}
@@ -63,6 +77,8 @@ p{
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
+ max-width: 100%;
+ height: auto;
}
@@ -125,7 +141,24 @@ p{
left:52%;
top:450%;
}
-
+#happymanhat{
+ left: 14%;
+ top: 1600%;
+}
+#girldance{
+ left: 76%;
+ top: 1590%;
+}
+#heartjump{
+ left: 0%;
+ top: 1390%;
+ width: 15em;
+ height: 15em;
+}
+#takemymoney{
+ left: 47%;
+ top: 1800%;
+}
.buttonback {
background-color: #050725;
@@ -170,9 +203,8 @@ p{
.buttoncontainer {
display: flex;
align-items: center;
- justify-content: center;
margin-top: 31em;
-
+ justify-content: center;
}
@@ -302,15 +334,30 @@ a:link {
display: grid;
justify-content: space-between;
grid-template-columns: auto auto auto auto auto;
- row-gap: 90px;
align-items: center;
justify-items: center;
margin-left:2.5em;
margin-right: 2.5em;
margin-bottom: 8em;
margin-top: 38em;
+ gap: 110px;
}
+
+/* Styles for medium-sized screens */
+@media (max-width: 768px) {
+ .grid {
+ grid-template-columns: repeat(3, 1fr);
+ }
+}
+
+/* Styles for smaller screens */
+@media (max-width: 480px) {
+ .grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
.overviewimage{
object-fit: contain;
width: 250px;
@@ -319,6 +366,7 @@ a:link {
background-image: url(/assets/glitter-stars.gif);
height:250px;
padding:10px;
+ max-width: 100%;
}
diff --git a/tipsforleftistmememaking/index.html b/tipsforleftistmememaking/index.html
index 353034e..759b73f 100644
--- a/tipsforleftistmememaking/index.html
+++ b/tipsforleftistmememaking/index.html
@@ -23,6 +23,11 @@ How to be a social justice warrior
+
+
+ Content Warning: Discriminatory contentClick to view
+
+
@@ -41,6 +46,11 @@ How to be a social justice warrior
+
+
+ Content Warning: Discriminatory contentClick to view
+
+
diff --git a/welcome.html b/welcome.html
index 26f7f57..d96fc5c 100644
--- a/welcome.html
+++ b/welcome.html
@@ -3,7 +3,10 @@
How to be a social justice warrior
+
+
+
@@ -31,5 +34,5 @@
-
+
+ 
+ 
+ 
+ 