Me gustaría disminuir el tamaño de fuente de mi texto h1 en una instancia: una línea en mi página de índice. Esta línea, dos palabras de texto, es la única instancia de h1 en la página de índice (id de sección "escritura" en index.ejs). Este es un sitio web de Hexo (Node.js) - CSS en Stylus.

¿Cuál es la mejor manera de hacer una excepción al tamaño de fuente h1?

¿Es aceptable "hacer trampa" y modificar directamente la etiqueta h1 en el html relevante, o debo agregar otra clase a h1 en la hoja de estilo? En cualquier caso, ¿qué vocabulario debería utilizar al buscar cómo hacerlo?

_extend.styl

$base-style
  h1, .h1
    display: block
    margin-top: 3rem
    margin-bottom: 1rem
    color: $color-accent-1
    letter-spacing: .01em
    font-weight: 700
    font-style: normal
    font-size: 1.5em
    font-family: $font-family-sans

    antialias()

style.styl

@import "_extend"

 h1 a, .h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
    background: none
    color: inherit
    text-decoration: none

  h1 a:hover, .h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
    underline(6px, $color-link)

index.ejs

<section id="writing">
  <span class="h1"><a href="<%- url_for(theme.nav.articles) %>"><%= __('index.articles') %></a></span>
  ...
  ...
</section>
0
aguggs 5 mar. 2021 a las 09:20

2 respuestas

La mejor respuesta

Simplemente agregue una clase al H1 que desea modificar, luego podrá reutilizarlo en su proyecto para mantener un estándar.

h1{
  font-size: 20px;
}

h1.title--small{
  font-size: 15px;
}
<h1>Default title</h1>
<h1 class="title--small">Small title</h1>
0
Diego Fortes 5 mar. 2021 a las 06:27

Asigne un nombre de clase a esa etiqueta h1 e implemente su CSS personalizado usando ese nombre de clase, se restablecerá el CSS aplicado originalmente

0
Vishal Chandra 5 mar. 2021 a las 06:41