Skip to content

docs: add editPageLink in demo #343

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Sep 23, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ type: lesson
title: Style up your forms!
slug: welcome
focus: /welcome.css
editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/src/content/tutorial/1-forms-css/1-introduction/1-welcome/content.md?plain=1
---

:::info{noBorder=true title="Welcome!"}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ type: lesson
title: Accent Color
focus: /style.css
slug: accent-color
editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/src/content/tutorial/1-forms-css/2-colors/1-accent-color/content.md?plain=1
---

## Customize the input colors
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ title: Progress bar
slug: progress-bar
focus: /style.css
template: default
editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/src/content/tutorial/1-forms-css/2-colors/2-progressbar/content.md?plain=1
---

## Styling the `<progress>`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ title: More Progress bar
slug: more-progress-bar
focus: /style.css
template: default
editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/src/content/tutorial/1-forms-css/2-colors/3-more-progressbar/content.md?plain=1
---

## Styling the `<progress>`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ title: Handle Firefox
slug: handle-firefox
focus: /style.css
template: default
editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/src/content/tutorial/1-forms-css/2-colors/4-handle-firefox/content.md?plain=1
---

## What about Firefox?
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ type: lesson
title: Fieldset element
slug: fieldset-element
focus: /index.html
editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/1-fieldset-element/content.md?plain=1
---

The `<fieldset>` HTML element groups related form controls, such as buttons, inputs, textareas, and labels, within a web form.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ type: lesson
title: A legend
slug: a-legend
focus: /index.html
editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/2-a-legend/content.md?plain=1
---

Even with the default styling `<fieldset>` already visually separates one group of form controls from another.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ type: lesson
title: Styling fieldsets
slug: fieldset-styling
focus: /style.css
editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/3-fieldset-styling/content.md?plain=1
---

Our HTML looks great, but the default styles leave a lot of room for improvements. Thankfully, the way `<fieldset>` and `<legend>` look like can be customized with a standard CSS.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ type: lesson
title: Focus within
slug: focus-within
focus: /style.css
editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/5-focus-within/content.md?plain=1
---
A great way to give our visitors a pointer to where they are in the form is the `:focus` state. The most common way to apply it is by highlighting the currently focused form controls like buttons and inputs. But now that the fieldset provides us with a higher level of organization for the form, we can also highlight it to give even better visual guidance!

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ type: lesson
title: The end
slug: the-end
focus: /style.css
editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/6-the-end/content.md?plain=1
---
You've reached the end of this tutorial! We hope you've enjoyed it and learned something new about working with CSS and forms.

Expand Down
Loading