Skip to content
OverviewSolutions
9
Comments
11
P
Micha Huhn
@MichaHuhn

All solutions

  • Article preview component using Vue and Headless UI

    #accessibility#vue#sass/scss
    P
    Micha Huhn•200
    Submitted 10 months ago
    1 comment

  • Meet landing page using Vue

    #accessibility#sass/scss#vue#typescript
    P
    Micha Huhn•200
    Submitted 10 months ago

    I would like help with the hero section on desktop. It was really challenging to find a solution.

    • Why is the text-content element inside the hero section exactly 448.3px wide. What element/constraint is the width based on?
    • How did you create the hero section on desktop, do you have any tips?
    1 comment

  • Testimonials grid section using Vue

    #accessibility#vue#sass/scss
    P
    Micha Huhn•200
    Submitted 11 months ago
    1 comment

  • Four card feature section using Vue

    #accessibility#vue#sass/scss
    P
    Micha Huhn•200
    Submitted 11 months ago

    border-top creates those curved borders.

    How to create such straight borders like in the mockup?

    2 comments

  • Product preview card component using Vue

    #accessibility#vue#sass/scss
    P
    Micha Huhn•200
    Submitted 11 months ago
    1 comment

  • Recipe page using Vue

    #sass/scss#vue#accessibility
    P
    Micha Huhn•200
    Submitted 11 months ago
    1 comment

  • Social links profile using Vue

    #sass/scss#vue#accessibility
    P
    Micha Huhn•200
    Submitted 11 months ago

    I think I found a good approach to center the card and to make it responsive (see above). However, let me know if you know a better solution.

    3 comments

  • Blog preview card using Vue

    #sass/scss#vue#accessibility
    P
    Micha Huhn•200
    Submitted 11 months ago

    I implemented the typography design system like this to reuse the presets given in the style guide:

    %typography-text-preset-1 {
  font-family: 'Figtree', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.5;
}

    .blog-title {
  @extend %typography-text-preset-1;
}

    Do you think that's a good approach or is there a better one?

    I'm using so called "SCSS placeholders".

    2 comments

  • QR code component using Vue

    #vue#sass/scss
    P
    Micha Huhn•200
    Submitted 11 months ago

    I didn't understand how to deal with the typography.

    I was able to use the design system for the colors and the spacing like so:

    html {
  --color-white: hsl(0deg 0% 100%);
  --color-slate-900: hsl(218deg 44% 22%);
  --color-slate-500: hsl(216deg 15% 48%);
  --color-slate-300: hsl(212deg 45% 89%);
}

    html {
  --spacing-500: 2.5rem;
  --spacing-300: 1.5rem;
  --spacing-200: 1rem;
}

    I just applied the typography related CSS declarations to the individual HTML elements like so:

    body {
  font-family: 'Outfit', sans-serif;
}

.heading {
  font-size: 1.375rem;
  line-height: 1.2;
}

p {
  font-size: 0.9375rem;
  line-height: 1.4;
  letter-spacing: 0.2px;  
}

    Is it beneficial in this exercise to utilize a design system also for the typography? I don't know how to do that. How would you do it?

    In the provided style guide the typography is documented like so:

    Text Preset 1: Outfit Bold
22px
120% Line Height
0px Letter Spacing

Text Preset 2: Outfit Regular
15px
140% Line Height
0.2px Letter Spacing
    1 comment