From 8e0492bde6e4ad7130f8c539352e36c29d4e1653 Mon Sep 17 00:00:00 2001 From: "Edgar P. Burkhart" Date: Mon, 6 Mar 2023 12:23:20 +0100 Subject: [PATCH] Update layout ; remove navbar --- src/index.html | 11 +++--- src/static/css/main.css | 79 +++++++++++++++++++++-------------------- 2 files changed, 44 insertions(+), 46 deletions(-) diff --git a/src/index.html b/src/index.html index 006beb0..3c87f3a 100644 --- a/src/index.html +++ b/src/index.html @@ -28,14 +28,11 @@ crossorigin /> - -
-

Edgar P. Burkhart

+
+ +

Edgar P. Burkhart

+
diff --git a/src/static/css/main.css b/src/static/css/main.css index be9ebdc..1ec06c2 100644 --- a/src/static/css/main.css +++ b/src/static/css/main.css @@ -23,19 +23,18 @@ --bl-lh: 2rem; --bl-gap: 1rem; - --navh: calc(var(--bl-lh) + 2 * var(--bl-gap)); } body { font-family: "Inter var", "Inter", sans-serif; color: var(--text); margin: auto; - margin-top: var(--navh); padding: var(--gap); font-weight: 350; font-feature-settings: "ss01", "ss02", "ss03", "cv05", "cv08"; max-width: var(--maxw); display: grid; + grid-template-columns: 1fr; grid-template-columns: var(--colw) 1fr; grid-gap: var(--colgap); } @@ -44,20 +43,53 @@ body { column-gap: var(--gap); } */ body > div.info {grid-column: 1} -body > div.cv {grid-column: 2 / -1} -@media (max-width: 40rem) { - body {grid-template-columns: 1fr} - body > div.cv {grid-column: 1} +body > div.cv {grid-column: 1} +div.title > img { + margin-top: 2rem; +} +h1 { + margin-top: 1rem; +} +@media (min-width: 40rem) { + body {grid-template-columns: var(--colw) 1fr} + body > div.cv {grid-column: 2 / -1} +} +@media (min-width: 70rem) { + h1 { + margin-top: 2rem; + } + div.title { + position: relative; + } + div.title > img { + position: absolute; + left: -5rem; + width: 4rem; + margin: 0; + } } -h1, h2, h3 {font-weight: 250} +h1, h2, h3 { + font-weight: 250; +} +h2 { + margin-top: 2rem; + margin-bottom: 1rem; +} +h3 { + margin-top: 1rem; + margin-bottom: .5rem; +} h1 { font-size: 3rem; letter-spacing: -.1rem; } h2 {font-size: 2.3rem} h3 {font-size: 1.7rem} -h4, h5, h6 {font-weight: 700} +h4, h5, h6 { + font-weight: 700; + margin: 0; +} h4 {font-size: 1.2rem} h5 {font-size: 1rem} h6 {font-size: .8rem} @@ -72,37 +104,6 @@ a { } a:hover {text-decoration: underline;} -nav { - position: fixed; - top: 0; - left: 0; - right: 0; - height: var(--navh); - line-height: var(--bl-lh); - background: var(--bg-00); - color: var(--text-00); - font-variant: small-caps; - white-space: nowrap; - overflow-x: auto; -} -nav > * { - height: var(--navh); - padding: var(--bl-gap); - padding-right: 0; - display: inline-block; - vertical-align: middle; -} -nav a { - color: inherit; -} -nav a.active { - font-weight: 550; -} -nav img { - height: var(--bl-lh); - width: var(--bl-lh); -} - ul {list-style-type: "–"} ol {list-style-type: decimal-leading-zero} li {padding-left: calc(var(--gap) / 2)}