Do some basic layout

5 년 전 · 0ea21bedba
--- a/macrovision.css
+++ b/macrovision.css
@@ -0,0 +1,43 @@
 html {
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
 }

 body {
    background: #111;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    width: 100%;
 }

 .entity {
    position: absolute;
    left: 50%;
    top: 50%;
    --height: 100px;
    width: 50px;
    background-color: red;
    height: var(--height);
    text-align: center;
 }

 #world {
    min-width: 90vw;
    min-height: 80vh;
 }

 #menubar {
    min-height: 10vh;
    min-width: 100vw;
    background: #222;
 }

 #display {
    width: 100%;
    height: 100%;
    background: #333;
 }
--- a/macrovision.html
+++ b/macrovision.html
@@ -4,6 +4,7 @@
 <head>
  <meta charset="utf-8">
  <title>Macrovision</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="macrovision.css">
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="How big are they anyway?" />
@@ -14,6 +15,15 @@
 </head>

 <body>
    hi
  <div id="menubar">
    this is a menu
  </div>
  <div id="world">
    <div class="entity">
      I'm a box
    </div>
      <canvas id="display">
      </canvas>
  </div>
 </body>
 </html>
--- a/reset.css
+++ b/reset.css
@@ -0,0 +1,48 @@
 /* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
 */

 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed, 
 figure, figcaption, footer, header, hgroup, 
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
 	margin: 0;
 	padding: 0;
 	border: 0;
 	font-size: 100%;
 	font: inherit;
 	vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section {
 	display: block;
 }
 body {
 	line-height: 1;
 }
 ol, ul {
 	list-style: none;
 }
 blockquote, q {
 	quotes: none;
 }
 blockquote:before, blockquote:after,
 q:before, q:after {
 	content: '';
 	content: none;
 }
 table {
 	border-collapse: collapse;
 	border-spacing: 0;
 }