Created
June 2, 2020 13:55
-
-
Save sketchpunk/73d9913902585b2f172b1408f622ad3a to your computer and use it in GitHub Desktop.
Quick recreation of the Gaea application's design Layout
This file contains hidden or 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></title> | |
| <style> | |
| html, body{ margin:0px; padding:0px; width:100%; height:100%; | |
| background-color:#2E2D2E; | |
| } | |
| *{ color:white; font-size:14px; font-family: monospace; } | |
| .gaea{box-sizing:border-box; | |
| display:flex; flex-direction: column; | |
| width:100vw; height:100vh; | |
| } | |
| .gaea > header{ flex:0 0 24px; background-color:#3C3B3C; } | |
| .gaea > main{ flex:1 1 auto; display:flex; flex-direction:row; } | |
| .gaea > main > nav{ flex:0 0 100px; background-color:#3C3B3C; margin:4px; border-radius:4px; padding:3px; } | |
| .gaea > main > section{ flex:1 1 auto; display:flex; flex-direction:column; margin:5px 0px;} | |
| .gaea > main > section > main { flex: 1 1 50%; background-color:#343334; margin-bottom:2px; padding:3px; } | |
| .gaea > main > section > footer { flex: 1 1 50%; margin-top:2px; display:flex; } | |
| .gaea > main > section > footer > * { flex: 1 1 auto; } | |
| .TabPanel{ display:flex; flex-direction: column; } | |
| .TabPanel > header{ flex: 0 0 24px; display:flex; justify-content: space-between; } | |
| .TabPanel > header > nav{ display:flex; } | |
| .TabPanel > header > nav > a{ text-decoration:none; padding:2px 8px; border-radius:4px 4px 0px 0px; } | |
| .TabPanel > header > nav > a:not(:first-of-type){ margin-left:4px; } | |
| .TabPanel > header > nav > a.sel{ background-color:#3C3B3C;} | |
| .TabPanel > header > section{ display:flex; } | |
| .TabPanel > header > section > a{ flex:0 0 0; display:flex; border:0px solid white; padding:2px 5px 0px 5px; text-decoration:none; margin-left:5px; } | |
| .TabPanel > main{ flex: 1 1 auto; background-color:#3C3B3C; border-radius: 0px 4px 4px 4px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="gaea"> | |
| <header> Header</header> | |
| <main> | |
| <nav>LEFT</nav> | |
| <section> | |
| <main>MAIN</main> | |
| <footer> | |
| <div class="TabPanel"> | |
| <header> | |
| <nav> | |
| <a href="#" class="sel">Tab 001</a> | |
| <a href="#">Tab 002</a> | |
| </nav> | |
| <section> | |
| <a href="#">A</a> | |
| <a href="#">B</a> | |
| <a href="#">C</a> | |
| </section> | |
| </header> | |
| <main></main> | |
| </div> | |
| </footer> | |
| </section> | |
| <nav>RIGHT</nav> | |
| </main> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment