more font and color adjustments

This commit is contained in:
Greg Gauthier 2023-01-24 09:43:04 +00:00
parent f65a1b49ba
commit a43ea851b2
2 changed files with 26 additions and 11 deletions

View File

@ -65,6 +65,13 @@ HTML
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Atari Classic Chunky Reverse';
src: url('../fonts/ATARCC__.TTF') format('truetype');
font-weight: normal;
font-style: normal;
color: black;
}
@font-face {
font-family: 'Atari Tiny';
src: url('../fonts/atari-small-font.ttf') format('truetype');
@ -112,18 +119,25 @@ p {
color: #f2f2f2;
}
.p4 {
font-family: 'Atari Classic Smooth';
font-size: 0.595em;
color: #322918;
}
pre {
width: 98%;
width: 87%;
border: solid yellow 2px;
padding-top: 10px;
padding-bottom: 0px;
padding-left:5px;
margin-left: 15px;
padding-left:10px;
margin-left: 25px;
background-color: #004d80;
font-family: 'Atari Classic Chunky';
font-weight: lighter;
font-size: 0.525em;
line-height: 1.2;
overflow-wrap: break-word;
color: #f2f2f2;
}
@ -134,12 +148,12 @@ pre {
align-items: center;
}
.title-title {
.title-text {
width: 100%;
display: inline-block;
text-align: center;
font-family: 'Atarian System Regular';
font-size: 3.0em;
font-size: 7.3vw;
line-height: 1.1;
/* #color: #f0e6da; */
color: #fcf4dd;
@ -238,10 +252,11 @@ pre {
}
.shadowbox {
font-family: 'Atari Classic Chunky Reverse';
width: 11.95em;
background-color: darkslategrey;
border: 3px solid #babebd;
box-shadow: 5px 6px #9f9c9b;
background-color: #fcf4dd;
border: 3px solid #003366;
box-shadow: 5px 6px darkgray;
padding: 5px;
}
@ -270,7 +285,7 @@ H1 {
color: #f0e6da;
margin-left: auto;
margin-right: auto;
font-size: 3.2vw;
font-size: 3.5vw;
width: 100%;
}

View File

@ -17,7 +17,7 @@
<img src="assets/atari-rainbow.png" class="title-image" onclick="location.href='https://gmgauthier.com/'" type="button">
</td>
<td>
<p class="title-title" style="float-wrap: none">Atari Code</p>
<p class="title-text" style="float-wrap: none">Atari Code</p>
</td>
</tr>
</table>
@ -51,7 +51,7 @@
<div style="display: flex">
<div class="shadowbox" style="float: left">
<h3>Attention!</h3>
<p>Hello, this is a highlighted notice!</p>
<p class="p4">Hello, this is a highlighted notice!</p>
</div>
<div>