Badri Sunderarajan
e85374629c
The images in mobile view were spilling out a bit; this commit
adjusts the margins to make it more mobile-friendly. In fact,
that part of the CSS is now "mobile first" with an exception
for devices thar are *larger* than a certain size 😉
184 lines
2.8 KiB
CSS
184 lines
2.8 KiB
CSS
@font-face {
|
|
font-family: Poppins;
|
|
src: url('/static/fonts/Poppins-Regular.otf');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Poppins;
|
|
src: url('/static/fonts/Poppins-Italic.otf');
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Poppins;
|
|
src: url('/static/fonts/Poppins-Bold.otf');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Poppins;
|
|
src: url('/static/fonts/Poppins-Black.otf');
|
|
font-weight: 900;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Poppins;
|
|
src: url('/static/fonts/Poppins-LightItalic.otf');
|
|
font-weight: 300;
|
|
font-style: italic;
|
|
}
|
|
|
|
body {
|
|
font-family: Poppins, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
h1 {
|
|
font-weight: 900;
|
|
}
|
|
|
|
h1 small {
|
|
font-weight: 700;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
h2 {
|
|
font-weight: 700;
|
|
}
|
|
|
|
h1:has(+ h2),
|
|
h2:has(+ h3) {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
h1 + h2,
|
|
h2 + h3 {
|
|
margin-top: 0;
|
|
font-weight: 500;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.site-header {
|
|
display: flex;
|
|
padding: 0.5em;
|
|
background: lightgrey;
|
|
column-gap: 0.6rem;
|
|
}
|
|
|
|
.site-header a {
|
|
display: flex;
|
|
color: grey;
|
|
}
|
|
|
|
.site-header a.primary {
|
|
color: black;
|
|
}
|
|
|
|
.site-header a:hover {
|
|
color: black;
|
|
}
|
|
|
|
.site-header .header-logo-wrapper img {
|
|
height: 1.5em;
|
|
width: 1.5em;
|
|
margin-right: 0.3em;
|
|
}
|
|
|
|
/*
|
|
* Setting the maximum width for posts. This should
|
|
* give you not much more than 75 letters per line;
|
|
* the reason it's given as 40 is that 'em' is
|
|
* literally the width of the letter 'M', which is
|
|
* significantly wider than any of the other letters.
|
|
* So if we write 'MMMM...' only 40 letters will fit,
|
|
* but for ordinary English this is getting us to 70
|
|
* or thereabouts.
|
|
*/
|
|
.main {
|
|
max-width: 40em;
|
|
margin: auto;
|
|
min-height: calc(100vh - 16em);
|
|
padding: 1em;
|
|
}
|
|
|
|
./*
|
|
* Styling for images. We centre-align them, make sure
|
|
* they fit in the screen, and see that they don't
|
|
* spill out of the post container.
|
|
*/
|
|
.main p:has(img) {
|
|
text-align: center;
|
|
}
|
|
|
|
.main img {
|
|
max-width: min(40em, calc(100vw - 2em));
|
|
max-height: 100vh;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
@media(min-width: 640px) {
|
|
.main img {
|
|
max-width: min(40em, calc(100vw - 4em));
|
|
margin: 1em auto;
|
|
}
|
|
}
|
|
|
|
.post-list {
|
|
padding: 0;
|
|
list-style-type: none;
|
|
}
|
|
|
|
.site-footer {
|
|
font-weight: 300;
|
|
font-style: italic;
|
|
max-width: 60em;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: 4em;
|
|
padding: 1em;
|
|
text-align: center;
|
|
}
|
|
|
|
/*
|
|
* Asterisms!
|
|
*/
|
|
hr {
|
|
overflow: visible; /* For IE, apparently */
|
|
padding: 1.5em;
|
|
font-size: 1.5em;
|
|
border: none;
|
|
color: #aaaaaa;
|
|
text-align: center;
|
|
}
|
|
|
|
hr::before {
|
|
content: "⁂";
|
|
display: block;
|
|
}
|
|
|
|
/*
|
|
* Don't let code blocks go wild
|
|
*/
|
|
pre {
|
|
max-width: inherit;
|
|
overflow-x: scroll;
|
|
}
|
|
|
|
|
|
/*
|
|
* We make li's a bit narrower than the main
|
|
* container, since they're indented
|
|
*/
|
|
li {
|
|
max-width: 36em;
|
|
}
|