Desde sindominio queremos hacer un guiño a la causa Palestina.

Hemos destinado un rincón de nuestra web y blog a dar visibilidad y recordar la opresión, apartheid y genocidio que sufre el pueblo palestino a manos del etnoestado de Israel.

Si quieres replicar el icono/bandera en tu espacio web o recomendarlo en tus círculos, te explicamos cómo hacerlo. Lo único que tienes que hacer es añadir al código css que te proponemos a tu página web.

El código

Para la esquina inferior derecha:

html::before {
  position: fixed;
  width: 100%;
  height: 100%;
  content: "";
  z-index: 99999;
  background-position: bottom right;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjVtbSIgaGVpZ2h0PSIyNW1tIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNSAyNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBzdHJva2Utd2lkdGg9IjUyLjkxNyI+PHBhdGggZD0ibTI1IDIuNDZlLTQgLTI1LjAwMSAyNWM4LjMzMTktMC4wMDg5IDE2LjY2NSAwLjAwODEgMjQuOTk2LTAuMDA1MnoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJtMCAyNSA4LjMzMTUtOC4zMzE1IDguMzI4OSA4LjMyODl6IiBmaWxsPSIjMDA5NjM5Ii8+PHBhdGggZD0ibTI1IDAtOC4zMzE1IDguMzMxNSA4LjMyODkgOC4zMjg5eiIvPjxwYXRoIGQ9Im0xOC41MDkgNi40OTA2LTEyLjAxOSAxMi4wMTkgMTEuNDM4LTAuNTgwOTd6IiBmaWxsPSIjZWQyZTM4Ii8+PC9nPjwvc3ZnPgo=');
  background-repeat: no-repeat;
  pointer-events: none;
}
@media (max-width: 600px) {
/* Mobile styles */
  html::before {
    background-size: 2.5em;
  }
}
@media (min-width: 601px) and (max-width: 900px) {
/* Big tablet styles */
  html::before {
    background-size: 3rem;
  }
}
@media (min-width: 901px) and (max-width: 1200px) {
/* Desktop styles */
  html::before {
    background-size: 3.2rem;
  }
}
@media (min-width: 1201px) {
/* Desktop styles */
  html::before {
    background-size: 3.4rem;
  }
}

Para la esquina superior derecha (top right) tienes que cambiar estas 2 líneas:

  background-position: top right;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjVtbSIgaGVpZ2h0PSIyNW1tIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNSAyNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBzdHJva2Utd2lkdGg9IjUyLjkxNyI+PHBhdGggZD0ibTIuNDZlLTQgLTIuN2UtNCAyNSAyNS4wMDFjLTAuMDA4OS04LjMzMTkgMC4wMDgxLTE2LjY2NS0wLjAwNTItMjQuOTk2eiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Im0yNSAyNS04LjMzMTUtOC4zMzE1IDguMzI4OS04LjMyODl6IiBmaWxsPSIjMDA5NjM5Ii8+PHBhdGggZD0ibTAgMCA4LjMzMTUgOC4zMzE1IDguMzI4OS04LjMyODl6Ii8+PHBhdGggZD0ibTYuNDkwNiA2LjQ5MDYgMTIuMDE5IDEyLjAxOS0wLjU4MDk3LTExLjQzOHoiIGZpbGw9IiNlZDJlMzgiLz48L2c+PC9zdmc+Cg==');

Para la esquina inferior izquierda (bottom left):

  background-position: bottom left;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjVtbSIgaGVpZ2h0PSIyNW1tIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNSAyNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBzdHJva2Utd2lkdGg9IjUyLjkxNyI+PHBhdGggZD0ibS0yLjdlLTQgMi40NmUtNCAyNS4wMDEgMjVjLTguMzMxOS0wLjAwODktMTYuNjY1IDAuMDA4MS0yNC45OTYtMC4wMDUyeiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Im0yNSAyNS04LjMzMTUtOC4zMzE1LTguMzI4OSA4LjMyODl6IiBmaWxsPSIjMDA5NjM5Ii8+PHBhdGggZD0ibTAgMCA4LjMzMTUgOC4zMzE1LTguMzI4OSA4LjMyODl6Ii8+PHBhdGggZD0ibTYuNDkwNiA2LjQ5MDYgMTIuMDE5IDEyLjAxOS0xMS40MzgtMC41ODA5N3oiIGZpbGw9IiNlZDJlMzgiLz48L2c+PC9zdmc+Cg==');

