Skip to content

Commit 68668a8

Browse files
wiseoddwiseodd
committed
Fix layout
1 parent 9fb20ba commit 68668a8

11 files changed

+94
-65
lines changed

‎.astro/content-modules.mjs

+18-18
Large diffs are not rendered by default.

‎bun.lockb

407 Bytes
Binary file not shown.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"@astrojs/sitemap": "^3.2.1",
1818
"@astrojs/tailwind": "5.1.3",
1919
"@astrojs/vercel": "8.0.0",
20+
"@fontsource-variable/source-code-pro": "^5.1.0",
2021
"@fontsource/iosevka": "^5.1.0",
2122
"@vercel/analytics": "^1.4.0",
2223
"ajv": "^8.17.1",

‎src/components/blog/TOC.astro

+4-2
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,10 @@ const { headings } = Astro.props;
1313
const toc = generateToc(headings);
1414
---
1515

16-
<aside class='sticky top-20 order-2 -me-28 hidden basis-60 lg:flex lg:flex-col'>
17-
<h2 class='text-xs font-semibold'>TABLE OF CONTENTS</h2>
16+
<aside
17+
class='sticky top-20 order-2 hidden basis-full text-wrap lg:-me-8 lg:flex lg:max-w-[10rem] lg:flex-col xl:max-w-[20rem]'
18+
>
19+
<h2 class='text-xs font-semibold'>Table of Contents</h2>
1820
<ul class='list-decimal text-xs text-card-foreground'>
1921
{toc.map((heading) => <TOCHeading heading={heading} />)}
2022
</ul>

