mirror of
https://github.com/mat-1/matdoesdev.git
synced 2025-08-02 06:36:04 +00:00
implement friend stylesheets
This commit is contained in:
parent
30aca9fb41
commit
e10d5c5e24
4 changed files with 278 additions and 18 deletions
|
|
@ -8,7 +8,7 @@
|
|||
import IconButtonRow from '$lib/IconButtonRow.svelte'
|
||||
import Topography from '$lib/topography.svg'
|
||||
|
||||
let titleEl: HTMLParagraphElement = $state()
|
||||
let titleEl: HTMLParagraphElement
|
||||
|
||||
onMount(async () => {
|
||||
maybeAddRandomBackground()
|
||||
|
|
@ -167,25 +167,46 @@
|
|||
const titleEl = document.getElementsByTagName('title')[0]
|
||||
titleEl.textContent = content
|
||||
|
||||
if (/^(sand|samd)?(cat|cta|car)(doesdev)?$/.test(content)) {
|
||||
sentence1 = 'meow meow, mew meow meow mrrp meow nyaa :3'
|
||||
sentence2 = 'meeeoooww ^-^ purr~ meow meow mrrp meow nya meow nyaaa meow nyaa nyaa :3'
|
||||
copyrightText = defaultCopyrightText.replace('mat', 'mta')
|
||||
startSandcatMode()
|
||||
} else if (/does/.test(content)) {
|
||||
let [name, action] = content.split('does')
|
||||
name = name.trim()
|
||||
action = action.trim()
|
||||
sentence1 = defaultSentence1.replace('mat', name)
|
||||
if (action !== 'dev') {
|
||||
sentence1 = sentence1.replace('full-stack software development', action)
|
||||
const friendStylesheets: Record<string, string> = {
|
||||
adryd: 'adryd.css',
|
||||
ari: 'adryd.css',
|
||||
notnite: 'notnite.css',
|
||||
shrecknt: 'shrecknt.css',
|
||||
}
|
||||
|
||||
let friendStylesheetLinkEl = document.getElementById('friend-stylesheet') as HTMLLinkElement
|
||||
if (content.toLowerCase() in friendStylesheets) {
|
||||
const stylesheetMap = friendStylesheets[content.toLowerCase()]
|
||||
if (!friendStylesheetLinkEl) {
|
||||
friendStylesheetLinkEl = document.createElement('link')
|
||||
friendStylesheetLinkEl.id = 'friend-stylesheet'
|
||||
friendStylesheetLinkEl.rel = 'stylesheet'
|
||||
document.head.appendChild(friendStylesheetLinkEl)
|
||||
}
|
||||
sentence2 = defaultSentence2
|
||||
copyrightText = defaultCopyrightText.replace('mat', name)
|
||||
friendStylesheetLinkEl.href = `/friend-stylesheets/${stylesheetMap}`
|
||||
} else {
|
||||
sentence1 = defaultSentence1
|
||||
sentence2 = defaultSentence2
|
||||
copyrightText = defaultCopyrightText
|
||||
friendStylesheetLinkEl?.remove()
|
||||
|
||||
if (/^(sand|samd)?(cat|cta|car)(doesdev)?$/.test(content)) {
|
||||
sentence1 = 'meow meow, mew meow meow mrrp meow nyaa :3'
|
||||
sentence2 = 'meeeoooww ^-^ purr~ meow meow mrrp meow nya meow nyaaa meow nyaa nyaa :3'
|
||||
copyrightText = defaultCopyrightText.replace('mat', 'mta')
|
||||
startSandcatMode()
|
||||
} else if (/does/.test(content)) {
|
||||
let [name, action] = content.split('does')
|
||||
name = name.trim()
|
||||
action = action.trim()
|
||||
sentence1 = defaultSentence1.replace('mat', name)
|
||||
if (action !== 'dev') {
|
||||
sentence1 = sentence1.replace('full-stack software development', action)
|
||||
}
|
||||
sentence2 = defaultSentence2
|
||||
copyrightText = defaultCopyrightText.replace('mat', name)
|
||||
} else {
|
||||
sentence1 = defaultSentence1
|
||||
sentence2 = defaultSentence2
|
||||
copyrightText = defaultCopyrightText
|
||||
}
|
||||
}
|
||||
|
||||
copyrightEl.textContent = copyrightText
|
||||
|
|
|
|||
87
static/friend-stylesheets/adryd.css
Normal file
87
static/friend-stylesheets/adryd.css
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
@font-face {
|
||||
font-family: Pretendard;
|
||||
font-weight: 45 920;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/PretendardStdVariable.woff2);
|
||||
}
|
||||
@font-face {
|
||||
font-family: IBM Plex Mono;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/ibmplexmono-regular.woff2) format('woff2');
|
||||
}
|
||||
@font-face {
|
||||
font-family: IBM Plex Mono;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/ibmplexmono-bold.woff2) format('woff2');
|
||||
}
|
||||
|
||||
:root {
|
||||
--background-color: #0a0a0a;
|
||||
}
|
||||
#page {
|
||||
max-width: 100%;
|
||||
}
|
||||
main {
|
||||
max-width: calc(800px + 2em) !important;
|
||||
}
|
||||
#page .section-container {
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
.icon-row .button-row {
|
||||
margin: 1rem 0 1rem 0;
|
||||
}
|
||||
#main-title {
|
||||
font-weight: 900;
|
||||
font-size: 5rem;
|
||||
width: fit-content;
|
||||
margin: 3rem 0 1rem;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
#main-title:before {
|
||||
content: "hi, i'm ";
|
||||
}
|
||||
#main-title:after {
|
||||
content: '!';
|
||||
}
|
||||
#main-title::first-letter {
|
||||
text-shadow: none;
|
||||
}
|
||||
#main-index-page-section {
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
}
|
||||
#main-index-page-section p {
|
||||
font-weight: 500;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
.button-row {
|
||||
width: 100% !important;
|
||||
display: block !important;
|
||||
}
|
||||
.icon-row .button-row {
|
||||
display: flex !important;
|
||||
}
|
||||
.button {
|
||||
color: #93c5fd;
|
||||
background-color: #3b82f633;
|
||||
border: none;
|
||||
display: block;
|
||||
width: fit-content;
|
||||
padding: 0.16em 0.3em;
|
||||
}
|
||||
.button:hover {
|
||||
color: #93c5fd;
|
||||
background-color: #91c3fd33;
|
||||
}
|
||||
p {
|
||||
margin: 0.5em 0 !important;
|
||||
}
|
||||
footer {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #171717;
|
||||
}
|
||||
52
static/friend-stylesheets/notnite.css
Normal file
52
static/friend-stylesheets/notnite.css
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
:root {
|
||||
--background-color: #111;
|
||||
}
|
||||
#page {
|
||||
max-width: calc(35rem);
|
||||
font-family: monospace;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#page .section-container {
|
||||
flex-direction: row;
|
||||
}
|
||||
.icon-row .button-row {
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
#main-title {
|
||||
color: #cb2027;
|
||||
font-weight: 700;
|
||||
font-size: 3rem;
|
||||
width: fit-content;
|
||||
margin: 2rem 0 0.5rem;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
#main-title::first-letter {
|
||||
text-shadow: none;
|
||||
}
|
||||
#main-index-page-section {
|
||||
max-width: none;
|
||||
}
|
||||
#main-index-page-section p {
|
||||
font-weight: 500;
|
||||
}
|
||||
.button-row {
|
||||
width: 100% !important;
|
||||
display: block !important;
|
||||
}
|
||||
.icon-row .button-row {
|
||||
display: flex !important;
|
||||
}
|
||||
.button {
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
display: block;
|
||||
width: fit-content;
|
||||
padding: 0;
|
||||
text-decoration: underline;
|
||||
font-size: inherit;
|
||||
}
|
||||
p {
|
||||
margin: 0.5em 0 !important;
|
||||
}
|
||||
100
static/friend-stylesheets/shrecknt.css
Normal file
100
static/friend-stylesheets/shrecknt.css
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
:root {
|
||||
--background-color: #212121;
|
||||
--text-color: #dcdcdc;
|
||||
}
|
||||
body {
|
||||
font-size: 1.15rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
#page {
|
||||
max-width: 100%;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Nimbus Sans L', Roboto,
|
||||
'Noto Sans', 'Segoe UI', Arial, Helvetica, 'Helvetica Neue', sans-serif;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#page .section-container {
|
||||
flex-direction: row;
|
||||
}
|
||||
#main-title {
|
||||
font-weight: 700;
|
||||
font-size: 3rem;
|
||||
padding-top: 1em;
|
||||
}
|
||||
#main-title:before {
|
||||
content: '';
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
background: #2b2b2b;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
height: 12rem;
|
||||
border-bottom: 1px solid #898ea4;
|
||||
}
|
||||
#main-title::first-letter {
|
||||
text-shadow: none;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#main-title:after {
|
||||
content: "'s Silly Site";
|
||||
}
|
||||
|
||||
#main-index-page-section {
|
||||
max-width: none;
|
||||
}
|
||||
#main-index-page-section p {
|
||||
font-weight: 500;
|
||||
}
|
||||
.icon-row > .button-row {
|
||||
margin-top: 0;
|
||||
}
|
||||
#main-index-page-section > .button-row {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.button {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
margin: 0 0.5rem 1rem 0.5rem;
|
||||
border: 1px solid #898ea4;
|
||||
border-radius: 5px;
|
||||
color: var(--text-color);
|
||||
display: inline-block;
|
||||
padding: 0.1rem 1rem;
|
||||
text-decoration: none;
|
||||
line-height: 2;
|
||||
}
|
||||
#main-index-page-section p:first-of-type {
|
||||
margin-top: 3em;
|
||||
border-bottom: none;
|
||||
margin-bottom: -2em;
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
#main-index-page-section p:nth-of-type(2) {
|
||||
border-top: none;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
#main-index-page-section p:first-of-type:before {
|
||||
content: 'About Me';
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
#main-index-page-section p {
|
||||
max-width: 720px;
|
||||
padding: 1em;
|
||||
border: 2px solid #898ea4;
|
||||
background: #2b2b2b;
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: 1px solid #898ea4;
|
||||
padding-top: 1em;
|
||||
width: 720px;
|
||||
margin: 3rem auto 0 auto;
|
||||
font-size: 1rem;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue