2 changed files with 59 additions and 3 deletions
+ 40
- 2
app/css/nespaint.css
View File
| #painter{ | #painter{ | ||||
| background-color:#444; | 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
| <title>NES Painter</title> | <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="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"> | ||||
| <link rel="stylesheet" href="app/css/nespaint.css"> | <link rel="stylesheet" href="app/css/nespaint.css"> | ||||
| </head> | </head> | ||||
| <body> | <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> | </body> | ||||
| <script src="app/js/main.js" type="module"></script> | <script src="app/js/main.js" type="module"></script> | ||||
| </html> | </html> |
Loading…