fix primer markup (more work needed)

This commit is contained in:
Eric 2023-07-07 12:33:21 -07:00
parent d798d8e8c0
commit 44114da22d
1 changed files with 32 additions and 19 deletions

View File

@ -16,9 +16,18 @@ body { /* establish document colors and font */
text-align: center;
}
.text-orange {
color: #ff8f23;
}
.text-blue {
color: #4fbad5;
}
/* only strong part of header is bolded */
h1, h2 {
color: #dee2e6; /* off white text */
font-weight: normal;
}
@ -36,6 +45,10 @@ h2 img {
height: 1.5em;
}
p {
font-weight: normal;
}
/* class to display a floated gallery of card elements */
.gallery-flex {
@ -49,6 +62,8 @@ h2 img {
.gallery-flex .card {
background-color: #35333f; /* lighter gray background for cards */
border-radius: 8px;
color: #dee2e6; /* off white text */
font-weight: normal;
margin: 0.5em;
padding: 0.5em;
min-width: 25.5em;
@ -66,27 +81,25 @@ h2 img {
</head>
<body>
<h3 style="background-color:#212529;text-align:center;">
<img src="images/title.png" style="height:2em;min-height:initial;" />
</h3>
<h1 style="background-color:#212529;text-align:center;">
<strong class="text-blue">Libre</span><strong class="text-orange">Gaming</span>
</h1>
<p><img src="images/banner.png" alt="banner" title="" /></p>
<h1><img src="images/libregaming-logo.svg" alt="logo" /> Libre Games: By <strong>Everyone</strong> for <strong>Everyone</strong></h1>
<h1><img src="icons/libregaming.svg" alt="logo" /> Libre Games: By <strong>Everyone</strong> for <strong>Everyone</strong></h1>
<p><span style="color:#ff8f23">Libre games are fun games owned by the
community: Everyone who <strong>plays</strong> the game, <strong>develops</strong> it, and
<strong>shares</strong> it.</span></p>
<h2><img src="images/team-lg.svg" alt="icon" /> Community owned games</h2>
<h2><img src="icons/team-line.svg" alt="icon" /> Community owned games</h2>
<p><span style="color:#ff8f23">When a game is owned by the <strong>community</strong>
everyone can do anything they like with it!</span></p>
<div class="gallery-flex">
<div class="card">
<h1 class="text-orange">Modding</h1>
<h1><img alt="tools icon" src="images/tools-lg.svg" /></h1>
<h1>Modding</h1>
<h1><img alt="tools icon" src="icons/tools-line.svg" /></h1>
<ul>
<li>Create and share a <strong>modified</strong> project
</li>
@ -96,8 +109,8 @@ everyone can do anything they like with it!</span></p>
</div>
<div class="card">
<h1 class="text-orange">Sharing</h1>
<h1><img alt="team icon" src="images/team-lg.svg" /></h1>
<h1>Sharing</h1>
<h1><img alt="team icon" src="icons/team-line.svg" /></h1>
<ul>
<li><strong>Share</strong> copies of the game!</li>
<li><strong>Freely</strong> use the game's content on any platform!</li>
@ -105,8 +118,8 @@ everyone can do anything they like with it!</span></p>
</div>
<div class="card">
<h1 class="text-orange">Learning</h1>
<h1><img alt="book icon" src="images/book-open-lg.svg" /></h1>
<h1>Learning</h1>
<h1><img alt="book icon" src="icons/book-open-line.svg" /></h1>
<ul>
<li><strong>Learn</strong> how the game is built by looking
<strong>under the hood</strong>.</li>
@ -114,8 +127,8 @@ everyone can do anything they like with it!</span></p>
</div>
<div class="card">
<h1 class="text-orange">Collaborating</h1>
<h1><img alt="service icon" src="images/service-lg.svg" /></h1>
<h1>Collaborating</h1>
<h1><img alt="service icon" src="icons/service-line.svg" /></h1>
<ul>
<li><strong>Participate</strong> in the game's development by
<strong>improving</strong> it and/or giving
@ -126,8 +139,8 @@ everyone can do anything they like with it!</span></p>
</div>
<div class="card">
<h1 class="text-orange">Preserving</h1>
<h1><img alt="fingerprint icon" src="images/fingerprint-lg.svg" /></h1>
<h1>Preserving</h1>
<h1><img alt="fingerprint icon" src="icons/fingerprint-line.svg" /></h1>
<ul>
<li>Help port the game to new platforms and ensure it
<strong>lives forever</strong>.</li>
@ -140,8 +153,8 @@ everyone can do anything they like with it!</span></p>
<div class="gallery-flex">
<div class="card">
<h1 class="text-orange">Sharing</h1>
<h1><img alt="team icon" src="images/team-lg.svg" /></h1>
<h1>Sharing</h1>
<h1><img alt="team icon" src="icons/team-line.svg" /></h1>
<p><strong>Everything</strong> needed to make the game:</p>
<ul>
<li>Code</li>