selector

content

.container img{
max-height: 200px;
width: auto;
}

table {
width: 100%;
margin: 0;
background-color: var(--container);
}

#x_scroll {
overflow-x: auto;
}

</style>
<div class="selector"><h1>selector guide</h1>
<div id="x_scroll"><table>
  <tbody><tr>
    <th>Selector</th>
    <th>Info/Usage</th>
    <th>Image</th>
  </tr>
  <tr>
    <td>.container</td>
    <td>hey man. its the main thing youre typing in</td>
    <td><img src="https://file.garden/aXTgpLhiK3vn4afp/breadbin/selector/.container"></td>
  </tr>
    <tr><td>#edit-button, #extras-button</td>
    <td>paste buttons. only the owner of the paste and admin can see the extras button btw</td>
    <td><img src="https://file.garden/aXTgpLhiK3vn4afp/breadbin/selector/edit%2C%20extras.png"></td>
  </tr>
    <tr><td><strong>.paste-stats</strong> or #published-at, #last-edited, #paste-owner, #paste-views (in order)</td>
    <td>shows a pastes stats. you can get rid of any of these, but admins will know who owns a url anyway :p</td>
    <td><img src="https://file.garden/aXTgpLhiK3vn4afp/breadbin/selector/stats.png"></td>
    </tr><tr></tr>
    <tr><td>.width</td>
    <td>holds both the paste buttons and its stats, can be changed to your containers width, if you changed it!</td>
    <td>  <img src="https://file.garden/aXTgpLhiK3vn4afp/breadbin/selector/width.png">image shows a styled version</td>
    </tr><tr></tr>
<tr><td>#toggleButton</td>
    <td>toggle button will switch to an easy to read version of your paste, without any styling</td>
    <td><img src="https://file.garden/aXTgpLhiK3vn4afp/breadbin/selector/e2r.png"></td>
  </tr>
    <tr><td>#theme-toggle</td>
    <td>toggle will switch to the dark/light version of a website, depending on which one you are on right now. either version has its own button</td>
    <td><img src="https://file.garden/aXTgpLhiK3vn4afp/breadbin/selector/theme.png"></td>
  </tr>
    <tr><td>#dropbtn</td>
    <td>hamburger menu my beloved. opens the dropdown</td>
    <td><img src="https://file.garden/aXTgpLhiK3vn4afp/breadbin/selector/hamburger.png"></td>
  </tr>
    <tr><td>#dropdownContent</td>
    <td>your dropdown menu, i think its pretty straight forward. can be styled to your hearts content</td>
    <td><img id="height" src="https://file.garden/aXTgpLhiK3vn4afp/breadbin/selector/dropdown.png"></td>
  </tr>
</tbody></table></div></div>

cancel