first commit
This commit is contained in:
Lukáš
27
style/alt.index.html
Executable file
27
style/alt.index.html
Executable file
@@ -0,0 +1,27 @@
|
||||
<!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>Array in a Matrix</title>
|
||||
<link rel="stylesheet" type="text/css" href="./alt.style.css" />
|
||||
<link rel="icon" type="image/x-icon" href="../res/site/icons/favicon.ico" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="page-header" role="banner">
|
||||
<h1 class="project-name">Project Name</h1>
|
||||
<h2 class="project-tagline">Project tagline</h2>
|
||||
</header>
|
||||
<div class="main-content">
|
||||
<nav>
|
||||
<a href="../" class="btn">Home</a>
|
||||
</nav>
|
||||
<nav>
|
||||
<a href="#" class="btn">navigation button</a>
|
||||
<a href="#" class="btn">navigation button</a>
|
||||
</nav>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
315
style/alt.style.css
Executable file
315
style/alt.style.css
Executable file
@@ -0,0 +1,315 @@
|
||||
: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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.project-tagline {
|
||||
margin-bottom: 2rem;
|
||||
font-weight: normal;
|
||||
opacity: 0.7;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
footer,
|
||||
site-footer {
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-size: small;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
744
style/style.css
Executable file
744
style/style.css
Executable file
@@ -0,0 +1,744 @@
|
||||
/*! 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;
|
||||
background-color: rgba(250, 250, 250, 0.712);
|
||||
}
|
||||
|
||||
.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: #dce6f0;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.gameButton {
|
||||
font-size: 400%;
|
||||
text-align: center;
|
||||
background-color: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.game {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:target:not(main) {
|
||||
animation: highlight 1s ease;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
@keyframes highlight {
|
||||
0% {
|
||||
border-left-color: yellow;
|
||||
}
|
||||
|
||||
100% {
|
||||
border-left-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
}
|
||||
|
||||
:target:not(main) {
|
||||
border-left: 40px solid rgba(255, 255, 255, 0);
|
||||
padding: 0px;
|
||||
transition: all 0.5s ease;
|
||||
padding-right: 50px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
.zoom {
|
||||
transition: transform 0.2s;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.zoom:hover {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
margin: auto;
|
||||
gap: 4%;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
margin: 4% 0;
|
||||
width: 15rem;
|
||||
height: 22rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.grid-item div {
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.grid-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.grid-item-banner {
|
||||
width: 88px;
|
||||
}
|
||||
Reference in New Issue
Block a user