Skip to content

Commit 2600584

Browse files
ashx3sashx3s
authored
Post launch visual tweaks (#69)
* article card header hover Signed-off-by: lilyx13 <[email protected]> * outline button on coloring book section hover colors Signed-off-by: lilyx13 <[email protected]> * article card header dark mode Signed-off-by: lilyx13 <[email protected]> * improved visual hierarchy with titles get started page Signed-off-by: lilyx13 <[email protected]> * footer links better colors Signed-off-by: lilyx13 <[email protected]> * blog and github from nav open in same tab Signed-off-by: lilyx13 <[email protected]> * footer cleanup and some more links Signed-off-by: lilyx13 <[email protected]> * under construction in sidebar Signed-off-by: lilyx13 <[email protected]> * sidebar no underline Signed-off-by: lilyx13 <[email protected]> * commands index page with banner Signed-off-by: lilyx13 <[email protected]> * closes #59 Signed-off-by: lilyx13 <[email protected]> * added contributing guide link #58 Signed-off-by: lilyx13 <[email protected]> * dark colorbook button hover Signed-off-by: lilyx13 <[email protected]> * outline button Signed-off-by: lilyx13 <[email protected]> * button no underline Signed-off-by: lilyx13 <[email protected]> * Revert "button no underline" This reverts commit 6979733. * no underline in button Signed-off-by: lilyx13 <[email protected]> * fixed button Signed-off-by: lilyx13 <[email protected]> --------- Signed-off-by: lilyx13 <[email protected]>
1 parent 8613848 commit 2600584

File tree

10 files changed

+63
-29
lines changed

10 files changed

+63
-29
lines changed

‎docs/commands/index.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Commands
2+
3+
We are in the process of migrating our documentation to our new site. for information on specific commands, check out [docs.podman.io](https://docs.podman.io/en/latest/Commands.html). While most of the information has been moved over, some command options aren't set up on the new site yet.

‎docusaurus.config.js

+25-7
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ const config = {
7373
{ to: 'community', label: 'Community', position: 'right' },
7474
{
7575
to: 'https://blog.podman.io',
76+
target: '_self',
7677
label: 'Development Blog',
7778
position: 'right',
7879
},
@@ -84,7 +85,8 @@ const config = {
8485
},
8586

8687
{
87-
href: 'https://github.com/containers/website-new',
88+
to: 'https://github.com/containers/',
89+
target: '_self',
8890
label: 'GitHub',
8991
position: 'right',
9092
},
@@ -98,7 +100,11 @@ const config = {
98100
items: [
99101
{
100102
label: 'Documentation',
101-
href: 'https://docs.podman.io/',
103+
to: 'docs/',
104+
},
105+
{
106+
label: 'Podman CLI Commands',
107+
href: 'https://docs.podman.io/en/latest/Commands.html',
102108
},
103109
],
104110
},
@@ -109,18 +115,30 @@ const config = {
109115
label: 'Discord',
110116
href: 'https://discord.com/invite/x5GzFF6QH4',
111117
},
118+
{
119+
label: 'Blog',
120+
href: 'https://blog.podman.io/',
121+
},
122+
{
123+
label: 'Mailing List',
124+
href: 'https://lists.podman.io',
125+
},
112126
],
113127
},
114128
{
115-
title: 'More',
129+
title: 'Projects',
116130
items: [
117131
{
118-
label: 'Blog',
119-
href: 'https://blog.podman.io/',
132+
label: 'Podman GitHub',
133+
href: 'https://github.com/containers/podman',
134+
},
135+
{
136+
label: 'Podman Desktop GitHub',
137+
href: 'https://github.com/containers/podman-desktop',
120138
},
121139
{
122-
label: 'GitHub',
123-
href: 'https://github.com/containers/website-new',
140+
label: 'Podman Website',
141+
href: 'https://github.com/containers/podman.io',
124142
},
125143
],
126144
},

‎sidebars.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@ const sidebars = {
88
'podman',
99
'first-steps',
1010
{ type: 'category', label: 'Tutorials', items: [{ type: 'autogenerated', dirName: 'tutorials' }] },
11-
{ type: 'category', label: 'Commands', items: [{ type: 'autogenerated', dirName: 'commands' }] },
11+
{
12+
type: 'category',
13+
label: 'Commands (Under Construction)',
14+
items: [{ type: 'autogenerated', dirName: 'commands' }],
15+
},
1216
],
1317
};
1418
module.exports = sidebars;

