Added resume, responsive title
This commit is contained in:
parent
9aa37bd2d9
commit
cdf3333005
3 changed files with 102 additions and 42 deletions
|
@ -12,6 +12,8 @@
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="/static/css/main.css" />
|
<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/index.css" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="/static/css/mobile.css"
|
||||||
|
media="screen and (max-width: 42rem)" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>
|
<h1>
|
||||||
|
@ -21,7 +23,7 @@
|
||||||
<strong>Burkhart</strong>
|
<strong>Burkhart</strong>
|
||||||
</h1>
|
</h1>
|
||||||
<div class="biglinks">
|
<div class="biglinks">
|
||||||
<a href="#">
|
<a href="/cv/">
|
||||||
<img class="svg" src="/static/svg/rich--text--format.svg" alt="" />
|
<img class="svg" src="/static/svg/rich--text--format.svg" alt="" />
|
||||||
Curriculum Vitae
|
Curriculum Vitae
|
||||||
</a>
|
</a>
|
||||||
|
|
|
@ -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 {
|
.biglinks a {
|
||||||
width: min(20rem, 100%);
|
width: min(20rem, 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
.biglinks a>.svg {
|
||||||
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 {
|
|
||||||
width: 64px;
|
width: 64px;
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
margin-bottom: 32px;
|
margin-bottom: 32px;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
a:hover {
|
|
||||||
background: #333333; /* Gray 90 Hover */
|
|
||||||
}
|
|
||||||
a:active {
|
|
||||||
background: #525252; /* Gray 70 */
|
|
||||||
}
|
|
||||||
a:focus {
|
|
||||||
border: 2px solid white;
|
|
||||||
}
|
|
||||||
|
|
|
@ -2,13 +2,110 @@ html {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-family: Inter V, sans-serif;
|
font-family: Inter V, sans-serif;
|
||||||
background: #161616; /* Gray 100 */
|
background: #161616; /* Gray 100 */
|
||||||
padding: 24px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
*, *::before, *::after {
|
*, *::before, *::after {
|
||||||
box-sizing: border-box;
|
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 {
|
.svg {
|
||||||
filter: invert(100%);
|
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;
|
||||||
|
}
|
||||||
|
|
Reference in a new issue