complete overhaul

This commit is contained in:
array-in-a-matrix 2021-07-24 21:20:27 -04:00
parent a766c2730d
commit e8d4281452
12 changed files with 1117 additions and 658 deletions

View file

@ -1,23 +1,15 @@
<!DOCTYPE html>
<html lang="en-US" class="fit-screen">
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="script.js" defer></script>
<title>Page does not exist!</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#157878" />
<title>Template</title>
<link rel="stylesheet" href="style/style.css" />
</head>
<body>
<header class="page-header" role="banner">
<h1 class="project-name">404 Error</h1>
<h2 class="project-tagline">Requested page not found.</h2>
<body
data-new-gr-c-s-check-loaded="8.872.0"
data-gr-ext-installed=""
class="fit-screen"
>
<header class="page-header fit-screen">
<h1 class="project-name">404</h1>
<h2 class="project-tagline">Page not found!</h2>
<a href="index.html" class="btn">Back to home page</a>
<a href="/" class="btn">Home</a>
</header>
</body>
</html>

View file

@ -1,20 +1,18 @@
<!DOCTYPE html>
<html lang="en-US">
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Array in a Matrix</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#157878" />
<script src="script.js" defer></script>
<link rel="stylesheet" type="text/css" href="style/main.style.css" />
</head>
<body data-new-gr-c-s-check-loaded="8.872.0" data-gr-ext-installed>
<header class="page-header">
<h1 class="project-name">
<span class="larger-name">A</span
><span class="smaller-name">RRAY IN A MATRI</span
><span class="larger-name">X</span>
</h1>
<body>
<h1 class="project-name">
<span class="larger-name">A</span
><span class="smaller-name">RRAY IN A MATRI</span
><span class="larger-name">X</span>
</h1>
<div class="main-content">
<nav>
<a href="https://github.com/array-in-a-matrix" class="btn"
><i class="fa fa-github"></i> GitHub</a
@ -24,56 +22,9 @@
>
</nav>
<nav>
<a href="index/RPS.html" class="btn">Rock Paper Scissors</a>
<a href="index/projects/" class="btn">Projects List</a>
<a href="index/RPS/" class="btn">Rock Paper Scissors</a>
</nav>
</header>
<main class="main-content">
<h1>Welcome to my page</h1>
<p>
Website skeleton taken from the
<a href="https://github.com/pages-themes/cayman">Cayman theme</a>.
</p>
<h2>Projects</h2>
<p>You can access and use my projects below.</p>
<table>
<thead>
<tr>
<th style="text-align: left">Github projects</th>
<th style="text-align: left">Description</th>
<th style="text-align: left">GitHub link</th>
<th style="text-align: left">Language</th>
</tr>
</thead>
<tbody id="userRepo">
<script src="githubapi.js"></script>
</tbody>
</table>
<table>
<thead>
<tr>
<th style="text-align: left">Other projects</th>
<th style="text-align: left">Description</th>
<th style="text-align: left">Link</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">Firefox black & red triangle theme</td>
<td style="text-align: left">
A red and black theme for firefox tabs.
</td>
<td style="text-align: left">
<a
href="https://addons.mozilla.org/en-US/firefox/addon/black-red-triangle-theme"
>https://addons.mozilla.org/en-US/firefox/addon/black-red-triangle-theme/</a
>
</td>
</tr>
</tbody>
</table>
<footer class="site-footer">
<div class="site-footer-credits">This page is work-in-progress.</div>
</footer>
</main>
</div>
</body>
</html>

View file

@ -1,64 +0,0 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="../style.css" />
<title>Array in a Matrix</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#157878" />
<script src="../script.js" defer></script>
</head>
<body data-new-gr-c-s-check-loaded="8.872.0" data-gr-ext-installed>
<header class="page-header">
<h1 class="project-name">
<span class="larger-name">A</span
><span class="smaller-name">RRAY IN A MATRI</span
><span class="larger-name">X</span>
</h1>
<nav>
<a href="../index.html" class="btn"> Home</a>
</nav>
</header>
<main class="main-content">
<h1>Rock Paper Scissors</h1>
<p>made with Javascript</p>
<section class="page-header">
<div
id="gameScore"
style="
background-color: rgba(0, 0, 0, 0.5);
border-color: rgba(255, 255, 255, 0.2);
border-width: 1px;
border-radius: 0.3rem;
"
>
<p id="scorePlayer"></p>
<p id="scoreCPU"></p>
<p id="round"></p>
</div>
<script src="RPS.js"></script>
<button class="btn game" onclick="play('rock')">🪨</button>
<button class="btn game" onclick="play('paper')">📄</button>
<button class="btn game" onclick="play('scissors')">✂️</button>
<div
id="game"
style="
background-color: rgba(0, 0, 0, 0.5);
border-color: rgba(255, 255, 255, 0.2);
border-width: 1px;
border-radius: 0.3rem;
"
>
<div id="choice">
<p id="text"></p>
<strong id="winner"></strong>
</div>
</div>
</section>
<footer class="site-footer">
<span class="site-footer-credits">This page is work-in-progress.</span>
</footer>
</main>
</body>
</html>

