formating
This commit is contained in:
array-in-a-matrix
parent
4dd8a499ec
commit
83d959a440
15 changed files with 79409 additions and 3901 deletions
33
404.html
33
404.html
|
|
@ -1,18 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>404 Error</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>
|
||||
|
||||
<a href="/" class="btn">Home</a>
|
||||
</header>
|
||||
</body>
|
||||
</html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>404 Error</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>
|
||||
|
||||
<a href="/" class="btn">Home</a>
|
||||
</header>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
@font-face {
|
||||
font-family: 'DarkNewRoman';
|
||||
src: url('darknewroman-webfont.woff2') format('woff2'),
|
||||
url('darknewroman-webfont.woff') format('woff');
|
||||
url('darknewroman-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,11 @@
|
|||
|
||||
<h3>About Me</h3>
|
||||
<code>
|
||||
I like to Skateboard and a cybersecurity/privacy enthusiast. I use <a href="https://archlinux.org/">Arch Linux<i class="fa fa-archlinux" aria-hidden="true"></i></a> btw and I do programming as a hobby. I coded this website, host it (I have physical access to the server) and did the SSL certificate personally. <a href="http://matrix.org">Matrix</a> homeserver is live <a href="https://matrix.arrayinamatrix.xyz">here</a> ! I recommend using the <a href="https://element.io/get-started">Element</a> Client.
|
||||
I like to Skateboard and a cybersecurity/privacy enthusiast. I use <a href="https://archlinux.org/">Arch Linux<i
|
||||
class="fa fa-archlinux" aria-hidden="true"></i></a> btw and I do programming as a hobby. I coded this website,
|
||||
host it (I have physical access to the server) and did the SSL certificate personally. <a
|
||||
href="http://matrix.org">Matrix</a> homeserver is live <a href="https://matrix.arrayinamatrix.xyz">here</a> ! I
|
||||
recommend using the <a href="https://element.io/get-started">Element</a> Client.
|
||||
</code>
|
||||
<footer class="site-footer">
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -78,8 +78,8 @@ function playGame() {
|
|||
scorePlayer.textContent = `Player wins: ${score.player}` + " ";
|
||||
scoreCPU.textContent = `Computer wins: ${score.cpu}`;
|
||||
round.textContent = `Round ${score.rounds}`;
|
||||
choicePlayer.textContent = `You: ${userChoice}`;
|
||||
choiceCPU.textContent = `CPU: ${computerChoice}`;
|
||||
choicePlayer.textContent = `You: ${userChoice}`;
|
||||
choiceCPU.textContent = `CPU: ${computerChoice}`;
|
||||
if (winner != "Tie") {
|
||||
gameWinner.textContent = "Winner: " + winner;
|
||||
} else {
|
||||
|
|
@ -90,4 +90,4 @@ function playGame() {
|
|||
function play(input) {
|
||||
getUserChoice(input);
|
||||
playGame();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,44 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Rock Paper Scissors</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>
|
||||
<a href="../" class="btn">Games</a>
|
||||
</header>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Rock Paper Scissors</title>
|
||||
<link rel="stylesheet" href="/style/style.css" />
|
||||
</head>
|
||||
|
||||
<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>
|
||||
<body>
|
||||
<header class="page-header" role="banner">
|
||||
<h1 class="project-name">Rock Paper Scissors</h1>
|
||||
<h2 class="project-tagline">Made using Javascript.</h2>
|
||||
|
||||
<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>
|
||||
<a href="/" class="btn">Home</a>
|
||||
<a href="../" class="btn">Games</a>
|
||||
</header>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,89 +1,92 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Generated by GameMaker:Studio http://www.yoyogames.com/gamemaker/studio -->
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta http-equiv="pragma" content="no-cache" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
|
||||
/>
|
||||
<meta
|
||||
name="apple-mobile-web-app-status-bar-style"
|
||||
content="black-translucent"
|
||||
/>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" type="text/css" href="/style/style.css" />
|
||||
|
||||
<!-- Set the title bar of the page -->
|
||||
<title>Eternal Space</title>
|
||||
<head>
|
||||
<!-- Generated by GameMaker:Studio http://www.yoyogames.com/gamemaker/studio -->
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta http-equiv="pragma" content="no-cache" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" type="text/css" href="/style/style.css" />
|
||||
|
||||
<!-- Set the background colour of the document -->
|
||||
<style>
|
||||
body {
|
||||
background: #0;
|
||||
color: #cccccc;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
border: 0px;
|
||||
}
|
||||
canvas {
|
||||
image-rendering: optimizeSpeed;
|
||||
-webkit-interpolation-mode: nearest-neighbor;
|
||||
-ms-touch-action: none;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
border: 0px;
|
||||
}
|
||||
:-webkit-full-screen #canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
div.gm4html5_div_class {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
border: 0px;
|
||||
}
|
||||
/* START - Login Dialog Box */
|
||||
div.gm4html5_login {
|
||||
padding: 20px;
|
||||
position: absolute;
|
||||
border: solid 2px #000000;
|
||||
background-color: #404040;
|
||||
color: #00ff00;
|
||||
border-radius: 15px;
|
||||
box-shadow: #101010 20px 20px 40px;
|
||||
}
|
||||
div.gm4html5_cancel_button {
|
||||
float: right;
|
||||
}
|
||||
div.gm4html5_login_button {
|
||||
float: left;
|
||||
}
|
||||
div.gm4html5_login_header {
|
||||
text-align: center;
|
||||
}
|
||||
/* END - Login Dialog Box */
|
||||
:-webkit-full-screen {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<!-- Set the title bar of the page -->
|
||||
<title>Eternal Space</title>
|
||||
|
||||
<body>
|
||||
<header class="page-header" role="banner">
|
||||
<h1 class="project-name">Eternal Space</h1>
|
||||
<h2 class="project-tagline">
|
||||
My submission to the Opera GX + GameMaker game jam.
|
||||
</h2>
|
||||
<!-- Set the background colour of the document -->
|
||||
<style>
|
||||
body {
|
||||
background: #0;
|
||||
color: #cccccc;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
<a href="/" class="btn">Home</a>
|
||||
<a href="../" class="btn">Games</a>
|
||||
</header>
|
||||
canvas {
|
||||
image-rendering: optimizeSpeed;
|
||||
-webkit-interpolation-mode: nearest-neighbor;
|
||||
-ms-touch-action: none;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
<div class="gm4html5_div_class" id="gm4html5_div_id" style="
|
||||
:-webkit-full-screen #canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
div.gm4html5_div_class {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
/* START - Login Dialog Box */
|
||||
div.gm4html5_login {
|
||||
padding: 20px;
|
||||
position: absolute;
|
||||
border: solid 2px #000000;
|
||||
background-color: #404040;
|
||||
color: #00ff00;
|
||||
border-radius: 15px;
|
||||
box-shadow: #101010 20px 20px 40px;
|
||||
}
|
||||
|
||||
div.gm4html5_cancel_button {
|
||||
float: right;
|
||||
}
|
||||
|
||||
div.gm4html5_login_button {
|
||||
float: left;
|
||||
}
|
||||
|
||||
div.gm4html5_login_header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* END - Login Dialog Box */
|
||||
:-webkit-full-screen {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="page-header" role="banner">
|
||||
<h1 class="project-name">Eternal Space</h1>
|
||||
<h2 class="project-tagline">
|
||||
My submission to the Opera GX + GameMaker game jam.
|
||||
</h2>
|
||||
|
||||
<a href="/" class="btn">Home</a>
|
||||
<a href="../" class="btn">Games</a>
|
||||
</header>
|
||||
|
||||
<div class="gm4html5_div_class" id="gm4html5_div_id" style="
|
||||
position: absolute;
|
||||
top: 75%;
|
||||
left: 50%;
|
||||
|
|
@ -93,23 +96,18 @@
|
|||
text-align: center;
|
||||
padding-bottom: 2.5rem;
|
||||
">
|
||||
<!-- Create the canvas element the game draws to -->
|
||||
<canvas
|
||||
id="canvas"
|
||||
width="1500"
|
||||
height="800"
|
||||
>
|
||||
<p>Your browser doesn't support HTML5 canvas.</p>
|
||||
</canvas>
|
||||
</div>
|
||||
<!-- Create the canvas element the game draws to -->
|
||||
<canvas id="canvas" width="1500" height="800">
|
||||
<p>Your browser doesn't support HTML5 canvas.</p>
|
||||
</canvas>
|
||||
</div>
|
||||
|
||||
<!-- Run the game code -->
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="html5game/Opera GX + GameMaker game jam - Eternal Space.js?MDKYB=718544636"
|
||||
></script>
|
||||
<script>
|
||||
window.onload = GameMaker_Init;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
<!-- Run the game code -->
|
||||
<script type="text/javascript" src="html5game/Opera GX + GameMaker game jam - Eternal Space.js?MDKYB=718544636">
|
||||
</script>
|
||||
<script>
|
||||
window.onload = GameMaker_Init;
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -2,6 +2,7 @@ function saveCanvas() {
|
|||
saveCanvasButton.download = "image.png";
|
||||
saveCanvasButton.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
|
||||
}
|
||||
|
||||
function goFullScreen() {
|
||||
if (canvas.requestFullScreen)
|
||||
canvas.requestFullScreen();
|
||||
|
|
@ -9,4 +10,4 @@ function goFullScreen() {
|
|||
canvas.webkitRequestFullScreen();
|
||||
else if (canvas.mozRequestFullScreen)
|
||||
canvas.mozRequestFullScreen();
|
||||
}
|
||||
}
|
||||
|
|
@ -23,14 +23,19 @@
|
|||
<h3>Rock Paper Scissors 🪨📄✂️</h3>
|
||||
<p><a href="./RPS/">Click to play.</a></p>
|
||||
<code>
|
||||
The first game I ever made! I wrote this when I first began learning Javascript, to be specific I wrote the logic during that time. The game was only playable through the terminal, now its fairly portable and can be integrated into anything.
|
||||
The first game I ever made! I wrote this when I first began learning Javascript, to be specific I wrote the logic
|
||||
during that time. The game was only playable through the terminal, now its fairly portable and can be integrated
|
||||
into anything.
|
||||
</code>
|
||||
|
||||
<br>
|
||||
<h3>Eternal Space</h3>
|
||||
<p><a href="./eternalspace/">Click to play.</a></p>
|
||||
<code>
|
||||
Currently only playable on a pc, I haven't tried figuring out how to scale down the game lol. I participated in the Opera GX + GameMaker game jam and created this monstrosity. The game jam was alien themed, however I never got that far. Before taking part in this game jam I have never programmed an actual game nor have been in a game jam. I learned how to program in GameMaker Language (basically Javascript) during the event.
|
||||
Currently only playable on a pc, I haven't tried figuring out how to scale down the game lol. I participated in
|
||||
the Opera GX + GameMaker game jam and created this monstrosity. The game jam was alien themed, however I never got
|
||||
that far. Before taking part in this game jam I have never programmed an actual game nor have been in a game jam.
|
||||
I learned how to program in GameMaker Language (basically Javascript) during the event.
|
||||
</code>
|
||||
|
||||
|
||||
|
|
@ -54,4 +59,4 @@
|
|||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
|
@ -35,4 +35,4 @@ function requestUserRepos() {
|
|||
}
|
||||
};
|
||||
xhr.send();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,71 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>My Projects</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>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>My Projects</title>
|
||||
<link rel="stylesheet" href="/style/style.css" />
|
||||
</head>
|
||||
|
||||
<main id="content" class="main-content" role="main">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Github projects</th>
|
||||
<th>Description</th>
|
||||
<th>GitHub link</th>
|
||||
<th>Language</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="userRepo">
|
||||
<script src="githubapi.js"></script>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Other projects</th>
|
||||
<th>Description</th>
|
||||
<th>Link</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Firefox black & red triangle theme</td>
|
||||
<td>
|
||||
A red and black theme for firefox tabs.
|
||||
</td>
|
||||
<td>
|
||||
<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>
|
||||
<tr>
|
||||
<td>Dark New Roman</td>
|
||||
<td>
|
||||
A custom serif font based off of Times New Roman.
|
||||
</td>
|
||||
<td>
|
||||
<a
|
||||
href="/res/DarkNewRoman.ttf"
|
||||
>Download font (truetype)</a
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<footer class="site-footer">
|
||||
</footer>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
<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>Github projects</th>
|
||||
<th>Description</th>
|
||||
<th>GitHub link</th>
|
||||
<th>Language</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="userRepo">
|
||||
<script src="githubapi.js"></script>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Other projects</th>
|
||||
<th>Description</th>
|
||||
<th>Link</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Firefox black & red triangle theme</td>
|
||||
<td>
|
||||
A red and black theme for firefox tabs.
|
||||
</td>
|
||||
<td>
|
||||
<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>
|
||||
<tr>
|
||||
<td>Dark New Roman</td>
|
||||
<td>
|
||||
A custom serif font based off of Times New Roman.
|
||||
</td>
|
||||
<td>
|
||||
<a href="/res/DarkNewRoman.ttf">Download font (truetype)</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<footer class="site-footer">
|
||||
</footer>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -49,4 +49,4 @@ let checkCookie = function () {
|
|||
document.getElementById("cookiePopup").style.display = "none";
|
||||
}
|
||||
}
|
||||
checkCookie();
|
||||
checkCookie();
|
||||
|
|
@ -12,8 +12,8 @@
|
|||
<body>
|
||||
<header class="page-header" role="banner">
|
||||
<h1 class="project-name"> Project Name
|
||||
</h1>
|
||||
<h2 class=" project-tagline">Project tagline</h2>
|
||||
</h1>
|
||||
<h2 class=" project-tagline">Project tagline</h2>
|
||||
</header>
|
||||
<div class="main-content">
|
||||
<nav>
|
||||
|
|
|
|||
|
|
@ -4,47 +4,56 @@
|
|||
--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;
|
||||
|
|
@ -66,39 +75,51 @@ body {
|
|||
-o-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
.larger-name {
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
.smaller-name {
|
||||
font-size: smaller;
|
||||
}
|
||||
.main-content{
|
||||
|
||||
.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;
|
||||
}
|
||||
|
|
@ -107,17 +128,21 @@ body {
|
|||
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;
|
||||
|
|
@ -129,26 +154,31 @@ a:hover {
|
|||
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 {
|
||||
|
||||
.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;
|
||||
|
|
@ -156,11 +186,13 @@ a:hover {
|
|||
padding: 0.75rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.btn + .btn {
|
||||
|
||||
.btn+.btn {
|
||||
margin-top: 1rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -170,32 +202,37 @@ input,
|
|||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
color:inherit;
|
||||
font:inherit;
|
||||
margin:0
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
button {
|
||||
overflow:visible
|
||||
overflow: visible
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform:none
|
||||
text-transform: none
|
||||
}
|
||||
|
||||
button,
|
||||
html input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance:button;
|
||||
cursor:pointer
|
||||
-webkit-appearance: button;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor:default
|
||||
cursor: default
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border:0;
|
||||
padding:0
|
||||
border: 0;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -203,30 +240,37 @@ input::-moz-focus-inner {
|
|||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: relative;
|
||||
}
|
||||
.dropdown:hover .dropdown-content {display: block;}
|
||||
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.project-tagline {
|
||||
margin-bottom:2rem;
|
||||
font-weight:normal;
|
||||
opacity:0.7;
|
||||
margin-bottom: 2rem;
|
||||
font-weight: normal;
|
||||
opacity: 0.7;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
}
|
||||
@media screen and (min-width: 64em) {
|
||||
}
|
||||
|
||||
@media screen and (min-width: 64em) {
|
||||
.project-tagline {
|
||||
font-size:1.25rem
|
||||
font-size: 1.25rem
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 42em) and (max-width: 64em) {
|
||||
}
|
||||
|
||||
@media screen and (min-width: 42em) and (max-width: 64em) {
|
||||
.project-tagline {
|
||||
font-size:1.15rem
|
||||
font-size: 1.15rem
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 42em) {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 42em) {
|
||||
.project-tagline {
|
||||
font-size:1rem
|
||||
}
|
||||
font-size: 1rem
|
||||
}
|
||||
}
|
||||
1243
style/style.css
1243
style/style.css
File diff suppressed because it is too large
Load diff
Loading…
Add table
Reference in a new issue