‎src/layouts/BaseLayout.astro

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const {
3030
<body class='flex justify-center bg-background'>
3131
<ThemeProvider />
3232
<main
33-
class='flex min-h-screen w-screen max-w-[50rem] flex-col items-center px-6 pb-10 pt-7 font-sans text-[0.92rem] leading-relaxed sm:px-10 lg:px-10'
33+
class='max-w-screen flex min-h-screen w-screen flex-col items-center px-6 pb-10 pt-7 font-sans text-[0.92rem] leading-relaxed sm:px-10 lg:px-10'
3434
>
3535
<Header />
3636
<slot />

‎src/layouts/BlogPost.astro

+4-2
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,11 @@ const { headings } = await post.render();
2323

2424
<PageLayout meta={{ articleDate, description, ogImage: socialImage, title }}>
2525
<div class='w-full'>
26-
<div class='mt-8 gap-x-10 lg:flex lg:items-start'>
26+
<div
27+
class='m-auto mt-8 max-w-[60rem] lg:flex lg:items-start lg:gap-x-16 xl:max-w-[65rem]'
28+
>
2729
{!!headings.length && <TOC headings={headings} />}
28-
<article class='flex-grow break-words' data-pagefind-body>
30+
<article class='m-auto max-w-[50rem] flex-grow break-words' data-pagefind-body>
2931
<div id='blog-hero'><BlogHero content={post} /></div>
3032
<div
3133
class='prose prose-base prose-neutral mt-12 max-w-[50rem] font-sans text-base leading-6 dark:prose-invert dark:prose-dark prose-headings:font-bold prose-headings:text-foreground prose-headings:before:absolute prose-headings:before:-ms-4 prose-th:before:content-none prose-inline-code:font-mono prose-inline-code:text-sm prose-inline-code:font-normal'

‎src/pages/blog/[...page].astro

+1-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const paginationProps = {
4646
---
4747

4848
<PageLayout meta={meta}>
49-
<div class='w-full'>
49+
<div class='max-w-[50rem]'>
5050
<h1 class='mb-6 mt-5 text-2xl font-bold'>Blog Posts</h1>
5151
{page.data.length === 0 && <p>No posts yet.</p>}
5252

‎src/pages/index.astro

+22-28
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const sortedSelectedPubs = selectedPubs
3535
---
3636

3737
<PageLayout meta={{ title: "About" }}>
38-
<div class='flex w-full flex-col gap-y-10'>
38+
<div class='flex max-w-[50rem] flex-col gap-y-10'>
3939
<section class='flex flex-col items-center gap-y-7'>
4040
<Image
4141
src={portrait}
@@ -48,7 +48,11 @@ const sortedSelectedPubs = selectedPubs
4848
<h1 class='text-3xl font-bold'>Agustinus Kristiadi</h1>
4949

5050
<div class='flex flex-wrap justify-center gap-x-7 gap-y-3'>
51-
<Label title='Vector Institute' as='a' href='https://vectorinstitute.ai/team/agustinus-kristiadi/'>
51+
<Label
52+
title='Vector Institute'
53+
as='a'
54+
href='https://vectorinstitute.ai/team/agustinus-kristiadi/'
55+
>
5256
<svg
5357
xmlns='http://www.w3.org/2000/svg'
5458
viewBox='0 0 24 24'
@@ -103,13 +107,15 @@ const sortedSelectedPubs = selectedPubs
103107
href='https://bsky.app/profile/agustinus.kristia.de'
104108
target='_blank'
105109
>
106-
<svg xmlns='http://www.w3.org/2000/svg'
110+
<svg
111+
xmlns='http://www.w3.org/2000/svg'
107112
viewBox='0 0 32 32'
108113
class='h-5 w-5'
109-
slot='icon'>
110-
<path
111-
fill='currentColor'
112-
d="M23.931,5.298c-3.21,2.418-6.663,7.32-7.931,9.951-1.267-2.631-4.721-7.533-7.931-9.951-2.316-1.744-6.069-3.094-6.069,1.201,0,.857,.49,7.206,.778,8.237,.999,3.583,4.641,4.497,7.881,3.944-5.663,.967-7.103,4.169-3.992,7.372,5.908,6.083,8.492-1.526,9.154-3.476,.123-.36,.179-.527,.179-.379,0-.148,.057,.019,.179,.379,.662,1.949,3.245,9.558,9.154,3.476,3.111-3.203,1.671-6.405-3.992-7.372,3.24,.553,6.882-.361,7.881-3.944,.288-1.031,.778-7.38,.778-8.237,0-4.295-3.753-2.945-6.069-1.201Z"
114+
slot='icon'
115+
>
116+
<path
117+
fill='currentColor'
118+
d='M23.931,5.298c-3.21,2.418-6.663,7.32-7.931,9.951-1.267-2.631-4.721-7.533-7.931-9.951-2.316-1.744-6.069-3.094-6.069,1.201,0,.857,.49,7.206,.778,8.237,.999,3.583,4.641,4.497,7.881,3.944-5.663,.967-7.103,4.169-3.992,7.372,5.908,6.083,8.492-1.526,9.154-3.476,.123-.36,.179-.527,.179-.379,0-.148,.057,.019,.179,.379,.662,1.949,3.245,9.558,9.154,3.476,3.111-3.203,1.671-6.405-3.992-7.372,3.24,.553,6.882-.361,7.881-3.944,.288-1.031,.778-7.38,.778-8.237,0-4.295-3.753-2.945-6.069-1.201Z'
113119
></path>
114120
</svg>
115121
</Label>
@@ -161,9 +167,9 @@ const sortedSelectedPubs = selectedPubs
161167
the University of Tuebingen in Germany, advised by Philipp Hennig and Matthias
162168
Hein. His research interests are in probabilistic inference with large-scale
163169
neural networks, decision-making under uncertainty, and their applications in
164-
broader scientific fields such as chemistry. His work has been recognized in
165-
the form of best PhD thesis award and multiple spotlight papers from flagship
166-
machine learning conferences. His contributions to the scientific society
170+
broader scientific fields such as chemistry. His work has been recognized in the
171+
form of best PhD thesis award and multiple spotlight papers from flagship
172+
machine learning conferences. His contributions to the scientific society
167173
include mentoring underrepresented students in Canada under the IBET PhD Project
168174
and actively contributing to the open-source community.
169175
</p>
@@ -225,25 +231,13 @@ const sortedSelectedPubs = selectedPubs
225231
subheading="German Research Foundation's Theoretical Foundations of Deep Learning program, 2023"
226232
/>
227233

228-
<Card
229-
heading='Spotlight paper (top 4%)'
230-
subheading="NeurIPS 2023"
231-
/>
234+
<Card heading='Spotlight paper (top 4%)' subheading='NeurIPS 2023' />
232235

233-
<Card
234-
heading='Spotlight paper (top 3%)'
235-
subheading="NeurIPS 2021"
236-
/>
236+
<Card heading='Spotlight paper (top 3%)' subheading='NeurIPS 2021' />
237237

238-
<Card
239-
heading='Long-talk paper (top 6%)'
240-
subheading="UAI 2021"
241-
/>
238+
<Card heading='Long-talk paper (top 6%)' subheading='UAI 2021' />
242239

243-
<Card
244-
heading='Best reviewer (top 10%)'
245-
subheading="ICML 2021"
246-
/>
240+
<Card heading='Best reviewer (top 10%)' subheading='ICML 2021' />
247241
</Section>
248242

249243
{
@@ -259,11 +253,11 @@ const sortedSelectedPubs = selectedPubs
259253
<Section title='Latest Posts'>
260254
<ul class='flex flex-col gap-y-5 sm:gap-y-2'>
261255
{allPostsByDate.slice(0, 5).map((p) => (
262-
<PostPreview post={p} maxDescWords={18} withDesc />
256+
<PostPreview post={p} maxDescWords={18} withDesc />
263257
))}
264258
</ul>
265259
</Section>
266260
)
267-
}
261+
}
268262
</div>
269263
</PageLayout>

