minor updates to greenhouse to make it responsiver

1 year ago · e06afbc23f
parent cb90a332df
commit e06afbc23f
1 changed files with 13 additions and 2 deletions
--- a/etc/greenhouse/index.php
+++ b/etc/greenhouse/index.php
@ -22,16 +22,27 @@
      .shelf > * {
        margin-bottom: 1rem;
      }
+      #bodytext {
+        height: 250px;
+        width: 524px;
+        overflow-x: hidden;
+        overflow-y: scroll;
+      }
+      @media only screen and (hover: none) and (max-width: 43rem) {
+        #bodytext {
+          width: 250px;
+        }
+      }
    </style>
    <?php include($_SERVER['DOCUMENT_ROOT'] . '/seasonal.php'); ?>
  </head>
  <body>
    <?php include($_SERVER['DOCUMENT_ROOT'] . '/nav.php'); ?>
-      <h1>webgreenhouse</h1>
+      <h1 style="overflow: hidden;">webgreenhouse</h1>
      <h2 id="caption">&nbsp;</h2>
      <div class="shelf">
        <iframe src="https://isopod.cool/stuff/webgarden/" scrolling="no" loading="lazy"></iframe>
-        <div style="height: 250px; width: 524px; overflow-x: hidden; overflow-y: scroll;">
+        <div id="bodytext">
          <p style="margin-top: 0; margin-bottom: 0.85rem;">You've found my webgarden page! A <span title="or pot, or bonsai">webgarden</span> is a mini&#8209;webpage that other people can embed in their websites, as defined by <a href="https://missmoss.neocities.org/webgardens/tutorial/">Miss Moss</a>. Here's the code for mine:</p>
          <textarea style="width: 100%; margin: 0; box-sizing: border-box;" rows="2" readonly>&lt;iframe src="https://isopod.cool/stuff/webgarden/" style="height: 250px; width: 250px;" scrolling="no" loading="lazy"&gt;&lt;/iframe&gt;</textarea>
        </div>