Remake frontend
This commit is contained in:
Augusto Gunsch
parent
84381f128b
commit
c7a26b42c6
|
|
@ -7,146 +7,83 @@
|
|||
*/
|
||||
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
background-color: #F2F2FF;
|
||||
display: flex;
|
||||
margin: 1em;
|
||||
width: 100%;
|
||||
border: 1px solid black;
|
||||
font-family: "Noto Sans Mono", "Monaco", serif;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Navigation bar */
|
||||
|
||||
nav {
|
||||
background-color: #255F85;
|
||||
body header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-family: "Noto Serif Display", "American Typewriter", serif;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
header nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin 2rem;
|
||||
margin-right: 4rem;
|
||||
}
|
||||
|
||||
nav a {
|
||||
width: 100%;
|
||||
padding: .5rem 3rem;
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
box-sizing: border-box;
|
||||
margin: 1rem;
|
||||
font-size: 1.2rem;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
nav a.selected {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/* Main content */
|
||||
|
||||
h2 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
background-color: white;
|
||||
.button {
|
||||
background-color: #17466E;
|
||||
color: #F2F2FF;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
overflow: auto;
|
||||
background-color: #fbfce3;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
main div {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
|
||||
.icon {
|
||||
margin: 1em;
|
||||
margin-left: 0;
|
||||
padding-left: 2em;
|
||||
main figure {
|
||||
width: 40%;
|
||||
margin: 2rem;
|
||||
display: block;
|
||||
position: relative;
|
||||
font-size: 1.5rem;
|
||||
right: 4rem;
|
||||
bottom: 1rem;
|
||||
}
|
||||
|
||||
.icon::before {
|
||||
content: ' ';
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: .5em;
|
||||
}
|
||||
|
||||
.icon code {
|
||||
overflow-x: auto;
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
#monero::before {
|
||||
background-image: url('monero.png');
|
||||
}
|
||||
|
||||
#github::before {
|
||||
background-image: url('github.png');
|
||||
}
|
||||
|
||||
#linkedin::before {
|
||||
background-image: url('linkedin.png');
|
||||
}
|
||||
|
||||
#email::before {
|
||||
background-image: url('email.png');
|
||||
}
|
||||
|
||||
#matrix::before {
|
||||
background-image: url('matrix.png');
|
||||
}
|
||||
|
||||
/* Quote */
|
||||
|
||||
figure {
|
||||
background-color: white;
|
||||
padding: 1em;
|
||||
margin: 0;
|
||||
border-radius: 10px;
|
||||
border: 1px dashed #888;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
main figure figcaption {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
/* Mobile */
|
||||
|
||||
@media only screen and (max-width: 1000px) {
|
||||
body {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
nav a {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
nav {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
main span {
|
||||
text-align: right;
|
||||
font-size: 3rem;
|
||||
position: relative;
|
||||
bottom: 5rem;
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: #EDAF1F;
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,25 +7,26 @@
|
|||
<link rel="icon" href="{{ url_for('static', filename='icon.png') }}"/>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Augusto<br>Gunsch</h1>
|
||||
|
||||
<nav>
|
||||
<a href='contact'>Contact</a>
|
||||
<a href='about'>About</a>
|
||||
<a href='projects' class='button'>Projects</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div id="content">
|
||||
{% autoescape false %}
|
||||
{{ body }}
|
||||
{% endautoescape %}
|
||||
</div>
|
||||
<div>
|
||||
<figure>
|
||||
<blockquote>{{ quote }}</blockquote>
|
||||
<blockquote>
|
||||
{{ quote }}
|
||||
</blockquote>
|
||||
<figcaption>{{ author }}</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<span>
|
||||
I turn <mark>ideas</mark><br>into<br><mark>software</mark>.
|
||||
</span>
|
||||
</main>
|
||||
<nav>
|
||||
<a onclick="loadPage(this)" class="selected" id="index">Home</a>
|
||||
<a onclick="loadPage(this)" id="projects">Projects</a>
|
||||
<!--<a onclick="loadPage(this)" id="articles">Articles</a>-->
|
||||
<!--<a onclick="loadPage(this)" id="library">Library</a>-->
|
||||
</nav>
|
||||
</body>
|
||||
<script src="{{ url_for('static', filename='index.js') }}"></script>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue