diff --git a/markov-mashup-lab.html b/markov-mashup-lab.html
index 45a8ce8..09942cc 100644
--- a/markov-mashup-lab.html
+++ b/markov-mashup-lab.html
@@ -18,7 +18,7 @@
diff --git a/styles.css b/styles.css
index c0e9ef1..26c4421 100644
--- a/styles.css
+++ b/styles.css
@@ -14,6 +14,18 @@ body {
color: #1a1a1a;
}
+@media (max-width: 768px) {
+ body {
+ padding: 10px;
+ }
+}
+
+@media (max-width: 480px) {
+ body {
+ padding: 5px;
+ }
+}
+
/* Main Navigation */
.main-nav {
background: #1a1a1a;
@@ -25,6 +37,22 @@ body {
border-bottom: 3px solid #c41e3a;
}
+@media (max-width: 768px) {
+ .main-nav {
+ padding: 12px 20px;
+ margin: -30px -30px 20px -30px;
+ gap: 12px;
+ }
+}
+
+@media (max-width: 480px) {
+ .main-nav {
+ padding: 10px 15px;
+ margin: -20px -20px 15px -20px;
+ gap: 8px;
+ }
+}
+
.main-nav a {
color: #ffffff;
text-decoration: none;
@@ -37,6 +65,21 @@ body {
letter-spacing: 0.5px;
}
+@media (max-width: 768px) {
+ .main-nav a {
+ padding: 6px 12px;
+ font-size: 0.85em;
+ }
+}
+
+@media (max-width: 480px) {
+ .main-nav a {
+ padding: 5px 10px;
+ font-size: 0.8em;
+ letter-spacing: 0.3px;
+ }
+}
+
.main-nav a:hover {
background: #c41e3a;
color: #ffffff;
@@ -52,13 +95,31 @@ body {
background: #ffffff;
border-radius: 0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
- max-width: 1200px;
+ max-width: 95vw;
width: 100%;
margin: 0 auto;
padding: 40px;
border: 1px solid #1a1a1a;
}
+@media (min-width: 1600px) {
+ .container {
+ max-width: 1800px;
+ }
+}
+
+@media (max-width: 768px) {
+ .container {
+ padding: 30px;
+ }
+}
+
+@media (max-width: 480px) {
+ .container {
+ padding: 20px;
+ }
+}
+
/* Headers */
h1 {
color: #1a1a1a;
@@ -71,6 +132,20 @@ h1 {
padding-bottom: 10px;
}
+@media (max-width: 768px) {
+ h1 {
+ font-size: 2em;
+ letter-spacing: 1.5px;
+ }
+}
+
+@media (max-width: 480px) {
+ h1 {
+ font-size: 1.6em;
+ letter-spacing: 1px;
+ }
+}
+
h2 {
color: #1a1a1a;
font-size: 1.8em;
@@ -78,6 +153,18 @@ h2 {
font-weight: 600;
}
+@media (max-width: 768px) {
+ h2 {
+ font-size: 1.5em;
+ }
+}
+
+@media (max-width: 480px) {
+ h2 {
+ font-size: 1.3em;
+ }
+}
+
h3 {
color: #4a4a4a;
margin-bottom: 10px;
@@ -87,12 +174,38 @@ h3 {
letter-spacing: 1px;
}
+@media (max-width: 768px) {
+ h3 {
+ font-size: 1.1em;
+ }
+}
+
+@media (max-width: 480px) {
+ h3 {
+ font-size: 1em;
+ letter-spacing: 0.5px;
+ }
+}
+
.subtitle {
color: #4a4a4a;
margin-bottom: 30px;
font-size: 1.1em;
}
+@media (max-width: 768px) {
+ .subtitle {
+ font-size: 1em;
+ margin-bottom: 20px;
+ }
+}
+
+@media (max-width: 480px) {
+ .subtitle {
+ font-size: 0.95em;
+ }
+}
+
/* Tool List - Homepage Grid */
.tool-list {
display: grid;
@@ -101,6 +214,22 @@ h3 {
margin-top: 40px;
}
+@media (max-width: 768px) {
+ .tool-list {
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 15px;
+ margin-top: 30px;
+ }
+}
+
+@media (max-width: 480px) {
+ .tool-list {
+ grid-template-columns: 1fr;
+ gap: 12px;
+ margin-top: 20px;
+ }
+}
+
.tool-list .tool-card {
background: #ffffff;
border: 2px solid #4a4a4a;
@@ -142,6 +271,20 @@ h3 {
border-bottom: 3px solid #c41e3a;
}
+@media (max-width: 768px) {
+ .header {
+ padding: 25px;
+ margin: -30px -30px 20px -30px;
+ }
+}
+
+@media (max-width: 480px) {
+ .header {
+ padding: 20px;
+ margin: -20px -20px 15px -20px;
+ }
+}
+
.header h1 {
color: #ffffff;
border-bottom: none;
diff --git a/text-reverse-lab.html b/text-reverse-lab.html
index 99d9233..3176d42 100644
--- a/text-reverse-lab.html
+++ b/text-reverse-lab.html
@@ -17,7 +17,7 @@
-
Text Reversal Playground
+
Text Reversal Lab
Upload a .txt file and experiment with reversing words and sentences