sadorowo/personal-website
1
0
Fork 0
Code Pull Requests Projects Releases Activity

fix(layout): formatting & minor typing mistake + mobile layout

Browse Source
This commit is contained in:
Franek 2024-05-10 21:03:28 +02:00
parent e79cd00a06
commit 2977478b0c
No known key found for this signature in database
GPG Key ID: 0329F871B2079351
6 changed files with 99 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
css/style.css
View File

@ -57,7 +57,9 @@ ul.vertical li:not(:first-child)::before {
font-weight: bold; font-weight: bold;
} }
input, a, #result { input,
a,
#result {
transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out;
} }
@ -78,11 +80,13 @@ input {
white-space: preserve; white-space: preserve;
color: var(--color); color: var(--color);
max-height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
align-content: center;
} }
#switch_theme, #help { #switch_theme,
#help {
text-decoration: underline; text-decoration: underline;
cursor: pointer; cursor: pointer;
} }
@ -104,4 +108,8 @@ input {
#container { #container {
flex-direction: column !important; flex-direction: column !important;
} }
#container>* {
width: 100%;
}
} }

3
css/style.dark.css
View File

@ -7,6 +7,7 @@ body.dark input {
color: var(--background) !important; color: var(--background) !important;
} }
body.dark #result, body.dark a { body.dark #result,
body.dark a {
color: var(--background) !important; color: var(--background) !important;
} }

1
error.html
View File

@ -17,4 +17,5 @@
<a onclick="history.back()">go back</a> <a onclick="history.back()">go back</a>
</div> </div>
</body> </body>
</html> </html>

3
index.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -12,6 +13,7 @@
<link rel="icon" href="assets/logo.png"> <link rel="icon" href="assets/logo.png">
<title>sador</title> <title>sador</title>
</head> </head>
<body> <body>
<div id="container"> <div id="container">
<div> <div>
@ -28,4 +30,5 @@
</div> </div>
</div> </div>
</body> </body>
</html> </html>

23
js/commands.js
View File

@ -15,7 +15,7 @@ const COMMANDS = [
} }
], ],
output: (command) => !!command output: (command) => !!command
? getCommandHelp(command) ? getCommandHelp(command.toLowerCase())
: COMMANDS : COMMANDS
.map(c => `${c.name}: ${c.description}`) .map(c => `${c.name}: ${c.description}`)
.join('\n') .join('\n')
@ -31,7 +31,7 @@ const COMMANDS = [
description: 'music genre', description: 'music genre',
required: false, required: false,
multiword: true, multiword: true,
check: (genre) => !!genre && !Object.keys(MUSIC_METADATA).includes(genre) check: (genre) => !!genre && !getGenre(genre)
? "no informations about this music genre, run 'music' command to find available genres" ? "no informations about this music genre, run 'music' command to find available genres"
: null : null
} }
@ -42,10 +42,13 @@ const COMMANDS = [
return !!genre return !!genre
? getGenreHelp(genre) ? getGenreHelp(genre)
: ` : `
if you want to get more info about specific genre, use <b>music [name/alias]</b>
i am listening to these music genres: i am listening to these music genres:
${Object.keys(MUSIC_METADATA) ${MUSIC_METADATA
.map(genre => `${genre} - more info: 'music ${genre}'`) .map(genre_data => !!genre_data.aliases?.length
? `${genre_data.name} (aliases: ${genre_data.aliases.join(', ')})`
: genre_data.name)
.join('\n')} .join('\n')}
` `
} }
@ -174,18 +177,24 @@ const COMMANDS = [
] ]
function getGenreHelp(genreName) { function getGenreHelp(genreName) {
const genre = MUSIC_METADATA[genreName]; const genre = getGenre(genreName)
if (!genre) return 'music: no informations about this music genre'; if (!genre) return 'music: no informations about this music genre';
return ` return `
i enjoy listening to ${genreName}. i enjoy listening to ${genre.name}.
example ${genreName} artists/bands that i am listening to: example ${genreName} artists/bands that i am listening to:
${genre.join('\n')} ${genre.artists.join('\n')}
` `
} }
function getGenre(genreName) {
return MUSIC_METADATA.find(genre =>
genre.name === genreName ||
genre.aliases.includes(genreName));
}
function getCommandHelp(commandName) { function getCommandHelp(commandName) {
const command = COMMANDS.find(c => c.name === commandName) const command = COMMANDS.find(c => c.name === commandName)

53
js/data.js
View File

@ -3,28 +3,42 @@ const URL_REGEX = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9(
const LINKS = { const LINKS = {
'gitea': 'https://git.sador.me/sadorowo', 'gitea': 'https://git.sador.me/sadorowo',
'instagram': 'https://instagram.com/sadorowo', 'instagram': 'https://instagram.com/sadorowo',
'immich': 'https://photos.sador.me/', 'immich (self-hosted photo hosting)': 'https://photos.sador.me/',
'email': 'mailto:contact@sador.me' 'email': 'mailto:contact@sador.me'
} }
const MUSIC_METADATA = { const MUSIC_METADATA = [
'heavy metal': [ {
name: 'heavy metal',
aliases: ['hm', 'heavy'],
artists: [
'Poisonblack', 'Poisonblack',
'Metallica' 'Metallica'
], ]
'gothic metal': [ },
{
name: 'gothic metal',
aliases: ['gm', 'goth', 'gothic'],
artists: [
'Draconian', 'Draconian',
'Beseech', 'Beseech',
'To/Die/For', 'To/Die/For',
'For My Pain...', 'For My Pain...',
'Charon',
'Entwine' 'Entwine'
], ]
'death suicidal black metal': [ },
'minuta agonii', {
name: 'depressive suicidal black metal',
aliases: ['dsbm'],
artists: [
'минута агонии',
'Decalius' 'Decalius'
], ]
'black metal': [ },
{
name: 'black metal',
aliases: ['bm', 'black'],
artists: [
'Behemoth', 'Behemoth',
'Venom', 'Venom',
'Mgła', 'Mgła',
@ -32,12 +46,21 @@ const MUSIC_METADATA = {
'Bathory', 'Bathory',
'Carpathian Forest', 'Carpathian Forest',
'Darkthrone' 'Darkthrone'
], ]
'nu metal': [ },
{
name: 'nu metal',
aliases: ['nm', 'nu'],
artists: [
'Slipknot', 'Slipknot',
'Evanescence' 'Evanescence'
], ]
'other genres': [ },
{
name: 'other genres',
aliases: [],
artists: [
'Rammstein' 'Rammstein'
] ]
} }
]