‎src/pages/publications/index.astro

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const sortedPublications = publications.sort(sortPublicationFn);
1414
---
1515

1616
<PageLayout meta={{ title: "Publications" }}>
17-
<div class='w-full'>
17+
<div class='max-w-[50rem]'>
1818
<!-- <TOC headings={} /> -->
1919

2020
<h1 class='mb-6 mt-5 text-2xl font-bold'>Publication List</h1>

‎src/site.config.ts

+12-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { SiteConfig } from "@/types";
22
import { type AstroExpressiveCodeOptions } from "astro-expressive-code";
3-
import "@fontsource/iosevka";
3+
import "@fontsource-variable/source-code-pro";
44

55
export const siteConfig: SiteConfig = {
66
// Used as both a meta property (src/components/BaseHead.astro L:31 + L:49) & the generated satori png (src/pages/og-image/[slug].png.ts)
@@ -42,29 +42,35 @@ export const menuLinks: Array<{ title: string; path: string }> = [
4242
// https://expressive-code.com/reference/configuration/
4343
export const expressiveCodeOptions: AstroExpressiveCodeOptions = {
4444
// One dark, one light theme => https://expressive-code.com/guides/themes/#available-themes
45-
themes: ["light-plus", "catppuccin-macchiato"],
45+
themes: ["light-plus", "dark-plus"],
46+
4647
themeCssSelector(theme, { styleVariants }) {
4748
if (styleVariants.length >= 2) {
4849
const baseTheme = styleVariants[0]?.theme;
4950
const altTheme = styleVariants.find(
5051
(v) => v.theme.type !== baseTheme?.type,
5152
)?.theme;
53+
5254
if (theme === baseTheme || theme === altTheme)
5355
return `[data-theme='${theme.type}']`;
5456
}
57+
5558
// return default selector
5659
return `[data-theme="${theme.name}"]`;
5760
},
58-
useThemedScrollbars: false,
61+
62+
useThemedScrollbars: true,
63+
5964
useDarkModeMediaQuery: true,
65+
6066
styleOverrides: {
6167
uiLineHeight: "inherit",
6268
uiFontWeight: "500",
63-
codeFontSize: "0.9rem",
64-
codeLineHeight: "1.2rem",
69+
codeFontSize: "0.8rem",
70+
codeLineHeight: "1.1rem",
6571
borderRadius: "0px",
6672
codePaddingInline: "1rem",
67-
codeFontFamily: '"Iosevka", monospace;',
73+
6874
frames: {
6975
frameBoxShadowCssValue: "none",
7076
},

‎tailwind.config.js

+30-6
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,14 @@ const plugin = require("tailwindcss/plugin");
66
/** @type {import('tailwindcss').Config} */
77
const config = {
88
darkMode: ["class"],
9+
910
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
1011
safelist: ["dark"],
12+
1113
corePlugins: {
1214
aspectRatio: false,
1315
},
16+
1417
plugins: [
1518
require("@tailwindcss/typography"),
1619
require("@tailwindcss/aspect-ratio"),
@@ -21,7 +24,9 @@ const config = {
2124
);
2225
}),
2326
],
27+
2428
variants: { typography: ["dark"] },
29+
2530
theme: {
2631
container: {
2732
center: true,
@@ -30,65 +35,79 @@ const config = {
3035
"2xl": "1400px",
3136
},
3237
},
38+
3339
extend: {
3440
fontFamily: {
3541
sans: ["Arial", fontFamily.sans],
3642
serif: ["Times", fontFamily.serif],
37-
mono: ["Iosevka", fontFamily.mono],
43+
mono: [fontFamily.mono],
3844
},
45+
3946
fontSize: {
4047
base: "0.9rem",
4148
},
49+
4250
colors: {
4351
border: "hsl(var(--border) / <alpha-value>)",
4452
input: "hsl(var(--input) / <alpha-value>)",
4553
ring: "hsl(var(--ring) / <alpha-value>)",
4654
background: "hsl(var(--background) / <alpha-value>)",
4755
foreground: "hsl(var(--foreground) / <alpha-value>)",
56+
4857
primary: {
4958
DEFAULT: "hsl(var(--primary) / <alpha-value>)",
5059
foreground: "hsl(var(--primary-foreground) / <alpha-value>)",
5160
},
61+
5262
secondary: {
5363
DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
5464
foreground: "hsl(var(--secondary-foreground) / <alpha-value>)",
5565
},
66+
5667
destructive: {
5768
DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
5869
foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
5970
},
71+
6072
muted: {
6173
DEFAULT: "hsl(var(--muted) / <alpha-value>)",
6274
foreground: "hsl(var(--muted-foreground) / <alpha-value>)",
6375
},
76+
6477
accent: {
6578
DEFAULT: "hsl(var(--accent) / <alpha-value>)",
6679
foreground: "hsl(var(--accent-foreground) / <alpha-value>)",
6780
},
81+
6882
popover: {
6983
DEFAULT: "hsl(var(--popover) / <alpha-value>)",
7084
foreground: "hsl(var(--popover-foreground) / <alpha-value>)",
7185
},
86+
7287
card: {
7388
DEFAULT: "hsl(var(--card) / <alpha-value>)",
7489
foreground: "hsl(var(--card-foreground) / <alpha-value>)",
7590
},
7691
},
92+
7793
borderRadius: {
7894
lg: "var(--radius)",
7995
md: "calc(var(--radius) - 2px)",
8096
sm: "calc(var(--radius) - 4px)",
8197
},
98+
8299
typography: (theme) => ({
83100
DEFAULT: {
84101
css: {
85102
// Remove backticks from inline code
86103
"code::before": {
87104
content: '""',
88105
},
106+
89107
"code::after": {
90108
content: '""',
91109
},
110+
92111
code: {
93112
backgroundColor: "hsl(var(--accent))",
94113
color: "hsl(var(--accent-foreground))",
@@ -98,6 +117,7 @@ const config = {
98117
paddingTop: theme("spacing[0.5]"),
99118
paddingBottom: theme("spacing[0.5]"),
100119
},
120+
101121
a: {
102122
color: theme("colors.blue.600"),
103123
fontWeight: "400",
@@ -106,25 +126,29 @@ const config = {
106126
textDecoration: "underline",
107127
},
108128
},
129+
109130
"li::marker": {
110131
color: theme("colors.neutral.950"),
111132
},
112133
},
113134
},
135+
114136
dark: {
115137
css: {
116138
code: {
117139
backgroundColor: "hsl(var(--accent))",
118-
color: "hsl(var(--accent-foreground))",
119140
borderRadius: theme("borderRadius.DEFAULT"),
120-
paddingLeft: theme("spacing[1]"),
121-
paddingRight: theme("spacing[1]"),
122-
paddingTop: theme("spacing[0.5]"),
123-
paddingBottom: theme("spacing[0.5]"),
124141
},
142+
125143
a: {
126144
color: theme("colors.blue.300"),
145+
fontWeight: "400",
146+
textDecoration: "none",
147+
"&:hover": {
148+
textDecoration: "underline",
149+
},
127150
},
151+
128152
"li::marker": {
129153
color: theme("colors.neutral.300"),
130154
},

0 commit comments

Comments
 (0)