Estou tentando incorporar um artigo científico pré-formatado no meu site, sem interferência do tema do meu site. O artigo é composto de conteúdo HTML e CSS gerado a partir de um manuscrito LaTeX, que eu quero renderizar exatamente como está. O tema do meu site acaba estilizando partes do conteúdo HTML desse artigo, o que estou tentando evitar. Por exemplo, a folha de estilo do tema tem regras para formatação de links que são mais específicas do que aquelas especificadas pelo article.scss
, então elas têm precedência.
Este é apenas um site simples do GitHub Pages que é gerado estaticamente pelo Jekyll, mas esta questão é mais geral do que isso. Estou usando um tema de terceiros que estiliza quase tudo e funciona muito bem na maioria das páginas, onde eu apenas forneço conteúdo MarkDown idiota para ele estilizar e apresentar.
Na página deste artigo, quero usar o cabeçalho comum do site (por isso preciso do theme.scss
, não posso simplesmente ignorá-lo nessa página), mas o restante do conteúdo da página deve ser apenas o HTML do artigo como está, com seu próprio article.scss
estilo.
Qual é a melhor maneira de incorporar o HTML e o CSS deste artigo em uma "folha em branco"?
Uma abordagem para corrigir isso foi encontrar todas as regras de tema ofensivas e adicionar novas regras mais específicas, como .article p { font-size: unset; }
, etc. Isso era irritante, mas funcionou muito bem na minha primeira tentativa, mas, infelizmente, ele quebra totalmente quando mudo o tema: algumas dessas "regras de redefinição" se tornam obsoletas, e outras novas precisam ser criadas para as peculiaridades do novo tema.
Um iframe
veio à mente, mas me deu uma sensação de "você está fazendo errado". Existe uma maneira nativa de CSS de dizer algo como "esta tag e seus filhos pertencem ao seu novo contexto isolado, com seu próprio conjunto de estilos"?