2 changed files with 59 additions and 3 deletions
+ 40
- 2
app/css/nespaint.css
View File
| @@ -4,6 +4,44 @@ body{ | |||
| #painter{ | |||
| background-color:#444; | |||
| width: 75%; | |||
| height: 75% | |||
| width:100%; | |||
| height:100%; | |||
| } | |||
| .content-wrapper{ | |||
| width:100%; | |||
| height:100%; | |||
| overflow:hidden; | |||
| } | |||
| /* NOTE: Modal styles were borrowed from | |||
| * https://www.w3schools.com/howto/howto_css_modals.asp | |||
| * and modified. | |||
| */ | |||
| /* The Modal (background) */ | |||
| .modal { | |||
| display: none; /* Hidden by default */ | |||
| position: fixed; /* Stay in place */ | |||
| z-index: 1; /* Sit on top */ | |||
| left: 0; | |||
| top: 0; | |||
| width: 100%; /* Full width */ | |||
| height: 100%; /* Full height */ | |||
| overflow: hidden; | |||
| background-color: rgb(0,0,0); /* Fallback color */ | |||
| background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ | |||
| } | |||
| /* Modal Content/Box */ | |||
| .modal-content { | |||
| background-color: #fefefe; | |||
| margin: 15% auto; /* 15% from the top and centered */ | |||
| padding: 20px; | |||
| border: 1px solid #888; | |||
| width: 80%; /* Could be more or less, depending on screen size */ | |||
| } | |||
+ 19
- 1
index.html
View File
| @@ -6,13 +6,31 @@ | |||
| <title>NES Painter</title> | |||
| <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> | |||
| <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"> | |||
| <link rel="stylesheet" href="app/css/nespaint.css"> | |||
| </head> | |||
| <body> | |||
| <canvas id="painter" width:"128" height:"256"></canvas> | |||
| <div class="header"> | |||
| <div class="home-menu pure-menu pure-menu-horizontal"> | |||
| <a class="pure-menu-heading" href="">Your Site</a> | |||
| <ul class="pure-menu-list"> | |||
| <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li> | |||
| <li class="pure-menu-item"><a href="#" class="pure-menu-link">Tour</a></li> | |||
| <li class="pure-menu-item"><a href="#" class="pure-menu-link">Sign Up</a></li> | |||
| </ul> | |||
| </div> | |||
| </div> | |||
| <div class="content-wrapper"> | |||
| <div class="pure-g"> | |||
| <div class="pure-u-1-6"></div> | |||
| <div class="pure-u-2-3"> | |||
| <canvas id="painter" width:"128" height:"256"></canvas> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </body> | |||
| <script src="app/js/main.js" type="module"></script> | |||
| </html> | |||
Loading…