personal_site/_sass/main.scss
2022-11-28 09:57:04 +01:00

122 lines
2.2 KiB
SCSS

@import "vars";
@import "normalise"; // normalise CSS across browsers
@import "nav"; //the side navbar
@import "header"; // the header
@import "article"; // individual blog articles
@import "cv"; // the CV page
@import "thesis"; // the thesis content
@import "blogroll"; // the summaries of the blogposts
// The syntax highlighting css
// generated with rougify style bw > code_style_bw.scss
// @import "code_style_bw";
@import "code_style_github";
* {
box-sizing: border-box;
font-family: $font_stack;
text-rendering: geometricPrecision;
}
html {
width: 100vw;
scroll-behavior: smooth;
}
body {
background: #fcfcfc;
color: #222;
// constrain width and center
max-width: 900px;
margin: auto;
}
// Padding to keep the keep the content to the right of the header
main {
margin-left: 240px;
padding-left: 30px;
padding-right: 30px;
padding-top: 10vh;
padding-bottom: 10vh;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
h1 {
font-size: 2em;
}
p > img {
width: 90%;
//hack to center images in p tags
display: block;
margin-left: auto;
margin-right: auto;
}
}
/* increase line-height for everything except headings */
main :not(:is(h1,h2,h3,h4,h5,h6)) {
line-height: 1.3;
}
a {
text-decoration: underline;
color: #222;
}
header a {
text-decoration: none;
}
nav a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
div.highlight {
max-width: 100%;
overflow: auto;
}
.figure {
max-width: 400px;
display: block;
margin: 0 auto;
margin-top: 1em;
margin-bottom: 1em;
}
@media
only screen and (max-width: $horizontal_breakpoint),
only screen and (max-height: $vertical_breakpoint)
{
main {
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
margin: 0px;
}
article {
margin-left: 0px; }
h1 {font-size: 1.5em !important;}
.MathJax {
font-size: 0.8em !important;
overflow-x: auto;
overflow-y: hidden;
}
}