edpibu/web2.0
1
Fork 0
Code Issues Activity

Use css variables

Browse source
This commit is contained in:
Edgar P. Burkhart 2022-05-08 09:50:54 +02:00
parent 338de85455
commit b4a7562956
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
1 changed files with 25 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -15,28 +15,34 @@
--bg-01: #dedede;
--link: #0066ffde;
--colw: 20rem;
--gap: 1rem;
--maxw: 90rem;
--bl-lh: 2rem;
--navh: calc(var(--bl-lh) + 2 * var(--gap));
}
body {
font-family: "Inter var experimental", "Inter var", "Inter", sans-serif;
color: var(--text);
margin: auto;
margin-top: 4rem;
padding: 1rem;
margin-top: var(--navh);
padding: var(--gap);
font-weight: 350;
font-feature-settings: "ss01", "ss02", "ss03", "cv05", "cv08";
max-width: 90rem;
max-width: var(--maxw);
display: grid;
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
grid-gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(var(--colw), 1fr));
grid-gap: var(--gap);
}
body > div {
column-width: 20rem;
column-gap: 1rem;
column-width: var(--colw);
column-gap: var(--gap);
}
body > div.info {grid-column: 1}
body > div.cv {grid-column: 2 / -1}
@media (max-width: 40rem) {
@media (max-width: calc(2 * var(--colw) + 3 * var(--gap))) {
body {grid-template-columns: 1fr}
body > div.cv {grid-column: 1}
}
@ -53,7 +59,7 @@ h4 {font-size: 1.2rem}
h5 {font-size: 1rem}
h6 {font-size: .8rem}
p {line-height: 1.3rem}
p, ul, ol, dl {line-height: 1.3rem}
em {font-variation-settings: 'slnt' -5}
strong {font-weight: 550}
@ -68,8 +74,8 @@ nav {
top: 0;
left: 0;
right: 0;
height: 4rem;
line-height: 2rem;
height: var(--navh);
line-height: var(--bl-lh);
background: var(--bg-00);
color: var(--text-00);
font-variant: small-caps;
@ -77,8 +83,8 @@ nav {
overflow-x: auto;
}
nav > * {
height: 4rem;
padding: 1rem;
height: var(--navh);
padding: var(--gap);
padding-right: 0;
display: inline-block;
vertical-align: middle;
@ -90,12 +96,12 @@ nav a.active {
font-weight: 550;
}
nav img {
height: 2rem;
height: calc(var(--navh) - 2 * var(--gap));
}
ul {list-style-type: "–"}
ol {list-style-type: decimal-leading-zero}
li {padding-left: .5rem}
li {padding-left: calc(var(--gap) / 2)}
.img-block {
display: grid;
@ -113,7 +119,8 @@ footer {
background: var(--bg-01);
grid-column: 1 / -1;
text-align: center;
padding: 1rem;
line-height: 2rem;
margin: 0 -1rem -1rem -1rem;
padding: var(--gap);
line-height: var(--bl-lh);
margin: calc(-1 * var(--gap));
margin-top: 0;
}