Updated css and index file

This commit is contained in:
Andrea Foletto 2021-12-16 14:41:20 +01:00
parent 80366cd86e
commit 7596166533
2 changed files with 25 additions and 23 deletions

View File

@ -1,7 +1,7 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Null</title> <title>Andrea</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="author" content="andrewfoll@protonmail.com"/> <meta name="author" content="andrewfoll@protonmail.com"/>
<link rel="shortcut icon" href="./images/favicon.png"/> <link rel="shortcut icon" href="./images/favicon.png"/>
@ -9,18 +9,22 @@
</head> </head>
<body> <body>
<div id="container"> <div id="container">
<div id="banner">
A javascript free page!
</div>
<div id="hello-world"> <div id="hello-world">
<div id="command">$ echo "Hello world!"<span id="pipe">|</span></div> <span id="command">$ echo "Hello world!"</span>
<span id="pipe">&verbar;</span>
</div> </div>
<div> <div>
<nav id="links-nav" id="social-icons"> <nav id="links-nav" id="social-icons">
<a href="https://t.me/null_able"><img class="social-icon" alt="Telegram" src="./images/telegram.png"/></a> <a href="https://t.me/null_able"><img class="social-icon" alt="Telegram" src="./images/telegram.png"/></a>
<a href="https://gitlab.com/nullndr"><img class="social-icon" alt="gitlab" src="./images/gitlab.png"/></a> <a href="https://gitlab.com/nullndr"><img class="social-icon" alt="GitLab" src="./images/gitlab.png"/></a>
<a href="https://github.com/nullndr"><img class="social-icon" alt="github" src="./images/github.png"/></a> <a href="https://github.com/nullndr"><img class="social-icon" alt="GitHub" src="./images/github.png"/></a>
<a href="https://twitter.com/nullndr"><img class="social-icon" alt="Twitter" src="./images/twitter.png"/></a> <a href="https://twitter.com/nullndr"><img class="social-icon" alt="Twitter" src="./images/twitter.png"/></a>
<a href="mailto: andrea@yaaaw.it"><img class="social-icon" alt="Protonmail" src="./images/email.png"/></a> <a href="mailto: andrea@yaaaw.it"><img class="social-icon" alt="Protonmail" src="./images/email.png"/></a>
<a href="https://www.linkedin.com/in/andrea-foletto-5457b5187/"><img class="social-icon" alt="Linkedin" src="./images/linkedin.png"/></a> <a href="https://www.linkedin.com/in/andrea-foletto-5457b5187/"><img class="social-icon" alt="Linkedin" src="./images/linkedin.png"/></a>
<a href="./nullablepgpkey.pub"><img class="social-icon" alt="gpg key" src="./images/key.png"/></a> <a href="./nullablepgpkey.pub"><img class="social-icon" alt="GPG key" src="./images/key.png"/></a>
</nav> </nav>
</div> </div>
</div> </div>

View File

@ -1,5 +1,7 @@
* { * {
margin: 0;
padding: 0;
} }
body { body {
@ -15,32 +17,28 @@ body {
} }
#container { #container {
display: block;
width: auto; width: auto;
padding: 15px; }
#banner {
color: #d6d6d6;
font-family: 'Fira Mono', monospace;
text-align: center;
font-size: 2vh;
font-style: italic;
margin: 5px;
padding: 5px;
} }
#hello-world { #hello-world {
color: #d6d6d6; color: #d6d6d6;
font-family: 'Fira Mono', monospace; font-family: 'Fira Mono', monospace;
min-height: 4vh;
width: 100%;
max-height: 100px;
text-align: center; text-align: center;
max-width: 100%; font-size: 6vw;
min-width: 620px;
}
#command {
width: 100%;
max-height: 100px;
font-size: 5vw;
animation: linear;
} }
#pipe { #pipe {
animation: animate 1.5s linear infinite alternate; animation: animate 1.5s linear infinite alternate;
max-height: 1vh;
} }
@keyframes animate{ @keyframes animate{
@ -52,15 +50,15 @@ body {
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
padding: 5px;
margin: 5px;
} }
#links-nav > a { #links-nav a {
padding: 5px; padding: 5px;
} }
.social-icon { .social-icon {
max-height: 5vh; max-height: 5vh;
max-width: 5vw; max-width: 5vw;
min-height: 24px;
min-width: 24px;
} }