From 2c2933243337d72ab6f1f3416a7d9ea88d069789 Mon Sep 17 00:00:00 2001 From: Federico Igne Date: Sun, 2 Jan 2022 14:48:43 +0000 Subject: Add first draft of website --- style.css | 380 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 380 insertions(+) create mode 100644 style.css (limited to 'style.css') diff --git a/style.css b/style.css new file mode 100644 index 0000000..6efceea --- /dev/null +++ b/style.css @@ -0,0 +1,380 @@ +:root { + /* --cyan: #00cece; */ + --cyan: #37abc8; + /* --pink: #d344e2; */ + --pink: #d35557; + --black: #212121; + --light-black: #666666; + --white: #ffffff; + --dark-white: #eeeeee; + --inactive: #888; + + --light-yellow: #F7B955; + --dark-yellow: #F49B0B; +} + +code{white-space: pre-wrap;} +span.smallcaps{font-variant: small-caps;} +span.underline{text-decoration: underline;} +div.column{display: inline-block; vertical-align: top; width: 50%;} +div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} +ul.task-list{list-style: none;} +.display.math{display: block; text-align: center; margin: 0.5rem auto;} + +@font-face { + font-family: 'LinuxLibertineDisplayRegular'; + src: url('resources/fonts/LinLibertine_DR.otf') format('opentype'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'LinuxLibertineMono'; + src: url('resources/fonts/LinLibertine_M.otf') format('opentype'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'LinuxLibertineSemiboldItalic'; + src: url('resources/fonts/LinLibertine_RZI.otf') format('opentype'); + font-weight: bold; + font-style: italic; +} +@font-face { + font-family: 'LinuxLibertineItalic'; + src: url('resources/fonts/LinLibertine_RI.otf') format('truetype'); + font-weight: normal; + font-style: italic; +} + +html { + line-height: 1.2; + /* font-family: Georgia, serif; */ + font-family: 'LinuxLibertineDisplayRegular'; + font-weight: normal; + font-size: 20px; + color: #1a1a1a; + background-color: #ededed; +} + +header { + +} + +body { + margin: 0 auto; + max-width: 36em; + padding-left: 50px; + padding-right: 50px; + padding-top: 50px; + padding-bottom: 15px; + hyphens: auto; + word-wrap: break-word; + text-rendering: optimizeLegibility; + font-kerning: normal; +} + +@media (max-width: 600px) { + body { + font-size: 0.9em; + padding: 1em; + } +} + +@media print { + body { + background-color: transparent; + color: black; + font-size: 12pt; + } + p, h2, h3 { + orphans: 3; + widows: 3; + } + h2, h3, h4 { + page-break-after: avoid; + } +} +p { + margin: 1em 0; +} +a { + color: #1a1a1a; +} +a:visited { + color: #1a1a1a; +} +img { + max-width: 100%; +} +h1, h2, h3, h4, h5, h6 { + /* margin-top: em; */ +} +h1 { + font-size: 150%; +} + +h5, h6 { + font-size: 1em; + font-style: italic; +} +h6 { + font-weight: normal; +} +ol, ul { + padding-left: 1.7em; + margin-top: 1em; +} +li > ol, li > ul { + margin-top: 0; +} +blockquote { + margin: 1em 0 1em 1.7em; + padding-left: 1em; + border-left: 2px solid #e6e6e6; + color: #606060; +} +code { + font-family: 'LinuxLibertineMono'; + font-size: 75%; + margin: 0; +} +pre { + margin: 1em 0; + overflow: auto; +} +pre code { + padding: 0; + overflow: visible; +} +.sourceCode { + background-color: transparent; + overflow: visible; +} +hr { + background-color: #1a1a1a; + border: none; + height: 1px; + margin: 1em 0; +} +table { + margin: 1em 0; + border-collapse: collapse; + width: 100%; + overflow-x: auto; + display: block; + font-variant-numeric: lining-nums tabular-nums; +} +table caption { + margin-bottom: 0.75em; +} +tbody { + margin-top: 0.5em; + border-top: 1px solid #1a1a1a; + border-bottom: 1px solid #1a1a1a; +} +th { + border-top: 1px solid #1a1a1a; + padding: 0.25em 0.5em 0.25em 0.5em; +} +td { + padding: 0.125em 0.5em 0.25em 0.5em; +} +header { + padding-bottom: 25px; + text-align: center; +} +#TOC li { + list-style: none; +} +#TOC a:not(:hover) { + text-decoration: none; +} +code{white-space: pre-wrap;} +span.smallcaps{font-variant: small-caps;} +span.underline{text-decoration: underline;} +div.column{display: inline-block; vertical-align: top; width: 50%;} +div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} +ul.task-list{list-style: none;} +.display.math{display: block; text-align: center; margin: 0.5rem auto;} + + + +.logo { + margin: 0 auto; + color: var(--pink); + text-align: center; + font-size: 6rem; + text-shadow: -0.18rem -0.18rem var(--black), -0.36rem -0.36rem var(--cyan); + line-height: 5rem; + font-weight: 800; + font-style: italic; + font-family: 'LinuxLibertineSemiboldItalic'; + + display:inline-block; + -webkit-transform:scale(1,1.2); + -moz-transform:scale(1,1.2); + -ms-transform:scale(1,1.2); + -o-transform:scale(1,1.2); + transform:scale(1,1.2); +} + +.heading { + margin-top: 40px; + font-family: 'LinuxLibertineItalic'; + font-weight: normal; + font-style: italic; + font-size: 20px; +} + +a { + text-decoration: none; +} +/* http://www.coding-dude.com/wp/css/highlight-text-css/ */ +.highlight{ + position:relative; +} + +.highlight:before{ + content:""; + z-index:-1; + left:0em; + top:0em; + border-width:2px; + border-style:solid; + border-color:var(--cyan); + position:absolute; + border-right-color:transparent; + width:100%; + height:1em; + transform:rotate(2deg); + opacity:0.5; + border-radius:0.25em; +} + +.highlight:after{ + content:""; + z-index:-1; + left:0em; + top:0em; + border-width:2px; + border-style:solid; + border-color:var(--cyan); + border-left-color:transparent; + border-top-color:transparent; + position:absolute; + width:100%; + height:1em; + transform:rotate(-1deg); + opacity:0.5; + border-radius:0.25em; +} + + +footer { + font-family: 'LinuxLibertineItalic'; + font-weight: normal; + font-style: italic; + font-size: 16px; + line-height: 1em; + text-align: center; +} + +a.hovering { + position:relative +} + +a.hovering:hover:before { + content:""; + z-index:-1; + left:0em; + top:0em; + border-width:2px; + border-style:solid; + border-radius:0.25em; + border-color:transparent; + border-bottom-color:var(--cyan); + position:absolute; + width:100%; + height:1em; + transform:rotate(-1deg); + opacity:0.5; +} + +.copyright{ + margin: 15px; +} +.icon { + height: 24px; + width: 24px; + margin: 0 5px; +} + + +.nav { + font-family: 'LinuxLibertineItalic'; + font-weight: normal; + font-style: italic; + font-size: 16px; +} + +.topnav { + /* background-color: #333; */ + overflow: hidden; + text-align: right; +} + +/* Style the links inside the navigation bar */ +.topnav a { + /* float: left; */ + /* color: #f2f2f2; */ + /* text-align: center; */ + /* padding: 14px 16px; */ + /* text-decoration: none; */ + /* font-size: 17px; */ +} + +/* Change the color of links on hover */ +.topnav a:hover { + /* background-color: #ddd; */ + /* color: black; */ +} + +.nav a.active { + /* text-decoration: underline; */ + /* background-color: #04AA6D; */ + /* color: white; */ + position:relative; +} + +.nav a.active:before { + content:""; + z-index:-1; + left:0.1em; + top:0em; + border-width:2px; + border-style:solid; + border-color:transparent; + position:absolute; + border-bottom-color:var(--cyan); + width:100%; + height:1em; + transform:rotate(2deg); + opacity:0.5; + border-radius:0.25em; +} + +.bib { + font-size: 75%; +} + +/* #body a.hovering::after { */ +/* content: ""; */ +/* width: 11px; */ +/* height: 11px; */ +/* margin-left: 4px; */ +/* background-image: url("resources/arrow-black.svg"); */ +/* background-position: center; */ +/* background-repeat: no-repeat; */ +/* background-size: contain; */ +/* display: inline-block; */ +/* } */ -- cgit v1.2.3