more layout improvements
All checks were successful
Build and Deploy Website / Build Website (push) Successful in 52s
Build and Deploy Website / Deploy Website (push) Has been skipped
Build and Deploy Website / Deploy Dev Website (push) Successful in 10s

This commit is contained in:
Samuel Philipp 2024-03-29 03:22:57 +01:00
parent 9722cfbaf8
commit 6f0e10b6e9
3 changed files with 22 additions and 13 deletions

View file

@ -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 %}

View file

@ -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:

View file

@ -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;