diff options
| -rw-r--r-- | css/garden.css | 55 | ||||
| -rw-r--r-- | index.html | 4 |
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%; } @@ -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> |