Para la esquina superior izquierda (top left):

  background-position: top left;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjVtbSIgaGVpZ2h0PSIyNW1tIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNSAyNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBzdHJva2Utd2lkdGg9IjUyLjkxNyI+PHBhdGggZD0ibS0yLjdlLTQgMjUgMjUuMDAxLTI1Yy04LjMzMTkgMC4wMDg5LTE2LjY2NS0wLjAwODEtMjQuOTk2IDAuMDA1MnoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJtMjUgMC04LjMzMTUgOC4zMzE1LTguMzI4OS04LjMyODl6Ii8+PHBhdGggZD0ibTAgMjUgOC4zMzE1LTguMzMxNS04LjMyODktOC4zMjg5eiIgZmlsbD0iIzAwOTYzOSIvPjxwYXRoIGQ9Im02LjQ5MDYgMTguNTA5IDEyLjAxOS0xMi4wMTktMTEuNDM4IDAuNTgwOTd6IiBmaWxsPSIjZWQyZTM4Ii8+PC9nPjwvc3ZnPgo=');  

Cómo insertar el código

Método general

El código lo añades a tu fichero style.css, main.css… según el caso.

WordPress

Si usas wordpress lo puedes añadir (si no tienes bloqueada esta opción) en el bloque de texto que aparece en Apariencia > Personalizar > CSS adicional:

Nextcloud

Si quieres visualizar la bandera en tu instalación de nextcloud puedes usar la aplicación custom-css. Tras activarla, en ‘Configuraciones de administración’, menú Tema, aparecerá un cuadro de texto al final de la página donde puedes pegar el código.

Desde tu proxy web

Si manejas tu propio proxy, puedes inyectar el código cuando la respuesta html pasa a través de él.

– nginx

En el caso de nginx lo haces con el módulo http ‘ngx_http_sub_module’, que viene instalado de serie. Para activar un filtro que inyecte el código, añade al bloque ‘location’ de tu proxy:

location / {
    ...
    proxy_pass http://...
          
    sub_filter '</head>' '
    <style>
    /* aquí va el código */
    html::before {
      ...
      
    }
    /* hasta aquí va el código */
    </style></head>';
    sub_filter_once on;
}

El último parámetro «sub_filter_once on» hace que tras ejecutar la primera sustitución no se busque más </head> (sólo una vez, once). Si no te funciona, quizás tengas activada la compresión, y tendrás que añadir antes de la primera línea subfilter:

proxy_set_header Accept-Encoding "";

– apache2

En el caso de apache la cosa es similar, usando el módulo mod_substitute. El proxy examinará la respuesta html, y buscará el final de la cabecera </head>, introduciendo antes de ese cierre de cabecera el código css del icono.

<Location />
 AddOutputFilterByType SUBSTITUTE text/html
 Substitute "s|</head>|<script>\
  html:before { \
  ... \
  ... \
  } \
 </script></head>|ni"
</Location>

Fíjate que cada línea del código aquí debe finalizar con «\» barra invertida. La partícula ni al final, implica buscar el texto tal cual, sin expresiones regulares (n, no regexp) y no diferenciar mayúsculas/minúsculas cuando busca </head> (i, case insensitive). Del mismo modo que en nginx, si usas compresión, deberás modificar ligeramente la solución. Cambia la primera línea por:

AddOutputFilterByType INFLATE;SUBSTITUTE;DEFLATE text/html

En ambos casos, reinicia (reload) el proxy.

Algunas notas técnicas

Ajusta el tamaño de la bandera modificando las líneas background-size. Cada bloque del código (@media…) configura un tamaño del icono para diferentes tamaños de pantalla (móviles pequeños, medianos, tablets, laptops…). Puedes ajustar los píxeles en cada apartado @media, o establecer nuevos bloques, para definir tamaños de dispositivo diferentes para cada tamaño del icono.

Las imágenes han sido generadas en un primer paso con una aplicación de diseño gráfico vectorial (Inkscape), y guardadas con formato svg. Luego se han convertido a base64, que es la cadena de texto ininteligible que véis dentro del parámetro background-image. Desde la línea de comandos en linux puedes obtener la cadena de texto con el comando:

  cat imagen.svg | base64

Y puedes revertir la transformación y volver a obtener la imagen en formato svg con el comando:

  echo 'cadena_ininteligible' | base64 -d > imagen.svg

Recuerda que un fichero svg es un fichero xml, y lo puedes abrir en modo texto para verificar que no contiene nada raro.

Free Palestine!