complete overhaul
This commit is contained in:
array-in-a-matrix
parent
a766c2730d
commit
e8d4281452
12 changed files with 1117 additions and 658 deletions
24
404.html
24
404.html
|
|
@ -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>
|
||||
|
|
|
|||
65
index.html
65
index.html
|
|
@ -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">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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
40
index/RPS/index.html
Normal 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
56
index/projects/index.html
Normal 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
496
style.css
|
|
@ -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
254
style/index.html
Normal 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">
|
||||
There’s 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
166
style/main.style.css
Normal 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
575
style/style.css
Normal 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;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue