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