numerous example additions
This commit is contained in:
parent
995e90e318
commit
b320353edc
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
154
css/index.css
154
css/index.css
|
|
@ -26,8 +26,8 @@
|
|||
*/
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 10;
|
||||
margin: 2px;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
|
@ -77,6 +77,13 @@ HTML
|
|||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Atarian System Bold';
|
||||
src: url("../fonts/sf-atarian-system.bold.ttf") format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Atari Classic Chunky';
|
||||
justify-content: center;
|
||||
|
|
@ -106,29 +113,43 @@ p {
|
|||
}
|
||||
|
||||
pre {
|
||||
width: 60%;
|
||||
border: solid gray 2px;
|
||||
width: 98%;
|
||||
border: solid yellow 2px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 0px;
|
||||
padding-left:5px;
|
||||
margin-left: 30px;
|
||||
margin-left: 15px;
|
||||
background-color: #004d80;
|
||||
font-family: 'Atari Classic Chunky';
|
||||
font-size: 0.450em;
|
||||
font-weight: lighter;
|
||||
font-size: 0.525em;
|
||||
line-height: 1.2;
|
||||
color: #f2f2f2;
|
||||
}
|
||||
|
||||
.title {
|
||||
|
||||
.title-wrap {
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title-title {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-family: 'Atarian System Regular';
|
||||
font-size: 3.0em;
|
||||
line-height: 1.1;
|
||||
#color: #f0e6da;
|
||||
/* #color: #f0e6da; */
|
||||
color: #fcf4dd;
|
||||
}
|
||||
|
||||
.title-image {
|
||||
height:50px;
|
||||
width:65px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
|
|
@ -137,52 +158,107 @@ pre {
|
|||
font-size: 1.0em;
|
||||
line-height: 1.1;
|
||||
color: #afcde9;
|
||||
#color: #dd504a;
|
||||
#color: #ffb600;
|
||||
/* #color: #dd504a;
|
||||
#color: #ffb600; */
|
||||
}
|
||||
|
||||
.logo-container{
|
||||
position: absolute;
|
||||
left:210px;
|
||||
top:20px;
|
||||
width:100px;
|
||||
}
|
||||
|
||||
.logo{
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.start {
|
||||
font-family: 'Atarian System Regular';
|
||||
font-size: 1.2em;
|
||||
color: #322918;
|
||||
text-align: center;
|
||||
background-color: #fed700;
|
||||
width: 150px;
|
||||
border: 2px solid #322918;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
font-family: 'Atarian System Regular';
|
||||
font-size: 1.2em;
|
||||
color: #322918;
|
||||
text-align: center;
|
||||
background-color: #fed700;
|
||||
width: 150px;
|
||||
border: 2px solid #322918;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.select {
|
||||
font-family: 'Atarian System Regular';
|
||||
font-size: 1.2em;
|
||||
color: #322918;
|
||||
text-align: center;
|
||||
background-color: #fab700;
|
||||
width: 150px;
|
||||
border: 2px solid #322918;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
font-family: 'Atarian System Regular';
|
||||
font-size: 1.2em;
|
||||
color: #322918;
|
||||
text-align: center;
|
||||
background-color: #fab700;
|
||||
width: 150px;
|
||||
border: 2px solid #322918;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.option {
|
||||
font-family: 'Atarian System Regular';
|
||||
font-size: 1.2em;
|
||||
color: #322918;
|
||||
text-align: center;
|
||||
background-color: #e99e23;
|
||||
width: 150px;
|
||||
border: 2px solid #322918;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
font-family: 'Atarian System Regular';
|
||||
font-size: 1.2em;
|
||||
color: #322918;
|
||||
text-align: center;
|
||||
background-color: #e99e23;
|
||||
width: 150px;
|
||||
border: 2px solid #322918;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.button-row {
|
||||
display: flex;
|
||||
|
||||
.reset {
|
||||
font-family: 'Atarian System Regular';
|
||||
font-size: 1.2em;
|
||||
color: #322918;
|
||||
text-align: center;
|
||||
background-color: #ae7900;
|
||||
width: 150px;
|
||||
border: 2px solid #322918;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.button-row button {
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.button-row button:hover {
|
||||
/* background-color: #f0e6da; */
|
||||
font-family: 'Atarian System Bold';
|
||||
}
|
||||
|
||||
.button-column button {
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.button-column button:not(:last-child) {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.button-column button:hover {
|
||||
/* background-color: #f0e6da; */
|
||||
font-family: 'Atarian System Bold';
|
||||
}
|
||||
|
||||
.shadowbox {
|
||||
width: 55%;
|
||||
background-color: #004d80;
|
||||
border: 3px solid #babebd;
|
||||
box-shadow: 5px 6px #9a9c9b;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
|
||||
/* unvisited link */
|
||||
a:link {
|
||||
color: #5a97d0;
|
||||
|
|
|
|||
110
index.html
110
index.html
|
|
@ -1,39 +1,95 @@
|
|||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<title>Atari High Scores</title>
|
||||
<meta name="keywords" content="" />
|
||||
<meta name="description" content="" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" type="text/css" href="css/index.css" media="screen" />
|
||||
<link rel="icon" type="image/png" href="assets/AtariLogo.png" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
|
||||
<title>Atari Code</title>
|
||||
<meta name="keywords" content=""/>
|
||||
<meta name="description" content="A site devoted to learning to code on the Atari 8-Bit line of computers"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" type="text/css" href="css/index.css" media="screen"/>
|
||||
<link rel="icon" type="image/png" href="assets/atari-rainbow.png"/>
|
||||
</head>
|
||||
<body>
|
||||
<p class="title">Atari Code</p>
|
||||
<p class="subtitle">A site devoted to learning to code on the Atari 8-Bit line of computers</p>
|
||||
|
||||
<div class="button-row"><div class="start">Start</div> <div class="select">Select</div> <div class="option">Option</div></div>
|
||||
<div class="title-wrap">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="assets/atari-rainbow.png" class="title-image">
|
||||
</td>
|
||||
<td>
|
||||
<p class="title-title" style="float-wrap: none">Atari Code</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<p class="subtitle">A site devoted to learning to code on the Atari 8-Bit line of computers</p>
|
||||
|
||||
<h1>H1 Test Text</h1>
|
||||
<p>Some standard text.</p>
|
||||
<p class="p2">Some small text</p>
|
||||
<p class="p3">Some very tiny text</p>
|
||||
<div class="button-row" style="display: flex; float: top">
|
||||
<button class="Start" onclick="location.href='#'" type="button">Start</button>
|
||||
<button class="Select" onclick="location.href='#'" type="button">Select</button>
|
||||
<button class="Option" onclick="location.href='#'" type="button">Option</button>
|
||||
<button class="Reset" onclick="location.href='#'" type="button">Reset</button>
|
||||
</div>
|
||||
|
||||
<h2>H2 Test Text</h2>
|
||||
<p>Some standard text.</p>
|
||||
<p class="p2">Some small text</p>
|
||||
<p class="p3">Some very tiny text</p>
|
||||
<div class="button-column" style="float:right">
|
||||
<button class="Reset" onclick="location.href='#'" type="button">Reset</button>
|
||||
<button class="Option" onclick="location.href='#'" type="button">Option</button>
|
||||
<button class="Select" onclick="location.href='#'" type="button">Select</button>
|
||||
<button class="Start" onclick="location.href='#'" type="button">Start</button>
|
||||
</div>
|
||||
|
||||
<h3>H3 Test Text</h3>
|
||||
<p>Some standard text.</p>
|
||||
<p class="p2">Some small text</p>
|
||||
<p class="p3">Some very tiny text</p>
|
||||
|
||||
<h4>H4 Test Text</h4>
|
||||
<p class="p2">Here is a code block:</p>
|
||||
<pre>
|
||||
10 PRINT "Hello"
|
||||
20 GOTO 10
|
||||
<div>
|
||||
<h1>H1 Test Text</h1>
|
||||
<p>Some standard text.</p>
|
||||
<p class="p2">Some small text</p>
|
||||
<p class="p3">Some very tiny text</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div style="display: flex">
|
||||
<div class="shadowbox" style="float: left">
|
||||
<h3>Attention!</h3>
|
||||
<p>Hello, this is a highlighted notice!</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>H2 Test Text</h2>
|
||||
<p>Some standard text.</p>
|
||||
<p class="p2">Some small text</p>
|
||||
<p class="p3">Some very tiny text</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>H3 Test Text</h3>
|
||||
<p>Some standard text.</p>
|
||||
<p class="p2">Some small text</p>
|
||||
<p class="p3">Some very tiny text</p>
|
||||
|
||||
<h4>H4 Test Text</h4>
|
||||
<p>Here is a code block:</p>
|
||||
<pre>
|
||||
100 REM PLAYER/MISSILE EXAMPLE
|
||||
110 DIM A$(512),B$(20)
|
||||
120 X=X+1:READ A:IF A<>-1 THEN B$(X,X)=CHR$(A):GOTO 120
|
||||
130 DATA 0,255,129,129,129,129,129,129,129,129,255,0,-1
|
||||
2000 POKE 559,62:POKE 704,88
|
||||
2020 I=PEEK(106)-16:POKE 54279,I
|
||||
2030 POKE 53277,3:POKE 710,224
|
||||
2040 VTAB=PEEK(134)+PEEK(135)*256
|
||||
2050 ATAB=PEEK(140)+PEEK(141)*256
|
||||
2060 OFFS=I*256+1024-ATAB
|
||||
2070 HI=INT(OFFS/256):LO=OFFS-HI*256
|
||||
2090 POKE VTAB+2,LO:POKE VTAB+3,HI
|
||||
3000 Y=60:Z=100:V=1:H=1
|
||||
4000 A$(Y,Y+11)=B$:POKE 53248,Z
|
||||
4010 Y=Y+V:Z=Z+H
|
||||
4020 IF Y>213 OR Y<33 THEN V=-V
|
||||
4030 IF Z>206 OR Z<49 THEN H=-H
|
||||
4420 GOTO 4000
|
||||
</pre>
|
||||
|
||||
<p class="p3">Here is some p3 text. It will be interesting to see how this text is rendered.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue