Merge pull request 'Bring styling to index page' (#16) from styling-to-index into master

Reviewed-on: #16
This commit is contained in:
Benjamin 2023-02-12 17:59:02 +00:00
commit 29bdef01e2
4 changed files with 162 additions and 150 deletions

60
cv.css Normal file
View file

@ -0,0 +1,60 @@
h3 {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
aside {
margin-top: -0.6rem;
text-transform: uppercase;
opacity: 0.7;
letter-spacing: 0.05em;
line-height: 1;
}
section#publications span.journal,
section#conferences span.conference {
font-style: italic;
}
h2 {
border-bottom-width: 1px;
border-bottom-color: var(--accent);
border-bottom-style: solid;
}
@media print {
:root {
--primary: #000000;
--background: #ffffff;
--accent: #000000;
}
h2 {
border-bottom-width: 0.5pt;
}
html,
body {
max-width: initial;
font-size: 10pt;
padding: 0;
}
aside {
opacity: 1.0;
}
a::after {
display: none;
}
a:hover {
background: inherit;
}
@page {
margin: 25mm;
size: A4;
}
}

156
cv.html
View file

@ -5,6 +5,9 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="cv.css">
<meta name="description"
content="The curriculum vitae of Benjamin Stadlbauer including his professional background and education">
<meta property="og:title" content="The CV of Benjamin Stadlbauer">
@ -22,153 +25,6 @@
<meta name="theme-color" content="#ffffff">
<title>CV Benjamin Stadlbauer</title>
<style>
:root {
--white-neutral: #f4f4f9;
--white-hover: #ececff;
--black-neutral: #1a1a1c;
--black-hover: #282833;
--accent: #7a7a99;
--primary: var(--black-neural);
--background: var(--white-neutral);
--hover-background: var(--white-hover);
}
body {
color: var(--primary);
background-color: var(--background);
padding: 3ch;
max-width: 80ch;
margin: 0 auto;
font-family: system-ui;
line-height: 1.6;
}
ul {
list-style-type: "-";
padding-left: 1.5em;
}
li {
padding-left: 0.25em;
}
h3 {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
line-height: 1.4;
font-weight: normal;
font-size: 1.2rem;
margin: 1.2rem 0;
}
a {
color: inherit;
text-decoration: none;
}
a::after {
/* copied from https://practicaltypography.com/how-to-use.html */
position: relative;
content: "\FEFF°";
margin-left: 0.1em;
font-size: 90%;
top: -0.1em;
color: var(--accent);
font-feature-settings: "caps";
font-variant-numeric: normal;
}
a:hover {
background: var(--hover-background);
transition-property: background;
transition-duration: 0.2s;
}
h2 {
border-bottom-width: 1px;
border-bottom-color: var(--accent);
border-bottom-style: solid;
line-height: 1.2;
font-size: 1.44rem;
font-weight: normal;
margin: 1.44rem 0;
}
h1 {
line-height: 1.0;
font-weight: normal;
font-size: 1.73rem;
margin: 1.73rem 0;
}
aside {
margin-top: -0.6rem;
text-transform: uppercase;
opacity: 0.7;
letter-spacing: 0.05em;
line-height: 1;
}
section#publications span.journal,
section#conferences span.conference {
font-style: italic;
}
@media (prefers-color-scheme: light) {
:root {
--primary: var(--black-neural);
--background: var(--white-neutral);
--hover-background: var(--white-hover);
}
}
@media (prefers-color-scheme: dark) {
:root {
--primary: var(--white-neutral);
--background: var(--black-neutral);
--hover-background: var(--black-hover);
}
}
@media print {
:root {
--primary: #000000;
--background: #ffffff;
--accent: #000000;
}
h2 {
border-bottom-width: 0.5pt;
}
html,
body {
max-width: initial;
font-size: 10pt;
padding: 0;
}
aside {
opacity: 1.0;
}
a::after {
display: none;
}
a:hover {
background: inherit;
}
@page {
margin: 25mm;
size: A4;
}
}
</style>
</head>
<body>
@ -270,14 +126,16 @@
<h2>Skills</h2>
<ul>
<li>Experience with Java, C/C++ and JavaScript</li>
<li>With help and preparation I can work with Apache Maven, Apache Thrift, HTML, CSS, Python, Common Lisp, LaTeX</li>
<li>With help and preparation I can work with Apache Maven, Apache Thrift, HTML, CSS, Python, Common Lisp,
LaTeX</li>
<li>Deeper knowledge of and experience with Git</li>
<li>Can work in a Windows, Linux and MacOS environment</li>
<li>Willing to learn and adapt to other programming languages</li>
<li>Very conscientious way of working</li>
</ul>
<p>
German is my native language and I am fluent and experienced in English (I have an Academic-IELTS-score of 8.0
German is my native language and I am fluent and experienced in English (I have an Academic-IELTS-score of
8.0
from 2018 which is equivalent to an CEFR-score of C1&ndash;C2).
</p>
</section>

View file

@ -5,7 +5,7 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Benjamin&rsquo;s Website</title>
<link rel="stylesheet" href="style.css">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
@ -14,6 +14,9 @@
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="theme-color" content="#ffffff">
<title>Benjamin&rsquo;s Website</title>
<script>
async function getIssues() {
let response = await fetch("https://benjamin.stadlbauer.wien/git/api/v1/repos/Benjamin/personal-website/issues?state=open", {

91
style.css Normal file
View file

@ -0,0 +1,91 @@
:root {
--white-neutral: #f4f4f9;
--white-hover: #ececff;
--black-neutral: #1a1a1c;
--black-hover: #282833;
--accent: #7a7a99;
--primary: var(--black-neural);
--background: var(--white-neutral);
--hover-background: var(--white-hover);
}
body {
color: var(--primary);
background-color: var(--background);
padding: 3ch;
max-width: 80ch;
margin: 0 auto;
font-family: system-ui;
line-height: 1.6;
}
ul {
list-style-type: "-";
padding-left: 1.5em;
}
li {
padding-left: 0.25em;
}
h3 {
line-height: 1.4;
font-weight: normal;
font-size: 1.2rem;
margin: 1.2rem 0;
}
a {
color: inherit;
text-decoration: none;
}
a::after {
/* copied from https://practicaltypography.com/how-to-use.html */
position: relative;
content: "\FEFF°";
margin-left: 0.1em;
font-size: 90%;
top: -0.1em;
color: var(--accent);
font-feature-settings: "caps";
font-variant-numeric: normal;
}
a:hover {
background: var(--hover-background);
transition-property: background;
transition-duration: 0.2s;
}
h2 {
line-height: 1.2;
font-size: 1.44rem;
font-weight: normal;
margin: 1.44rem 0;
}
h1 {
line-height: 1.0;
font-weight: normal;
font-size: 1.73rem;
margin: 1.73rem 0;
}
@media (prefers-color-scheme: light) {
:root {
--primary: var(--black-neural);
--background: var(--white-neutral);
--hover-background: var(--white-hover);
}
}
@media (prefers-color-scheme: dark) {
:root {
--primary: var(--white-neutral);
--background: var(--black-neutral);
--hover-background: var(--black-hover);
}
}