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">
<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="" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="" />
<link rel="stylesheet" href="" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="./styles.css" />
NEKERAFA's social links
<main class="container">
<h1>NEKERAFA's social links</h1>
<li><a href=""><i class="fa-solid fa-rss"></i> My Website:</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:</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>
<li><a href="" role="button"><i class="fa-solid fa-rss"></i> My Website:</a></li>
<li><a href="" role="button"><i class="fa-solid fa-comment-dots"></i> Matrix:</a></li>
<li><a href="" role="button"><i class="fa-brands fa-discord"></i> Discord: NEKERAFA#8624</a></li>
<li><a href="" role="button"><i class="fa-brands fa-telegram"></i> Telegram: @nekerafa</a></li>
<li><a href="" role="button"><i class="fa-brands fa-twitter"></i> Twitter: @nekerafa_dev</a></li>
<li><a rel="me" href="" role="button"><i class="fa-brands fa-mastodon"></i> Mastodon:</a></li>
<li><a rel="me" href="" role="button"><i class="fa-brands fa-mastodon"></i> Mastodon (GAL):</a></li>
<li><a href="" role="button"><i class="fa-brands fa-twitch"></i> Twitch: NEKERAFA</a></li>
<li><a href=""role="button"><i class="fa-brands fa-youtube"></i> YouTube: OoNEKERAFAoO</a></li>
<li><a href="" role="button"><i class="fa-brands fa-linkedin"></i> LinkedIn: rafael_alcalde_azpiazu</a></li>
<li><a href="" role="button"><i class="fa-brands fa-github"></i> GitHub: NEKERAFA</a></li>
<li><a href="" role="button"><i class="fa-brands fa-gitlab"></i> GitLab: NEKERAFA</a></li>
<p>The content of this web is licensed under <a href="">GNU General Public License v3.0 (GPLv3)</a>.</p>
<p>Layout designed with <a href="">Pico.css</a>, under MIT Licensed</p>
<p>All icons are under <a href=""><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=""><i class="fa-brands fa-github"></i> GitHub</a></p>

styles.css Normal file
View File

@ -0,0 +1,71 @@
@import url('');
/* Green Light scheme (Default) */
/* Can be forced with 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;