/* Use the PTSans font */ @font-face { font-family: 'PTSans'; /*a name to be used later*/ src: url('assets/myfonts/PT_Sans/PTSans-Regular.ttf'); /*URL to font*/ } @font-face { font-family: 'PTSans-bold'; /*a name to be used later*/ src: url('assets/myfonts/PT_Sans/PTSans-Bold.ttf'); /*URL to font*/ } @font-face { font-family: 'PTSans-italic'; /*a name to be used later*/ src: url('assets/myfonts/PT_Sans/PTSans-Italic.ttf'); /*URL to font*/ } @font-face { font-family: 'PTSans-bolditalic'; /*a name to be used later*/ src: url('assets/myfonts/PT_Sans/PTSans-BoldItalic.ttf'); /*URL to font*/ } @font-face { font-family: 'Libertine'; /*a name to be used later*/ src: url('assets/myfonts/Libertinus_Serif/LibertinusSerif-Regular.ttf'); /*URL to font*/ } @font-face { font-family: 'Libertine-bold'; /*a name to be used later*/ src: url('assets/myfonts/Libertinus_Serif/LibertinusSerif-Bold.ttf'); /*URL to font*/ } @font-face { font-family: 'Libertine-italic'; /*a name to be used later*/ src: url('assets/myfonts/Libertinus_Serif/LibertinusSerif-Italic.ttf'); /*URL to font*/ } @font-face { font-family: 'Libertine-bolditalic'; /*a name to be used later*/ src: url('assets/myfonts/Libertinus_Serif/LibertinusSerif-BoldItalic.ttf'); /*URL to font*/ } /* BODY We want three sections: a header in the top left (for our title), a navigation bar in the top right, and then a main area containing all the content of the site. We will target the element to set up this grid */ body { margin: 0 auto; /* top and bottom margin: 0, left and right margin: auto */ max-width: 800px; min-width: 0; padding: 0 10px 25px; /* top | left and right | bottom */ font-family: "Libertine", serif; /* background-color: lightgray; */ /* CSS Grid: */ display: grid; row-gap: 0px; grid-template-columns: 200px auto; /* two columns, each sized automatically */ grid-template-rows: 60px auto; /* first row is 60px high, second one is automatically size */ grid-template-areas: "header nav" /* first row made of header and nav */ "ct ct" /* second row fully spanned by ct (content) */ /* the names have no special meaning */ } /* NAVIGATION ELEMENTS */ /* CONTENT */ h1 { font-size: 24px; font-family: "PTSans"; text-transform: uppercase; } h2 { font-size: 22px; font-family: "PTSans"; /* text-transform: uppercase; */ } h3 { font-size: 18px; font-family: "PTSans"; text-transform: uppercase; } /* LINKS */ a { color: #301ebe; font-style: normal; } /* HEADER */ header { margin: 0px; font-size: 24px; font-family: 'PTSans-bolditalic'; text-transform: uppercase; /* CSS grid params: */ grid-area: header; /* name used in grid-template-areas */ justify-self: left; align-self: end; } /* NAVIGATION */ nav { font-size: 24px; font-family: 'PTSans-italic'; /* CSS grid params: */ grid-area: nav; /* name used in grid-template-areas */ justify-self: right; align-self: end; } nav a { text-align: right; margin-left: 10px; } .inactive-tab { font-family: "PTSans"; } .active-tab { font-family: "PTSans-Bold"; } /* ACTUAL CONTENT */ article { font-size: 18px; text-align: justify; /* CSS grid params: */ grid-area: ct; /* name used in grid-template-areas */ border-top: 2px solid gray; margin-top: 0.5em; } a { font-family: 'PTSans-bold'; text-decoration: none; } /* described elements in description */ dt { font-family: "PTSans-bold"; /* font-weight: bold; */ margin-top: 18px; /* font-size: larger; */ } /* change bullet in (unordered) lists */ ul { list-style-type: circle; } /* PUBLICATIONS */ publication-title { font-size: 100%; font-weight: bold; font-style: italic; } publication-authors { font-size: 100%; } publication-extra { font-size: 100%; } .image-me { text-align: right; vertical-align: top; } /* SMALL SCREENS */ @media screen and (max-width: 450px) { body { grid-template-columns: auto; grid-template-rows: minmax(40px, auto) minmax(30px, auto) auto auto; grid-template-areas: "header" "nav" "ct" } header, nav { text-align: center; justify-self: center; } nav a { margin: 0 10px; } tr { display: flex; flex-direction: column; } .image-me{ text-align: center; vertical-align: top; } } #nested-table-in-contacts td{ padding: 0px 10px 5px 0px; } /* TEST */ table, td, td { border: none; /* 1px solid blue; */ border-collapse: collapse; }