Added styles and content

This commit is contained in:
Rafael Alcalde Azpiazu 2022-08-30 21:38:16 +02:00
parent a8bd67940c
commit dac2c1cf90
No known key found for this signature in database
GPG Key ID: 98FF8C943C676B75
2 changed files with 99 additions and 17 deletions

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="es">
<html lang="en">
<head>
<title>NEKERAFA's social links</title>
@ -7,24 +7,35 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<header>
NEKERAFA's social links
</header>
<main class="container">
<h1>NEKERAFA's social links</h1>
<main>
<ul>
<li><a href=""><i class="fa-solid fa-rss"></i> My Website: nekerafa.dev</a></li>
<li><a href=""><i class="fa-brands fa-twitter"></i> Twitter: @nekerafa_dev</a></li>
<li><a href=""><i class="fa-brands fa-mastodon"></i> Mastodon: @LordGomo@tech.lgbt</a></li>
<li><a href=""><i class="fa-brands fa-twitch"></i> Twitch: NEKERAFA</a></li>
<li><a href=""><i class="fa-brands fa-youtube"></i> YouTube: OoNEKERAFAoO</a></li>
<li><a href=""><i class="fa-brands fa-linkedin"></i> LinkedIn: rafael_alcalde_azpiazu</a></li>
<li><a href=""><i class="fa-brands fa-github"></i> GitHub: NEKERAFA</a></li>
<li><a href=""><i class="fa-brands fa-gitlab"></i> GitLab: NEKERAFA</a></li>
</ul>
</main>
<ul>
<li><a href="https://nekerafa.dev" role="button"><i class="fa-solid fa-rss"></i> My Website: nekerafa.dev</a></li>
<li><a href="https://matrix.to/#/@nekerafa:matrix.org" role="button"><i class="fa-solid fa-comment-dots"></i> Matrix: @nekerafa:matrix.org</a></li>
<li><a href="https://discord.com/users/NEKERAFA#8624" role="button"><i class="fa-brands fa-discord"></i> Discord: NEKERAFA#8624</a></li>
<li><a href="https://t.me/nekerafa" role="button"><i class="fa-brands fa-telegram"></i> Telegram: @nekerafa</a></li>
<li><a href="https://twitter.com/nekerafa_dev" role="button"><i class="fa-brands fa-twitter"></i> Twitter: @nekerafa_dev</a></li>
<li><a rel="me" href="https://tech.lgbt/@nekerafa" role="button"><i class="fa-brands fa-mastodon"></i> Mastodon: @nekerafa@tech.lgbt</a></li>
<li><a rel="me" href="https://mastodon.gal/@nekerafa" role="button"><i class="fa-brands fa-mastodon"></i> Mastodon (GAL): @nekerafa@mastodon.gal</a></li>
<li><a href="https://twitch.tv/NEKERAFA" role="button"><i class="fa-brands fa-twitch"></i> Twitch: NEKERAFA</a></li>
<li><a href="https://youtube.com/OoNEKERAFAoO"role="button"><i class="fa-brands fa-youtube"></i> YouTube: OoNEKERAFAoO</a></li>
<li><a href="https://www.linkedin.com/in/rafael-alcalde-azpiazu" role="button"><i class="fa-brands fa-linkedin"></i> LinkedIn: rafael_alcalde_azpiazu</a></li>
<li><a href="https://github.com/NEKERAFA" role="button"><i class="fa-brands fa-github"></i> GitHub: NEKERAFA</a></li>
<li><a href="https://gitlab.com/NEKERAFA" role="button"><i class="fa-brands fa-gitlab"></i> GitLab: NEKERAFA</a></li>
</ul>
<article>
<p>The content of this web is licensed under <a href="https://www.gnu.org/licenses/gpl-3.0.html">GNU General Public License v3.0 (GPLv3)</a>.</p>
<p>Layout designed with <a href="https://picocss.com/">Pico.css</a>, under MIT Licensed</p>
<p>All icons are under <a href="https://fontawesome.com/"><i class="fa-solid fa-font-awesome"></i> Font awesome license</a>, brand icons are trademarks of their repective owners.</p>
<p>Source code on <a href="https://github.com/NEKERAFA/socials.nekerafa.dev"><i class="fa-brands fa-github"></i> GitHub</a></p>
</article>
</main>
</body>
</html>

71
styles.css Normal file
View File

@ -0,0 +1,71 @@
@import url('https://fonts.googleapis.com/css2?family=Comfortaa&display=swap');
/* Green Light scheme (Default) */
/* Can be forced with data-theme="light" */
[data-theme="light"],
:root:not([data-theme="dark"]) {
--primary: #43a047;
--primary-hover: #388e3c;
--primary-focus: rgba(67, 160, 71, 0.125);
--primary-inverse: #FFF;
}
/* Green Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--primary: #43a047;
--primary-hover: #4caf50;
--primary-focus: rgba(67, 160, 71, 0.25);
--primary-inverse: #FFF;
}
}
/* Green Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme="dark"] {
--primary: #43a047;
--primary-hover: #4caf50;
--primary-focus: rgba(67, 160, 71, 0.25);
--primary-inverse: #FFF;
}
/* Green (Common styles) */
:root {
--form-element-active-border-color: var(--primary);
--form-element-focus-color: var(--primary-focus);
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
--font-family: 'Comfortaa', 'Ubuntu', sans-serif;
}
body {
font-family: 'Comfortaa', 'Ubuntu', sans-serif;
}
h1 {
text-align: center;
}
ul {
padding: 0 1.5em;
}
ul li {
list-style: none;
}
ul li a i {
margin-right: 0.5em;
font-size: 32px;
}
[role="button"] {
width: 100%;
display: flex;
flex-wrap: wrap;
text-align: left;
align-items: center;
margin-bottom: 2em;
padding: 1.5em 1em;
}