do what Big Style says to do with your website
This commit is contained in:
parent
60d5f6bf30
commit
7b37aed0e5
14 changed files with 166 additions and 82 deletions
|
|
@ -38,6 +38,7 @@ hr {
|
|||
background-color: currentColor;
|
||||
color: inherit;
|
||||
height: 1px;
|
||||
margin: 2em;
|
||||
}
|
||||
|
||||
li {
|
||||
|
|
|
|||
BIN
assets/imgs/pricing/type_quote.png
Normal file
BIN
assets/imgs/pricing/type_quote.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
assets/imgs/stylistic/bg_dust.png
Normal file
BIN
assets/imgs/stylistic/bg_dust.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 225 KiB |
BIN
assets/imgs/stylistic/bg_pattern.png
Normal file
BIN
assets/imgs/stylistic/bg_pattern.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
|
|
@ -95,13 +95,3 @@
|
|||
opacity: 0.5;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.satisfiedBox {
|
||||
margin: 2rem 0;
|
||||
padding-inline-start: 1rem;
|
||||
}
|
||||
|
||||
.satisfiedBox h2::before {
|
||||
content: "↗ ";
|
||||
margin-inline-start: -1em;
|
||||
}
|
||||
108
assets/style.css
108
assets/style.css
|
|
@ -1,4 +1,5 @@
|
|||
@import url("/assets/styles/fade-in.css");
|
||||
@import url("/assets/styles/fader.css");
|
||||
|
||||
@font-face {
|
||||
font-family: "Red Hat Display";
|
||||
|
|
@ -11,24 +12,81 @@
|
|||
}
|
||||
|
||||
body {
|
||||
--bg: white;
|
||||
--bg: 255, 255, 255;
|
||||
background-color: white;
|
||||
color: black;
|
||||
font-family: "Red Hat Text";
|
||||
}
|
||||
|
||||
body::after {
|
||||
display: inline-block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
image-rendering: pixelated;
|
||||
background:
|
||||
linear-gradient(to left, white, transparent calc(50% - 384px)),
|
||||
linear-gradient(to right, white, transparent calc(50% - 384px)),
|
||||
linear-gradient(to top, white 1rem, transparent 5rem),
|
||||
url("/assets/imgs/stylistic/bg_pattern.png");
|
||||
background-position: 50% 0;
|
||||
/* background-size: 3840px 1080px; */
|
||||
mask-image: url("/assets/imgs/stylistic/bg_dust.png");
|
||||
mask-repeat: repeat;
|
||||
mask-composite: exclude;
|
||||
mask-size: 960px 270px;
|
||||
mask-position: 50% 0;
|
||||
opacity: 0.25;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: "Red Hat Display";
|
||||
}
|
||||
|
||||
main .cakeView {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
min-height: calc(100svh - 14rem);
|
||||
margin-bottom: calc((100vh - 100svh) + 4rem);
|
||||
}
|
||||
|
||||
main .cakeView section {
|
||||
background-color: rgba(var(--bg), 1);
|
||||
box-shadow: 0px 0px 4rem 4rem rgba(var(--bg), 1);
|
||||
}
|
||||
|
||||
/* @media (prefers-color-scheme: dark) {
|
||||
main .cakeView section {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
} */
|
||||
|
||||
main .cakeView h2 {
|
||||
font-size: 3em;
|
||||
/* word-wrap: break-word; */
|
||||
-webkit-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
--bg: black;
|
||||
--bg: 0,0,0;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
img:not(.screen) {
|
||||
img:not(.screen),
|
||||
body::after {
|
||||
filter: invert(100%) hue-rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -56,3 +114,47 @@ a,
|
|||
button {
|
||||
transition: 0.25s opacity;
|
||||
}
|
||||
|
||||
.satisfiedBox {
|
||||
margin: 2rem 0;
|
||||
padding-inline-start: 1rem;
|
||||
}
|
||||
|
||||
.satisfiedBox h2::before {
|
||||
content: "↗ ";
|
||||
margin-inline-start: -1em;
|
||||
}
|
||||
|
||||
.satisfiedBox a {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
background-color: rgb(var(--bg));
|
||||
transition: all 0.25s;
|
||||
}
|
||||
|
||||
.satisfiedBox a:hover {
|
||||
filter: invert(100%);
|
||||
text-decoration-color: transparent;
|
||||
padding: 4px;
|
||||
margin: -4px;
|
||||
}
|
||||
|
||||
.satisfiedBox a:active {
|
||||
translate: 4px 0;
|
||||
}
|
||||
|
||||
.satisfiedBox a::after {
|
||||
display: inline-block;
|
||||
content: ">>";
|
||||
margin-inline-start: 0;
|
||||
width: 0;
|
||||
opacity: 0.5;
|
||||
overflow: hidden;
|
||||
vertical-align: top;
|
||||
transition: width 0.25s, margin 0.25s;
|
||||
}
|
||||
|
||||
.satisfiedBox a:hover::after {
|
||||
margin-inline-start: 1ch;
|
||||
width: 2ch;
|
||||
}
|
||||
23
assets/styles/fader.css
Normal file
23
assets/styles/fader.css
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
@keyframes fade-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
body::before {
|
||||
display: inline-block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgb(var(--bg));
|
||||
z-index: 9;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
animation: fade-out 0.5s cubic-bezier(0.87, 0, 0.13, 1) both;
|
||||
}
|
||||
|
|
@ -1,5 +1,8 @@
|
|||
<section class="cakeView">
|
||||
<h2><%= title %></h2>
|
||||
<div class="cakeView">
|
||||
<section>
|
||||
<h2><%- title %></h2>
|
||||
<img src="<%= image %>" alt="<%= alt %>" title="<%= alt %>" width="128" height="128"/>
|
||||
<p><%- description %></p>
|
||||
<hr />
|
||||
</section>
|
||||
</div>
|
||||
10
views/components/specific/head.ejs
Normal file
10
views/components/specific/head.ejs
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<meta charset="utf-8">
|
||||
<title>abtmtr.link site commissions</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="/assets/layout.css">
|
||||
<link rel="stylesheet" href="/assets/elements.css">
|
||||
<link rel="stylesheet" href="/assets/style.css">
|
||||
<script>
|
||||
/*to prevent Firefox FOUC, this must be here*/
|
||||
let FF_FOUC_FIX;
|
||||
</script>
|
||||
|
|
@ -1,12 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>abtmtr.link site commissions</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="/assets/layout.css">
|
||||
<link rel="stylesheet" href="/assets/elements.css">
|
||||
<link rel="stylesheet" href="/assets/style.css">
|
||||
<%- include(__dirname + "/views/components/specific/head.ejs") %>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>abtmtr.link site commissions</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="/assets/layout.css">
|
||||
<link rel="stylesheet" href="/assets/elements.css">
|
||||
<link rel="stylesheet" href="/assets/style.css">
|
||||
<%- include(__dirname + "/views/components/specific/head.ejs") %>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
|
|
@ -14,7 +9,7 @@
|
|||
<%- include(__dirname + "/views/components/cakeView.ejs", {
|
||||
image: "/assets/imgs/homosuckMatkap.png",
|
||||
alt: "matkap looking ridiculous with his hands in the air",
|
||||
title: "hey, i'm MeowcaTheoRange.",
|
||||
title: "hey, i'm Meowca­Theo­Range.",
|
||||
description: `i've got a feeling you want a <b>good site</b> that's <b>special</b>, <b>performs well</b> on <b>all devices</b>, and <b>pleases new visitors</b> and <b>existing fans</b> alike.
|
||||
you want it to <b>bring attention to what you do</b>, what you <b>dedicate yourself to</b>, what you're <b>passionate about</b>, or <b>what you're selling</b>... but you <b>don't quite have the know-how to get it done</b>.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>abtmtr.link site commissions</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="/assets/layout.css">
|
||||
<link rel="stylesheet" href="/assets/elements.css">
|
||||
<link rel="stylesheet" href="/assets/style.css">
|
||||
<%- include(__dirname + "/views/components/specific/head.ejs") %>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
|
|
@ -60,7 +55,7 @@ est. time: 1-2 weeks`,
|
|||
alt: "a couple pages, and a browser with a gallery and an advertisement with an among us crewmate and the word \"adversising [sic]\".",
|
||||
title: "good site ($30 USD)",
|
||||
description: `this site type is good if you don't need a lot out of your site.
|
||||
if you already use some kind of commission management system, and are happy with just making your requests more parseable, this is a good pick for you.
|
||||
if you use some kind of commission management system, and are happy with just making your requests more parseable, this is a good pick for you.
|
||||
|
||||
minimum deadline: 1 month
|
||||
est. time: 2-4 weeks`,
|
||||
|
|
@ -78,7 +73,7 @@ est. time: 2-4 weeks`,
|
|||
<%- include(__dirname + "/views/components/yesNoListView.ejs", {
|
||||
image: "/assets/imgs/pricing/type_awesome.png",
|
||||
alt: "a portfolio website, with a sale dialog over it. the sale code is \"HIIIIALL\".",
|
||||
title: "awesome site ($80 USD)",
|
||||
title: "awesome site ($50 USD)",
|
||||
description: `good site, but better. or: matkap special, but more basic.
|
||||
the Nitro Basic of abtmtr.link's site commissions.
|
||||
|
||||
|
|
@ -88,30 +83,9 @@ minimum deadline: 2 months
|
|||
est. time: 1-2 months`,
|
||||
yes: [
|
||||
["Everything from <i>good site</i>"],
|
||||
["20 pages max (incl. homepage)"],
|
||||
["10 pages max (incl. homepage)"],
|
||||
["functional cookies, local storage, and session storage"],
|
||||
["Dynamic assets (fetch from other places/APIs)"],
|
||||
["framework usage (Next.js, React, EJS)"],
|
||||
],
|
||||
no: [
|
||||
]
|
||||
}) %>
|
||||
<%- include(__dirname + "/views/components/yesNoListView.ejs", {
|
||||
image: "/assets/imgs/pricing/type_matkap.png",
|
||||
alt: "matkap sitting wall-eyed at a computer, chewing on grass. he is coding a website displaying the word \"SITE.\" on the screen.",
|
||||
title: "matkap special site ($100 USD)",
|
||||
description: `channel the spirit of matkap and... eat grass or something. i don't know what he does.
|
||||
|
||||
this site type is good for handling customer tickets/messages/whatever without requiring a Trello board.
|
||||
|
||||
minimum deadline: 4 months
|
||||
est. time: 2-3 months`,
|
||||
yes: [
|
||||
["Everything from <i>awesome site</i>"],
|
||||
["no page maximum"],
|
||||
["Forms with custom APIs"],
|
||||
["Express server"],
|
||||
["SQLite database"],
|
||||
["popups and stuff"],
|
||||
],
|
||||
no: [
|
||||
]
|
||||
|
|
@ -119,12 +93,13 @@ est. time: 2-3 months`,
|
|||
<br />
|
||||
<h2>or, i can quote you a site</h2>
|
||||
<%- include(__dirname + "/views/components/yesNoListView.ejs", {
|
||||
image: "/assets/imgs/pricing/type_all.png",
|
||||
alt: "matkap smiling at the viewer, with a browser on the other side. sparkles are around both.",
|
||||
title: "quoted site ($20+ USD)",
|
||||
image: "/assets/imgs/pricing/type_quote.png",
|
||||
alt: "matkap chewing on a calculator. there's a quote that is reported to be \"$?!?!\". a browser is below it.",
|
||||
title: "\"site\" ($20+ USD)",
|
||||
description: `oh god oh fuck it looks like i'll have to do some mental math.
|
||||
|
||||
this site type is good if you need something specific.
|
||||
it's also the worst pun i think i've ever made.
|
||||
|
||||
price depends on quoted content, plus the base fee.
|
||||
(the quote itself is free i'm not gonna charge you for a damn email exchange)
|
||||
|
|
|
|||
|
|
@ -1,12 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>abtmtr.link site commissions</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="/assets/layout.css">
|
||||
<link rel="stylesheet" href="/assets/elements.css">
|
||||
<link rel="stylesheet" href="/assets/style.css">
|
||||
<%- include(__dirname + "/views/components/specific/head.ejs") %>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>abtmtr.link site commissions</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="/assets/layout.css">
|
||||
<link rel="stylesheet" href="/assets/elements.css">
|
||||
<link rel="stylesheet" href="/assets/style.css">
|
||||
<%- include(__dirname + "/views/components/specific/head.ejs") %>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
|
|
|
|||
Loading…
Reference in a new issue