3 changed files with 102 additions and 1 deletions
Unified View
Diff Options
-
+43 -0macrovision.css
-
+11 -1macrovision.html
-
+48 -0reset.css
+ 43
- 0
macrovision.css
View File
| @@ -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; | |||||
| } | |||||
+ 11
- 1
macrovision.html
View File
| @@ -4,6 +4,7 @@ | |||||
| <head> | <head> | ||||
| <meta charset="utf-8"> | <meta charset="utf-8"> | ||||
| <title>Macrovision</title> | <title>Macrovision</title> | ||||
| <link rel="stylesheet" href="reset.css"> | |||||
| <link rel="stylesheet" href="macrovision.css"> | <link rel="stylesheet" href="macrovision.css"> | ||||
| <meta name="theme-color" content="#000000" /> | <meta name="theme-color" content="#000000" /> | ||||
| <meta name="description" content="How big are they anyway?" /> | <meta name="description" content="How big are they anyway?" /> | ||||
| @@ -14,6 +15,15 @@ | |||||
| </head> | </head> | ||||
| <body> | <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> | </body> | ||||
| </html> | </html> | ||||
+ 48
- 0
reset.css
View File
| @@ -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; | |||||
| } | |||||