Last active
May 22, 2024 12:00
-
-
Save dzeez/9241b9c8109c2669d1d9789d0bdd50e6 to your computer and use it in GitHub Desktop.
Exported from Popcode. Click to import: https://popcode.org/?gist=9241b9c8109c2669d1d9789d0bdd50e6
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"hiddenUIComponents":["console","editor.javascript"]} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* desired behavior: we want a "bar" constructed using a CSS container, which has an appearance, is centered, whose width is never tiny (unless it must be), and also never unreasonably wide (ie spanning the width of a highres gigantic widescreen) */ | |
| /* overrides default huge margin for children */ | |
| * { | |
| margin: 0; | |
| /* padding: 0; */ | |
| } | |
| body { | |
| margin: 2rem; | |
| display: flex; | |
| flex-flow: column nowrap; | |
| align-items: center; | |
| /* stretch only seems useful if you're not going to later confine the size... */ | |
| /* align-items: stretch; */ | |
| } | |
| section{ | |
| margin: 1rem; | |
| /* padding: 0; */ | |
| font: 3rem sans-serif; | |
| background: moccasin; | |
| color: coral; | |
| border: 1px solid coral; | |
| border-radius: 3px; | |
| box-shadow: 3px 3px 8px rgba(0,0,0,0.1); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| /* so instead of stretch (which won't work), setting both width and max-width obtains a behavior distinct to either alone */ | |
| width: 100%; | |
| max-width: 35rem; | |
| } | |
| section:first-of-type { | |
| margin-top: 0; | |
| margin-bottom: 3rem; | |
| } | |
| /* if you want most things centered, but not *all* things */ | |
| .left { | |
| width: 100%; | |
| max-width: 35rem; | |
| } | |
| /* trick is to "break out" of the flex layout's content center-justifying (hence the div container) */ | |
| /* other trick is...to maintain the same leading indent, have to use the same width trick */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Test Centered Bar With Controlled Width</title> | |
| </head> | |
| <body> | |
| <section> | |
| <header>Hello</header> | |
| </section> | |
| <div class="left"> | |
| <aside>aside</aside> | |
| </div> | |
| <section><p>another section</p></section> | |
| <section>final section</section> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment