summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--css/garden.css55
-rw-r--r--index.html4
2 files changed, 46 insertions, 13 deletions
diff --git a/css/garden.css b/css/garden.css
index 796fa73..d79caf7 100644
--- a/css/garden.css
+++ b/css/garden.css
@@ -405,25 +405,25 @@ body {
text-rendering: optimizeLegibility;
}
-@media (min-width: 1140px) {
+@media (min-width: 1600px) {
.container {
- margin-left: 14rem;
+ margin-left: 4rem;
margin-right: 4rem;
- max-width: 52rem;
+ max-width: 50rem;
}
}
-@media (min-width: 800px) and (max-width: 1140px) {
+@media (min-width: 800px) and (max-width: 1600px) {
.container {
- margin-left: 6rem;
- margin-right: 4rem;
- max-width: 52rem;
+ margin-left: 2rem;
+ margin-right: 2rem;
}
}
@media (max-width: 800px) {
.container {
- margin: 1rem;
+ margin-left: 1rem;
+ margin-right: 1rem;
}
}
@@ -432,6 +432,12 @@ h1, h2, h3 {
line-height: 110%;
}
+@media (max-width: 1000px) {
+ .table-container {
+ overflow: scroll;
+ }
+}
+
table {
border-collapse: collapse;
}
@@ -488,17 +494,42 @@ a:visited {
background-color: #000000bb;
}
+
.modal {
position: fixed;
- left: 40%;
- top: 25%;
- width: 20%;
- height: 50%;
border-radius: 4px;
background-color: #121212;
padding: 2em;
}
+@media (min-width: 1600px) {
+ .modal {
+ left: 30%;
+ top: 25%;
+ width: 40%;
+ height: 50%;
+ }
+}
+
+@media (min-width: 800px) and (max-width: 1600px) {
+ .modal {
+ left: 20%;
+ top: 25%;
+ width: 60%;
+ height: 50%;
+ }
+}
+
+@media (max-width: 800px) {
+ .modal {
+ left: 5%;
+ top: 25%;
+ width: 90%;
+ height: 50%;
+ }
+}
+
+
.detail-subheading {
opacity: 60%;
}
diff --git a/index.html b/index.html
index 00ef0bc..c3aa1ae 100644
--- a/index.html
+++ b/index.html
@@ -58,7 +58,9 @@
<li><img src="images/direct-sow.svg" class="key"/>: direct sow outdoors</li>
<li><img src="images/transplant.svg" class="key"/>: transplant outdoors</li>
</ul>
- <table id="schedule"></table>
+ <div class="table-container">
+ <table id="schedule"></table>
+ </div>
</div>
<h2>Week-by-week instructions</h2>
<div id="instructions"></div>