tobast.fr-hugo/static/css/style.css

254 lines
5.9 KiB
CSS

@charset "UTF-8";
@import url("fonts.css");
#entries .blog_entry {
padding: 5px 0;
margin: 20px 0;
display: block; }
#entries .blog_entry .blog_entry_title {
display: block;
font-size: 1.1em;
text-align: left; }
#entries .blog_entry .blog_entry_meta {
display: flex;
justify-content: space-between;
align-items: center;
column-gap: 20px;
font-style: italic;
font-size: 0.9em;
color: #555555bb; }
#entries .blog_entry .blog_entry_date {
display: block;
align-self: flex-start; }
#entries .blog_entry .blog_entry_tags {
list-style: none;
padding-left: 0;
margin: 0; }
#entries .blog_entry .blog_entry_tags li {
display: inline; }
#entries .blog_entry .blog_entry_tags li ~ li::before {
content: ", "; }
#entries .blog_entry .blog_entry_tags::before {
content: "Tags:"; }
#post_head {
margin: 20px 0; }
#post_head h1 {
margin: 5px 0; }
#post_head #post_date {
text-align: right;
font-style: italic; }
#post_head #post_tags {
display: flex;
justify-content: flex-end;
list-style: none;
padding-left: 0;
margin: 5px 0; }
#post_head #post_tags::before {
content: "Tags: ";
font-style: italic;
padding-right: 1em; }
#post_head #post_tags li {
font-style: italic; }
#post_head #post_tags li ~ li::before {
content: ", "; }
.blog .highlight > pre {
padding: 10px;
border-radius: 10px; }
.blog img {
display: block;
margin: 10px auto;
max-width: 80%;
max-height: 60vh;
border-radius: 10px; }
.blog blockquote {
font-style: italic;
border-left: 3px solid #8b8bbd;
padding-left: 15px;
margin-left: 25px; }
.blog :not(pre) > code {
background-color: #e1e1e1;
padding: 2px 4px;
border-radius: 4px;
font-size: 85%;
color: #555; }
html {
background-color: white; }
body {
font-family: Open Sans,Arial;
color: #555;
font-size: 16px;
line-height: 1.4;
text-align: justify;
margin: 0;
padding: 0; }
#head {
background-color: #060033;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0;
padding: 30px 60px;
color: white; }
@media (max-width: 1000px) {
#head {
padding: 20px; } }
#head .title {
font-size: 1.4em;
font-weight: bold; }
#head .whoami {
font-weight: bold;
padding-left: 20px; }
@media (max-width: 1000px) {
#head .whoami {
font-size: 0.8em; } }
#head a, #head a:visited {
color: white; }
#main-container {
display: flex;
justify-content: space-between; }
@media (max-width: 1000px) {
#main-container {
flex-wrap: wrap; } }
#main-container .tab-selector {
margin: 40px; }
#main-container .tab-selector ul {
list-style: none;
min-width: 200px;
padding: 0; }
#main-container .tab-selector ul li a {
display: block;
font-size: 1.2em;
padding: 10px 20px;
background-color: #060033;
margin: 2px 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
transition: margin 0.1s ease-in-out;
color: white; }
#main-container .tab-selector ul li a:hover {
margin-left: 10px; }
#main-container .tab-selector ul li.active {
margin-left: 20px; }
#main-container #content {
margin: 2em auto;
max-width: 800px;
padding: 1em;
flex-basis: 800px; }
#main-container .profilepic {
flex: 0 0 auto;
margin: 40px;
width: 350px;
height: auto; }
@media (max-width: 1350px) {
#main-container .profilepic {
width: 180px; } }
@media (max-width: 1000px) {
#main-container .profilepic {
flex-shrink: 2;
width: 250px;
order: -1; } }
#main-container .profilepic img {
margin: auto;
max-height: 100%;
max-width: 100%;
border-radius: 20px; }
@media (max-width: 1000px) {
#main-container .profilepic img {
border-radius: 50%; } }
.items {
display: grid;
grid-template-columns: 100px auto; }
.items .head {
grid-column: 1/span 1;
font-weight: bold; }
a, a:visited {
color: #07a;
text-decoration: none; }
.fa {
color: #555; }
h1 {
margin-left: -10px; }
h2 {
margin-top: 30px;
margin-left: 20px; }
h2 .fa {
margin-right: 10px; }
#whoami {
text-align: right;
font-size: 1.2em;
font-style: italic; }
ul.docsline {
list-style: none;
text-align: center;
margin-top: 30px;
font-size: 1.1em; }
ul.docsline li {
display: inline-block; }
ul.docsline li a {
display: inline-block;
padding: 0 15px; }
dl {
list-style: none;
display: grid;
grid-template-columns: 1fr 3fr; }
dl dt {
grid-column: 1 / span 1;
justify-self: end;
text-align: right;
margin-right: 20px;
font-weight: bold; }
dl dd {
margin-left: 20px;
justify-self: start;
text-align: left; }
.antispam {
unicode-bidi: bidi-override;
direction: rtl; }
ul.publications li .authors, ul.talks li .authors, ul.unpublished li .authors {
font-style: italic; }
ul.publications li .authors .author:after, ul.talks li .authors .author:after, ul.unpublished li .authors .author:after {
content: ', '; }
ul.publications li .authors .author:last-child:after, ul.talks li .authors .author:last-child:after, ul.unpublished li .authors .author:last-child:after {
content: ''; }
ul.publications li .title, ul.talks li .title, ul.unpublished li .title {
font-weight: bold; }
ul.teaching-courses li {
list-style: circle; }
.course-name .course-title {
font-weight: bold; }
.course-name .course-longtitle:before {
content: ' — '; }
.course-name .course-role {
font-style: italic;
color: #555555bb; }
.course-titleblock {
margin-bottom: 20px; }
.course-titleblock h2 {
margin-bottom: 10px; }
.course-titleblock .course-institute {
text-align: right;
font-size: 1.1em;
font-style: italic; }