juyung/devscard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add styles for the main layout

Browse source
This commit is contained in:
Konrad Szwarc 2022-09-02 14:58:14 +02:00
parent e69d07a29d
commit f7377a640c
5 changed files with 27 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/atoms/section-card.astro
View file

@ -4,4 +4,4 @@ export interface Props extends astroHTML.JSX.HTMLAttributes {}
const { props } = Astro; const { props } = Astro;
--- ---
<div {...props} class:list={['p-8 bg-white rounded-2xl shadow-lg', props.class]}><slot /></div> <div {...props} class:list={['p-8 bg-white rounded-2xl shadow-md', props.class]}><slot /></div>

7
src/components/organisms/sidebar.astro Normal file
View file

@ -0,0 +1,7 @@
---
export interface Props extends astroHTML.JSX.HTMLAttributes {}
const { props } = Astro;
---
<nav class:list={['w-14 min-w-[56px] h-72 rounded-lg bg-white shadow-md', props.class]}></nav>

22
src/pages/index.astro
View file

@ -1,4 +1,5 @@
--- ---
import Sidebar from '@/organisms/sidebar.astro';
import ExperienceSection from '@/sections/experience-section.astro'; import ExperienceSection from '@/sections/experience-section.astro';
import FavoritesSection from '@/sections/favorites-section.astro'; import FavoritesSection from '@/sections/favorites-section.astro';
import MainSection from '@/sections/main-section.astro'; import MainSection from '@/sections/main-section.astro';
@ -19,14 +20,17 @@ import data from '../data';
<title>{data.seo.title}</title> <title>{data.seo.title}</title>
<meta name="description" content={data.seo.description} /> <meta name="description" content={data.seo.description} />
</head> </head>
<body class="bg-gray-50"> <body class="flex justify-center bg-gray-50">
<main> <div class="flex gap-8 w-full max-w-6xl px-4 py-6 sm:px-8 sm:py-12 lg:px-16 lg:py-20 lg:ml-22">
<MainSection {...data.main} /> <main class="w-full space-y-6 lg:space-y-8">
{data.skills && <SkillsSection {...data.skills} />} <MainSection {...data.main} />
{data.experience && <ExperienceSection {...data.experience} />} {data.skills && <SkillsSection {...data.skills} />}
{data.portfolio && <PortfolioSection {...data.portfolio} />} {data.experience && <ExperienceSection {...data.experience} />}
{data.testimonials && <TestimonialsSection {...data.testimonials} />} {data.portfolio && <PortfolioSection {...data.portfolio} />}
{data.favorites && <FavoritesSection {...data.favorites} />} {data.testimonials && <TestimonialsSection {...data.testimonials} />}
</main> {data.favorites && <FavoritesSection {...data.favorites} />}
</main>
<Sidebar class="hidden lg:block" />
</div>
</body> </body>
</html> </html>

5
tailwind.config.cjs
View file

@ -11,6 +11,11 @@ module.exports = {
primary: colors.indigo, primary: colors.indigo,
gray: colors.gray, gray: colors.gray,
}, },
extend: {
spacing: {
22: '5.5rem',
},
},
}, },
plugins: [], plugins: [],
}; };

1
tsconfig.json
View file

@ -33,6 +33,7 @@
"baseUrl": ".", "baseUrl": ".",
"paths": { "paths": {
"@/atoms/*": ["src/components/atoms/*"], "@/atoms/*": ["src/components/atoms/*"],
"@/organisms/*": ["src/components/organisms/*"],
"@/sections/*": ["src/components/sections/*"], "@/sections/*": ["src/components/sections/*"],
"@/assets/*": ["src/assets/*"], "@/assets/*": ["src/assets/*"],
"@/types/*": ["src/types/*"] "@/types/*": ["src/types/*"]