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.
.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; }
/* fuente: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
#top-bar .open-menu a {
position: fixed;
top: 0.5em;
left: 0.5em;
z-index: 5;
font-family: 'Nanum Gothic', san-serif;
font-size: 30px;
font-weight: 700;
width: 30px;
height: 30px;
line-height: 0.9em;
text-align: center;
border: 0.2em solid #888;
background-color: #fff;
border-radius: 3em;
color: #888;
}
@media (min-width: 768px) {
#top-bar .mobile-top-bar {
display: block;
}
#top-bar .mobile-top-bar li {
display: none;
}
#main-content {
max-width: 708px;
margin: 0 auto;
padding: 0;
transition: max-width 0.2s ease-in-out;
}
#side-bar {
display: block;
position: fixed;
top: 0;
left: -20em;
width: 17.75em;
height: 100%;
margin: 0;
overflow-y: auto;
z-index: 10;
padding: 1em 1em 0 1em;
background-color: rgba(0,0,0,0.1);
transition: left 0.4s ease-in-out;
scrollbar-width: thin;
}
#side-bar:target {
left: 0;
}
#side-bar:focus-within:not(:target) {
left: 0;
}
#side-bar:target .close-menu {
display: block;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin-left: 19.75em;
opacity: 0;
z-index: -1;
visibility: visible;
}
#side-bar:not(:target) .close-menu { display: none; }
#top-bar .open-menu a:hover {
text-decoration: none;
}
/* FIREFOX-SPECIFIC COMPATIBILITY METHOD */
@supports (-moz-appearance:none) {
#top-bar .open-menu a {
pointer-events: none;
}
#side-bar:not(:target) .close-menu {
display: block;
pointer-events: none;
user-select: none;
}
/* This pseudo-element is meant to overlay the regular sidebar button
so the fixed positioning (top, left, right and/or bottom) has to match */
#side-bar .close-menu::before {
content: "";
position: fixed;
z-index: 5;
display: block;
top: 0.5em;
left: 0.5em;
border: 0.2em solid transparent;
width: 30px;
height: 30px;
font-size: 30px;
line-height: 0.9em;
pointer-events: all;
cursor: pointer;
}
#side-bar:focus-within {
left: 0;
}
#side-bar:focus-within .close-menu::before {
pointer-events: none;
}
}
}
@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;
}
}
"Los profesores se desprenden de cuanto tienen y de cuanto saben, porque su misión es esa: dar."
— Elena Poniatowska (1932)
"La educación es el arma más poderosa que puedes usar para cambiar el mundo."
— Nelson Mandela (1928 - 2013)
"La primera tarea de la educación es agitar la vida, pero dejándola libre para que se desarrolle."
— María Montessori (1870 - 1952)
"La educación alimenta la confianza. La confianza alimenta la esperanza. La esperanza alimenta la paz."
— Confucio (551 - 479 A.C.)
I. Presentación
¡Se acabó el recreo! ¡Presten atención! Muy bien, así me gusta…
¡Llegó el momento de alistar sus cuadernos, libros y lonchera, pues contra todo pronóstico les traemos la temática del concurso no-oficial de este año: ASIGNATURAS!
Ahora bien, ¿Qué entendemos por ello? La rae lo define de la siguiente manera:
"Materia objeto de estudio en la escuela, que tiene un currículum específico."
II. Información
Este concurso será individual (con excepciones, pero lo verán más abajo) y no es necesario avisar la inscripción. Las entradas pueden consistir de formatos GdI, SCPs o relatos. El objetivo es traerlos de vuelta a la esencia del colegio, donde tenían que estudiar harto sobre un curso para aprobar el trimestre. Es así que para hacer las cosas interesantes pensamos en un surtido de opciones para todos los gustos:
Deberán elegir solo una (1) de estas materias y escribir un artículo sobre ello ¡PERO OJO! No necesariamente tienen que escribir sobre todas las ramas de una materia. Por ejemplo, si un participante elije la materia de Ciencias Ambientales puede escribir ya sea sobre biología, física o química, o también podría combinar dos de estas ramas. ¡La elección es tuya!
III. Reglas
Todos los participantes deben apegarse a la temática del concurso y tener en cuenta los siguientes puntos al momento de participar:
- No está permitido el coldpost, los artículos están sujetos a las reglas de publicación y eliminación estándar.
- Los artículos publicados no llevan etiqueta, pero si llegamos a más de 5 entradas tendríamos la etiqueta "educacon-2024".
- Los artículos que se desvíen de la temática serán descalificados. El autor tendrá la oportunidad de presentar otra entrada que califique para el concurso. No duden en consultar con los organizadores.
- Los votos negativos deben estar justificados y en caso de no hacerlo no serán tomados en cuenta al momento de calcular el puntaje. Si un participante no justifica sus votos negativos a las demás entradas, será descalificado.
- Es obligatorio especificar en su post de autor, módulo de información o post en el canal de #originales de discord que su artículo está dirigido al concurso, la comunicación es clave.
- Máximo una entrada por participante (Se permiten colaboraciones entre 2 personas).
- No se pueden utilizar borradores creados antes de este anuncio.
- Tras la publicación de los artículos, podrán realizarse cambios menores de ortografía y gramática. Los cambios mayores están prohibidos (imágenes, estética, párrafos enteros, anexos, etc).
- Y la más importante: recuerda pasar un buen rato escribiendo y participando.
IV. Ganadores y premios
Serán repartidos tres lugares además de recibir un reconocimiento en el hub, adicionalmente se establecen las siguientes recompensas:
Para los primeros tres lugares y participantes: Una imagen personalizada a modo de diploma.
Para los artistas: ¡Todos los dibujos referentes a los artículos del concurso serán colocados en el Hub como reconocimiento por su dedicación! Además de añadir los respectivos créditos y un enlace a su ficha de arte en el sitio (En caso de tener una).
V. Créditos extra
¡Oh sí! En esta ocasión podrán sumar puntos extra a sus artículos por aplicar ciertas gimmicks:
| Bonos |
Descripción |
Puntos |
| Erudito |
Escribe un artículo cuyo setting se base en el rubro de la educación. |
3 |
| Salvando el trimestre |
Escribe sobre una materia que no dominas. |
2 |
| Los olvidados |
Escribe sobre una de las tres materias sin ramas (Computación; Formación religiosa o Educación física). |
1 |
| Chupamedias del profe |
Escribe un artículo que incluya dos o más ramas de una materia |
1 |
Al igual que en el ACUATICON-2023, en caso de presentarse un empate entre los primeros puestos hemos seleccionado a dos jueces que nos darán una mano para determinar el resultado final:
"¿Oe pero esto me lo cuenta pa' la nota final, no?"
"con algo tenía que rellenar el curriculum"
VI. Fechas
Escritura
Desde el 06 de noviembre hasta el 06 de diciembre. (Extendido hasta el 14 de diciembre por decisión unánime de los organizadores).
Publicaciones
Desde el 07 de diciembre hasta el 10 de diciembre. Debido al cambio anterior, el período de publicación se ha pospuesto, ahora empezando el día 14 y terminando el 17. Ten en cuenta las reglas al momento de publicar.
Tiempo de Gracia
Periodo para que los miembros de la página puedan leer y votar las entradas, en un plazo desde el 17 de diciembre hasta el 22 de diciembre.
Anuncio de Ganadores
El 23 de diciembre.
Para terminar:
Si tienen dudas no duden en presentarlas en la discusión de este post, también pueden consultar a los responsables por este concurso:
Eduteck
txum
