edpibu/web2.0
1
Fork 0
Code Issues Activity

Update layout ; remove navbar

Browse source
This commit is contained in:
Edgar P. Burkhart 2023-03-06 12:23:20 +01:00
parent 43dd909d0c
commit 8e0492bde6
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
2 changed files with 44 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/index.html
View file

@ -28,14 +28,11 @@
crossorigin /> crossorigin />
</head> </head>
<body> <body>
<nav>
<a href="/">
<img class="logo" width="32" height="32" src="static/svg/logo.svg" alt="" />
</a>
</nav>
<div class="info"> <div class="info">
<h1>Edgar P. <strong>Burkhart</strong></h1> <div class="title">
<img class="logo" width="64" height="64" src="static/svg/logo.svg" alt="" />
<h1>Edgar P. <strong>Burkhart</strong></h1>
</div>
<div class="block img-block"> <div class="block img-block">
<img srcset="static/img/pic1.webp, static/img/pic1x2.webp 2x" alt="" /> <img srcset="static/img/pic1.webp, static/img/pic1x2.webp 2x" alt="" />

79
src/static/css/main.css
View file

@ -23,19 +23,18 @@
--bl-lh: 2rem; --bl-lh: 2rem;
--bl-gap: 1rem; --bl-gap: 1rem;
--navh: calc(var(--bl-lh) + 2 * var(--bl-gap));
} }
body { body {
font-family: "Inter var", "Inter", sans-serif; font-family: "Inter var", "Inter", sans-serif;
color: var(--text); color: var(--text);
margin: auto; margin: auto;
margin-top: var(--navh);
padding: var(--gap); padding: var(--gap);
font-weight: 350; font-weight: 350;
font-feature-settings: "ss01", "ss02", "ss03", "cv05", "cv08"; font-feature-settings: "ss01", "ss02", "ss03", "cv05", "cv08";
max-width: var(--maxw); max-width: var(--maxw);
display: grid; display: grid;
grid-template-columns: 1fr;
grid-template-columns: var(--colw) 1fr; grid-template-columns: var(--colw) 1fr;
grid-gap: var(--colgap); grid-gap: var(--colgap);
} }
@ -44,20 +43,53 @@ body {
column-gap: var(--gap); column-gap: var(--gap);
} */ } */
body > div.info {grid-column: 1} body > div.info {grid-column: 1}
body > div.cv {grid-column: 2 / -1} body > div.cv {grid-column: 1}
@media (max-width: 40rem) { div.title > img {
body {grid-template-columns: 1fr} margin-top: 2rem;
body > div.cv {grid-column: 1} }
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 { h1 {
font-size: 3rem; font-size: 3rem;
letter-spacing: -.1rem; letter-spacing: -.1rem;
} }
h2 {font-size: 2.3rem} h2 {font-size: 2.3rem}
h3 {font-size: 1.7rem} h3 {font-size: 1.7rem}
h4, h5, h6 {font-weight: 700} h4, h5, h6 {
font-weight: 700;
margin: 0;
}
h4 {font-size: 1.2rem} h4 {font-size: 1.2rem}
h5 {font-size: 1rem} h5 {font-size: 1rem}
h6 {font-size: .8rem} h6 {font-size: .8rem}
@ -72,37 +104,6 @@ a {
} }
a:hover {text-decoration: underline;} 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: "–"} ul {list-style-type: "–"}
ol {list-style-type: decimal-leading-zero} ol {list-style-type: decimal-leading-zero}
li {padding-left: calc(var(--gap) / 2)} li {padding-left: calc(var(--gap) / 2)}