fix(layout): formatting & minor typing mistake + mobile layout
This commit is contained in:
parent
e79cd00a06
commit
2977478b0c
@ -32,7 +32,7 @@ body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#container > * {
|
||||
#container>* {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@ -57,7 +57,9 @@ ul.vertical li:not(:first-child)::before {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input, a, #result {
|
||||
input,
|
||||
a,
|
||||
#result {
|
||||
transition: background 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
@ -78,11 +80,13 @@ input {
|
||||
white-space: preserve;
|
||||
color: var(--color);
|
||||
|
||||
max-height: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
#switch_theme, #help {
|
||||
#switch_theme,
|
||||
#help {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -95,7 +99,7 @@ input {
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.image-grid > * {
|
||||
.image-grid>* {
|
||||
max-width: 50%;
|
||||
max-height: 50%;
|
||||
}
|
||||
@ -104,4 +108,8 @@ input {
|
||||
#container {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
#container>* {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@ -7,6 +7,7 @@ body.dark input {
|
||||
color: var(--background) !important;
|
||||
}
|
||||
|
||||
body.dark #result, body.dark a {
|
||||
body.dark #result,
|
||||
body.dark a {
|
||||
color: var(--background) !important;
|
||||
}
|
||||
@ -17,4 +17,5 @@
|
||||
<a onclick="history.back()">go back</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
@ -1,5 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
@ -12,12 +13,13 @@
|
||||
<link rel="icon" href="assets/logo.png">
|
||||
<title>sador</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
<div>
|
||||
<h1>welcome to my website</h1>
|
||||
<h2 id="switch_theme">switch theme</h2>
|
||||
|
||||
|
||||
<p>press <kbd>Enter</kbd> to run command</p>
|
||||
<p>use <span id="help">'help'</span> to list all commands</p>
|
||||
<span>[guest@website ~]$ </span>
|
||||
@ -28,4 +30,5 @@
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -15,10 +15,10 @@ const COMMANDS = [
|
||||
}
|
||||
],
|
||||
output: (command) => !!command
|
||||
? getCommandHelp(command)
|
||||
? getCommandHelp(command.toLowerCase())
|
||||
: COMMANDS
|
||||
.map(c => `${c.name}: ${c.description}`)
|
||||
.join('\n')
|
||||
.map(c => `${c.name}: ${c.description}`)
|
||||
.join('\n')
|
||||
},
|
||||
{
|
||||
name: 'music',
|
||||
@ -31,7 +31,7 @@ const COMMANDS = [
|
||||
description: 'music genre',
|
||||
required: false,
|
||||
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"
|
||||
: null
|
||||
}
|
||||
@ -42,11 +42,14 @@ const COMMANDS = [
|
||||
return !!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:
|
||||
|
||||
${Object.keys(MUSIC_METADATA)
|
||||
.map(genre => `${genre} - more info: 'music ${genre}'`)
|
||||
.join('\n')}
|
||||
${MUSIC_METADATA
|
||||
.map(genre_data => !!genre_data.aliases?.length
|
||||
? `${genre_data.name} (aliases: ${genre_data.aliases.join(', ')})`
|
||||
: genre_data.name)
|
||||
.join('\n')}
|
||||
`
|
||||
}
|
||||
},
|
||||
@ -146,7 +149,7 @@ const COMMANDS = [
|
||||
target: '_blank',
|
||||
rel: 'noopener noreferrer',
|
||||
href: url,
|
||||
}).click();
|
||||
}).click();
|
||||
|
||||
return ''
|
||||
}
|
||||
@ -174,18 +177,24 @@ const COMMANDS = [
|
||||
]
|
||||
|
||||
function getGenreHelp(genreName) {
|
||||
const genre = MUSIC_METADATA[genreName];
|
||||
const genre = getGenre(genreName)
|
||||
|
||||
if (!genre) return 'music: no informations about this music genre';
|
||||
|
||||
return `
|
||||
i enjoy listening to ${genreName}.
|
||||
i enjoy listening to ${genre.name}.
|
||||
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) {
|
||||
const command = COMMANDS.find(c => c.name === commandName)
|
||||
|
||||
|
||||
93
js/data.js
93
js/data.js
@ -3,41 +3,64 @@ const URL_REGEX = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9(
|
||||
const LINKS = {
|
||||
'gitea': 'https://git.sador.me/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'
|
||||
}
|
||||
|
||||
const MUSIC_METADATA = {
|
||||
'heavy metal': [
|
||||
'Poisonblack',
|
||||
'Metallica'
|
||||
],
|
||||
'gothic metal': [
|
||||
'Draconian',
|
||||
'Beseech',
|
||||
'To/Die/For',
|
||||
'For My Pain...',
|
||||
'Charon',
|
||||
'Entwine'
|
||||
],
|
||||
'death suicidal black metal': [
|
||||
'minuta agonii',
|
||||
'Decalius'
|
||||
],
|
||||
'black metal': [
|
||||
'Behemoth',
|
||||
'Venom',
|
||||
'Mgła',
|
||||
'Watain',
|
||||
'Bathory',
|
||||
'Carpathian Forest',
|
||||
'Darkthrone'
|
||||
],
|
||||
'nu metal': [
|
||||
'Slipknot',
|
||||
'Evanescence'
|
||||
],
|
||||
'other genres': [
|
||||
'Rammstein'
|
||||
]
|
||||
}
|
||||
const MUSIC_METADATA = [
|
||||
{
|
||||
name: 'heavy metal',
|
||||
aliases: ['hm', 'heavy'],
|
||||
artists: [
|
||||
'Poisonblack',
|
||||
'Metallica'
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'gothic metal',
|
||||
aliases: ['gm', 'goth', 'gothic'],
|
||||
artists: [
|
||||
'Draconian',
|
||||
'Beseech',
|
||||
'To/Die/For',
|
||||
'For My Pain...',
|
||||
'Entwine'
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'depressive suicidal black metal',
|
||||
aliases: ['dsbm'],
|
||||
artists: [
|
||||
'минута агонии',
|
||||
'Decalius'
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'black metal',
|
||||
aliases: ['bm', 'black'],
|
||||
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'
|
||||
]
|
||||
}
|
||||
]
|
||||
Loading…
Reference in New Issue
Block a user