mirror of
https://github.com/Rushilwiz/crucialnet.git
synced 2025-04-03 19:30:16 -04:00
feat: added gifts
This commit is contained in:
parent
623a3c1136
commit
0c6cfd0870
472
public/gifts/gift1/index.html
Normal file
472
public/gifts/gift1/index.html
Normal file
|
|
@ -0,0 +1,472 @@
|
|||
<html><head><style>/* MVP.css v1.8 - https://github.com/andybrewer/mvp */
|
||||
|
||||
:root {
|
||||
--active-brightness: 0.85;
|
||||
--border-radius: 5px;
|
||||
--box-shadow: 2px 2px 10px;
|
||||
--color: #118bee;
|
||||
--color-accent: #118bee15;
|
||||
--color-bg: #fff;
|
||||
--color-bg-secondary: #e9e9e9;
|
||||
--color-link: #118bee;
|
||||
--color-secondary: #920de9;
|
||||
--color-secondary-accent: #920de90b;
|
||||
--color-shadow: #f4f4f4;
|
||||
--color-table: #118bee;
|
||||
--color-text: #000;
|
||||
--color-text-secondary: #999;
|
||||
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
--hover-brightness: 1.2;
|
||||
--justify-important: center;
|
||||
--justify-normal: left;
|
||||
--line-height: 1.5;
|
||||
--width-card: 285px;
|
||||
--width-card-medium: 460px;
|
||||
--width-card-wide: 800px;
|
||||
--width-content: 1080px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Layout */
|
||||
article aside {
|
||||
background: var(--color-secondary-accent);
|
||||
border-left: 4px solid var(--color-secondary);
|
||||
padding: 0.01rem 0.8rem;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-family);
|
||||
line-height: var(--line-height);
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
footer,
|
||||
header,
|
||||
main {
|
||||
margin: 0 auto;
|
||||
max-width: var(--width-content);
|
||||
padding: 3rem 1rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: var(--color-bg-secondary);
|
||||
border: none;
|
||||
height: 1px;
|
||||
margin: 4rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: var(--justify-important);
|
||||
}
|
||||
|
||||
section img,
|
||||
article img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
section pre {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
section aside {
|
||||
border: 1px solid var(--color-bg-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow) var(--color-shadow);
|
||||
margin: 1rem;
|
||||
padding: 1.25rem;
|
||||
width: var(--width-card);
|
||||
}
|
||||
|
||||
section aside:hover {
|
||||
box-shadow: var(--box-shadow) var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Headers */
|
||||
article header,
|
||||
div header,
|
||||
main header {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: var(--justify-important);
|
||||
}
|
||||
|
||||
header a b,
|
||||
header a em,
|
||||
header a i,
|
||||
header a strong {
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
header nav img {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
section header {
|
||||
padding-top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Nav */
|
||||
nav {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 7rem;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
display: inline-block;
|
||||
margin: 0 0.5rem;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Nav Dropdown */
|
||||
nav ul li:hover ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav ul li ul {
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-bg-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow) var(--color-shadow);
|
||||
display: none;
|
||||
height: auto;
|
||||
left: -2px;
|
||||
padding: .5rem 1rem;
|
||||
position: absolute;
|
||||
top: 1.7rem;
|
||||
white-space: nowrap;
|
||||
width: auto;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
nav ul li ul::before {
|
||||
/* fill gap above to make mousing over them easier */
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: -0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
|
||||
nav ul li ul li,
|
||||
nav ul li ul li a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
code,
|
||||
samp {
|
||||
background-color: var(--color-accent);
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--color-text);
|
||||
display: inline-block;
|
||||
margin: 0 0.1rem;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
details {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
details summary {
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
mark {
|
||||
padding: 0.1rem;
|
||||
}
|
||||
|
||||
ol li,
|
||||
ul li {
|
||||
padding: 0.2rem 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0.75rem 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 1rem 0;
|
||||
max-width: var(--width-card-wide);
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
pre code,
|
||||
pre samp {
|
||||
display: block;
|
||||
max-width: var(--width-card-wide);
|
||||
padding: 0.5rem 2rem;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
small {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
sup {
|
||||
background-color: var(--color-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--color-bg);
|
||||
font-size: xx-small;
|
||||
font-weight: bold;
|
||||
margin: 0.2rem;
|
||||
padding: 0.2rem 0.3rem;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
a {
|
||||
color: var(--color-link);
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:active {
|
||||
filter: brightness(var(--active-brightness));
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
filter: brightness(var(--hover-brightness));
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a b,
|
||||
a em,
|
||||
a i,
|
||||
a strong,
|
||||
button {
|
||||
border-radius: var(--border-radius);
|
||||
display: inline-block;
|
||||
font-size: medium;
|
||||
font-weight: bold;
|
||||
line-height: var(--line-height);
|
||||
margin: 0.5rem 0;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
|
||||
button:active {
|
||||
filter: brightness(var(--active-brightness));
|
||||
}
|
||||
|
||||
button:hover {
|
||||
cursor: pointer;
|
||||
filter: brightness(var(--hover-brightness));
|
||||
}
|
||||
|
||||
a b,
|
||||
a strong,
|
||||
button {
|
||||
background-color: var(--color-link);
|
||||
border: 2px solid var(--color-link);
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
a em,
|
||||
a i {
|
||||
border: 2px solid var(--color-link);
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--color-link);
|
||||
display: inline-block;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
article aside a {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
/* Images */
|
||||
figure {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
figure img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
figure figcaption {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
|
||||
button:disabled,
|
||||
input:disabled {
|
||||
background: var(--color-bg-secondary);
|
||||
border-color: var(--color-bg-secondary);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
button[disabled]:hover {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
form {
|
||||
border: 1px solid var(--color-bg-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow) var(--color-shadow);
|
||||
display: block;
|
||||
max-width: var(--width-card-wide);
|
||||
min-width: var(--width-card);
|
||||
padding: 1.5rem;
|
||||
text-align: var(--justify-normal);
|
||||
}
|
||||
|
||||
form header {
|
||||
margin: 1.5rem 0;
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
label,
|
||||
select,
|
||||
textarea {
|
||||
display: block;
|
||||
font-size: inherit;
|
||||
max-width: var(--width-card-wide);
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
input[type="checkbox"]+label,
|
||||
input[type="radio"]+label {
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border: 1px solid var(--color-bg-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.4rem 0.8rem;
|
||||
}
|
||||
|
||||
input[readonly],
|
||||
textarea[readonly] {
|
||||
background-color: var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
table {
|
||||
border: 1px solid var(--color-bg-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
border-spacing: 0;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table td,
|
||||
table th,
|
||||
table tr {
|
||||
padding: 0.4rem 0.8rem;
|
||||
text-align: var(--justify-important);
|
||||
}
|
||||
|
||||
table thead {
|
||||
background-color: var(--color-table);
|
||||
border-collapse: collapse;
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--color-bg);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table thead th:first-child {
|
||||
border-top-left-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
table thead th:last-child {
|
||||
border-top-right-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
table thead th:first-child,
|
||||
table tr td:first-child {
|
||||
text-align: var(--justify-normal);
|
||||
}
|
||||
|
||||
table tr:nth-child(even) {
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* Quotes */
|
||||
blockquote {
|
||||
display: block;
|
||||
font-size: x-large;
|
||||
line-height: var(--line-height);
|
||||
margin: 1rem auto;
|
||||
max-width: var(--width-card-medium);
|
||||
padding: 1.5rem 1rem;
|
||||
text-align: var(--justify-important);
|
||||
}
|
||||
|
||||
blockquote footer {
|
||||
color: var(--color-text-secondary);
|
||||
display: block;
|
||||
font-size: small;
|
||||
line-height: var(--line-height);
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
</style></head><body><h1 id="hey-ramoot-img-src-controllers_brief-svg-alt-purple_heart-">gift 1 (christmas/anniversary)</h1>
|
||||
<div id="show" style="display: none;">So ik that we were looking at some of the merch from crumbs&whiskers and I thought that this one would look hella good on u :)<br><img src="https://cdn.shopify.com/s/files/1/0276/7991/6084/products/mockup-of-a-woman-wearing-a-unisex-t-shirt-at-a-coffee-shop-38692-r-el2.png" /><br><p>and its shipped directly to u ;)</p></div>
|
||||
<button onclick="show()">show</button>
|
||||
</body><script>function show() {document.getElementById('show').style.display = 'block';}</script></html>
|
||||
472
public/gifts/gift2/index.html
Normal file
472
public/gifts/gift2/index.html
Normal file
|
|
@ -0,0 +1,472 @@
|
|||
<html><head><style>/* MVP.css v1.8 - https://github.com/andybrewer/mvp */
|
||||
|
||||
:root {
|
||||
--active-brightness: 0.85;
|
||||
--border-radius: 5px;
|
||||
--box-shadow: 2px 2px 10px;
|
||||
--color: #118bee;
|
||||
--color-accent: #118bee15;
|
||||
--color-bg: #fff;
|
||||
--color-bg-secondary: #e9e9e9;
|
||||
--color-link: #118bee;
|
||||
--color-secondary: #920de9;
|
||||
--color-secondary-accent: #920de90b;
|
||||
--color-shadow: #f4f4f4;
|
||||
--color-table: #118bee;
|
||||
--color-text: #000;
|
||||
--color-text-secondary: #999;
|
||||
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
--hover-brightness: 1.2;
|
||||
--justify-important: center;
|
||||
--justify-normal: left;
|
||||
--line-height: 1.5;
|
||||
--width-card: 285px;
|
||||
--width-card-medium: 460px;
|
||||
--width-card-wide: 800px;
|
||||
--width-content: 1080px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Layout */
|
||||
article aside {
|
||||
background: var(--color-secondary-accent);
|
||||
border-left: 4px solid var(--color-secondary);
|
||||
padding: 0.01rem 0.8rem;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-family);
|
||||
line-height: var(--line-height);
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
footer,
|
||||
header,
|
||||
main {
|
||||
margin: 0 auto;
|
||||
max-width: var(--width-content);
|
||||
padding: 3rem 1rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: var(--color-bg-secondary);
|
||||
border: none;
|
||||
height: 1px;
|
||||
margin: 4rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: var(--justify-important);
|
||||
}
|
||||
|
||||
section img,
|
||||
article img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
section pre {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
section aside {
|
||||
border: 1px solid var(--color-bg-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow) var(--color-shadow);
|
||||
margin: 1rem;
|
||||
padding: 1.25rem;
|
||||
width: var(--width-card);
|
||||
}
|
||||
|
||||
section aside:hover {
|
||||
box-shadow: var(--box-shadow) var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Headers */
|
||||
article header,
|
||||
div header,
|
||||
main header {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: var(--justify-important);
|
||||
}
|
||||
|
||||
header a b,
|
||||
header a em,
|
||||
header a i,
|
||||
header a strong {
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
header nav img {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
section header {
|
||||
padding-top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Nav */
|
||||
nav {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 7rem;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
display: inline-block;
|
||||
margin: 0 0.5rem;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Nav Dropdown */
|
||||
nav ul li:hover ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav ul li ul {
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-bg-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow) var(--color-shadow);
|
||||
display: none;
|
||||
height: auto;
|
||||
left: -2px;
|
||||
padding: .5rem 1rem;
|
||||
position: absolute;
|
||||
top: 1.7rem;
|
||||
white-space: nowrap;
|
||||
width: auto;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
nav ul li ul::before {
|
||||
/* fill gap above to make mousing over them easier */
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: -0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
|
||||
nav ul li ul li,
|
||||
nav ul li ul li a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
code,
|
||||
samp {
|
||||
background-color: var(--color-accent);
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--color-text);
|
||||
display: inline-block;
|
||||
margin: 0 0.1rem;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
details {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
details summary {
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
mark {
|
||||
padding: 0.1rem;
|
||||
}
|
||||
|
||||
ol li,
|
||||
ul li {
|
||||
padding: 0.2rem 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0.75rem 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 1rem 0;
|
||||
max-width: var(--width-card-wide);
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
pre code,
|
||||
pre samp {
|
||||
display: block;
|
||||
max-width: var(--width-card-wide);
|
||||
padding: 0.5rem 2rem;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
small {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
sup {
|
||||
background-color: var(--color-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--color-bg);
|
||||
font-size: xx-small;
|
||||
font-weight: bold;
|
||||
margin: 0.2rem;
|
||||
padding: 0.2rem 0.3rem;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
a {
|
||||
color: var(--color-link);
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:active {
|
||||
filter: brightness(var(--active-brightness));
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
filter: brightness(var(--hover-brightness));
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a b,
|
||||
a em,
|
||||
a i,
|
||||
a strong,
|
||||
button {
|
||||
border-radius: var(--border-radius);
|
||||
display: inline-block;
|
||||
font-size: medium;
|
||||
font-weight: bold;
|
||||
line-height: var(--line-height);
|
||||
margin: 0.5rem 0;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
|
||||
button:active {
|
||||
filter: brightness(var(--active-brightness));
|
||||
}
|
||||
|
||||
button:hover {
|
||||
cursor: pointer;
|
||||
filter: brightness(var(--hover-brightness));
|
||||
}
|
||||
|
||||
a b,
|
||||
a strong,
|
||||
button {
|
||||
background-color: var(--color-link);
|
||||
border: 2px solid var(--color-link);
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
a em,
|
||||
a i {
|
||||
border: 2px solid var(--color-link);
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--color-link);
|
||||
display: inline-block;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
article aside a {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
/* Images */
|
||||
figure {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
figure img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
figure figcaption {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
|
||||
button:disabled,
|
||||
input:disabled {
|
||||
background: var(--color-bg-secondary);
|
||||
border-color: var(--color-bg-secondary);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
button[disabled]:hover {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
form {
|
||||
border: 1px solid var(--color-bg-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow) var(--color-shadow);
|
||||
display: block;
|
||||
max-width: var(--width-card-wide);
|
||||
min-width: var(--width-card);
|
||||
padding: 1.5rem;
|
||||
text-align: var(--justify-normal);
|
||||
}
|
||||
|
||||
form header {
|
||||
margin: 1.5rem 0;
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
label,
|
||||
select,
|
||||
textarea {
|
||||
display: block;
|
||||
font-size: inherit;
|
||||
max-width: var(--width-card-wide);
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
input[type="checkbox"]+label,
|
||||
input[type="radio"]+label {
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border: 1px solid var(--color-bg-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.4rem 0.8rem;
|
||||
}
|
||||
|
||||
input[readonly],
|
||||
textarea[readonly] {
|
||||
background-color: var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
table {
|
||||
border: 1px solid var(--color-bg-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
border-spacing: 0;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table td,
|
||||
table th,
|
||||
table tr {
|
||||
padding: 0.4rem 0.8rem;
|
||||
text-align: var(--justify-important);
|
||||
}
|
||||
|
||||
table thead {
|
||||
background-color: var(--color-table);
|
||||
border-collapse: collapse;
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--color-bg);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table thead th:first-child {
|
||||
border-top-left-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
table thead th:last-child {
|
||||
border-top-right-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
table thead th:first-child,
|
||||
table tr td:first-child {
|
||||
text-align: var(--justify-normal);
|
||||
}
|
||||
|
||||
table tr:nth-child(even) {
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* Quotes */
|
||||
blockquote {
|
||||
display: block;
|
||||
font-size: x-large;
|
||||
line-height: var(--line-height);
|
||||
margin: 1rem auto;
|
||||
max-width: var(--width-card-medium);
|
||||
padding: 1.5rem 1rem;
|
||||
text-align: var(--justify-important);
|
||||
}
|
||||
|
||||
blockquote footer {
|
||||
color: var(--color-text-secondary);
|
||||
display: block;
|
||||
font-size: small;
|
||||
line-height: var(--line-height);
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
</style></head><body><h1 id="hey-ramoot-img-src-controllers_brief-svg-alt-purple_heart-">gift 2 (a little bit of everythin)</h1>
|
||||
<div id="show" style="display: none;">This one is a little bigger than the last one :)<br><img src="ss.png" /><br><p>and its for 2 (plus super easy to reschedule)</p></div>
|
||||
<button onclick="show()">show</button>
|
||||
</body><script>function show() {document.getElementById('show').style.display = 'block';}</script></html>
|
||||
BIN
public/gifts/gift2/ss.png
Normal file
BIN
public/gifts/gift2/ss.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
6
public/gifts/heart.svg
Normal file
6
public/gifts/heart.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" viewBox="0 0 32 32" version="1.1">
|
||||
<g id="surface1">
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(46.666667%,25.882353%,80%);fill-opacity:1;" d="M 24.167969 3.960938 C 24.148438 3.960938 24.136719 3.960938 24.117188 3.960938 C 23.996094 3.960938 23.871094 3.960938 23.746094 3.96875 C 22.453125 3.988281 21.195312 4.277344 20.007812 4.773438 C 18.734375 5.3125 17.863281 6.113281 16.730469 6.832031 C 16.515625 6.96875 16.257812 7.035156 16 7.035156 C 15.738281 7.035156 15.480469 6.96875 15.265625 6.832031 C 14.136719 6.113281 13.261719 5.3125 11.988281 4.773438 C 10.800781 4.277344 9.546875 3.988281 8.25 3.96875 C 8.128906 3.960938 8.003906 3.960938 7.882812 3.960938 C 7.863281 3.960938 7.851562 3.960938 7.832031 3.960938 C 4.550781 3.960938 2.160156 5.847656 0.757812 9.125 C 0.15625 10.519531 0.148438 12.621094 0.390625 14.085938 C 0.636719 15.546875 1.246094 16.863281 2.074219 18.09375 C 4.828125 22.199219 9.75 24.105469 13.296875 27.414062 C 13.675781 27.765625 14.050781 28.148438 14.433594 28.503906 C 14.84375 28.878906 15.339844 29.75 16 29.789062 C 16.65625 29.75 17.15625 28.882812 17.566406 28.503906 C 17.949219 28.148438 18.324219 27.765625 18.703125 27.414062 C 22.25 24.105469 27.167969 22.199219 29.925781 18.09375 C 30.753906 16.863281 31.359375 15.546875 31.605469 14.085938 C 31.851562 12.621094 31.839844 10.519531 31.238281 9.128906 C 29.835938 5.847656 27.449219 3.960938 24.167969 3.960938 Z M 24.167969 3.960938 "/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
474
public/gifts/index.html
Normal file
474
public/gifts/index.html
Normal file
|
|
@ -0,0 +1,474 @@
|
|||
<html><head><style>/* MVP.css v1.8 - https://github.com/andybrewer/mvp */
|
||||
|
||||
:root {
|
||||
--active-brightness: 0.85;
|
||||
--border-radius: 5px;
|
||||
--box-shadow: 2px 2px 10px;
|
||||
--color: #118bee;
|
||||
--color-accent: #118bee15;
|
||||
--color-bg: #fff;
|
||||
--color-bg-secondary: #e9e9e9;
|
||||
--color-link: #118bee;
|
||||
--color-secondary: #920de9;
|
||||
--color-secondary-accent: #920de90b;
|
||||
--color-shadow: #f4f4f4;
|
||||
--color-table: #118bee;
|
||||
--color-text: #000;
|
||||
--color-text-secondary: #999;
|
||||
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
--hover-brightness: 1.2;
|
||||
--justify-important: center;
|
||||
--justify-normal: left;
|
||||
--line-height: 1.5;
|
||||
--width-card: 285px;
|
||||
--width-card-medium: 460px;
|
||||
--width-card-wide: 800px;
|
||||
--width-content: 1080px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Layout */
|
||||
article aside {
|
||||
background: var(--color-secondary-accent);
|
||||
border-left: 4px solid var(--color-secondary);
|
||||
padding: 0.01rem 0.8rem;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-family);
|
||||
line-height: var(--line-height);
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
footer,
|
||||
header,
|
||||
main {
|
||||
margin: 0 auto;
|
||||
max-width: var(--width-content);
|
||||
padding: 3rem 1rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: var(--color-bg-secondary);
|
||||
border: none;
|
||||
height: 1px;
|
||||
margin: 4rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: var(--justify-important);
|
||||
}
|
||||
|
||||
section img,
|
||||
article img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
section pre {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
section aside {
|
||||
border: 1px solid var(--color-bg-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow) var(--color-shadow);
|
||||
margin: 1rem;
|
||||
padding: 1.25rem;
|
||||
width: var(--width-card);
|
||||
}
|
||||
|
||||
section aside:hover {
|
||||
box-shadow: var(--box-shadow) var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Headers */
|
||||
article header,
|
||||
div header,
|
||||
main header {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: var(--justify-important);
|
||||
}
|
||||
|
||||
header a b,
|
||||
header a em,
|
||||
header a i,
|
||||
header a strong {
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
header nav img {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
section header {
|
||||
padding-top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Nav */
|
||||
nav {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 7rem;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
display: inline-block;
|
||||
margin: 0 0.5rem;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Nav Dropdown */
|
||||
nav ul li:hover ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav ul li ul {
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-bg-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow) var(--color-shadow);
|
||||
display: none;
|
||||
height: auto;
|
||||
left: -2px;
|
||||
padding: .5rem 1rem;
|
||||
position: absolute;
|
||||
top: 1.7rem;
|
||||
white-space: nowrap;
|
||||
width: auto;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
nav ul li ul::before {
|
||||
/* fill gap above to make mousing over them easier */
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: -0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
|
||||
nav ul li ul li,
|
||||
nav ul li ul li a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
code,
|
||||
samp {
|
||||
background-color: var(--color-accent);
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--color-text);
|
||||
display: inline-block;
|
||||
margin: 0 0.1rem;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
details {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
details summary {
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
mark {
|
||||
padding: 0.1rem;
|
||||
}
|
||||
|
||||
ol li,
|
||||
ul li {
|
||||
padding: 0.2rem 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0.75rem 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 1rem 0;
|
||||
max-width: var(--width-card-wide);
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
pre code,
|
||||
pre samp {
|
||||
display: block;
|
||||
max-width: var(--width-card-wide);
|
||||
padding: 0.5rem 2rem;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
small {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
sup {
|
||||
background-color: var(--color-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--color-bg);
|
||||
font-size: xx-small;
|
||||
font-weight: bold;
|
||||
margin: 0.2rem;
|
||||
padding: 0.2rem 0.3rem;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
a {
|
||||
color: var(--color-link);
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:active {
|
||||
filter: brightness(var(--active-brightness));
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
filter: brightness(var(--hover-brightness));
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a b,
|
||||
a em,
|
||||
a i,
|
||||
a strong,
|
||||
button {
|
||||
border-radius: var(--border-radius);
|
||||
display: inline-block;
|
||||
font-size: medium;
|
||||
font-weight: bold;
|
||||
line-height: var(--line-height);
|
||||
margin: 0.5rem 0;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
|
||||
button:active {
|
||||
filter: brightness(var(--active-brightness));
|
||||
}
|
||||
|
||||
button:hover {
|
||||
cursor: pointer;
|
||||
filter: brightness(var(--hover-brightness));
|
||||
}
|
||||
|
||||
a b,
|
||||
a strong,
|
||||
button {
|
||||
background-color: var(--color-link);
|
||||
border: 2px solid var(--color-link);
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
a em,
|
||||
a i {
|
||||
border: 2px solid var(--color-link);
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--color-link);
|
||||
display: inline-block;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
article aside a {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
/* Images */
|
||||
figure {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
figure img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
figure figcaption {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
|
||||
button:disabled,
|
||||
input:disabled {
|
||||
background: var(--color-bg-secondary);
|
||||
border-color: var(--color-bg-secondary);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
button[disabled]:hover {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
form {
|
||||
border: 1px solid var(--color-bg-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow) var(--color-shadow);
|
||||
display: block;
|
||||
max-width: var(--width-card-wide);
|
||||
min-width: var(--width-card);
|
||||
padding: 1.5rem;
|
||||
text-align: var(--justify-normal);
|
||||
}
|
||||
|
||||
form header {
|
||||
margin: 1.5rem 0;
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
label,
|
||||
select,
|
||||
textarea {
|
||||
display: block;
|
||||
font-size: inherit;
|
||||
max-width: var(--width-card-wide);
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
input[type="checkbox"]+label,
|
||||
input[type="radio"]+label {
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border: 1px solid var(--color-bg-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.4rem 0.8rem;
|
||||
}
|
||||
|
||||
input[readonly],
|
||||
textarea[readonly] {
|
||||
background-color: var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
table {
|
||||
border: 1px solid var(--color-bg-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
border-spacing: 0;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table td,
|
||||
table th,
|
||||
table tr {
|
||||
padding: 0.4rem 0.8rem;
|
||||
text-align: var(--justify-important);
|
||||
}
|
||||
|
||||
table thead {
|
||||
background-color: var(--color-table);
|
||||
border-collapse: collapse;
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--color-bg);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table thead th:first-child {
|
||||
border-top-left-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
table thead th:last-child {
|
||||
border-top-right-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
table thead th:first-child,
|
||||
table tr td:first-child {
|
||||
text-align: var(--justify-normal);
|
||||
}
|
||||
|
||||
table tr:nth-child(even) {
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* Quotes */
|
||||
blockquote {
|
||||
display: block;
|
||||
font-size: x-large;
|
||||
line-height: var(--line-height);
|
||||
margin: 1rem auto;
|
||||
max-width: var(--width-card-medium);
|
||||
padding: 1.5rem 1rem;
|
||||
text-align: var(--justify-important);
|
||||
}
|
||||
|
||||
blockquote footer {
|
||||
color: var(--color-text-secondary);
|
||||
display: block;
|
||||
font-size: small;
|
||||
line-height: var(--line-height);
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
</style></head><body><h1 id="hey-ramoot-img-src-controllers_brief-svg-alt-purple_heart-">hey ramoot <img width="48px" src="./heart.svg" alt=":purple_heart:">!</h1>
|
||||
<p>it turns out I'm pretty fucking tired atm, but I can't really let that get in the way of my plans, so <br>please welcome to this website I hobbled together while half drunk, half high, and half enamored.<br><br></p>
|
||||
<p>I've sorta combined christmas, our anniversary, and even a little of your bday (but, don't worry, this won't be it ;))</p>
|
||||
<p>| <a href="https://crucialnet.org/gifts/letter">letter</a> | <a href="https://crucialnet.org/gifts/gift1">gift1</a> | <a href="https://crucialnet.org/gifts/letter">gift2</a> |</p>
|
||||
<p>-monkey</p>
|
||||
</body></html>
|
||||
BIN
public/gifts/letter/first.png
Normal file
BIN
public/gifts/letter/first.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
605
public/gifts/letter/index.html
Normal file
605
public/gifts/letter/index.html
Normal file
|
|
@ -0,0 +1,605 @@
|
|||
<!DOCTYPE html>
|
||||
<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, shrink-to-fit=no"/>
|
||||
<meta name="generator" content="Gatsby 3.8.1"/>
|
||||
<style>
|
||||
.gatsby-image-wrapper {
|
||||
position: relative;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.gatsby-image-wrapper img {
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
max-width: none;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
object-fit: cover
|
||||
}
|
||||
|
||||
.gatsby-image-wrapper [data-main-image] {
|
||||
opacity: 0;
|
||||
transform: translateZ(0);
|
||||
transition: opacity .25s linear;
|
||||
will-change: opacity
|
||||
}
|
||||
|
||||
.gatsby-image-wrapper-constrained {
|
||||
display: inline-block;
|
||||
vertical-align: top
|
||||
}
|
||||
</style>
|
||||
<noscript>
|
||||
<style>
|
||||
.gatsby-image-wrapper noscript [data-main-image] {
|
||||
opacity: 1!important
|
||||
}
|
||||
|
||||
.gatsby-image-wrapper [data-placeholder-image] {
|
||||
opacity: 0!important
|
||||
}
|
||||
</style>
|
||||
</noscript>
|
||||
<script type="module">
|
||||
const e="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;e&&document.body.addEventListener("load",(function(e){if(void 0===e.target.dataset.mainImage)return;if(void 0===e.target.dataset.gatsbyImageSsr)return;const t=e.target;let a=null,n=t;for(;null===a&&n;)void 0!==n.parentNode.dataset.gatsbyImageWrapper&&(a=n.parentNode),n=n.parentNode;const o=a.querySelector("[data-placeholder-image]"),r=new Image;r.src=t.currentSrc,r.decode().catch((()=>{})).then((()=>{t.style.opacity=1,o&&(o.style.opacity=0,o.style.transition="opacity 500ms linear")}))}),!0);
|
||||
</script>
|
||||
<link as="script" rel="preload" href="/webpack-runtime-3601570032890690b50a.js"/>
|
||||
<link as="script" rel="preload" href="/framework-f7980339050b397215c8.js"/>
|
||||
<link as="script" rel="preload" href="/532a2f07-a7a465962d720b8c6b64.js"/>
|
||||
<link as="script" rel="preload" href="/app-c19829f5ae7f062b5788.js"/>
|
||||
<link as="script" rel="preload" href="/commons-5d6a55c387b7cf318027.js"/>
|
||||
<link as="script" rel="preload" href="/component---src-templates-post-js-d7de4e7498b6959517d1.js"/>
|
||||
<link as="fetch" rel="preload" href="/page-data/blog/how-i-came-out/page-data.json" crossorigin="anonymous"/>
|
||||
<link as="fetch" rel="preload" href="/page-data/sq/d/2744905544.json" crossorigin="anonymous"/>
|
||||
<link as="fetch" rel="preload" href="/page-data/sq/d/3159585216.json" crossorigin="anonymous"/>
|
||||
<link as="fetch" rel="preload" href="/page-data/sq/d/754622331.json" crossorigin="anonymous"/>
|
||||
<link as="fetch" rel="preload" href="/page-data/app-data.json" crossorigin="anonymous"/>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
(function() {
|
||||
try {
|
||||
var mode = localStorage.getItem('theme-ui-color-mode');
|
||||
if (!mode)
|
||||
return
|
||||
document.documentElement.classList.add('theme-ui-' + mode);
|
||||
document.body.classList.add('theme-ui-' + mode);
|
||||
} catch (e) {}
|
||||
}
|
||||
)();
|
||||
</script>
|
||||
<div id="___gatsby">
|
||||
<style data-emotion="css-global 27xc0s">
|
||||
html {
|
||||
--theme-ui-colors-text: #f7fefb;
|
||||
--theme-ui-colors-background: #010906;
|
||||
--theme-ui-colors-muted: #052c1e;
|
||||
--theme-ui-colors-primary: #c1f8e4;
|
||||
--theme-ui-colors-secondary: #f8c9c1;
|
||||
--theme-ui-colors-highlight: #f8c1f1;
|
||||
color: var(--theme-ui-colors-text);
|
||||
background-color: var(--theme-ui-colors-background);
|
||||
}
|
||||
</style>
|
||||
<style data-emotion="css-global ya45n5">
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper">
|
||||
<style data-emotion="css 1pllppk">
|
||||
.css-1pllppk {
|
||||
min-height: 100%;
|
||||
}
|
||||
</style>
|
||||
<style data-emotion="css qwhr54">
|
||||
.css-qwhr54 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
min-height: 100%;
|
||||
}
|
||||
</style>
|
||||
<div class="css-qwhr54">
|
||||
<title>How I Came Out To My Mom
|
||||
<!-- -->
|
||||
|
|
||||
<!-- -->
|
||||
Papa 's Practiceria</title>
|
||||
<style data-emotion="css qoizjv">
|
||||
.css-qoizjv {
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
padding: 16px;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.css-qoizjv {
|
||||
-webkit-flex-direction:row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style data-emotion="css g8gcw1">
|
||||
.css-g8gcw1 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
padding: 16px;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.css-g8gcw1 {
|
||||
-webkit-flex-direction:row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<nav class="css-g8gcw1">
|
||||
<style data-emotion="css ix293q">
|
||||
.css-ix293q {
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
<style data-emotion="css 9tsijf">
|
||||
.css-9tsijf {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
<div class="css-9tsijf">
|
||||
<style data-emotion="css 1qemmfx">
|
||||
.css-1qemmfx {
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
<style data-emotion="css 1rb0sy8">
|
||||
.css-1rb0sy8 {
|
||||
box-shadow: none;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.css-1rb0sy8:hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.css-1rb0sy8::after {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
content: "";
|
||||
background-color: var(--theme-ui-colors-text);
|
||||
-webkit-transition: .2s;
|
||||
transition: .2s;
|
||||
-webkit-transform: scaleX(0);
|
||||
-moz-transform: scaleX(0);
|
||||
-ms-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
}
|
||||
|
||||
.css-1rb0sy8.active::after,.css-1rb0sy8:hover::after,.css-1rb0sy8:focus::after {
|
||||
-webkit-transform: scaleX(1);
|
||||
-moz-transform: scaleX(1);
|
||||
-ms-transform: scaleX(1);
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.css-1rb0sy8.active::after {
|
||||
background-color: var(--theme-ui-colors-primary);
|
||||
}
|
||||
</style>
|
||||
<style data-emotion="css 1v4kile">
|
||||
.css-1v4kile {
|
||||
color: inherit;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
word-break: break-word;
|
||||
box-shadow: 0px 1px #c1f8e4;
|
||||
box-shadow: none;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.css-1v4kile:hover {
|
||||
color: var(--theme-ui-colors-primary);
|
||||
}
|
||||
|
||||
.css-1v4kile:hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.css-1v4kile::after {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
content: "";
|
||||
background-color: var(--theme-ui-colors-text);
|
||||
-webkit-transition: .2s;
|
||||
transition: .2s;
|
||||
-webkit-transform: scaleX(0);
|
||||
-moz-transform: scaleX(0);
|
||||
-ms-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
}
|
||||
|
||||
.css-1v4kile.active::after,.css-1v4kile:hover::after,.css-1v4kile:focus::after {
|
||||
-webkit-transform: scaleX(1);
|
||||
-moz-transform: scaleX(1);
|
||||
-ms-transform: scaleX(1);
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.css-1v4kile.active::after {
|
||||
background-color: var(--theme-ui-colors-primary);
|
||||
}
|
||||
</style>
|
||||
<a href="/" class="css-1v4kile">Papa 's Practiceria</a>
|
||||
<style data-emotion="css 14fsxiu">
|
||||
.css-14fsxiu {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.css-14fsxiu {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div style="width:20px;height:15px;position:relative;transform:rotate(0deg)" class="css-14fsxiu">
|
||||
<span style="display:block;height:2px;width:100%;background:#f7fefb;transition-timing-function:ease;transition-duration:0.2s;border-radius:0px;transform-origin:center;position:absolute;transform:translate3d(0,0,0) rotate(0);margin-top:-1px"></span>
|
||||
<span style="display:block;height:2px;width:100%;background:#f7fefb;transition-timing-function:ease-out;transition-duration:0.05s;border-radius:0px;transform-origin:center;position:absolute;opacity:1;top:7.5px;margin-top:-1px"></span>
|
||||
<span style="display:block;height:2px;width:100%;background:#f7fefb;transition-timing-function:ease;transition-duration:0.2s;border-radius:0px;transform-origin:center;position:absolute;transform:translate3d(0,15px,0) rotate(0);margin-top:-1px"></span>
|
||||
</div>
|
||||
</div>
|
||||
<style data-emotion="css va88tb">
|
||||
@media (max-width: 500px) {
|
||||
.css-va88tb {
|
||||
-webkit-flex-direction:column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-align-items: flex-start;
|
||||
-webkit-box-align: flex-start;
|
||||
-ms-flex-align: flex-start;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
-webkit-transition: 0.2s linear;
|
||||
transition: 0.2s linear;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style data-emotion="css 13z3fdb">
|
||||
.css-13z3fdb {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.css-13z3fdb {
|
||||
-webkit-flex-direction:column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-align-items: flex-start;
|
||||
-webkit-box-align: flex-start;
|
||||
-ms-flex-align: flex-start;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
-webkit-transition: 0.2s linear;
|
||||
transition: 0.2s linear;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="css-13z3fdb">
|
||||
<style data-emotion="css 2hi2co">
|
||||
.css-2hi2co {
|
||||
margin-left: 0;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.css-2hi2co {
|
||||
margin-left:32px;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style data-emotion="css ne35dp">
|
||||
.css-ne35dp {
|
||||
box-shadow: none;
|
||||
font-size: 20px;
|
||||
margin-left: 0;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.css-ne35dp:hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.css-ne35dp::after {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
content: "";
|
||||
background-color: var(--theme-ui-colors-text);
|
||||
-webkit-transition: .2s;
|
||||
transition: .2s;
|
||||
-webkit-transform: scaleX(0);
|
||||
-moz-transform: scaleX(0);
|
||||
-ms-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
}
|
||||
|
||||
.css-ne35dp.active::after,.css-ne35dp:hover::after,.css-ne35dp:focus::after {
|
||||
-webkit-transform: scaleX(1);
|
||||
-moz-transform: scaleX(1);
|
||||
-ms-transform: scaleX(1);
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.css-ne35dp.active::after {
|
||||
background-color: var(--theme-ui-colors-primary);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.css-ne35dp {
|
||||
margin-left:32px;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style data-emotion="css 20q1gs">
|
||||
.css-20q1gs {
|
||||
color: inherit;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
word-break: break-word;
|
||||
box-shadow: 0px 1px #c1f8e4;
|
||||
box-shadow: none;
|
||||
font-size: 20px;
|
||||
margin-left: 0;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.css-20q1gs:hover {
|
||||
color: var(--theme-ui-colors-primary);
|
||||
}
|
||||
|
||||
.css-20q1gs:hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.css-20q1gs::after {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
content: "";
|
||||
background-color: var(--theme-ui-colors-text);
|
||||
-webkit-transition: .2s;
|
||||
transition: .2s;
|
||||
-webkit-transform: scaleX(0);
|
||||
-moz-transform: scaleX(0);
|
||||
-ms-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
}
|
||||
|
||||
.css-20q1gs.active::after,.css-20q1gs:hover::after,.css-20q1gs:focus::after {
|
||||
-webkit-transform: scaleX(1);
|
||||
-moz-transform: scaleX(1);
|
||||
-ms-transform: scaleX(1);
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.css-20q1gs.active::after {
|
||||
background-color: var(--theme-ui-colors-primary);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.css-20q1gs {
|
||||
margin-left:32px;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<a class="css-20q1gs" href="https://crucialnet.org/gifts">go back</a>
|
||||
<a class="css-20q1gs" href="https://crucialnet.org/gifts">About</a>
|
||||
<a class="css-20q1gs active" href="https://crucialnet.org/gifts">Blog</a>
|
||||
<a class="css-20q1gs" href="https://crucialnet.org/gifts">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
<style data-emotion="css uk2791">
|
||||
.css-uk2791 {
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
<style data-emotion="css y53iqb">
|
||||
.css-y53iqb {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
<div class="css-y53iqb">
|
||||
<style data-emotion="css 1g2ck6b">
|
||||
.css-1g2ck6b {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
font-family: sans-serif;
|
||||
font-weight: 700;
|
||||
line-height: 1.125;
|
||||
color: var(--theme-ui-colors-primary);
|
||||
font-family: sans-serif;
|
||||
font-weight: 700;
|
||||
line-height: 1.125;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
<h1 class="css-1g2ck6b">How I met this really cool girl through AmongUs (sus)</h1>
|
||||
<style data-emotion="css vurnku">
|
||||
.css-vurnku {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
</style>
|
||||
<div class="css-vurnku">
|
||||
<style data-emotion="css 1a14q1u">
|
||||
.css-1a14q1u {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
color: var(--theme-ui-colors-text);
|
||||
font-size: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
<span class="css-1a14q1u">December 27, 2021
|
||||
<!-- -->
|
||||
by
|
||||
<!-- -->
|
||||
Rushil Umaretiya</span>
|
||||
<div class="css-vurnku">
|
||||
<p>I walked into orchestra on the first day, and there she was, probably the first time ever seeing her with context, and I simply shrugged it off. She didn't even let me pick up my bass that very first day, and by then it was over. The next day I saw her again for just a little longer, but I had my eyes on another soul. As the first months passed, I was just getting back into the swing of things, but nobody could've prepared me for just how tough this year would be. Homecoming breathed down my neck, and I fell into a pretty deep hole. Grades in multi I ain't ever seen before, and a woman who only had enough emotional maturity for me to be nothing more her punching bag.</p>
|
||||
<p>The issue is throughout it all, there was one person who I grew to bond with to such an extent. Honestly this was something I'd never really successfully managed. She invited me into her life, and the time that we spent together was magical. But, obviously, she was just a *really good* friend, right? There's no way this senior (who was also gay, mind you) was anywhere in my league. Unattainable. So when she hugged me, or held my hand, or ate lunch with me, or simply talked to me for the sake of me. It was something I felt, but couldn't put into words.</p>
|
||||
<p>Until the night of the Vienesse ball.</p>
|
||||
<p>When she invited me out to boba beforehand, I could barely hold in my excitement. An hour with just me and her? Outside of school? And boba? I couldn't ask for anything more. And you can imagine my reaction when Aleesha followed us outside. I felt selfish, I wanted her to myself. Now, I promise I'm not some psycho, I felt bad for my selfishness after we got back. But what happened at the ball broke the camel's last straw on its back (ion know the idiom lmao). She had PRE-ARRANGED to be in the same shifts as me, and I blew it! Absolutely threw. I made the one mistake that I wasn't supposed to, I played the wrong shift. And then I had to stand there for 45 minutes and stare at this beautiful woman as she just motioned at me, and there was nothing I could do.</p>
|
||||
<p>It was that day that I was able to put words to the feelings I had: "Will you go out with me?" This phrase is one of the most polarized in the english dictionary, it could go both ways, and only both ways. Yes and No. And being the TJ student that I was, I deliberated for weeks. Weeks of hand holding, tight squeezes, and doing things that the homies simply do not. I was clueless, but this was my one chance at a clue, and I almost blew it.</p>
|
||||
<p>It was lunchtime on that Monday, and I did the only thing I knew how to in high-stress situations: turned my brain completely off.</p>
|
||||
<p>Hey, so how's it going with that crush?</p>
|
||||
<p><div style="text-align: right">Irene? Yeah dude I don't think she's gay. I think imma just become an incel.</div></p>
|
||||
<p><div style="font-style: italics">NONOONONONONONONONO INCEL</div>Damn, that's too bad. Well, anyways, I have a question for you. Now, just know that however you answer this question, I don't want things between us to change. W- I- Wi- Akdfsjei- *fights for breath*</p>
|
||||
<p><div style="text-align: right">Spit it out. You're scaring me.</div></p>
|
||||
<p><i>I'M SCARING YOU ? AAAAAAAAAAAAAAAAAAAA</i> Uhhhh, alright listen. You ready?</p>
|
||||
<p><div style="text-align: right">JUST SAY IT.</div></p>
|
||||
<p>Will- uh. WILL YOU GO OUT WITH ME?</p>
|
||||
<p><div style="text-align: right">Yes.</div></p>
|
||||
<p>What? What do you mean yes?</p>
|
||||
<p><div style="text-align: right">Yes, lmao.</div></p>
|
||||
<p><div style="text-align: center">Enter Felix<br>"Go to class dude."</div></p>
|
||||
<p>The end.<br>(or just the start :))</p>
|
||||
<p>P.S.:<br>Ramya, if you're reading this. I don't think I could even begin to put into words just how much I care about you. From your self-confidence to your compassion, every second I get to spend makes my day just that better. I love how much we make each other smile, or how much mutual respect we both have. The honor has been all mine getting to know you ever since last may, and speaking of last may:</p>
|
||||
<p>Here's our first text exchange.</p>
|
||||
<img src="./first.png">
|
||||
<p>And here's the rest. <a href="https://crucialnet.org/gifts/letter/texts.pdf" target="_blank">PDF!</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div>
|
||||
</div>
|
||||
<script id="gatsby-script-loader">
|
||||
/*<![CDATA[*/
|
||||
window.pagePath = "/blog/how-i-came-out";
|
||||
/*]]>*/
|
||||
</script>
|
||||
<script id="gatsby-chunk-mapping">
|
||||
/*<![CDATA[*/
|
||||
window.___chunkMapping = {
|
||||
"polyfill": ["/polyfill-faacd0a3b4d78852513d.js"],
|
||||
"app": ["/app-c19829f5ae7f062b5788.js"],
|
||||
"component---src-pages-404-js": ["/component---src-pages-404-js-5baab3d6671309275d51.js"],
|
||||
"component---src-pages-about-js": ["/component---src-pages-about-js-c0140b48df2bf9146b1d.js"],
|
||||
"component---src-pages-blog-js": ["/component---src-pages-blog-js-37edeedd802b4587484b.js"],
|
||||
"component---src-pages-contact-js": ["/component---src-pages-contact-js-f5e8986abc7ef1e975e7.js"],
|
||||
"component---src-pages-index-js": ["/component---src-pages-index-js-76e4c2629846e4cf7043.js"],
|
||||
"component---src-templates-post-js": ["/component---src-templates-post-js-d7de4e7498b6959517d1.js"]
|
||||
};
|
||||
/*]]>*/
|
||||
</script>
|
||||
<script src="/polyfill-faacd0a3b4d78852513d.js" nomodule=""></script>
|
||||
<script src="/component---src-templates-post-js-d7de4e7498b6959517d1.js" async=""></script>
|
||||
<script src="/commons-5d6a55c387b7cf318027.js" async=""></script>
|
||||
<script src="/app-c19829f5ae7f062b5788.js" async=""></script>
|
||||
<script src="/532a2f07-a7a465962d720b8c6b64.js" async=""></script>
|
||||
<script src="/framework-f7980339050b397215c8.js" async=""></script>
|
||||
<script src="/webpack-runtime-3601570032890690b50a.js" async=""></script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
public/gifts/letter/texts.pdf
Normal file
BIN
public/gifts/letter/texts.pdf
Normal file
Binary file not shown.
468
public/gifts/mvp.css
Normal file
468
public/gifts/mvp.css
Normal file
|
|
@ -0,0 +1,468 @@
|
|||
/* MVP.css v1.8 - https://github.com/andybrewer/mvp */
|
||||
|
||||
:root {
|
||||
--active-brightness: 0.85;
|
||||
--border-radius: 5px;
|
||||
--box-shadow: 2px 2px 10px;
|
||||
--color: #118bee;
|
||||
--color-accent: #118bee15;
|
||||
--color-bg: #fff;
|
||||
--color-bg-secondary: #e9e9e9;
|
||||
--color-link: #118bee;
|
||||
--color-secondary: #920de9;
|
||||
--color-secondary-accent: #920de90b;
|
||||
--color-shadow: #f4f4f4;
|
||||
--color-table: #118bee;
|
||||
--color-text: #000;
|
||||
--color-text-secondary: #999;
|
||||
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
--hover-brightness: 1.2;
|
||||
--justify-important: center;
|
||||
--justify-normal: left;
|
||||
--line-height: 1.5;
|
||||
--width-card: 285px;
|
||||
--width-card-medium: 460px;
|
||||
--width-card-wide: 800px;
|
||||
--width-content: 1080px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Layout */
|
||||
article aside {
|
||||
background: var(--color-secondary-accent);
|
||||
border-left: 4px solid var(--color-secondary);
|
||||
padding: 0.01rem 0.8rem;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-family);
|
||||
line-height: var(--line-height);
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
footer,
|
||||
header,
|
||||
main {
|
||||
margin: 0 auto;
|
||||
max-width: var(--width-content);
|
||||
padding: 3rem 1rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: var(--color-bg-secondary);
|
||||
border: none;
|
||||
height: 1px;
|
||||
margin: 4rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: var(--justify-important);
|
||||
}
|
||||
|
||||
section img,
|
||||
article img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
section pre {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
section aside {
|
||||
border: 1px solid var(--color-bg-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow) var(--color-shadow);
|
||||
margin: 1rem;
|
||||
padding: 1.25rem;
|
||||
width: var(--width-card);
|
||||
}
|
||||
|
||||
section aside:hover {
|
||||
box-shadow: var(--box-shadow) var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Headers */
|
||||
article header,
|
||||
div header,
|
||||
main header {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: var(--justify-important);
|
||||
}
|
||||
|
||||
header a b,
|
||||
header a em,
|
||||
header a i,
|
||||
header a strong {
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
header nav img {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
section header {
|
||||
padding-top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Nav */
|
||||
nav {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 7rem;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
display: inline-block;
|
||||
margin: 0 0.5rem;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Nav Dropdown */
|
||||
nav ul li:hover ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav ul li ul {
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-bg-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow) var(--color-shadow);
|
||||
display: none;
|
||||
height: auto;
|
||||
left: -2px;
|
||||
padding: .5rem 1rem;
|
||||
position: absolute;
|
||||
top: 1.7rem;
|
||||
white-space: nowrap;
|
||||
width: auto;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
nav ul li ul::before {
|
||||
/* fill gap above to make mousing over them easier */
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: -0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
|
||||
nav ul li ul li,
|
||||
nav ul li ul li a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
code,
|
||||
samp {
|
||||
background-color: var(--color-accent);
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--color-text);
|
||||
display: inline-block;
|
||||
margin: 0 0.1rem;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
details {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
|
||||
details summary {
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
mark {
|
||||
padding: 0.1rem;
|
||||
}
|
||||
|
||||
ol li,
|
||||
ul li {
|
||||
padding: 0.2rem 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0.75rem 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 1rem 0;
|
||||
max-width: var(--width-card-wide);
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
pre code,
|
||||
pre samp {
|
||||
display: block;
|
||||
max-width: var(--width-card-wide);
|
||||
padding: 0.5rem 2rem;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
small {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
sup {
|
||||
background-color: var(--color-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--color-bg);
|
||||
font-size: xx-small;
|
||||
font-weight: bold;
|
||||
margin: 0.2rem;
|
||||
padding: 0.2rem 0.3rem;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
a {
|
||||
color: var(--color-link);
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:active {
|
||||
filter: brightness(var(--active-brightness));
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
filter: brightness(var(--hover-brightness));
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a b,
|
||||
a em,
|
||||
a i,
|
||||
a strong,
|
||||
button {
|
||||
border-radius: var(--border-radius);
|
||||
display: inline-block;
|
||||
font-size: medium;
|
||||
font-weight: bold;
|
||||
line-height: var(--line-height);
|
||||
margin: 0.5rem 0;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
|
||||
button:active {
|
||||
filter: brightness(var(--active-brightness));
|
||||
}
|
||||
|
||||
button:hover {
|
||||
cursor: pointer;
|
||||
filter: brightness(var(--hover-brightness));
|
||||
}
|
||||
|
||||
a b,
|
||||
a strong,
|
||||
button {
|
||||
background-color: var(--color-link);
|
||||
border: 2px solid var(--color-link);
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
a em,
|
||||
a i {
|
||||
border: 2px solid var(--color-link);
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--color-link);
|
||||
display: inline-block;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
article aside a {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
/* Images */
|
||||
figure {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
figure img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
figure figcaption {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
|
||||
button:disabled,
|
||||
input:disabled {
|
||||
background: var(--color-bg-secondary);
|
||||
border-color: var(--color-bg-secondary);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
button[disabled]:hover {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
form {
|
||||
border: 1px solid var(--color-bg-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow) var(--color-shadow);
|
||||
display: block;
|
||||
max-width: var(--width-card-wide);
|
||||
min-width: var(--width-card);
|
||||
padding: 1.5rem;
|
||||
text-align: var(--justify-normal);
|
||||
}
|
||||
|
||||
form header {
|
||||
margin: 1.5rem 0;
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
label,
|
||||
select,
|
||||
textarea {
|
||||
display: block;
|
||||
font-size: inherit;
|
||||
max-width: var(--width-card-wide);
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
input[type="checkbox"]+label,
|
||||
input[type="radio"]+label {
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border: 1px solid var(--color-bg-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.4rem 0.8rem;
|
||||
}
|
||||
|
||||
input[readonly],
|
||||
textarea[readonly] {
|
||||
background-color: var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
table {
|
||||
border: 1px solid var(--color-bg-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
border-spacing: 0;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table td,
|
||||
table th,
|
||||
table tr {
|
||||
padding: 0.4rem 0.8rem;
|
||||
text-align: var(--justify-important);
|
||||
}
|
||||
|
||||
table thead {
|
||||
background-color: var(--color-table);
|
||||
border-collapse: collapse;
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--color-bg);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table thead th:first-child {
|
||||
border-top-left-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
table thead th:last-child {
|
||||
border-top-right-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
table thead th:first-child,
|
||||
table tr td:first-child {
|
||||
text-align: var(--justify-normal);
|
||||
}
|
||||
|
||||
table tr:nth-child(even) {
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* Quotes */
|
||||
blockquote {
|
||||
display: block;
|
||||
font-size: x-large;
|
||||
line-height: var(--line-height);
|
||||
margin: 1rem auto;
|
||||
max-width: var(--width-card-medium);
|
||||
padding: 1.5rem 1rem;
|
||||
text-align: var(--justify-important);
|
||||
}
|
||||
|
||||
blockquote footer {
|
||||
color: var(--color-text-secondary);
|
||||
display: block;
|
||||
font-size: small;
|
||||
line-height: var(--line-height);
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user