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