diff --git a/public/assets/photo.jpg b/public/assets/photo.jpg new file mode 100644 index 0000000..d7efb5a Binary files /dev/null and b/public/assets/photo.jpg differ diff --git a/public/assets/styles.css b/public/assets/styles.css index e3c6539..d6b268a 100644 --- a/public/assets/styles.css +++ b/public/assets/styles.css @@ -96,15 +96,36 @@ main { } .header__logo { - width: 13rem; + width: 19rem; + height: 6rem; max-width: 100%; + position: relative; + display: flex; margin-right: 1rem; } +.header__logo a { + display: contents; +} +.header__logo a::before { + /* Make the link behave like display: block */ + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} .header__logo img { display: block; + filter: drop-shadow(0 0 3px #bbb); } +.header__photo { + margin-right: 1.5rem; + + border-radius: 7%; +} .header__aside { display: flex; @@ -185,13 +206,7 @@ footer { } /* Media queries */ -@media (max-width: 600px) { - body { - padding: 2rem 2rem 1rem; - } -} - -@media (max-width: 500px) { +@media (max-width: 680px) { .header { flex-direction: column; } @@ -210,6 +225,16 @@ footer { } } +@media (max-width: 600px) { + body { + padding: 2rem 2rem 1rem; + } + + .header__logo { + height: min(22vw, 6rem); + } +} + @media (max-width: 420px) { .linklist { -ms-grid-columns: 1fr; diff --git a/site/snippets/header.php b/site/snippets/header.php index 5c0c5b4..ac1bbbf 100644 --- a/site/snippets/header.php +++ b/site/snippets/header.php @@ -18,9 +18,13 @@

is('home')): ?> + lukas bestle - lukas bestle + + + lukas bestle +