mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
Kam
d2c0e1ec77
The tutorial intro and "next steps" pages were plain headings with no send-off. Bookend each tutorial with Angie: a greeting pose welcoming learners on the intro page, and a superhero pose congratulating them on the completion page, each beside a speech bubble. The bubble treatment from the 404 page lived inside the not-found component, so it's extracted into a reusable docs-content style (docs-tutorial-mascot) usable from tutorial markdown, and applied to the intro and completion pages of the Learn Angular, Signals, and Signal Forms tutorials.
53 lines
1.0 KiB
SCSS
53 lines
1.0 KiB
SCSS
@use '../media-queries' as mq;
|
|
|
|
@mixin docs-tutorial-mascot() {
|
|
.docs-tutorial-mascot {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
margin-block: 1.5rem;
|
|
|
|
&__angie {
|
|
flex: none;
|
|
width: clamp(150px, 18vw, 200px);
|
|
height: auto;
|
|
margin: 0;
|
|
}
|
|
|
|
&__bubble {
|
|
position: relative;
|
|
flex: 0 1 auto;
|
|
min-width: 0;
|
|
max-width: 34ch;
|
|
margin-block-start: 1rem;
|
|
margin-inline-start: -0.25rem;
|
|
padding: 1rem 1.5rem;
|
|
border-radius: 1.25rem;
|
|
background: var(--septenary-contrast);
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset-block-start: 1.5rem;
|
|
inset-inline-start: -0.4rem;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
background: inherit;
|
|
transform: rotate(45deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
@include mq.for-phone-only {
|
|
.docs-tutorial-mascot {
|
|
&__angie {
|
|
width: clamp(104px, 28vw, 140px);
|
|
}
|
|
|
|
&__bubble {
|
|
padding: 0.75rem 1.25rem;
|
|
}
|
|
}
|
|
}
|
|
}
|