manos/WWW
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Various fixes

Browse Source
This commit is contained in:
Manos Katsomallos 2019-12-31 21:27:21 +02:00
parent 7cffab96da
commit 47c663003e
2 changed files with 39 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
css/styles.css
View File

@ -19,18 +19,19 @@ h1, h2, h3, h4, h5, p {
#nav { #nav {
background-color: black; background-color: black;
position: fixed; position: fixed;
display: flex; display: block;
justify-content: center; justify-content: center;
top: 0; top: 0;
width: 100%; width: 100%;
z-index: 1; z-index: 1;
box-shadow: 0 0 0.1em dimgray; box-shadow: 0 0 0.1em dimgray;
text-align: center;
} }
#nav a, #nav-mini .menu a { #nav a, #nav-mini .menu a {
color: white; color: white;
display: block; display: inline-block;
float: center; vertical-align: middle;
font-family: sans-serif; font-family: sans-serif;
font-size: calc(0.75em + 0.05vw); font-size: calc(0.75em + 0.05vw);
font-weight: bold; font-weight: bold;
@ -60,6 +61,7 @@ h1, h2, h3, h4, h5, p {
} }
#nav-mini .menu a { #nav-mini .menu a {
display: block;
text-align: center; text-align: center;
padding: 1em 0 1em 0; padding: 1em 0 1em 0;
border-bottom: 0.1em solid dimgray; border-bottom: 0.1em solid dimgray;
@ -142,6 +144,11 @@ h1, h2, h3, h4, h5, p {
text-shadow: 0 0 0.1em black; text-shadow: 0 0 0.1em black;
} }
#home .social, #footer .social {
display: block;
justify-content: center;
}
#home .social a, #footer .social a { #home .social a, #footer .social a {
height: calc(1em + 1vw); height: calc(1em + 1vw);
width: calc(1em + 1vw); width: calc(1em + 1vw);
@ -152,15 +159,11 @@ h1, h2, h3, h4, h5, p {
text-decoration: none; text-decoration: none;
outline: 0; outline: 0;
margin: 0 1em; margin: 0 1em;
display: block; display: inline-block;
vertical-align: middle;
filter: invert(100%) drop-shadow(0 0 0.1em black); filter: invert(100%) drop-shadow(0 0 0.1em black);
} }
#home .social, #footer .social {
display: flex;
justify-content: center;
}
#home .social a:hover { #home .social a:hover {
filter: invert(90%) drop-shadow(0 0 0.1em black); filter: invert(90%) drop-shadow(0 0 0.1em black);
} }

52
index.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8">
<meta name="title" content="Manos Katsomallos" /> <meta name="title" content="Manos Katsomallos" />
<meta name="description" content="Computer scientist, problem solver, son of his father and not his brother."> <meta name="description" content="Computer scientist, problem solver, son of his father and not his brother.">
<meta name="keywords" content="manos katsomallos, emmanouil katsomallos, katsomallos"> <meta name="keywords" content="manos katsomallos, emmanouil katsomallos, katsomallos">
@ -14,34 +15,34 @@
<title>Manos Katsomallos</title> <title>Manos Katsomallos</title>
</head> </head>
<body> <body>
<nav id="nav"> <nav id="nav"
<a href="#home">Home</a> ><a href="#home">Home</a
<a href="#about">About</a> ><a href="#about">About</a
<a href="#experience">Experience</a> ><a href="#experience">Experience</a
<a href="#education">Education</a> ><a href="#education">Education</a
<a href="#contact">Contact</a> ><a href="#contact">Contact</a>
</nav> </nav>
<nav id="nav-mini"> <nav id="nav-mini">
<input type="checkbox" id="nav-ctrl"/> <input type="checkbox" id="nav-ctrl"/>
<label for="nav-ctrl"></label> <label for="nav-ctrl"></label>
<div class="menu"> <div class="menu"><!--
<a href="#home">Home</a> --><a href="#home">Home</a><!--
<a href="#about">About</a> --><a href="#about">About</a><!--
<a href="#experience">Experience</a> --><a href="#experience">Experience</a><!--
<a href="#education">Education</a> --><a href="#education">Education</a><!--
<a href="#contact">Contact</a> --><a href="#contact">Contact</a>
</div> </div>
</nav> </nav>
<div id="home"> <div id="home">
<div class="content"> <div class="content">
<div class="title">Manos Katsomallos</div> <div class="title">Manos Katsomallos</div>
<div class="subtitle">Computer scientist, problem solver,<br>son of his father and not his brother.</div> <div class="subtitle">Computer scientist, problem solver,<br>son of his father and not his brother.</div>
<div class="social"> <div class="social"><!--
<a class="email" href="mailto:manos@delkappa.com" target="_blank"></a> --><a class="email" href="mailto:manos@delkappa.com" target="_blank"></a><!--
<a class="github" href="https://github.com/delkappa" target="_blank"></a> --><a class="github" href="https://github.com/delkappa" target="_blank"></a><!--
<a class="ig" href="https://instagram.com/delkappa" target="_blank"></a> --><a class="ig" href="https://instagram.com/delkappa" target="_blank"></a><!--
<a class="in" href="https://linkedin.com/in/delkappa" target="_blank"></a> --><a class="in" href="https://linkedin.com/in/delkappa" target="_blank"></a><!--
<a class="tr" href="https://twitter.com/delkappa" target="_blank"></a> --><a class="tr" href="https://twitter.com/delkappa" target="_blank"></a>
</div> </div>
</div> </div>
</div> </div>
@ -189,17 +190,18 @@
</p> </p>
</div> </div>
<a class="button" href="https://cloud.delkappa.com/s/AXdRFidn8xKwPLC/download" target="_blank"> <a class="button" href="https://cloud.delkappa.com/s/AXdRFidn8xKwPLC/download" target="_blank">
<div class="icon"></div><div class="label">Download resume</div> <div class="icon"></div><!--
--><div class="label">Download resume</div>
</a> </a>
</div> </div>
</div> </div>
<footer id="footer"> <footer id="footer">
<div class="social"> <div class="social"><!--
<a class="email" href="mailto:manos@delkappa.com" target="_blank"></a> --><a class="email" href="mailto:manos@delkappa.com" target="_blank"></a><!--
<a class="github" href="https://github.com/delkappa" target="_blank"></a> --><a class="github" href="https://github.com/delkappa" target="_blank"></a><!--
<a class="ig" href="https://instagram.com/delkappa" target="_blank"></a> --><a class="ig" href="https://instagram.com/delkappa" target="_blank"></a><!--
<a class="in" href="https://linkedin.com/in/delkappa" target="_blank"></a> --><a class="in" href="https://linkedin.com/in/delkappa" target="_blank"></a><!--
<a class="tr" href="https://twitter.com/delkappa" target="_blank"></a> --><a class="tr" href="https://twitter.com/delkappa" target="_blank"></a>
</div> </div>
<div class="text">&copy; 2020 Manos Katsomallos</div> <div class="text">&copy; 2020 Manos Katsomallos</div>
</footer> </footer>