autonomic-cooperative/astro-payload-test
0
0
Fork 0
generated from autonomic-cooperative/astro-payload-template
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: autonomic-cooperative:421394a794134e24796185c03e35117f300549f5
Branches Tags
autonomic-cooperative:main autonomic-cooperative:deploy-experiments autonomic-cooperative:t-work
...
compare: autonomic-cooperative:36b5ab7cd211c9bde49324ed4b71d1c0e41287d9
Branches Tags
autonomic-cooperative:main autonomic-cooperative:deploy-experiments autonomic-cooperative:t-work

2 Commits
421394a794 ... 36b5ab7cd2

Author SHA1 Message Date
tobias
36b5ab7cd2 Create autonomic color theme
All checks were successful
continuous-integration/drone/push Build is passing
Details
2024-05-19 12:22:42 +02:00
tobias
03c14f0ca7 fix: Alt attr. string 2024-05-19 09:01:15 +02:00
5 changed files with 30 additions and 8 deletions
Expand all files Collapse all files

19
astro/src/global.css Normal file
View File

@ -0,0 +1,19 @@
.autonomic {
/* Palette */
/* RGBA instead of hex so that opacity will work */
--absolute-white: 255, 255, 255;
--white: 243, 252, 248;
--shocking-pink: 253, 0, 159;
--shamrock-green: 0, 198, 88;
--bubblegum-pink: 255, 133, 203;
--bright-orange: 255, 96, 21;
/* Use these in tailwind.config.cjs */
--primary: var(--shocking-pink);
--secondary: var(--shamrock-green);
--tertiary: var(--bright-orange);
--text: var(--shocking-pink);
--textInverted: var(--absolute-white);
--background: var(--white);
}

3
astro/src/layouts/BaseLayout.astro
View File

@ -4,6 +4,7 @@ export interface Props {
title: string; title: string;
} }
const { title } = Astro.props; const { title } = Astro.props;
import "@/global.css"
--- ---
<!DOCTYPE html> <!DOCTYPE html>
@ -30,7 +31,7 @@ const { title } = Astro.props;
} }
</style> </style>
</head> </head>
<body class="min-h-screen flex flex-col mx-auto max-w-7xl bg-gray px-6 py-8 font-plex text-gray-200"> <body class="autonomic min-h-screen flex flex-col mx-auto max-w-7xl px-6 py-8 font-plex text-primary bg-background">
<slot /> <slot />
</body> </body>
</html> </html>

4
astro/src/pages/index.astro
View File

@ -7,7 +7,7 @@ const posts = await getPosts();
<ContentLayout title="Paystro"> <ContentLayout title="Paystro">
<main class="" > <main class="" >
<h1 class="font-bold text-5xl">Paystro</h1> <h1 class="font-bold text-5xl text-">Paystro</h1>
<p class="mt-3 text-lg"> <p class="mt-3 text-lg">
Paystro is a pre-configured setup for Astro and Payloadcms that makes it Paystro is a pre-configured setup for Astro and Payloadcms that makes it
easy to get started with building your website. With Paystro, you'll have easy to get started with building your website. With Paystro, you'll have
@ -26,7 +26,7 @@ const posts = await getPosts();
posts.length > 0 ? ( posts.length > 0 ? (
posts.map((post) => ( posts.map((post) => (
<a href={`/posts/${post.id}/`}> <a href={`/posts/${post.id}/`}>
<article class="text-gray bg-gray-light px-5 py-3 rounded-md shadow-md w-64 text-center hover:-translate-y-1 transition-transform"> <article class="bg-secondary text-textInverted px-5 py-3 rounded-md shadow-md w-64 text-center hover:-translate-y-1 transition-transform">
<h3 class="font-bold text-lg">{post.title}</h3> <h3 class="font-bold text-lg">{post.title}</h3>
{post.publishedDate && ( {post.publishedDate && (
<p> <p>

1
astro/src/utils/helpers.ts
View File

@ -34,6 +34,7 @@ export const getContentArray = (content: any) => {
src: imgTag.match(/src="(.*?)"/)![1], src: imgTag.match(/src="(.*?)"/)![1],
width: +imgTag.match(/width="(.*?)"/)![1], width: +imgTag.match(/width="(.*?)"/)![1],
height: +imgTag.match(/height="(.*?)"/)![1], height: +imgTag.match(/height="(.*?)"/)![1],
alt: imgTag.match(/alt="(.*?)"/)![1],
}; };
htmlImageArray.push(remainingHtml, imgObject); htmlImageArray.push(remainingHtml, imgObject);
lastIndex = imgEndIndex; lastIndex = imgEndIndex;

11
astro/tailwind.config.cjs
View File

@ -7,11 +7,12 @@ module.exports = {
}, },
extend: { extend: {
colors: { colors: {
gray: { primary: "rgba(var(--primary))",
DEFAULT: "#111111", secondary: "rgba(var(--secondary))",
light: "#888888", tertiary: "rgba(var(--tertiary))",
dark: "#222222", text: "rgba(var(--text))",
}, textInverted: "rgba(var(--textInverted))",
background: "rgba(var(--background))",
}, },
}, },
}, },