fernando
/
araozu.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adjust styles, use a centered layout

main
Araozu 2024-05-04 08:20:29 -05:00
parent 9e3cb51b85
commit 0fd914ac96
3 changed files with 29 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/global.css
View File

@ -18,5 +18,9 @@
html { html {
background-color: var(--c-bg); background-color: var(--c-bg);
color: var(--c-on-bg); color: var(--c-on-bg);
font-family: Inter, sans-serif; }
body {
font-family: "JetBrains Mono", monospace;
font-optical-sizing: auto;
} }

10
src/pages/index.astro
View File

@ -15,11 +15,7 @@ import Card from "../components/Card.astro";
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link <link
href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700;800;900&family=Fira+Code&display=swap" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link <link
@ -30,9 +26,9 @@ import Card from "../components/Card.astro";
<script src="//unpkg.com/alpinejs" defer></script> <script src="//unpkg.com/alpinejs" defer></script>
</head> </head>
<body> <body>
<div class="p-2 lg:grid lg:grid-cols-[20rem_auto] lg:gap-4"> <div class="container mx-auto p-2 lg:grid lg:grid-cols-[20rem_auto] lg:gap-4">
<Sidebar /> <Sidebar />
<div class="2xl:grid 2xl:grid-cols-2 2xl:gap-2"> <div>
<Card title="Languages"> <Card title="Languages">
<div class="grid grid-cols-[5rem_auto] gap-x-2 gap-y-4"> <div class="grid grid-cols-[5rem_auto] gap-x-2 gap-y-4">
<img <img

22
tailwind.config.mjs
View File

@ -10,5 +10,25 @@ export default {
}, },
}, },
}, },
plugins: [], plugins: [
function ({ addComponents }) {
addComponents({
'.container': {
width: '98%',
'@screen sm': {
maxWidth: '640px',
},
'@screen md': {
maxWidth: '768px',
},
'@screen lg': {
maxWidth: '1024px',
},
'@screen xl': {
maxWidth: '1400px',
},
},
})
}
],
} }