edpibu/Web
edpibu/Web
Archived
1
Fork 0
Code Issues Pull requests Releases 7 Activity

Added resume, responsive title

Browse source
This commit is contained in:
Edgar P. Burkhart 2021-12-28 15:13:54 +01:00
parent 9aa37bd2d9
commit cdf3333005
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
3 changed files with 102 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/index.html
View file

@ -12,6 +12,8 @@
<link rel="stylesheet" type="text/css" href="/static/css/main.css" />
<link rel="stylesheet" type="text/css" href="/static/css/index.css" />
<link rel="stylesheet" type="text/css" href="/static/css/mobile.css"
media="screen and (max-width: 42rem)" />
</head>
<body>
<h1>
@ -21,7 +23,7 @@
<strong>Burkhart</strong>
</h1>
<div class="biglinks">
<a href="#">
<a href="/cv/">
<img class="svg" src="/static/svg/rich--text--format.svg" alt="" />
Curriculum Vitae
</a>

41
src/static/css/index.css
View file

@ -1,49 +1,10 @@
h1 {
/* color: #8bc34a; */
font-size: 3.375rem;
line-height: 4rem;
font-weight: 300;
margin: 12px;
}
h1 strong {
font-weight: 600;
}
h1 img {
height: 4rem;
vertical-align: middle;
border: 5px solid white;
border-radius: 50%;
}
.biglinks a {
width: min(20rem, 100%);
}
a {
display: inline-block;
line-height: 24px;
padding: 12px 24px;
margin: 12px;
color: #f4f4f4;
background: #262626; /* Gray 90 */
text-decoration: none;
border: 2px solid transparent;
}
a>.svg {
.biglinks a>.svg {
width: 64px;
margin-top: 12px;
margin-bottom: 32px;
display: block;
}
a:hover {
background: #333333; /* Gray 90 Hover */
}
a:active {
background: #525252; /* Gray 70 */
}
a:focus {
border: 2px solid white;
}

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

@ -2,13 +2,110 @@ html {
color: #ffffff;
font-family: Inter V, sans-serif;
background: #161616; /* Gray 100 */
padding: 24px;
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-size: 1rem;
line-height: 1.375rem;
font-weight: 400;
margin: 24px;
}
body > div {
margin: 24px;
}
body > .content {
text-align: justify;
}
.svg {
filter: invert(100%);
}
h1,h2,h3,h4,h5,h6 {
margin: 0;
}
h1 {
/* color: #8bc34a; */
font-size: 3.375rem;
line-height: 4rem;
font-weight: 300;
margin: 24px;
}
h1 strong {
font-weight: 600;
}
h1 img {
height: 4rem;
vertical-align: middle;
border: 5px solid white;
border-radius: 50%;
}
h2 {
font-size: 2.625rem;
line-height: 3.125rem;
font-weight: 300;
}
h3 {
font-size: 2rem;
line-height: 2.5rem;
font-weight: 400;
}
h4 {
font-size: 1.75rem;
line-height: 2.25rem;
font-weight: 400;
}
h5 {
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 400;
}
h6 {
font-size: 1rem;
line-height: 1.375rem;
font-weight: 600;
}
nav {
margin: 12px;
}
a {
display: inline-block;
line-height: 24px;
padding: 12px 24px;
margin: 12px;
color: #f4f4f4;
background: #262626; /* Gray 90 */
text-decoration: none;
border: 2px solid transparent;
}
a:hover {
background: #333333; /* Gray 90 Hover */
}
a:active {
background: #525252; /* Gray 70 */
}
a:focus {
border: 2px solid white;
}
ul {
list-style-type: square;
padding-left: 24px;
margin: 12px 0;
}
ul li {
margin-bottom: .25rem;
}
sup {
vertical-align: top;
line-height: 1em;
}