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

18
css/style.css
View File

@ -32,7 +32,7 @@ body {
width: 100%; width: 100%;
} }
#container > * { #container>* {
width: 50%; width: 50%;
} }
@ -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;
} }
@ -95,7 +99,7 @@ input {
gap: 5px; gap: 5px;
} }
.image-grid > * { .image-grid>* {
max-width: 50%; max-width: 50%;
max-height: 50%; max-height: 50%;
} }
@ -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;
} }

3
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>

5
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,12 +13,13 @@
<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>
<h1>welcome to my website</h1> <h1>welcome to my website</h1>
<h2 id="switch_theme">switch theme</h2> <h2 id="switch_theme">switch theme</h2>
<p>press <kbd>Enter</kbd> to run command</p> <p>press <kbd>Enter</kbd> to run command</p>
<p>use <span id="help">'help'</span> to list all commands</p> <p>use <span id="help">'help'</span> to list all commands</p>
<span>[guest@website ~]$ </span> <span>[guest@website ~]$ </span>
@ -28,4 +30,5 @@
</div> </div>
</div> </div>
</body> </body>
</html> </html>

31
js/commands.js
View File

@ -15,10 +15,10 @@ 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')
}, },
{ {
name: 'music', name: 'music',
@ -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,11 +42,14 @@ 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
.join('\n')} ? `${genre_data.name} (aliases: ${genre_data.aliases.join(', ')})`
: genre_data.name)
.join('\n')}
` `
} }
}, },
@ -146,7 +149,7 @@ const COMMANDS = [
target: '_blank', target: '_blank',
rel: 'noopener noreferrer', rel: 'noopener noreferrer',
href: url, href: url,
}).click(); }).click();
return '' return ''
} }
@ -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)

93
js/data.js
View File

@ -3,41 +3,64 @@ 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': [ {
'Poisonblack', name: 'heavy metal',
'Metallica' aliases: ['hm', 'heavy'],
], artists: [
'gothic metal': [ 'Poisonblack',
'Draconian', 'Metallica'
'Beseech', ]
'To/Die/For', },
'For My Pain...', {
'Charon', name: 'gothic metal',
'Entwine' aliases: ['gm', 'goth', 'gothic'],
], artists: [
'death suicidal black metal': [ 'Draconian',
'minuta agonii', 'Beseech',
'Decalius' 'To/Die/For',
], 'For My Pain...',
'black metal': [ 'Entwine'
'Behemoth', ]
'Venom', },
'Mgła', {
'Watain', name: 'depressive suicidal black metal',
'Bathory', aliases: ['dsbm'],
'Carpathian Forest', artists: [
'Darkthrone' 'минута агонии',
], 'Decalius'
'nu metal': [ ]
'Slipknot', },
'Evanescence' {
], name: 'black metal',
'other genres': [ aliases: ['bm', 'black'],
'Rammstein' artists: [
] 'Behemoth',
} 'Venom',
'Mgła',
'Watain',
'Bathory',
'Carpathian Forest',
'Darkthrone'
]
},
{
name: 'nu metal',
aliases: ['nm', 'nu'],
artists: [
'Slipknot',
'Evanescence'
]
},
{
name: 'other genres',
aliases: [],
artists: [
'Rammstein'
]
}
]