more layout improvements
This commit is contained in:
parent
9722cfbaf8
commit
6f0e10b6e9
3 changed files with 22 additions and 13 deletions
|
@ -54,7 +54,7 @@ title: sp-codes
|
|||
<input type="checkbox" id="menu"/>
|
||||
|
||||
<div class="items">
|
||||
<a class="logo mini fixed me-4" href="/{{locale}}/">
|
||||
<a class="logo mini me-4" href="/{{locale}}/">
|
||||
<img src="/img/sp-codes.svg" alt="sp-codes">
|
||||
</a>
|
||||
{%- for entry in collections.all | eleventyNavigation %}
|
||||
|
|
|
@ -9,7 +9,7 @@ eleventyNavigation:
|
|||
---
|
||||
|
||||
<div class="row py-5">
|
||||
<div class="col-12 col-lg-4 my-3 my-lg-0 fill-col-inner">
|
||||
<div class="col-12 col-lg-4 mb-4 mb-lg-0 fill-col-inner">
|
||||
<div class="logo huge animated">
|
||||
{% include "logo-animated.html" %}
|
||||
</div>
|
||||
|
@ -31,12 +31,12 @@ eleventyNavigation:
|
|||
</div>
|
||||
|
||||
<div class="row py-5">
|
||||
<div class="col-12 col-lg-4 col-12 my-3 my-lg-0 fill-col-inner order-lg-1">
|
||||
<div class="col-12 col-lg-4 mb-4 mb-lg-0 fill-col-inner order-lg-1">
|
||||
<div class="me-profile">
|
||||
<img src="/img/samuel-1024.jpg" alt="Samuel Philipp">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-8 col-12">
|
||||
<div class="col-12 col-lg-8">
|
||||
<h1>Über mich</h1>
|
||||
<p class="mb-2">
|
||||
Mein Name ist Samuel Philipp und ich bin Full-Stack-Developer und SysAdmin. In meiner Freizeit betreibe ich alle angebotenen Dienste von sp-codes. Wenn du mehr über mich erfahren möchtest, schau gerne auf meiner persönlichen Webseite vorbei:
|
||||
|
|
|
@ -60,11 +60,6 @@ p {
|
|||
max-width: 128px;
|
||||
max-height: 128px;
|
||||
|
||||
&.fixed {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
&.huge {
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
|
@ -72,16 +67,23 @@ p {
|
|||
max-height: 256px;
|
||||
}
|
||||
|
||||
&.mini.fixed {
|
||||
&.mini {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
@include media-breakpoint-down(lg) {
|
||||
.logo {
|
||||
max-width: 96px;
|
||||
max-height: 96px;
|
||||
max-width: 64px;
|
||||
max-height: 64px;
|
||||
|
||||
&.huge {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
max-width: 128px;
|
||||
max-height: 128px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -102,6 +104,13 @@ p {
|
|||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
.me-profile {
|
||||
height: 128px;
|
||||
width: 128px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
background-color: #111;
|
||||
|
|
Loading…
Reference in a new issue