minor adjustments

This commit is contained in:
array-in-a-matrix 2021-07-16 20:22:59 -04:00
parent 0de4bdf10c
commit 627d6acf4d
3 changed files with 365 additions and 369 deletions

View file

@ -15,7 +15,11 @@
<body data-new-gr-c-s-check-loaded="8.872.0" data-gr-ext-installed>
<header class="page-header">
<h1 class="project-name">Array in a Matrix</h1>
<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>
<h2 class="project-tagline">Welcome!</h2>
<nav>
<a href="https://github.com/array-in-a-matrix" class="btn"
@ -36,7 +40,7 @@
Website skeleton taken from the
<a href="https://github.com/pages-themes/cayman">Cayman theme</a>.
</p>
<h2>My projects</h2>
<h2>Projects</h2>
<p>You can access and use my projects below.</p>
<table>
<thead>
@ -75,7 +79,7 @@
</tbody>
</table>
<footer class="site-footer">
<span class="site-footer-credits">This page is work-in-progress.</span>
<div class="site-footer-credits">This page is work-in-progress.</div>
</footer>
</main>
</body>

View file

@ -1,23 +1,7 @@
let random_theme = [
// ["#ff8008", "#ffc837"], //orange
// ["#4A00E0", "#8E2DE2"], //purple
// ["#FF512F", "#F09819"], //orange
// ["#FF5F6D", "#FFC371"], //pink
// ["#FF416C", "#FF4B2B"], //pink-orange
// ["#ee0979", "#ff6a00"], //pink-orange
// ["#ec008c", "#fc6767"], //pink
// ["#f857a6", "#ff5858"], //pink
// ["#00c3ff", "#ffff1c"], //blue-lime
// ["#e1eec3", "#f05053"], // white-pink
// ["#5433FF", "#20BDFF"], //ugly blue
// ["#00c6ff", "#0072ff"], //light blue
// ["#4e54c8", "#8f94fb"], //purple
["#396afc", "#2948ff"], //? blue
["#673AB7", "#512DA8"], //dark purple
// ["#4776E6", "#8E54E9"], //purple
// ["#DA22FF", "#9733EE"], // violet
["#c31432", "#240b36"], //? red
["#ad5389", "#3c1053"], //? purple
["#c31432", "#240b36"],
["#ad5389", "#3c1053"],
["#2e1c30", "#937898"],
];
function rand(items) {

328
style.css
View file

@ -1,11 +1,12 @@
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust:100%
-webkit-text-size-adjust: 100%;
}
body {
margin:0
margin: 0;
}
article,
aside,
@ -20,86 +21,86 @@ menu,
nav,
section,
summary {
display:block
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align:baseline
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height:0
height: 0;
}
[hidden],
template {
display:none
display: none;
}
a {
background-color:transparent
background-color: transparent;
}
a:active,
a:hover {
outline:0
outline: 0;
}
abbr[title] {
border-bottom:1px dotted
border-bottom: 1px dotted;
}
b,
strong {
font-weight:bold
font-weight: bold;
}
dfn {
font-style:italic
font-style: italic;
}
h1 {
font-size: 2em;
margin:0.67em 0
margin: 0.67em 0;
}
mark {
background: #ff0;
color:#000
color: #000;
}
small {
font-size:80%
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align:baseline
vertical-align: baseline;
}
sup {
top:-0.5em
top: -0.5em;
}
sub {
bottom:-0.25em
bottom: -0.25em;
}
img {
border:0
border: 0;
}
svg:not(:root) {
overflow:hidden
overflow: hidden;
}
figure {
margin:1em 40px
margin: 1em 40px;
}
hr {
box-sizing: content-box;
height:0
height: 0;
}
pre {
overflow:auto
overflow: auto;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size:1em
font-size: 1em;
}
button,
input,
@ -108,293 +109,293 @@ select,
textarea {
color: inherit;
font: inherit;
margin:0
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
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor:default
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding:0
padding: 0;
}
input {
line-height:normal
line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding:0
padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height:auto
height: auto;
}
input[type="search"] {
-webkit-appearance: textfield;
box-sizing:content-box
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance:none
-webkit-appearance: none;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding:0.35em 0.625em 0.75em
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0;
padding:0
padding: 0;
}
textarea {
overflow:auto
overflow: auto;
}
optgroup {
font-weight:bold
font-weight: bold;
}
table {
border-collapse: collapse;
border-spacing:0
border-spacing: 0;
}
td,
th {
padding:0
padding: 0;
}
.highlight table td {
padding:5px
padding: 5px;
}
.highlight table pre {
margin:0
margin: 0;
}
.highlight .cm {
color: #999988;
font-style:italic
font-style: italic;
}
.highlight .cp {
color: #999999;
font-weight:bold
font-weight: bold;
}
.highlight .c1 {
color: #999988;
font-style:italic
font-style: italic;
}
.highlight .cs {
color: #999999;
font-weight: bold;
font-style:italic
font-style: italic;
}
.highlight .c,
.highlight .cd {
color: #999988;
font-style:italic
font-style: italic;
}
.highlight .err {
color: #a61717;
background-color:#e3d2d2
background-color: #e3d2d2;
}
.highlight .gd {
color: #000000;
background-color:#ffdddd
background-color: #ffdddd;
}
.highlight .ge {
color: #000000;
font-style:italic
font-style: italic;
}
.highlight .gr {
color:#aa0000
color: #aa0000;
}
.highlight .gh {
color:#999999
color: #999999;
}
.highlight .gi {
color: #000000;
background-color:#ddffdd
background-color: #ddffdd;
}
.highlight .go {
color:#888888
color: #888888;
}
.highlight .gp {
color:#555555
color: #555555;
}
.highlight .gs {
font-weight:bold
font-weight: bold;
}
.highlight .gu {
color:#aaaaaa
color: #aaaaaa;
}
.highlight .gt {
color:#aa0000
color: #aa0000;
}
.highlight .kc {
color: #000000;
font-weight:bold
font-weight: bold;
}
.highlight .kd {
color: #000000;
font-weight:bold
font-weight: bold;
}
.highlight .kn {
color: #000000;
font-weight:bold
font-weight: bold;
}
.highlight .kp {
color: #000000;
font-weight:bold
font-weight: bold;
}
.highlight .kr {
color: #000000;
font-weight:bold
font-weight: bold;
}
.highlight .kt {
color: #445588;
font-weight:bold
font-weight: bold;
}
.highlight .k,
.highlight .kv {
color: #000000;
font-weight:bold
font-weight: bold;
}
.highlight .mf {
color:#009999
color: #009999;
}
.highlight .mh {
color:#009999
color: #009999;
}
.highlight .il {
color:#009999
color: #009999;
}
.highlight .mi {
color:#009999
color: #009999;
}
.highlight .mo {
color:#009999
color: #009999;
}
.highlight .m,
.highlight .mb,
.highlight .mx {
color:#009999
color: #009999;
}
.highlight .sb {
color:#d14
color: #d14;
}
.highlight .sc {
color:#d14
color: #d14;
}
.highlight .sd {
color:#d14
color: #d14;
}
.highlight .s2 {
color:#d14
color: #d14;
}
.highlight .se {
color:#d14
color: #d14;
}
.highlight .sh {
color:#d14
color: #d14;
}
.highlight .si {
color:#d14
color: #d14;
}
.highlight .sx {
color:#d14
color: #d14;
}
.highlight .sr {
color:#009926
color: #009926;
}
.highlight .s1 {
color:#d14
color: #d14;
}
.highlight .ss {
color:#990073
color: #990073;
}
.highlight .s {
color:#d14
color: #d14;
}
.highlight .na {
color:#008080
color: #008080;
}
.highlight .bp {
color:#999999
color: #999999;
}
.highlight .nb {
color:#0086B3
color: #0086b3;
}
.highlight .nc {
color: #445588;
font-weight:bold
font-weight: bold;
}
.highlight .no {
color:#008080
color: #008080;
}
.highlight .nd {
color: #3c5d5d;
font-weight:bold
font-weight: bold;
}
.highlight .ni {
color:#800080
color: #800080;
}
.highlight .ne {
color: #990000;
font-weight:bold
font-weight: bold;
}
.highlight .nf {
color: #990000;
font-weight:bold
font-weight: bold;
}
.highlight .nl {
color: #990000;
font-weight:bold
font-weight: bold;
}
.highlight .nn {
color:#555555
color: #555555;
}
.highlight .nt {
color:#000080
color: #000080;
}
.highlight .vc {
color:#008080
color: #008080;
}
.highlight .vg {
color:#008080
color: #008080;
}
.highlight .vi {
color:#008080
color: #008080;
}
.highlight .nv {
color:#008080
color: #008080;
}
.highlight .ow {
color: #000000;
font-weight:bold
font-weight: bold;
}
.highlight .o {
color: #000000;
font-weight:bold
font-weight: bold;
}
.highlight .w {
color:#bbbbbb
color: #bbbbbb;
}
.highlight {
background-color:#f8f8f8
background-color: #f8f8f8;
}
* {
box-sizing:border-box
box-sizing: border-box;
}
body {
padding: 0;
@ -402,14 +403,14 @@ body {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color:#606c71
color: #606c71;
}
a {
color: #1e6bb8;
text-decoration:none
text-decoration: none;
}
a:hover {
text-decoration:underline
text-decoration: underline;
}
.btn {
display: inline-block;
@ -420,26 +421,26 @@ a:hover {
border-style: solid;
border-width: 1px;
border-radius: 0.3rem;
transition:color 0.2s, background-color 0.2s, border-color 0.2s
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)
border-color: rgba(255, 255, 255, 0.3);
}
.btn + .btn {
margin-left:1rem
margin-left: 1rem;
}
@media screen and (min-width: 64em) {
.btn {
padding:0.75rem 1rem
padding: 0.75rem 1rem;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.btn {
padding: 0.6rem 0.9rem;
font-size:0.9rem
font-size: 0.9rem;
}
}
@media screen and (max-width: 42em) {
@ -447,16 +448,16 @@ a:hover {
display: block;
width: 100%;
padding: 0.75rem;
font-size:0.9rem
font-size: 0.9rem;
}
.btn + .btn {
margin-top: 1rem;
margin-left:0
margin-left: 0;
}
}
:root {
--left: #4A00E0;
--right: #8E2DE2;
--left: #4a00e0;
--right: #8e2de2;
}
.page-header {
color: #fff;
@ -469,86 +470,87 @@ a:hover {
}
@media screen and (min-width: 64em) {
.page-header {
padding:5rem 6rem
padding: 5rem 6rem;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.page-header {
padding:3rem 4rem
padding: 3rem 4rem;
}
}
@media screen and (max-width: 42em) {
.page-header {
padding:2rem 1rem
padding: 2rem 1rem;
}
}
.project-name {
margin-top: 0;
margin-bottom:0.1rem
margin-bottom: 0.1rem;
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
}
@media screen and (min-width: 64em) {
.project-name {
font-size:3.25rem
font-size: 3.25rem;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.project-name {
font-size:2.25rem
font-size: 2.25rem;
}
}
@media screen and (max-width: 42em) {
.project-name {
font-size:1.75rem
font-size: 1.75rem;
}
}
.project-tagline {
margin-bottom: 2rem;
font-weight: normal;
opacity:0.7
opacity: 0.7;
}
@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) {
.project-tagline {
font-size:1.15rem
font-size: 1.15rem;
}
}
@media screen and (max-width: 42em) {
.project-tagline {
font-size:1rem
font-size: 1rem;
}
}
.main-content {
word-wrap:break-word
word-wrap: break-word;
}
.main-content :first-child {
margin-top:0
margin-top: 0;
}
@media screen and (min-width: 64em) {
.main-content {
max-width: 64rem;
padding: 2rem 6rem;
margin: 0 auto;
font-size:1.1rem
font-size: 1.1rem;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.main-content {
padding: 2rem 4rem;
font-size:1.1rem
font-size: 1.1rem;
}
}
@media screen and (max-width: 42em) {
.main-content {
padding: 2rem 1rem;
font-size:1rem
font-size: 1rem;
}
}
.main-content img {
max-width:100%
max-width: 100%;
}
.main-content h1,
.main-content h2,
@ -562,7 +564,7 @@ a:hover {
color: var(--left);
}
.main-content p {
margin-bottom:1em
margin-bottom: 1em;
}
.main-content code {
padding: 2px 4px;
@ -570,7 +572,7 @@ a:hover {
font-size: 0.9rem;
color: #567482;
background-color: #f3f6fa;
border-radius:0.3rem
border-radius: 0.3rem;
}
.main-content pre {
padding: 0.8rem;
@ -581,7 +583,7 @@ a:hover {
word-wrap: normal;
background-color: #f3f6fa;
border: solid 1px #dce6f0;
border-radius:0.3rem
border-radius: 0.3rem;
}
.main-content pre > code {
padding: 0;
@ -591,14 +593,14 @@ a:hover {
word-break: normal;
white-space: pre;
background: transparent;
border:0
border: 0;
}
.main-content .highlight {
margin-bottom:1rem
margin-bottom: 1rem;
}
.main-content .highlight pre {
margin-bottom: 0;
word-break:normal
word-break: normal;
}
.main-content .highlight pre,
.main-content pre {
@ -607,7 +609,7 @@ a:hover {
font-size: 0.9rem;
line-height: 1.45;
border-radius: 0.3rem;
-webkit-overflow-scrolling:touch
-webkit-overflow-scrolling: touch;
}
.main-content pre code,
.main-content pre tt {
@ -619,29 +621,29 @@ a:hover {
line-height: inherit;
word-wrap: normal;
background-color: transparent;
border:0
border: 0;
}
.main-content pre code:before,
.main-content pre code:after,
.main-content pre tt:before,
.main-content pre tt:after {
content:normal
content: normal;
}
.main-content ul,
.main-content ol {
margin-top:0
margin-top: 0;
}
.main-content blockquote {
padding: 0 1rem;
margin-left: 0;
color: #819198;
border-left:0.3rem solid #dce6f0
border-left: 0.3rem solid #dce6f0;
}
.main-content blockquote > :first-child {
margin-top:0
margin-top: 0;
}
.main-content blockquote > :last-child {
margin-bottom:0
margin-bottom: 0;
}
.main-content table {
display: block;
@ -649,62 +651,62 @@ a:hover {
overflow: auto;
word-break: normal;
word-break: keep-all;
-webkit-overflow-scrolling:touch
-webkit-overflow-scrolling: touch;
}
.main-content table th {
font-weight:bold
font-weight: bold;
}
.main-content table th,
.main-content table td {
padding: 0.5rem 1rem;
border:1px solid #e9ebec
border: 1px solid #e9ebec;
}
.main-content dl {
padding:0
padding: 0;
}
.main-content dl dt {
padding: 0;
margin-top: 1rem;
font-size: 1rem;
font-weight:bold
font-weight: bold;
}
.main-content dl dd {
padding: 0;
margin-bottom:1rem
margin-bottom: 1rem;
}
.main-content hr {
height: 2px;
padding: 0;
margin: 1rem 0;
background-color: #eff0f1;
border:0
border: 0;
}
.site-footer {
padding-top: 2rem;
margin-top: 2rem;
border-top:solid 1px #eff0f1
border-top: solid 1px #eff0f1;
}
@media screen and (min-width: 64em) {
.site-footer {
font-size:1rem
font-size: 1rem;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.site-footer {
font-size:1rem
font-size: 1rem;
}
}
@media screen and (max-width: 42em) {
.site-footer {
font-size:0.9rem
font-size: 0.9rem;
}
}
.site-footer-owner {
display: block;
font-weight:bold
font-weight: bold;
}
.site-footer-credits {
color:#819198
color: #819198;
}
.dark-mode {
background-color: black;
@ -713,3 +715,9 @@ a:hover {
.game {
font-size: 400%;
}
.larger-name {
font-size: larger;
}
.smaller-name {
font-size: smaller;
}