View file

@ -75,31 +75,16 @@ function playGame() {
}
console.log(score);
var div = document.getElementById("choice");
var p = document.getElementById("text");
var strong = document.getElementById("winner");
var scorePlayer = document.getElementById("scorePlayer");
var scoreCPU = document.getElementById("scoreCPU");
var round = document.getElementById("round");
scorePlayer.textContent = `Player wins: ${score.player}`;
scorePlayer.textContent = `Player wins: ${score.player}` + " ";
scoreCPU.textContent = `Computer wins: ${score.cpu}`;
round.textContent = `Round ${score.rounds}`;
p.textContent = `You: ${userChoice}`;
p.textContent += ` CPU: ${computerChoice}`;
choicePlayer.textContent = `You: ${userChoice}`;
choiceCPU.textContent = `CPU: ${computerChoice}`;
if (winner != "Tie") {
strong.textContent = "Winner: " + winner;
gameWinner.textContent = "Winner: " + winner;
} else {
strong.textContent = "Tie game!";
gameWinner.textContent = "Tie game!";
}
document.getElementById("game").appendChild(div).appendChild(p);
document.getElementById("game").appendChild(div).appendChild(strong);
document.getElementById("gameScore").appendChild(scorePlayer);
document.getElementById("gameScore").appendChild(scoreCPU);
document.getElementById("gameScore").appendChild(round);
}
function play(input) {

40
index/RPS/index.html Normal file
View file

@ -0,0 +1,40 @@
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Template</title>
<link rel="stylesheet" href="../../style/style.css" />
</head>
<body>
<header class="page-header" role="banner">
<h1 class="project-name">Rock Paper Scissors</h1>
<h2 class="project-tagline">Made using Javascript.</h2>
<a href="../../" class="btn">Home</a>
</header>
<main id="content" class="main-content" role="main">
<section class="game">
<div id="gameScore">
<p><span id="scorePlayer"></span> <span id="scoreCPU"></span></p>
<p><span id="round"></span></p>
</div>
<div>
<script src="RPS.js"></script>
<button class="btn gameButton" onclick="play('rock')">🪨</button>
<button class="btn gameButton" onclick="play('paper')">📄</button>
<button class="btn gameButton" onclick="play('scissors')">✂️</button>
</div>
<div id="evaluation">
<p id="choice">
<span id="choicePlayer"></span> <span id="choiceCPU"></span>
</p>
<p><strong id="gameWinner"> </strong></p>
</div>
</section>
<footer class="site-footer">
</footer>
</main>
</body>
</html>

56
index/projects/index.html Normal file
View file

@ -0,0 +1,56 @@
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Template</title>
<link rel="stylesheet" href="../../style/style.css" />
</head>
<body>
<header class="page-header" role="banner">
<h1 class="project-name">My Projects</h1>
<h2 class="project-tagline">Displaying thanks to the GitHub API.</h2>
<a href="../../" class="btn">Home</a>
</header>
<main id="content" class="main-content" role="main">
<table>
<thead>
<tr>
<th style="text-align: left">Github projects</th>
<th style="text-align: left">Description</th>
<th style="text-align: left">GitHub link</th>
<th style="text-align: left">Language</th>
</tr>
</thead>
<tbody id="userRepo">
<script src="githubapi.js"></script>
</tbody>
</table>
<table>
<thead>
<tr>
<th style="text-align: left">Other projects</th>
<th style="text-align: left">Description</th>
<th style="text-align: left">Link</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">Firefox black & red triangle theme</td>
<td style="text-align: left">
A red and black theme for firefox tabs.
</td>
<td style="text-align: left">
<a
href="https://addons.mozilla.org/en-US/firefox/addon/black-red-triangle-theme"
>https://addons.mozilla.org/en-US/firefox/addon/black-red-triangle-theme/</a
>
</td>
</tr>
</tbody>
</table>
<footer class="site-footer">
</footer>
</main>
</body>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 102 KiB

496
style.css
View file

@ -1,496 +0,0 @@
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html {
font-family: "Montserrat", sans-serif;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline: 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 1em 40px;
}
hr {
box-sizing: content-box;
height: 0;
}
pre {
overflow: auto;
}
code,
kbd,
pre,
samp {
font-family: "Montserrat", sans-serif;
font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0;
}
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input {
line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
-webkit-appearance: textfield;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0;
padding: 0;
}
textarea {
overflow: auto;
}
optgroup {
font-weight: bold;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
font-family: "Montserrat", sans-serif;
font-size: 16px;
line-height: 1.5;
color: #cccccc;
background-color: #000;
}
a {
color: #1e6bb8;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.btn {
display: inline-block;
margin-bottom: 1rem;
color: rgba(255, 255, 255, 0.7);
background-color: rgba(0, 0, 0, 0.5);
border-color: rgba(255, 255, 255, 0.2);
border-style: solid;
border-width: 1px;
border-radius: 0.3rem;
transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.btn:hover {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
background-color: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.3);
}
.btn + .btn {
margin-left: 1rem;
}
@media screen and (min-width: 64em) {
.btn {
padding: 0.75rem 1rem;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.btn {
padding: 0.6rem 0.9rem;
font-size: 0.9rem;
}
}
@media screen and (max-width: 42em) {
.btn {
display: block;
width: 100%;
padding: 0.75rem;
font-size: 0.9rem;
}
.btn + .btn {
margin-top: 1rem;
margin-left: 0;
}
}
.page-header {
color: #cccccc;
text-align: center;
background-color: #000;
background-image: url("src/memtrix_bg.jpg");
background-position: center;
background-size: cover;
}
.fit-screen {
height: 100%;
}
@media screen and (min-width: 64em) {
.page-header {
padding: 5rem 6rem;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.page-header {
padding: 3rem 4rem;
}
}
@media screen and (max-width: 42em) {
.page-header {
padding: 2rem 1rem;
}
}
.project-name {
margin-top: 0;
margin-bottom: 0.1rem;
font-family: Utopia, "Liberation Serif";
}
@media screen and (min-width: 64em) {
.project-name {
font-size: 3.25rem;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.project-name {
font-size: 2.25rem;
}
}
@media screen and (max-width: 42em) {
.project-name {
font-size: 1.75rem;
}
}
.project-tagline {
margin-bottom: 2rem;
font-weight: normal;
opacity: 0.7;
}
@media screen and (min-width: 64em) {
.project-tagline {
font-size: 1.25rem;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.project-tagline {
font-size: 1.15rem;
}
}
@media screen and (max-width: 42em) {
.project-tagline {
font-size: 1rem;
}
}
.main-content {
word-wrap: break-word;
}
.main-content :first-child {
margin-top: 0;
}
@media screen and (min-width: 64em) {
.main-content {
max-width: 64rem;
padding: 2rem 6rem;
margin: 0 auto;
font-size: 1.1rem;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.main-content {
padding: 2rem 4rem;
font-size: 1.1rem;
}
}
@media screen and (max-width: 42em) {
.main-content {
padding: 2rem 1rem;
font-size: 1rem;
}
}
.main-content img {
max-width: 100%;
}
.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.main-content h5,
.main-content h6 {
margin-top: 2rem;
margin-bottom: 1rem;
font-weight: normal;
color: #cccccc;
}
.main-content p {
margin-bottom: 1em;
}
.main-content code {
padding: 2px 4px;
font-family: "Montserrat", sans-serif;
font-size: 0.9rem;
color: #567482;
background-color: #f3f6fa;
border-radius: 0.3rem;
}
.main-content pre {
padding: 0.8rem;
margin-top: 0;
margin-bottom: 1rem;
font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace;
color: #567482;
word-wrap: normal;
background-color: #f3f6fa;
border: solid 1px #dce6f0;
border-radius: 0.3rem;
}
.main-content pre > code {
padding: 0;
margin: 0;
font-size: 0.9rem;
color: #567482;
word-break: normal;
white-space: pre;
background: transparent;
border: 0;
}
.main-content .highlight {
margin-bottom: 1rem;
}
.main-content .highlight pre {
margin-bottom: 0;
word-break: normal;
}
.main-content .highlight pre,
.main-content pre {
padding: 0.8rem;
overflow: auto;
font-size: 0.9rem;
line-height: 1.45;
border-radius: 0.3rem;
-webkit-overflow-scrolling: touch;
}
.main-content pre code,
.main-content pre tt {
display: inline;
max-width: initial;
padding: 0;
margin: 0;
overflow: initial;
line-height: inherit;
word-wrap: normal;
background-color: transparent;
border: 0;
}
.main-content pre code:before,
.main-content pre code:after,
.main-content pre tt:before,
.main-content pre tt:after {
content: normal;
}
.main-content ul,
.main-content ol {
margin-top: 0;
}
.main-content blockquote {
padding: 0 1rem;
margin-left: 0;
color: #819198;
border-left: 0.3rem solid #dce6f0;
}
.main-content blockquote > :first-child {
margin-top: 0;
}
.main-content blockquote > :last-child {
margin-bottom: 0;
}
.main-content table {
display: block;
width: 100%;
overflow: auto;
word-break: normal;
word-break: keep-all;
-webkit-overflow-scrolling: touch;
}
.main-content table th {
font-weight: bold;
}
.main-content table th,
.main-content table td {
padding: 0.5rem 1rem;
border: 1px solid #cccccc;
}
.main-content dl {
padding: 0;
}
.main-content dl dt {
padding: 0;
margin-top: 1rem;
font-size: 1rem;
font-weight: bold;
}
.main-content dl dd {
padding: 0;
margin-bottom: 1rem;
}
.main-content hr {
height: 2px;
padding: 0;
margin: 1rem 0;
background-color: #cccccc;
border: 0;
}
.site-footer {
padding-top: 2rem;
margin-top: 2rem;
border-top: solid 1px #cccccc;
}
@media screen and (min-width: 64em) {
.site-footer {
font-size: 1rem;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.site-footer {
font-size: 1rem;
}
}
@media screen and (max-width: 42em) {
.site-footer {
font-size: 0.9rem;
}
}
.site-footer-owner {
display: block;
font-weight: bold;
}
.site-footer-credits {
color: #cccccc;
}
.game {
font-size: 400%;
}
.larger-name {
font-size: larger;
}
.smaller-name {
font-size: smaller;
}

254
style/index.html Normal file
View file

@ -0,0 +1,254 @@
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Template</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="page-header" role="banner">
<h1 class="project-name">Dark Matrix Theme</h1>
<h2 class="project-tagline">Cayman redesigned.</h2>
<a href="../" class="btn">Home</a>
</header>
<main id="content" class="main-content" role="main">
<p>
Text can be <strong>bold</strong>, <em>italic</em>, or
<del>strikethrough</del>.
</p>
<p><a href="./another-page.html">Link to another page</a>.</p>
<p>There should be whitespace between paragraphs.</p>
<p>
There should be whitespace between paragraphs. We recommend including a
README, or a file with information about your project.
</p>
<h1 id="header-1">Header 1</h1>
<p>
This is a normal paragraph following a header. GitHub is a code hosting
platform for version control and collaboration. It lets you and others
work together on projects from anywhere.
</p>
<h2 id="header-2">Header 2</h2>
<blockquote>
<p>This is a blockquote following a header.</p>
<p>
When something is important enough, you do it even if the odds are not
in your favor.
</p>
</blockquote>
<h3 id="header-3">Header 3</h3>
<div class="language-js highlighter-rouge">
<div class="highlight">
<pre
class="highlight"
><code><span class="c1">// Javascript code with syntax highlighting.</span>
<span class="kd">var</span> <span class="nx">fun</span> <span class="o">=</span> <span class="kd">function</span> <span class="nx">lang</span><span class="p">(</span><span class="nx">l</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">dateformat</span><span class="p">.</span><span class="nx">i18n</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="dl">'</span><span class="s1">./lang/</span><span class="dl">'</span> <span class="o">+</span> <span class="nx">l</span><span class="p">)</span>
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
</code></pre>
</div>
</div>
<div class="language-ruby highlighter-rouge">
<div class="highlight">
<pre
class="highlight"
><code><span class="c1"># Ruby code with syntax highlighting</span>
<span class="no">GitHubPages</span><span class="o">::</span><span class="no">Dependencies</span><span class="p">.</span><span class="nf">gems</span><span class="p">.</span><span class="nf">each</span> <span class="k">do</span> <span class="o">|</span><span class="n">gem</span><span class="p">,</span> <span class="n">version</span><span class="o">|</span>
<span class="n">s</span><span class="p">.</span><span class="nf">add_dependency</span><span class="p">(</span><span class="n">gem</span><span class="p">,</span> <span class="s2">"= </span><span class="si">#{</span><span class="n">version</span><span class="si">}</span><span class="s2">"</span><span class="p">)</span>
<span class="k">end</span>
</code></pre>
</div>
</div>
<h4 id="header-4">Header 4</h4>
<ul>
<li>This is an unordered list following a header.</li>
<li>This is an unordered list following a header.</li>
<li>This is an unordered list following a header.</li>
</ul>
<h5 id="header-5">Header 5</h5>
<ol>
<li>This is an ordered list following a header.</li>
<li>This is an ordered list following a header.</li>
<li>This is an ordered list following a header.</li>
</ol>
<h6 id="header-6">Header 6</h6>
<table>
<thead>
<tr>
<th style="text-align: left">head1</th>
<th style="text-align: left">head two</th>
<th style="text-align: left">three</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">ok</td>
<td style="text-align: left">good swedish fish</td>
<td style="text-align: left">nice</td>
</tr>
<tr>
<td style="text-align: left">out of stock</td>
<td style="text-align: left">good and plenty</td>
<td style="text-align: left">nice</td>
</tr>
<tr>
<td style="text-align: left">ok</td>
<td style="text-align: left">
good
<code class="language-plaintext highlighter-rouge">oreos</code>
</td>
<td style="text-align: left">hmm</td>
</tr>
<tr>
<td style="text-align: left">ok</td>
<td style="text-align: left">
good
<code class="language-plaintext highlighter-rouge">zoute</code>
drop
</td>
<td style="text-align: left">yumm</td>
</tr>
</tbody>
</table>
<h3 id="theres-a-horizontal-rule-below-this">
Theres a horizontal rule below this.
</h3>
<hr />
<h3 id="here-is-an-unordered-list">Here is an unordered list:</h3>
<ul>
<li>Item foo</li>
<li>Item bar</li>
<li>Item baz</li>
<li>Item zip</li>
</ul>
<h3 id="and-an-ordered-list">And an ordered list:</h3>
<ol>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
</ol>
<h3 id="and-a-nested-list">And a nested list:</h3>
<ul>
<li>
level 1 item
<ul>
<li>level 2 item</li>
<li>
level 2 item
<ul>
<li>level 3 item</li>
<li>level 3 item</li>
</ul>
</li>
</ul>
</li>
<li>
level 1 item
<ul>
<li>level 2 item</li>
<li>level 2 item</li>
<li>level 2 item</li>
</ul>
</li>
<li>
level 1 item
<ul>
<li>level 2 item</li>
<li>level 2 item</li>
</ul>
</li>
<li>level 1 item</li>
</ul>
<h3 id="small-image">Small image</h3>
<p>
<img
src="https://github.githubassets.com/images/icons/emoji/octocat.png"
alt="Octocat"
/>
</p>
<h3 id="large-image">Large image</h3>
<p>
<img
src="https://guides.github.com/activities/hello-world/branching.png"
alt="Branching"
/>
</p>
<h3 id="definition-lists-can-be-used-with-html-syntax">
Definition lists can be used with HTML syntax.
</h3>
<dl>
<dt>Name</dt>
<dd>Godzilla</dd>
<dt>Born</dt>
<dd>1952</dd>
<dt>Birthplace</dt>
<dd>Japan</dd>
<dt>Color</dt>
<dd>Green</dd>
</dl>
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre
class="highlight"
><code>Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.
</code></pre>
</div>
</div>
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>The final element.
</code></pre>
</div>
</div>
<footer class="site-footer">
<span class="site-footer-owner"
>Based off of <a href="https://github.com/pages-themes/cayman">cayman</a>
by
<a href="https://github.com/pages-themes">pages-themes</a>.</span
>
<span class="site-footer-credits"
>This page was generated by
<a href="https://github.com/array-in-a-matrix">Array in a Matrix</a>.</span
>
</footer>
</main>
</body>
</html>

166
style/main.style.css Normal file
View file

@ -0,0 +1,166 @@
:root {
--primary: #fff;
--secondary: rgba(0, 0, 0, 0.5);
--tertiary: #151b74;
--transparent: transparent;
}
/* Animations */
@-webkit-keyframes bg-scrolling-reverse {
100% {
background-position: 50px 50px;
}
}
@-moz-keyframes bg-scrolling-reverse {
100% {
background-position: 50px 50px;
}
}
@-o-keyframes bg-scrolling-reverse {
100% {
background-position: 50px 50px;
}
}
@keyframes bg-scrolling-reverse {
100% {
background-position: 50px 50px;
}
}
@-webkit-keyframes bg-scrolling {
0% {
background-position: 50px 50px;
}
}
@-moz-keyframes bg-scrolling {
0% {
background-position: 50px 50px;
}
}
@-o-keyframes bg-scrolling {
0% {
background-position: 50px 50px;
}
}
@keyframes bg-scrolling {
0% {
background-position: 50px 50px;
}
}
/* Main styles */
body {
margin-top: 13.5rem;
color: var(--primary);
font-family: Utopia, "Liberation Serif";
text-align: center;
/* img size is 50x50 */
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABbmlDQ1BpY2MAACiRdZE7SwNBFIW/RCWikRRaBLHYQsVCJSiIpcbCJkiICr6aZPMSNuuyu0HEVrCxCFiINr4K/4G2gq2CICiCiI1/wFcjYb2TBBJEZ5m9H2fmXGbOgD9m6AWnOQIF07UT01FtYXFJC7wSIEwnw/iSumNNxuMx/h1f9/hUvRtSvf7f9+doT2ccHXytwmO6ZbvCE8KxdddSvCPcpeeTaeEj4UFbDih8rfRUlV8U56r8odieS0yBX/XUcg2camA9bxeEB4R7C0ZRr51H3SSYMednpXbL7MEhwTRRNFIUWcXAZUiqKZn97YtUfDOsiUeXv8UGtjhy5MU7KGpRumakZkXPyGewoXL/naeTHR2pdg9GoeXZ8977ILAL5ZLnfR97XvkEmp7g0qz71ySn8U/RS3Wt9xBCW3B+VddSe3CxDeFHK2knK1KTTH82C29n0LEInbfQtlzNqrbO6QPMbcoT3cD+AfTL/tDKD92VZ/plHO89AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAuElEQVRoBe3awQ2CQABEUbUEbJEEi5ISpQVETuY38LPkk5gwp9mdx9H7srz2dX3fpul5G/XZts959H2e5/14G/Z3nv+QGPYC/+M/Rv2ceO4uwkXsnIgtwP5EuIidE7EF2J8IF7FzIrYA+xPhInZOxBZgfyJcxM6J2ALsT4SL2DkRW4D9iXAROydiC7A/ES5i50RsAfYnwkXsnIgtwP5EuIidE7EF2J8IF7FzIrYA+y8j8rvYJf6v9QVf2KG69fWg3gAAAABJRU5ErkJggg==") repeat 0 0;
-webkit-animation: bg-scrolling-reverse 0.92s infinite;
/* Safari 4+ */
-moz-animation: bg-scrolling-reverse 0.92s infinite;
/* Fx 5+ */
-o-animation: bg-scrolling-reverse 0.92s infinite;
/* Opera 12+ */
animation: bg-scrolling-reverse 0.92s infinite;
/* IE 10+ */
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
.larger-name {
font-size: larger;
}
.smaller-name {
font-size: smaller;
}
.main-content{
font-family: "Montserrat", sans-serif;
};
.project-name {
color: --primary;
font-family: Utopia, "Liberation Serif";
}
@media screen and (min-width: 64em) {
.project-name {
font-size: 8rem;
}
.main-content {
font-size: 1.5rem;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.project-name {
font-size: 4rem;
}
.main-content {
font-size: 1.25rem;
}
}
@media screen and (max-width: 42em) {
.project-name {
font-size: 2rem;
}
.main-content {
font-size: 1rem;
}
}
a {
background-color: var(--transparent);
}
a:active,
a:hover {
outline: 0;
}
a {
color: var(--tertiary);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.btn {
display: inline-block;
margin-bottom: 1rem;
color: var(--primary);
background-color: var(--secondary);
border-color: rgba(255, 255, 255, 0.2);
border-style: solid;
border-width: 1px;
border-radius: 0.3rem;
transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.btn:hover {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
background-color: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.3);
}
.btn + .btn {
margin-left: 1rem;
}
@media screen and (min-width: 64em) {
.btn {
padding: 0.75rem 1rem;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.btn {
padding: 0.6rem 0.9rem;
font-size: 0.9rem;
}
}
@media screen and (max-width: 42em) {
.btn {
display: block;
width: 100%;
padding: 0.75rem;
font-size: 0.9rem;
}
.btn + .btn {
margin-top: 1rem;
margin-left: 0;
}
}
* {
box-sizing: border-box;
}

575
style/style.css Normal file
View file

@ -0,0 +1,575 @@
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap");
html {
font-family: "Montserrat", sans-serif;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%
}
body {
margin:0
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display:block
}
audio,
canvas,
progress,
video {
display:inline-block;
vertical-align:baseline
}
audio:not([controls]) {
display:none;
height:0
}
[hidden],
template {
display:none
}
a {
background-color:transparent
}
a:active,
a:hover {
outline:0
}
abbr[title] {
border-bottom:1px dotted
}
b,
strong {
font-weight:bold
}
dfn {
font-style:italic
}
h1 {
font-size:2em;
margin:0.67em 0
}
mark {
background:#ff0;
color:#000
}
small {
font-size:80%
}
sub,
sup {
font-size:75%;
line-height:0;
position:relative;
vertical-align:baseline
}
sup {
top:-0.5em
}
sub {
bottom:-0.25em
}
img {
border:0
}
svg:not(:root) {
overflow:hidden
}
figure {
margin:1em 40px
}
hr {
box-sizing:content-box;
height:0
}
pre {
overflow:auto
}
code,
kbd,
pre,
samp {
font-family:monospace, monospace;
font-size:1em
}
button,
input,
optgroup,
select,
textarea {
color:inherit;
font:inherit;
margin:0
}
button {
overflow:visible
}
button,
select {
text-transform:none
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance:button;
cursor:pointer
}
button[disabled],
html input[disabled] {
cursor:default
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border:0;
padding:0
}
input {
line-height:normal
}
input[type="checkbox"],
input[type="radio"] {
box-sizing:border-box;
padding:0
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height:auto
}
input[type="search"] {
-webkit-appearance:textfield;
box-sizing:content-box
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance:none
}
fieldset {
border:1px solid #c0c0c0;
margin:0 2px;
padding:0.35em 0.625em 0.75em
}
legend {
border:0;
padding:0
}
textarea {
overflow:auto
}
optgroup {
font-weight:bold
}
table {
border-collapse:collapse;
border-spacing:0
}
td,
th {
padding:0
}
* {
box-sizing:border-box
}
body {
padding:0;
margin:0;
font-family: "Montserrat", sans-serif;
font-size:16px;
line-height:1.5;
color:#606c71
}
#skip-to-content {
height:1px;
width:1px;
position:absolute;
overflow:hidden;
top:-10px
}
#skip-to-content:focus {
position:fixed;
top:10px;
left:10px;
height:auto;
width:auto;
background:#e19447;
outline:thick solid #e19447
}
a {
color:#1e6bb8;
text-decoration:none
}
a:hover {
text-decoration:underline
}
.btn {
display:inline-block;
margin-bottom:1rem;
color:rgba(255,255,255,0.7);
background-color:rgba(255,255,255,0.08);
border-color:rgba(255,255,255,0.2);
border-style:solid;
border-width:1px;
border-radius:0.3rem;
transition:color 0.2s, background-color 0.2s, border-color 0.2s
}
.btn:hover {
color:rgba(255,255,255,0.8);
text-decoration:none;
background-color:rgba(255,255,255,0.2);
border-color:rgba(255,255,255,0.3)
}
.btn+.btn {
margin-left:1rem
}
@media screen and (min-width: 64em) {
.btn {
padding:0.75rem 1rem
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.btn {
padding:0.6rem 0.9rem;
font-size:0.9rem
}
}
@media screen and (max-width: 42em) {
.btn {
display:block;
width:100%;
padding:0.75rem;
font-size:0.9rem
}
.btn+.btn {
margin-top:1rem;
margin-left:0
}
}
.page-header {
color:#fff;
text-align:center;
}
@-webkit-keyframes bg-scrolling-reverse {
100% {
background-position: 50px 50px;
}
}
@-moz-keyframes bg-scrolling-reverse {
100% {
background-position: 50px 50px;
}
}
@-o-keyframes bg-scrolling-reverse {
100% {
background-position: 50px 50px;
}
}
@keyframes bg-scrolling-reverse {
100% {
background-position: 50px 50px;
}
}
@-webkit-keyframes bg-scrolling {
0% {
background-position: 50px 50px;
}
}
@-moz-keyframes bg-scrolling {
0% {
background-position: 50px 50px;
}
}
@-o-keyframes bg-scrolling {
0% {
background-position: 50px 50px;
}
}
@keyframes bg-scrolling {
0% {
background-position: 50px 50px;
}
}
body {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABbmlDQ1BpY2MAACiRdZE7SwNBFIW/RCWikRRaBLHYQsVCJSiIpcbCJkiICr6aZPMSNuuyu0HEVrCxCFiINr4K/4G2gq2CICiCiI1/wFcjYb2TBBJEZ5m9H2fmXGbOgD9m6AWnOQIF07UT01FtYXFJC7wSIEwnw/iSumNNxuMx/h1f9/hUvRtSvf7f9+doT2ccHXytwmO6ZbvCE8KxdddSvCPcpeeTaeEj4UFbDih8rfRUlV8U56r8odieS0yBX/XUcg2camA9bxeEB4R7C0ZRr51H3SSYMednpXbL7MEhwTRRNFIUWcXAZUiqKZn97YtUfDOsiUeXv8UGtjhy5MU7KGpRumakZkXPyGewoXL/naeTHR2pdg9GoeXZ8977ILAL5ZLnfR97XvkEmp7g0qz71ySn8U/RS3Wt9xBCW3B+VddSe3CxDeFHK2knK1KTTH82C29n0LEInbfQtlzNqrbO6QPMbcoT3cD+AfTL/tDKD92VZ/plHO89AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAuElEQVRoBe3awQ2CQABEUbUEbJEEi5ISpQVETuY38LPkk5gwp9mdx9H7srz2dX3fpul5G/XZts959H2e5/14G/Z3nv+QGPYC/+M/Rv2ceO4uwkXsnIgtwP5EuIidE7EF2J8IF7FzIrYA+xPhInZOxBZgfyJcxM6J2ALsT4SL2DkRW4D9iXAROydiC7A/ES5i50RsAfYnwkXsnIgtwP5EuIidE7EF2J8IF7FzIrYA+y8j8rvYJf6v9QVf2KG69fWg3gAAAABJRU5ErkJggg==") repeat 0 0;
-webkit-animation: bg-scrolling-reverse 0.92s infinite;
/* Safari 4+ */
-moz-animation: bg-scrolling-reverse 0.92s infinite;
/* Fx 5+ */
-o-animation: bg-scrolling-reverse 0.92s infinite;
/* Opera 12+ */
animation: bg-scrolling-reverse 0.92s infinite;
/* IE 10+ */
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
@media screen and (min-width: 64em) {
.page-header {
padding:5rem 6rem
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.page-header {
padding:3rem 4rem
}
}
@media screen and (max-width: 42em) {
.page-header {
padding:2rem 1rem
}
}
.project-name {
margin-top:0;
margin-bottom:0.1rem
}
@media screen and (min-width: 64em) {
.project-name {
font-size:3.25rem
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.project-name {
font-size:2.25rem
}
}
@media screen and (max-width: 42em) {
.project-name {
font-size:1.75rem
}
}
.project-tagline {
margin-bottom:2rem;
font-weight:normal;
opacity:0.7
}
@media screen and (min-width: 64em) {
.project-tagline {
font-size:1.25rem
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.project-tagline {
font-size:1.15rem
}
}
@media screen and (max-width: 42em) {
.project-tagline {
font-size:1rem
}
}
.main-content {
word-wrap:break-word;
background-color: #fff;
}
.main-content :first-child {
margin-top:0
}
@media screen and (min-width: 64em) {
.main-content {
max-width:64rem;
padding:2rem 6rem;
margin:0 auto;
font-size:1.1rem
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.main-content {
padding:2rem 4rem;
font-size:1.1rem
}
}
@media screen and (max-width: 42em) {
.main-content {
padding:2rem 1rem;
font-size:1rem
}
}
.main-content kbd {
background-color:#fafbfc;
border:1px solid #c6cbd1;
border-bottom-color:#959da5;
border-radius:3px;
box-shadow:inset 0 -1px 0 #959da5;
color:#444d56;
display:inline-block;
font-size:11px;
line-height:10px;
padding:3px 5px;
vertical-align:middle
}
.main-content img {
max-width:100%
}
.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.main-content h5,
.main-content h6 {
margin-top:2rem;
margin-bottom:1rem;
font-weight:normal;
color:#000;
}
.main-content p {
margin-bottom:1em
}
.main-content code {
padding:2px 4px;
font-family: "Montserrat", sans-serif;
font-size:0.9rem;
color:#567482;
background-color:#f3f6fa;
border-radius:0.3rem
}
.main-content pre {
padding:0.8rem;
margin-top:0;
margin-bottom:1rem;
font:1rem Consolas, "Liberation Mono", Menlo, Courier, monospace;
color:#567482;
word-wrap:normal;
background-color:#f3f6fa;
border:solid 1px #dce6f0;
border-radius:0.3rem
}
.main-content pre>code {
padding:0;
margin:0;
font-size:0.9rem;
color:#567482;
word-break:normal;
white-space:pre;
background:transparent;
border:0
}
.main-content .highlight {
margin-bottom:1rem
}
.main-content .highlight pre {
margin-bottom:0;
word-break:normal
}
.main-content .highlight pre,
.main-content pre {
padding:0.8rem;
overflow:auto;
font-size:0.9rem;
line-height:1.45;
border-radius:0.3rem;
-webkit-overflow-scrolling:touch
}
.main-content pre code,
.main-content pre tt {
display:inline;
max-width:initial;
padding:0;
margin:0;
overflow:initial;
line-height:inherit;
word-wrap:normal;
background-color:transparent;
border:0
}
.main-content pre code:before,
.main-content pre code:after,
.main-content pre tt:before,
.main-content pre tt:after {
content:normal
}
.main-content ul,
.main-content ol {
margin-top:0
}
.main-content blockquote {
padding:0 1rem;
margin-left:0;
color:#819198;
border-left:0.3rem solid #dce6f0
}
.main-content blockquote>:first-child {
margin-top:0
}
.main-content blockquote>:last-child {
margin-bottom:0
}
.main-content table {
display:block;
width:100%;
overflow:auto;
word-break:normal;
word-break:keep-all;
-webkit-overflow-scrolling:touch
}
.main-content table th {
font-weight:bold
}
.main-content table th,
.main-content table td {
padding:0.5rem 1rem;
border:1px solid #e9ebec
}
.main-content dl {
padding:0
}
.main-content dl dt {
padding:0;
margin-top:1rem;
font-size:1rem;
font-weight:bold
}
.main-content dl dd {
padding:0;
margin-bottom:1rem
}
.main-content hr {
height:2px;
padding:0;
margin:1rem 0;
background-color:#eff0f1;
border:0
}
.site-footer {
padding-top:2rem;
margin-top:2rem;
border-top:solid 1px #eff0f1
}
@media screen and (min-width: 64em) {
.site-footer {
font-size:1rem
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.site-footer {
font-size:1rem
}
}
@media screen and (max-width: 42em) {
.site-footer {
font-size:0.9rem
}
}
.site-footer-owner {
display:block;
font-weight:bold
}
.site-footer-credits {
color:#819198
}
.gameButton {
font-size: 400%;
text-align: center;
background-color:rgba(0,0,0,0.08);
}
.game {
text-align: center;
}