Temas de Sigma-9 » Tema Paquete de Cacahuates
¿Qué es esto?
Este es un tema de variante que se usó para la Celebración del Quinceavo Aniversario de 173.
Cómo Usar
Copia esta sintaxis y pégala hasta arriba de tu página:
[[include theme:pack-of-peanuts]]
Ejemplo de Formato
Título | Título | Título | Título |
---|---|---|---|
Contenido | Contenido | Contenido | Contenido |
Título 1
Título 2
Título 3
Título 4
Título 5
Título 6
negritas | itálica | subrayado | tachado | monotipo | superíndicesubíndice
Escribe 4 guiones ---- para crear una línea horizontal.
selector de código falso{
propiedad de código falso: valor de código falso;
}
Un enlace (Un enlace que probablemente has visitado)
- lista numerada
- elemento listado
- elemento listado
- lista punteada
- elemento listado
- elemento listado
- Tabulador
- Tabulación
- Tab Larga
- Esta tab vacía tiene un nombre muy largo por alguna extraña razón. Me pregunto por qué será. Es muy extraño.
- Tab Vacía
- Tab Vacía
- Tab Vacía
- Tab Vacía
- Tab Vacía
Esta es una tab.
Hey, mira, más texto aquí.
Qué pintoresco.
Esta es una tab larga. Contiene mucho texto.
Esta es una tab larga. Contiene mucho texto.
Esta es una tab larga. Contiene mucho texto.
Esta es una tab larga. Contiene mucho texto.
Esta es una tab larga. Contiene mucho texto.
Esta es una tab larga. Contiene mucho texto.
Esta es una tab larga. Contiene mucho texto.
Esta es una tab larga. Contiene mucho texto.
Esta es una lab targa. Cotniene mucho texto.
Esta es una tab larga. Contiene mucho texto.
Esta es una tab larga. Contiene mucho texto.
Esta es una tab larga. Contiene mucho texto.
Esta es una tab larga. Contiene mucho texto.
Esta es una tab larga. Contiene mucho texto.
Esta es una tab larga. Contiene mucho texto.
Esta es una tab larga. Contiene mucho texto.
Esta es una tab larga. Contiene mucho texto.
Esta es una tab larga. Contiene mucho texto.
Bloque de citas.
Más texto
Esa es una línea horizontal.
Blockquotes anidadas
Código Fuente
/* FONTS */ @import url(https://fonts.googleapis.com/css2?family=Sriracha&display=swap); @import url(https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap); @import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap); /* YUI TAB BASE */ @import url(https://lafundacionscp.wdfiles.com/local--files/theme%3Aflopstyle-dark/tabview.css); /* Pack of Peanuts Theme * [2022 Wikidot Theme] * Created by Lt Flops * Based On: * Cosmonaut Theme by EstrellaYoshte * Flopstyle: DARK by Lt Flops **/ /* -------- HEADER AREA -------- */ /* ---- COMMON ---- */ :root{ /* -- CENTERED HEADER VARS -- */ --header-title: "LA FUNDACIÓN SCP"; --header-subtitle: "15 Años Suprimiendo Concreto, Personal"; --titleColor: var(--textColor); --subtitleColor: hsl(357, 75%, 37%); --lgurl: url(http://lafundacionscp.wikidot.com/local--files/theme%3Apack-of-peanuts/173-icon.png); /* -- COLORS -- */ --textColor: hsl(0, 0%, 5%); --bgColor: hsl(36, 57%, 87%); background: var(--bgColor); --milk: hsl(0, 0%, 95%); --sugar: hsl(60, 54%, 87%); --peanut-lite: hsl(36, 63%, 68%); --peanut-dark: hsl(36, 43%, 58%); --jellybean: hsl(114, 42%, 53%); --juice: hsl(357, 70%, 45%); --chocolate: hsl(80, 3%, 19%); --contour: hsla(0, 0%, 20%, .5); /* -- FONTS -- */ --title-font: "Sriracha", cursive; --subtitle-font: "Comic Neue", cursive; --body-font: "Inter", sans-serif; /* -- MISCELLANEOUS -- * Courtesy Of EstrellaYoshte */ --side-bar-width: 16.5rem; --body-width: 55.53rem; } body{ color: var(--textColor); background-image: linear-gradient( var(--bgColor) 20rem 27rem, var(--sugar) 35rem 100%); font: 15px var(--body-font); text-rendering: optimizeLegibility; overflow-wrap: break-word; } #content-wrap{ display: flex; justify-content: space-between; max-width: 100%; margin: 2em 1em auto; padding: 1em 0; } @media (max-width: 767px){ #content-wrap{ margin: 2em auto 0; } } #content-wrap::after{ width: max(calc(100vw - var(--side-bar-width) - var(--body-width))); max-width: var(--side-bar-width); content: ""; } #side-bar{ width: var(--side-bar-width); } #main-content{ width: 55.53rem; margin: 0; box-sizing: border-box; z-index: 0; } @media (max-width: 767px){ #main-content{ margin: 0 5%; } } @media (min-width: 768px){ #page-content{ font-size: calc(15px * 1.05); } } /* ---- SCROLLBAR + SELECTION ---- */ :root{ scrollbar-color: var(--subtitleColor) var(--chocolate); } /* Cross-Browser Supports */ ::-webkit-scrollbar{ width: 1rem; } ::-webkit-scrollbar-thumb{ background: var(--subtitleColor); } ::-webkit-scrollbar-track{ background: var(--chocolate); } ::selection{ background: hsla(114, 42%, 53%, .55); } /* ---- SITE BANNER ---- */ div#container-wrap{ background: 0; } #header{ height: 16rem; } #header::before{ background-size: auto 15em; opacity: 1; } #header h1 a::before{ top: 7.4rem; font-family: var(--title-font); font-size: 125%; } #header h2::before{ top: 7.8rem; font-family: var(--subtitle-font); font-size: 155%; } @media (max-width: 767px){ #header h2::before{ font-size: 135%; } } /* ---- SEARCH ---- */ @media (max-width: 767px){ #search-top-box{ top: 2.85em; } } #search-top-box-form input[type=submit]{ padding: .47rem .47rem .4rem; color: var(--milk); transition: color .2s ease-in-out; } #search-top-box-input, #search-top-box-input:hover, #search-top-box-input:focus, #search-top-box-form input[type=submit], #search-top-box-form input[type=submit]:hover, #search-top-box-form input[type=submit]:focus{ background: var(--juice); border-color: var(--juice); border-radius: 1rem; font-family: var(--body-font); font-size: calc(15px * 1.05); } #search-top-box-form input[type=submit]:hover, #search-top-box-form input[type=submit]:active, #search-top-box-form input[type=submit]:focus{ color: var(--jellybean); } #search-top-box-form > input[type=text]{ width: 8rem; padding: .47rem .47rem .4rem; border: 2px solid var(--chocolate); } /* ---- TOP-BAR ---- */ #top-bar{ top: 17rem; } #top-bar a{ color: var(--milk); } .top-bar, .mobile-top-bar, #top-bar ul li a{ border-right: thin solid var(--chocolate); border-left: thin solid var(--chocolate); } .top-bar, .mobile-top-bar{ height: 2rem; } #top-bar ul li a{ padding: .4rem min(.75vw, 1rem) .33rem; } #top-bar ul li.sfhover a, #top-bar ul li:hover a{ color: var(--juice); border-radius: 0; } #extrac-div-1, #extrac-div-2{ position: absolute; width: 100%; } #extrac-div-1{ top: 0; height: 17rem; background: var(--peanut-dark); background-image: url(http://lafundacionscp.wikidot.com/local--files/theme:pack-of-peanuts/concrete.png); background-repeat: repeat-x; } #extrac-div-2{ top: 16.8rem; height: 2rem; background: var(--juice); border-top: medium solid var(--chocolate); border-bottom: medium solid var(--chocolate); } /* ---- LOGIN ---- */ #login-status{ padding: .53rem 1rem; color: var(--milk); background: var(--juice); border-radius: 1rem; } @media (max-width: 767px){ #login-status{ top: .28em; left: unset; padding: .27rem .53rem .53rem; } } #login-status ul a{ color: var(--subtitleColor); background: var(--peanut-lite); } #login-status ul a:hover{ background: var(--peanut-dark); border-radius: 0; } #account-options{ border-color: var(--chocolate); } @media (max-width: 767px){ #header .printuser img.small{ transform: translate(4px, 4px); } } #my-account{ display: none; } #account-topbutton{ color: var(--textColor) !important; background: var(--milk) !important; border-color: var(--milk); border-radius: .53rem; transition: all .2s ease-in-out; } #account-topbutton:hover, #account-topbutton:active{ background: var(--jellybean) !important; border-color: var(--jellybean); transition: all .2s ease-in-out; } /* ---- SIDE-BAR ---- */ #top-bar .open-menu a{ color: var(--juice); background: var(--milk); border: 2px solid var(--juice); } #top-bar .open-menu a:hover{ padding: 0; color: var(--jellybean); background: var(--juice); box-shadow: none; } @supports (-moz-appearance: none){ #top-bar .open-menu a:hover{ color: var(--jellybean); background: var(--juice); } } @media (max-width: 767px){ #side-bar:target{ background-color: var(--sugar); border: 0; border-right: 2px solid var(--chocolate); } } @media (min-width: 768px){ #side-bar{ position: -webkit-static; position: static; top: 1rem; left: 0; height: calc(100vh - 3rem); will-change: transform; } } #side-bar .side-block, #interwiki .side-block{ border: 2px solid hsl(357, 100%, 20%); box-shadow: 3px 3px var(--contour); } #side-bar .side-block.media{ border: 2px solid hsl(240, 100%, 20%); } #side-bar .side-block.resources{ border: 2px solid hsl(127, 100%, 20%); } /* ---- COLLAPSBILES ---- */ .licensebox .collapsible-block-link{ color: var(--juice); } .licensebox .collapsible-block-link:hover{ color: var(--milk); } /* ---- PAGE RATING ---- */ .page-rate-widget-box{ margin-right: 0; box-shadow: 3px 5px var(--contour); } div.page-rate-widget-box .rate-points, .page-rate-widget-box .cancel{ background-color: var(--juice); border-color: var(--chocolate); text-transform: capitalize; } .page-rate-widget-box .rate-points, #action-area .page-rate-widget-box .rate-points{ padding: 1px 10px !important; } .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown{ padding: 1px; background-color: var(--milk); border-color: var(--chocolate); } .page-rate-widget-box .cancel{ padding: 1px; } .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a{ color: var(--chocolate); } .page-rate-widget-box .cancel a{ color: var(--milk); } .page-rate-widget-box .rateup:hover, .page-rate-widget-box .rateup a:hover, .page-rate-widget-box .ratedown:hover, .page-rate-widget-box .ratedown a:hover{ background: var(--chocolate); } .page-rate-widget-box .rateup a:hover{ color: var(--jellybean); } .page-rate-widget-box .ratedown a:hover{ color: var(--juice); } .page-rate-widget-box .cancel:hover, .page-rate-widget-box .cancel a:hover{ background: var(--juice); } .page-rate-widget-box .cancel a:hover{ color: var(--textColor); } /* ---- FORMATTING | [GENERAL] ---- */ h1, h2, h3, h4, h5, h6{ display: flex; justify-content: center; text-align: center; } h2, h3, h4, h5, h6{ font-family: var(--subtitle-font); line-height: 1.2; } h1, #page-title, .meta-title{ color: var(--subtitleColor); font-family: var(--title-font); line-height: .95; } #page-title, .meta-title{ border-color: var(--chocolate); } hr{ height: 0; margin: 1rem 0; background: transparent; border-top: thin solid var(--chocolate); } *, a, span{ /* No Line Breaks Mid-Word */ word-break: normal; } li, p{ line-height: 1.5; text-decoration-color: var(--textColor); text-underline-offset: 30%; } #toc{ background: var(--peanut-lite); border: 2px solid var(--juice); } /* Links */ a, a.newpage, a:visited, #side-bar a:visited{ color: var(--juice); transition: color .2s ease-in-out; } a:hover, a.newpage:hover, a:visited:hover, #side-bar a:visited:hover{ padding-bottom: .13rem; color: var(--milk); background-color: var(--juice); border-radius: .33rem; text-decoration: none; } #page-content a{ padding-bottom: .067rem; border-bottom: thin solid var(--juice); } #page-content a:hover{ padding-bottom: .13rem; } #page-content a:hover, #page-content .rateup a, #page-content .ratedown a, #page-content .cancel a, #page-content .cancel a:hover, #page-content .pseudocrumbs a, #page-content .creditButtonStandalone p a, #page-content .yui-nav li a, #page-content #toc a{ border: 0; } #page-content h1 a{ padding-bottom: 0; } #page-content .cancel a:hover{ padding-bottom: .067rem; } #page-content .yui-nav li a{ padding: 0; } #side-bar .side-block.media a:hover{ padding: 0; background: 0; } /* ---- IMAGE BLOCK ---- */ .scp-image-block{ border: thin solid var(--chocolate); border-radius: 1rem; box-shadow: 3px 3px var(--contour); } .scp-image-block.block-right{ margin-right: 0; } .scp-image-block .scp-image-caption{ position: relative; top: 1px; right: 1px; background: var(--peanut-lite); border: thin solid var(--chocolate); border-radius: 1rem; } /* ---- TABLES ---- */ table.wiki-content-table th{ color: var(--milk); background: var(--juice); border-color: var(--chocolate); } table.wiki-content-table td{ border-color: var(--chocolate); } /* ---- CUSTOM DIV BLOCKS ---- */ blockquote, div.blockquote{ padding: 2rem; background: hsla(36, 57%, 68%, .55); border: none; border-radius: 40% 40% / 20% 20%; } /* ---- YUI TABS ---- */ /* -- YUI TAB CUSTOMIZATION -- */ .yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav{ display: flex; flex-wrap: wrap; width: calc(100% - .13rem); margin: 0 auto; border-color: var(--chocolate); } .yui-navset .yui-nav li, .yui-navset .yui-navset-top .yui-nav li{ /* -- Listitem Modifier -- */ display: flex; flex-grow: 2; margin: 0; padding: 0; color: var(--milk); background: var(--juice); font-size: 1.05rem; } .yui-navset .yui-nav a, .yui-navset .yui-navset-top .yui-nav a{ /* -- Link Modifier -- */ /* -- Tab | [UNSELECTED] -- */ color: var(--textColor); background: var(--milk); transition: all .2s ease-in-out; font-family: var(--subtitle-font); } .yui-navset .yui-nav li a, .yui-navset-top .yui-nav li a, .yui-navset-bottom .yui-nav li a{ width: 100%; } .yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus{ /* -- Tab | [HOVER] -- */ background: var(--juice); transition: all .2s ease-in-out; } .yui-navset .yui-nav li em{ border: 0; } .yui-navset .yui-nav a em, .yui-navset .yui-navset-top .yui-nav a em{ padding-top: .47rem; padding-bottom: .47rem; text-align: center; text-overflow: ellipsis; overflow: hidden; } .yui-navset .yui-nav .selected, .yui-navset .yui-navset-top .yui-nav .selected{ /* -- Selection Modifier -- */ /* -- Tab | [SELECTED] -- */ flex-grow: 2; margin: 0; padding: 0; color: var(--milk); background: var(--juice); } .yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a em{ border: 0; } .yui-navset .yui-nav .selected a em{ padding-top: .47rem; padding-bottom: .47rem; } .yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content{ padding: .53rem; border: 0; line-height: 1.5; } /* ---- CROQSTYLE ALTERATIONS ---- */ #edit-page-textarea{ font-family: unset; } tt{ padding: unset; background: unset; font-size: unset; } .code{ background: var(--peanut-lite); border: 2px solid var(--juice); } .terminal, .terminal > .code{ background: var(--c-bg) !important; border: medium solid var(--c-comment) !important; } /* ---- SITE FOOTER ---- */ #edit-page-title{ width: 85%; padding: .2rem; color: var(--juice); font: 155% var(--title-font); } #footer{ background: var(--juice); } #license-area{ color: var(--milk); background: var(--chocolate); }
La tipografía del TÍTULO es Sriracha.
La tipografía del SUBTÍTULO es Comic Neue.
La tipografía del CUERPO es Inter.
La tipografía MONOTIPO es Fira Code.
[[=]]
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap); /* Encabezado Centrado Sigma-9 * [2021 Wikidot Component] * Por Lt Flops (CC BY-SA 3.0) * Bifurcado de: * Tema Penumbra por EstrellaYoshte * También basado en: * Encabezado Centrado BHL por Woedenaz **/ /* ---- VARS ---- */ :root{ --titleColor: hsl(0, 0%, 95%); --subtitleColor: hsl(60, 62%, 85%); --lgurl: url(https://lafundacionscp.wdfiles.com/local--files/component%3Acentered-header-sigma-9/logo.svg); } /* ---- SITE BANNER ---- */ #header, div#header{ background-image: none; } #header::before{ position: absolute; width: 100%; height: 100%; content: ""; background-image: var(--lgurl); background-position: center top; background-repeat: no-repeat; background-size: auto 10.55em; opacity: .33; } #header h1, #header h2{ float: none; margin-left: 0; text-align: center; } #header h1 span, #header h2 span{ /* Hide the Existing Text */ display: none; } #header h1 a::before, #header h2::before{ /* Style the New Text */ font-family: "Montserrat", "Arial", sans-serif; text-shadow: none; } #header h1 a::before{ position: relative; bottom: .15em; color: var(--titleColor); font-size: 115%; font-weight: 700; } #header h2::before{ position: relative; top: .1em; color: var(--subtitleColor); font-size: 130%; font-weight: 600; } #header h1 a::before{ /* Set the New Text's Content From Variable */ content: var(--header-title, "FUNDACIÓN SCP"); } #header h2::before{ content: var(--header-subtitle, "SEGURIDAD - CONTENCIÓN - PROTECCIÓN"); } /* ---- SEARCH ---- */ #search-top-box{ top: 1em; right: 0; } #search-top-box-form input.button{ margin-right: 0; } #search-top-box-input, #search-top-box-input:hover, #search-top-box-input:focus, #search-top-box-form input[type=submit], #search-top-box-form input[type=submit]:hover, #search-top-box-form input[type=submit]:focus{ border-radius: 0; box-shadow: none; font-size: 100%; } /* ---- TOP BAR ---- */ #top-bar{ right: 0; display: flex; justify-content: center; } #top-bar ul li ul{ border-bottom: 1px solid hsl(0, 0%, 40%); box-shadow: none; } /* ---- LOGIN ---- */ #login-status{ top: 1.1em; right: initial; color: hsl(0, 0%, 87%); } #account-topbutton{ border-color: hsl(0, 0%, 87%); font-size: 100%; } /* ---- PAGE TITLE ---- */ .meta-title, #page-title{ text-align: center; } /* ---- BREADCRUMBS ---- */ .pseudocrumbs, #breadcrumbs{ text-align: center; } /* ---- MOBILE DISPLAY ---- */ @media (max-width: 767px){ #search-top-box{ top: 1.85em; width: unset; } .mobile-top-bar{ position: relative; left: 0; display: flex; justify-content: center; } #login-status{ top: 0; right: 0; } #header .printuser{ font-size: 0; } #header .printuser img.small{ margin: 0; transform: translate(6px, 4px); } #my-account{ display: none; } #account-topbutton{ margin-left: 2px; } }
Qué es esto
Un puñado de "mejoras" CSS varias que yo, Croquembouche, utilizo en un montón de páginas porque creo que las hace más fáciles de manejar.
Los cambios que hace este componente son un montón de modificaciones realmente triviales para facilitar la experiencia de escritura y para hacer la documentación de los componentes/temas un poco más fácil (lo que hago mucho). No cambia nada de la página visualmente para el lector — los cambios son para el escritor.
No esperaría que las traducciones de los artículos que usan este componente también lo usen, a menos que al traductor le guste y quiera usarlo de todos modos.
Este componente probablemente no entrará en conflicto con otros componentes o temas, e incluso si lo hace, probablemente no importará demasiado.
Uso
En cualquier wiki:
[[include :lafundacionscp:component:croqstyle]]
Este componente está diseñado para ser utilizado en otros componentes. Cuando lo utilice en otro componente, asegúrese de añadir esto dentro del bloque de [[iftags]] del componente, para que los usuarios de su componente no se vean obligados a utilizar también Croqstyle.
Componentes relacionados
Otros componentes de estilo personal (que sólo cambian un par de cosas):
Temas de estilo personal (que son revisiones visuales):
Cambios de CSS
Notas a pie de página de tamaño razonable
Evita que las notas a pie de página sean de un tamaño excesivo, para que se puedan leer realmente.
.hovertip { max-width: 400px; }
Edición/código monoespaciado
Hace que el cuadro de texto de edición sea monospace, y también cambia todo el texto monospace a Fira Code, la fuente monospace obviamente superior.
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap'); :root { --mono-font: "Fira Code", Cousine, monospace; } #edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); } .code pre * { white-space: pre; } .code *, .pre * { font-feature-settings: unset; }
Fondos de teletipo
Añade un fondo gris claro a los elementos <tt> ({{text}}), para que los fragmentos de código destaquen más.
tt { background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4); font-size: 85%; padding: 0.2em 0.4em; margin: 0; border-radius: 6px; }
No más caras grandes
Evita que aparezcan imágenes grandes cuando pasas el ratón por encima de la imagen de avatar de alguien, porque son estúpidas y realmente molestas y puedes hacer clic en ellas si quieres ver la versión grande.
.avatar-hover { display: none !important; }
Salto saltito
Cualquier texto dentro de un div con clase nobreak tiene un ajuste de línea entre cada letra.
.nobreak { word-break: break-all; }
Colores del código
Añade los colores del código de mi terminal como variables. Tal vez cambie esto a un tema de terminal más común como Monokai o algo así en algún momento, pero por ahora es sólo mi tema personal, que se deriva de Tomorrow Night Eighties.
Además, al añadir la clase .terminal a un bloque de código falso como [[div class="code terminal"]] le da una especie de aspecto de pseudo-terminal con un fondo oscuro. No funciona con [[code]], porque Wikidot inserta un montón de resaltado de sintaxis que no puedes cambiar tú mismo sin un montón de CSS. Utilízalo solo para fragmentos de código sin [[code]].
Herramienta rápida para colorear un ejemplo de uso de un componente "estándar" de Wikidot con las variables anteriores: link
:root { --c-bg: #393939; --c-syntax: #e0e0e0; --c-comment: #999999; --c-error: #f2777a; --c-value: #f99157; --c-symbol: #ffcc66; --c-string: #99cc99; --c-operator: #66cccc; --c-builtin: #70a7df; --c-keyword: #cc99cc; } .terminal, .terminal > .code { color: var(--c-syntax); background: var(--c-bg); border: 0.4rem solid var(--c-comment); border-radius: 1rem; }
Modo de depuración
Dibuje líneas alrededor de cualquier cosa dentro de .debug-mode. El color de las líneas es rojo, pero depende de la variable CSS --debug-colour.
También puede añadir div.debug-info.over y div.debug-info.under dentro de un elemento para anotar las cajas de depuración - aunque tendrá que asegurarse de dejar suficiente espacio vertical para que la anotación no se superponga a lo que está por encima o por debajo.
…like this!
.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after { outline: 1px solid var(--debug-colour, red); position: relative; } .debug-info { position: absolute; left: 50%; transform: translateX(-50%); font-family: 'Fira Code', monospace; font-size: 1rem; white-space: nowrap; } .debug-info.over { top: -2.5rem; } .debug-info.under { bottom: -2.5rem; } .debug-info p { margin: 0; }