Skip to content

Latest commit

 

History

History
163 lines (131 loc) · 3.81 KB

Classes-css.md

File metadata and controls

163 lines (131 loc) · 3.81 KB
Raw

Padrões criados no css (parecidos com tailwind cuidado!)🚨🧙‍♂️🚨

Algumas classes que criamos que não são do tailwind, mas são muito parecidas com a escrita, cuidado!

Dark-mode 🌑

/* É chamada no main.js para trocar o ícone assim
que clicado nele (fazendo ele sumir)*/
.display-none {
  @apply hidden;
}

/* Faz a transição do dark-mode pro light mais suave*/
* {
  transition: background-color 0.3s ease;
  -webkit-transition: background-color 0.3s ease;
  -moz-transition: background-color 0.3s ease;
  -ms-transition: background-color 0.3s ease;
  -o-transition: background-color 0.3s ease;
}

Tamanho das Sections👷🏻‍♂️👷🏻‍♀️

O tamanho máximo das sections será representado pela classe com o valor do mesmo abaixo.

/* Máxima Largura da section*/
TODO NOVA CLASSE TAILWIND

/* Máxima altura da section*/
TODO NOVA CLASSE TAILWIND

Customizações do Slider (swiper, cards ou como desejar)🎥📹

O Slider em alguns aspectos não podemos definir pelo tailwind por isso usamos as seguintes classes:

/* Container geral da biblioteca swiper */
.swiper {
  width: 100%;
  padding: 2rem 0.5rem;
  z-index: 40;
}

/* Container do slider */
.swiper-slide {
  width: 200px;
}

/* Onde englobamos todos os slides */
.swiper-wrapper {
  display: flex;
  align-items: center;
}

/* Define que invés do nome do repositório quebrar adiciona (...) automaticamente*/
.name-4noobs {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* Adiciona (...) ao nome do autor a partir de um tamanho x pelo (-webkit-line-clamp: 1;) */
.author-4noobs-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Adiciona (...) a descrição do 4noobs a partir de um tamanho x */
.Desc-4noobs-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Botão de próximo */
.swiper-button-prev {
  top: 95%;
  left: 80%;
}

/* Botão de slide anterior */
.swiper-button-next {
  top: 95%;
  left: 90%;
}

/*Seta o tamanho dos botões do slide e cor */
:root {
  --swiper-navigation-size: 15px;
  --swiper-theme-color: #782bf1;
}

Customizações da section 4noobs📚 📕

A section 4noobs tivemos que adicioná-lo um background diferente das demais section e por isso usamos as seguintes classes:

/* Adiciona a imagem de background e seleciona para ela cobrir */
.for-noobs-section__bg {
  background-image: url("/images/sectionBgImage.svg");
  background-size: cover;
}

/* Adiciona o Degradê ao background sobrepondo a imagem para criar um efeito legal */
.for-noobs-section__bg:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(270deg, #111827 50%, rgba(17, 24, 39, 0.65) 100%);
  z-index: 20;
}

Customizações da section "o que encontrarei na he4rt"🫂🥷

Aqui no css temos apenas os ícones que contém alguns detalhes:

/* Aplica position relative aos icones */
.icon__bg-rounded {
  position: relative;
}

/* Aplica o efeito da cor do icone */
.icon__bg-rounded::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  transform: scale(2);
  border-radius: 50%;
  background-color: rgba(120, 43, 241, 0.1);
}

Customizações do Footer🚦 🚥

No Footer temos algums icones onde achamos legal adicionar alguns pequenos efeitos como hover:

/* Adiciona um efeito ao passar o mouse por cima no icone */
.footer__icons:hover {
  filter: drop-shadow(0px 0px 15px #782bf1);
}

/* Troca a cor do icone ao passar o mouse por cima */
.footer__icons:hover path {
  transition: all 0.5s ease;
  fill: #782bf1;
}