‎src/components/content/ColoringBookSection/data.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export default {
44
"A decentralized team of open source container tool superheroes comes to the rescue when an asteroid storm threatens the planet. Learn about each tool—Podman, CRI-O, Buildah, Skopeo, and OpenShift—as they redesign the planet's protective shields' container deployment to protect Earth.",
55
button: {
66
text: 'Download',
7-
src: 'https://developers.redhat.com/e-books/container-commandos-coloring-book',
7+
path: 'https://developers.redhat.com/e-books/container-commandos-coloring-book',
88
},
99
extraBook: {
1010
text: 'Podman in Action',

‎src/components/content/ColoringBookSection/index.tsx

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
import React from 'react';
2+
import Button from '@site/src/components/utilities/Button';
23
import data from './data';
3-
44
function ColoringBookSection() {
55
return (
66
<section className="container my-12 flex flex-wrap justify-center gap-4 lg:justify-start xl:my-20">
77
<div className="flex">
88
<div className="mx-4 flex-col items-center text-center lg:mx-0 lg:items-start lg:text-start">
99
<h2 className="my-4 font-medium text-blue-900 dark:text-blue-500">{data.title}</h2>
1010
<p className="mb-4 max-w-prose lg:mb-10">{data.description}</p>
11-
<a
12-
href={data.button.src}
13-
className="mx-auto block max-w-fit rounded-md px-6 py-2 text-purple-700 outline outline-1 transition duration-150 ease-linear hover:bg-gray-50 dark:text-purple-500 dark:hover:bg-gray-100 lg:mx-0">
14-
{data.button.text}{' '}
15-
</a>
11+
<Button
12+
as="link"
13+
outline
14+
{...data.button}
15+
colors="hover:bg-purple-700 dark:hover:bg-purple-900 dark:bg-purple-500 dark:text-purple-700 hover:text-white outline"
16+
/>
1617
</div>
1718
<div className="order-first mr-12 hidden lg:block">
1819
<img src={data.featureImage.src} alt={data.featureImage.alt} />

‎src/components/ui/ArticleCard/index.tsx

+8-3
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,10 @@ function ArticleCard(props: ArticleCardProps) {
3232
<div className="grid items-end xl:basis-5/12">
3333
<div className="z-10 col-start-1 row-start-1">
3434
<h3 className="w-9/12 bg-gradient-radial from-purple-700 to-purple-900 p-2 text-white shadow-sm">
35-
<a href={props.path} target="_blank">
35+
<a
36+
href={props.path}
37+
target="_blank"
38+
className="text-white no-underline hover:text-blue-100 hover:no-underline dark:text-white dark:hover:text-blue-50">
3639
{props.title}
3740
</a>
3841
</h3>
@@ -59,11 +62,13 @@ function ArticleCard(props: ArticleCardProps) {
5962
<article className="my-4 max-w-sm p-4">
6063
<div className="grid">
6164
<h3 className="w-10/12 rounded-sm bg-gradient-radial from-purple-700 to-purple-900 px-2 py-1 text-white shadow-sm">
62-
<a href={props.path} target="_blank">
65+
<a
66+
href={props.path}
67+
target="_blank"
68+
className="text-white no-underline hover:text-blue-100 hover:no-underline dark:text-white dark:hover:text-blue-50">
6369
{props.title}
6470
</a>
6571
</h3>
66-
{/* TODO: Set a max length and add ... to end */}
6772
{parse(abbrSubtitle)}
6873
<PublishDate date={props.date} styles="row-start-1 col-start-1 z-10 my-2" />
6974
<img src={props.imgSrc} className="object-fit col-start-1 row-start-1 rounded-sm" />

‎src/components/utilities/Button/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ function Button({ as = 'link', outline, colors, icon, text, method, path }: Butt
1313
const solidColors =
1414
'bg-purple-700 dark:bg-purple-900 text-white dark:text-white hover:bg-purple-900 no-underline hover:no-underline dark:hover:text-gray-50 dark:hover:bg-purple-700 hover:text-white';
1515
const outlineColors =
16-
'dark:bg-white text-purple-700 dark:text-purple-900 hover:dark:bg-purple-900 hover:dark:text-white';
16+
'no-underline outline dark:bg-white dark:text-purple-700 text-purple-700 dark:text-purple-900 dark:hover:bg-purple-900 dark:hover:text-white';
1717
/* Set Colors */
1818
const variantStyles = outline ? ` ${outlineColors} ${colors}` : `${solidColors} ${colors}`;
1919

‎src/css/main.css

+11-8
Original file line numberDiff line numberDiff line change
@@ -52,12 +52,7 @@
5252
display: inline;
5353
margin-left: 12px;
5454
}
55-
.footer {
56-
@apply bg-purple-700 dark:bg-purple-900;
57-
}
58-
.footer a {
59-
@apply hover:text-blue-300 dark:hover:text-blue-500;
60-
}
55+
6156
/* -------------- */
6257
/* Font Configuration */
6358
/* ------------- */
@@ -90,12 +85,20 @@
9085
}
9186
/* Links */
9287
a {
93-
@apply font-text text-lg text-blue-500 underline underline-offset-4 transition duration-150 ease-linear hover:opacity-80 dark:text-blue-500 dark:hover:text-purple-700 lg:text-xl;
88+
@apply font-text text-lg text-blue-500 underline underline-offset-4 transition duration-150 ease-linear hover:opacity-90 dark:text-blue-500 dark:hover:text-blue-700 lg:text-xl;
9489
}
9590
.navbar a {
9691
@apply no-underline transition duration-150 ease-linear hover:text-purple-300;
9792
}
98-
93+
.footer {
94+
@apply bg-purple-700 dark:bg-purple-900;
95+
}
96+
.footer a {
97+
@apply text-blue-50 no-underline hover:text-blue-300 dark:hover:text-blue-500;
98+
}
99+
.menu a {
100+
@apply no-underline;
101+
}
99102
/* headings size and weight */
100103
h1 {
101104
@apply text-4xl font-bold lg:text-5xl;

‎src/pages/get-started.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const GetHelpSection = () => {
1616
<SectionHeader title={getHelp.title} textColor="dark:text-blue-500 text-blue-300" />
1717
<div className="container my-8">
1818
<header className="text-center lg:my-8">
19-
<h3 className="text-white dark:text-blue-500">{getHelp.subtitle}</h3>
19+
<h3 className="text-white dark:text-white ">{getHelp.subtitle}</h3>
2020
</header>
2121
<div className="mx-auto">
2222
<div className="container grid max-w-6xl grid-cols-1 gap-y-4 lg:grid-cols-2 lg:gap-y-0">

‎static/data/community.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import MEETING_URL from './global';
22
const header = {
33
title: 'Community',
44
subtitle:
5-
'We want your feedback, issues, patches, and involvement in the development of Podman. **Chat** with us on Slack, IRC, or on our **mailing list**. Submit **issues & pull requests** (see our [CONTRIBUTING guide]() on how.) Participate in one of our twice-monthly community meetings. You are welcome in our community!',
5+
'We want your feedback, issues, patches, and involvement in the development of Podman. **Chat** with us on Slack, IRC, or on our **mailing list**. Submit **issues & pull requests** (see our [CONTRIBUTING guide](https://github.com/containers/podman/blob/main/CONTRIBUTING.md) on how.) Participate in one of our twice-monthly community meetings. You are welcome in our community!',
66
image: 'images/raw/podman-2-196w-172h.png',
77
banner: {
88
text: 'To help ensure all feel welcome in the Podman community, we expect all who participate to adhere to our [Code of Conduct](https://github.com/containers/common/blob/main/CODE-OF-CONDUCT.md)',

0 commit comments

Comments
 (0)