Make landing page text larger on big screens

This commit is contained in:
timvisee 2020-04-24 11:28:41 +02:00
parent 35a2f48637
commit e715ff8a38
No known key found for this signature in database
GPG Key ID: B8DB720BC383E172
4 changed files with 23 additions and 6 deletions

View File

@ -1,4 +1,5 @@
// Responsive sizes
$responsive-big: 1200px;
$responsive-small: 900px;
$responsive-mini: 550px;
$responsive-tiny: 425px;

View File

@ -21,6 +21,10 @@ header#headertron {
height: 2.5em;
}
.nav {
display: none;
}
.links {
display: flex;
align-content: flex-start;

View File

@ -40,6 +40,10 @@
header#headertron {
font-size: 1.6em;
.nav {
display: block;
}
.links {
justify-content: space-evenly;
@ -72,3 +76,9 @@
flex-direction: column;
}
}
@media (min-width: $responsive-big) {
header#headertron {
font-size: 3em;
}
}

View File

@ -8,12 +8,14 @@
<i>I am a developer</i><br>
<i>I consume coffee</i><br>
<i>I build & break software</i><br>
<div class="delimiter"></div>
<div class="links">
<a href="{{ get_url(path="@/projects.md") | safe }}">Projects</a>
<a href="{{ get_url(path="@/blog/_index.md") | safe }}">Blog</a>
<a href="{{ get_url(path="@/about.md#me-on-the-web") | safe }}">Me on the web</a>
<a href="{{ get_url(path="@/about.md") | safe }}">About</a>
<div class="nav">
<div class="delimiter"></div>
<div class="links">
<a href="{{ get_url(path="@/projects.md") | safe }}">Projects</a>
<a href="{{ get_url(path="@/blog/_index.md") | safe }}">Blog</a>
<a href="{{ get_url(path="@/about.md#me-on-the-web") | safe }}">Me on the web</a>
<a href="{{ get_url(path="@/about.md") | safe }}">About</a>
</div>
</div>
</header>
{% endblock headertron %}