Meu site antigo

Esta publicação é sobre o meu portfólio antigo, onde falo um pouco sobre as funcionalidades utilizadas. Construí este site usando TypeScript e Astro Framework, além de SASS.

O Astro é um gerador de sites estáticos que pode criar páginas HTML leves a partir de componentes de interface construídos em outros frameworks, como React, Svelte e Vue. Assim, a arquitetura deste site é baseada na Arquitetura de Ilhas (Islands Architecture). Componentes estáticos são renderizados em HTML no servidor. Apenas componentes interativos exigem scripts.

SASS

Separei o código .scss em alguns arquivos:

_abstract.scss
_animations.scss
_containers.scss
_icons.scss
_normalize.scss
_root.scss
_typography.scss
_utils.scss
_vars.scss

Principais variáveis em um arquivo _vars.scss, tudo relacionado a texto em _typographic.scss, _root.scss para variáveis CSS que mudam de acordo com as regras de breakpoint e modo de cor. Todo o conteúdo desses arquivos é reunido em um arquivo global.scss e opera em todo o site. Além disso, cada componente Astro possui seu próprio código SASS com escopo local. Quando necessário, importo _vars.scss e _abstract.scss.

Aqui estão algumas funcionalidades utilizadas neste site:

Cores

O esquema de Matiz, Saturação e Luminância (HSL) sempre me parece excelente, facilitando a visualização e alteração das cores sem a necessidade de consultar códigos hexadecimais ou RGB. Então,

No arquivo _vars.scss:

$colors: (
  'default': (
    'background': (
      '1': 'hsl(0, 0%, 20%)',
      '2': 'hsl(0, 0%, 30%)',
    ),
    'primary': (
      'base': 'hsl(280, 100%, 32%)',
      'alpha1': 'hsla(280, 100%, 32%, .5)',
      'alpha2': 'hsla(280, 100%, 32%, .9)',
    ),
    'accent': (
      'base': 'hsl(167, 60%, 65%)',
    ),
    'contrast': (
      'base': 'hsl(7, 100%, 65%)',
    ),
    'gradient': (
      'background':
        'radial-gradient(farthest-corner at bottom,var(--color-accentimary-alpha1),transparent)',
      'titles':
        'linear-gradient(45deg, var(--color-accentimary), var(--color-accent))',
      // ...
    ),
  ),
);

Então, criando algumas variáveis:

@each $t, $color-array in $colors {
  $theme: '[data-theme=#{$t}]';
  @if $t == 'default' {
    $theme: ':root, [data-theme="default"]';
  }

  #{$theme} {
    @each $main-color, $variation-array in $color-array {
      @each $variation, $hsl in $variation-array {
        $appendix: #{'-' + $variation};
        @if $variation == 'base' {
          $appendix: '';
        }
        --color-#{$main-color}#{$appendix}: #{$hsl};
      }
    }
  }
}

Breakpints

In _vars.scss file:

$breakpoints: (
  'until-sm': (
    max-width: 669px,
  ),
  'sm-up': (
    min-width: 700px,
  ),
  'until-md': (
    max-width: 899px,
  ),
  'md-up': (
    min-width: 900px,
  ),
  'until-lg': (
    max-width: 1299px,
  ),
  'lg-up': (
    min-width: 1300px,
  ),
) !default;

In _abstract.scss file:

@mixin bk($bk) {
  @if map-has-key($breakpoints, $bk) {
    @media #{inspect(map-get($breakpoints, $bk))} {
      @content;
    }
  }
}

Headings

Arquivo _vars.scss:

$heading_sizes: (
  0: '1.6rem, 5vw, 4rem',
  1: '1.4rem, 3vw, 3rem',
  2: '1.3rem, 3vw, 2rem',
  3: '1.2rem, 3vw, 1.6rem',
  4: '1.2rem, 3vw, 1.6rem',
  5: '1.1rem, 3vw, 1.5rem',
);

In _typography.scss file:

@each $k, $v in $heading_sizes {
  .h#{$k} {
    font-size: clamp(#{$v});
  }
}

Icons

Para os ícones, prefiro utilizar código .svg inserido no CSS por meio da propriedade mask-image. Dessa forma, posso colorir o ícone usando a propriedade background-color, o que facilita alterar as cores dos ícones.

Vantagem: menos conexões de carregamento de imagens e uso mais fácil.

Desvantagem: aumento do tamanho do arquivo .css dependendo da quantidade e complexidade dos ícones .svg utilizados no projeto. Utilizei a mesma técnica no projeto Prodmais.

No arquivo _vars.scss:

///...
$myIconsPack: (
  home:
    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'> ... </svg>",
  mail:
    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'> ... </svg>",
  //...
);

Como mask-image não tinah um bom suporte no Chrome usei este mixin:

@mixin mask-image($i) {
  -webkit-mask-image: url('data:image/svg+xml;utf8,' + $i);
  mask-image: url('data:image/svg+xml;utf8,' + $i);
}

Adicionei classes para diferentes tamanhos dos ícones:

$icons_size: (
  'sm': 24px,
  'md': 36px,
  'lg': 64px,
  'menu': 30px,
);
.i {
  display: inline-block;
  margin: 0.25rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  @each $k, $v in $icons_size {
    &-#{$k} {
      height: $v;
      width: $v;
    }
  }
}

Então, utilizo tudo desta forma:

<i class-"i i-home i-sm"></i>