Browse Source

Add Jekyll theme and configuration files, including custom styles and layouts

Ernesto Blanco 8 months ago
commit
d54392c24f

+ 5 - 0
.gitignore

@@ -0,0 +1,5 @@
+_site
+.sass-cache
+.jekyll-cache
+.jekyll-metadata
+vendor

+ 25 - 0
404.html

@@ -0,0 +1,25 @@
+---
+permalink: /404.html
+layout: default
+---
+
+<style type="text/css" media="screen">
+  .container {
+    margin: 10px auto;
+    max-width: 600px;
+    text-align: center;
+  }
+  h1 {
+    margin: 30px 0;
+    font-size: 4em;
+    line-height: 1;
+    letter-spacing: -1px;
+  }
+</style>
+
+<div class="container">
+  <h1>404</h1>
+
+  <p><strong>Page not found :(</strong></p>
+  <p>The requested page could not be found.</p>
+</div>

+ 34 - 0
Gemfile

@@ -0,0 +1,34 @@
+source "https://rubygems.org"
+# Hello! This is where you manage which Jekyll version is used to run.
+# When you want to use a different version, change it below, save the
+# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
+#
+#     bundle exec jekyll serve
+#
+# This will help ensure the proper Jekyll version is running.
+# Happy Jekylling!
+gem "jekyll", "~> 4.2.2"
+# This is the default theme for new Jekyll sites. You may change this to anything you like.
+gem "minima", "~> 2.5"
+# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
+# uncomment the line below. To upgrade, run `bundle update github-pages`.
+# gem "github-pages", group: :jekyll_plugins
+# If you have any plugins, put them here!
+group :jekyll_plugins do
+  gem "jekyll-feed", "~> 0.12"
+end
+
+# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
+# and associated library.
+platforms :mingw, :x64_mingw, :mswin, :jruby do
+  gem "tzinfo", "~> 1.2"
+  gem "tzinfo-data"
+end
+
+# Performance-booster for watching directories on Windows
+gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
+
+# Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem
+# do not have a Java counterpart.
+gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
+gem "webrick", "~> 1.7"

+ 83 - 0
Gemfile.lock

@@ -0,0 +1,83 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.8.7)
+      public_suffix (>= 2.0.2, < 7.0)
+    colorator (1.1.0)
+    concurrent-ruby (1.3.5)
+    em-websocket (0.5.3)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0)
+    eventmachine (1.2.7)
+    ffi (1.17.2-x86_64-linux-musl)
+    forwardable-extended (2.6.0)
+    http_parser.rb (0.8.0)
+    i18n (1.14.7)
+      concurrent-ruby (~> 1.0)
+    jekyll (4.2.2)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 1.0)
+      jekyll-sass-converter (~> 2.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 2.3)
+      kramdown-parser-gfm (~> 1.0)
+      liquid (~> 4.0)
+      mercenary (~> 0.4.0)
+      pathutil (~> 0.9)
+      rouge (~> 3.0)
+      safe_yaml (~> 1.0)
+      terminal-table (~> 2.0)
+    jekyll-feed (0.17.0)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-sass-converter (2.2.0)
+      sassc (> 2.0.1, < 3.0)
+    jekyll-seo-tag (2.8.0)
+      jekyll (>= 3.8, < 5.0)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    kramdown (2.5.1)
+      rexml (>= 3.3.9)
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
+    liquid (4.0.4)
+    listen (3.9.0)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    mercenary (0.4.0)
+    minima (2.5.2)
+      jekyll (>= 3.5, < 5.0)
+      jekyll-feed (~> 0.9)
+      jekyll-seo-tag (~> 2.1)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (6.0.2)
+    rb-fsevent (0.11.2)
+    rb-inotify (0.11.1)
+      ffi (~> 1.0)
+    rexml (3.4.1)
+    rouge (3.30.0)
+    safe_yaml (1.0.5)
+    sassc (2.4.0)
+      ffi (~> 1.9)
+    terminal-table (2.0.0)
+      unicode-display_width (~> 1.1, >= 1.1.1)
+    unicode-display_width (1.8.0)
+    webrick (1.9.1)
+
+PLATFORMS
+  x86_64-linux-musl
+
+DEPENDENCIES
+  http_parser.rb (~> 0.6.0)
+  jekyll (~> 4.2.2)
+  jekyll-feed (~> 0.12)
+  minima (~> 2.5)
+  tzinfo (~> 1.2)
+  tzinfo-data
+  wdm (~> 0.1.1)
+  webrick (~> 1.7)
+
+BUNDLED WITH
+   2.3.25

+ 78 - 0
_config.yml

@@ -0,0 +1,78 @@
+# Welcome to Jekyll!
+#
+# This config file is meant for settings that affect your whole blog, values
+# which you are expected to set up once and rarely edit after that. If you find
+# yourself editing this file very often, consider using Jekyll's data files
+# feature for the data you need to update frequently.
+#
+# For technical reasons, this file is *NOT* reloaded automatically when you use
+# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
+#
+# If you need help with YAML syntax, here are some quick references for you: 
+# https://learn-the-web.algonquindesign.ca/topics/markdown-yaml-cheat-sheet/#yaml
+# https://learnxinyminutes.com/docs/yaml/
+#
+# Site settings
+# These are used to personalize your new site. If you look in the HTML files,
+# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
+# You can create any custom variable you would like, and they will be accessible
+# in the templates via {{ site.myvariable }}.
+
+title: Curso de informática básica
+author:
+  name: Ernesto Blanco
+  email: mail@ernestoblanco.com
+description: Un pequeño curso de informática desde cero.
+baseurl: "/curso-informatica" # the subpath of your site, e.g. /blog
+url: "" # the base hostname & protocol for your site, e.g. http://example.com
+# twitter_username: jekyllrb
+# github_username:  jekyll
+
+# Build settings
+theme: minima
+plugins:
+  - jekyll-feed
+  - jekyll-seo-tag
+
+# Exclude from processing.
+# The following items will not be processed, by default.
+# Any item listed under the `exclude:` key here will be automatically added to
+# the internal "default list".
+#
+# Excluded items can be processed by explicitly listing the directories or
+# their entries' file path in the `include:` list.
+#
+exclude:
+  - .sass-cache/
+  - .jekyll-cache/
+  - gemfiles/
+  - Gemfile
+  - Gemfile.lock
+  - node_modules/
+  - vendor/bundle/
+  - vendor/cache/
+  - vendor/gems/
+  - vendor/ruby/
+
+sass:
+  quiet_deps: true
+  silence_deprecations: [import]
+
+minima:
+  skin: classic
+  nav_pages:
+    - about.back.markdown
+  show_excerpts: true
+  date_format: "%d/%m/%Y"
+  social_links:
+    - title: Minima Theme repository at GitHub
+      icon: github
+      url: "https://github.com/jekyll/minima"
+    - title: Jekyll at X (formerly Twitter)
+      icon: x-twitter
+      url: "https://x.com/jekyllrb"
+
+collections:
+  partials:
+    output: true
+    permalink: /partials/:name/

+ 17 - 0
_includes/comments.html

@@ -0,0 +1,17 @@
+{% if site.disqus.shortname -%}
+  <script>
+    var disqus_config = function () {
+      this.page.url = '{{ page.url | absolute_url }}';
+      this.page.identifier = '{{ page.id }}';
+    };
+    (function() {
+      var d = document, s = d.createElement('script');
+      s.src = 'https://{{ site.disqus.shortname }}.disqus.com/embed.js';
+      s.setAttribute('data-timestamp', +new Date());
+      (d.head || d.body).appendChild(s);
+    })();
+  </script>
+  <noscript>
+    Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a>
+  </noscript>
+{% endif -%}

+ 6 - 0
_includes/custom-head.html

@@ -0,0 +1,6 @@
+{% comment %}
+  Placeholder to allow defining custom head, in principle, you can add anything here, e.g. favicons:
+
+  1. Head over to https://realfavicongenerator.net/ to add your own favicons.
+  2. Customize default _includes/custom-head.html in your source directory and insert the given code snippet.
+{% endcomment %}

+ 32 - 0
_includes/footer.html

@@ -0,0 +1,32 @@
+<link id="fa-stylesheet" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@latest/css/all.min.css">
+
+<footer class="site-footer h-card">
+  <data class="u-url" value="{{ '/' | relative_url }}"></data>
+
+  <div class="wrapper">
+
+    <div class="footer-col-wrapper">
+      <div class="footer-col">
+      {%- if site.author %}
+        <ul class="contact-list">
+          {% if site.author.name -%}
+            <li class="p-name">{{ site.author.name | escape }}</li>
+          {% endif -%}
+          {% if site.author.email -%}
+            <li><a class="u-email" href="mailto:{{ site.author.email }}">{{ site.author.email }}</a></li>
+          {%- endif %}
+        </ul>
+      {%- endif %}
+      </div>
+      <div class="footer-col">
+        <p>{{ site.description | escape }}</p>
+      </div>
+    </div>
+
+    <div class="social-links">
+      {%- include social.html -%}
+    </div>
+
+  </div>
+
+</footer>

+ 8 - 0
_includes/google-analytics.html

@@ -0,0 +1,8 @@
+<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){window.dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', '{{ site.google_analytics }}');
+</script>

+ 14 - 0
_includes/head.html

@@ -0,0 +1,14 @@
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  {%- seo -%}
+  <link id="main-stylesheet" rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
+  {%- feed_meta -%}
+  {%- if jekyll.environment == 'production' and site.google_analytics -%}
+    {%- include google-analytics.html -%}
+  {%- endif -%}
+
+  {%- include custom-head.html -%}
+  
+</head>

+ 20 - 0
_includes/header.html

@@ -0,0 +1,20 @@
+<header class="site-header">
+
+  <div class="wrapper">
+    {%- assign default_paths = site.pages | map: "path" -%}
+    {%- assign page_paths = site.minima.nav_pages | default: default_paths -%}
+    {%- assign page_titles = site.pages | map: 'title' | compact %}
+    <a class="site-title" rel="author" href="{{ '/' | relative_url }}">{{ site.title | escape }}</a>
+
+    {%- unless page_titles == empty %}
+      <nav class="site-nav">
+        <input type="checkbox" id="nav-trigger" />
+        <label for="nav-trigger">
+          <span class="menu-icon"></span>
+        </label>
+
+        {% include nav-items.html paths = page_paths %}
+      </nav>
+    {%- endunless %}
+  </div>
+</header>

+ 8 - 0
_includes/nav-items.html

@@ -0,0 +1,8 @@
+<div class="nav-items">
+  {%- for path in include.paths -%}
+  {%- assign hyperpage = site.pages | where: "path", path | first -%}
+  {%- if hyperpage.title %}
+  <a class="nav-item" href="{{ hyperpage.url | relative_url }}">{{ hyperpage.title | escape }}</a>
+  {%- endif -%}
+  {%- endfor %}
+</div>

+ 22 - 0
_includes/social.html

@@ -0,0 +1,22 @@
+<ul class="social-media-list">
+{%- for entry in site.minima.social_links -%}
+  <li>
+    <a rel="me" href="{{ entry.url }}" target="_blank" title="{{ entry.title }}">
+      <span class="grey fa-brands fa-{{ entry.icon }} fa-lg"></span>
+    </a>
+  </li>
+{%- endfor -%}
+{% unless site.minima.hide_site_feed_link %}
+  <li>
+    <a href="{{ site.feed.path | default: 'feed.xml' | absolute_url }}" target="_blank" title="Subscribe to syndication feed">
+      <svg class="svg-icon grey" viewbox="0 0 16 16">
+        <path d="M12.8 16C12.8 8.978 7.022 3.2 0 3.2V0c8.777 0 16 7.223 16 16h-3.2zM2.194
+          11.61c1.21 0 2.195.985 2.195 2.196 0 1.21-.99 2.194-2.2 2.194C.98 16 0 15.017 0
+          13.806c0-1.21.983-2.195 2.194-2.195zM10.606
+          16h-3.11c0-4.113-3.383-7.497-7.496-7.497v-3.11c5.818 0 10.606 4.79 10.606 10.607z"
+        />
+      </svg>
+    </a>
+  </li>
+{%- endunless %}
+</ul>

+ 4 - 0
_includes/sub-footer.html

@@ -0,0 +1,4 @@
+{% comment %}
+  Use this to insert markup before the closing body tag.
+  For example, scripts that need to be executed after the document has finished loading.
+{% endcomment %}

+ 22 - 0
_layouts/base.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: 'en' }}">
+
+  {%- include head.html -%}
+
+  <body>
+
+    {%- include header.html -%}
+
+    <main class="page-content" aria-label="Content">
+      <div class="wrapper">
+        {{ content }}
+      </div>
+    </main>
+
+    {%- include footer.html -%}
+
+    {%- include sub-footer.html -%}
+
+  </body>
+
+</html>

+ 62 - 0
_layouts/home.html

@@ -0,0 +1,62 @@
+---
+layout: base
+---
+
+<div class="home">
+  {%- if page.title -%}
+  <h1 class="page-heading">{{ page.title }}</h1>
+  {%- endif -%} {{ content }} {% if site.paginate %} {% assign posts =
+  paginator.posts %} {% else %} {% assign posts = site.posts %} {% endif %} {%-
+  if posts.size > 0 -%} {%- if page.list_title -%}
+  <h2 class="post-list-heading">{{ page.list_title }}</h2>
+  {%- endif -%}
+  <ul class="post-list">
+    {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
+    {% assign posts_ordenados = site.posts | reverse %} 
+    {% for post in posts_ordenados %}
+    <li>
+      <span class="post-meta">{{ post.date | date: date_format }}</span>
+      <h3>
+        <a class="post-link" href="{{ post.url | relative_url }}">
+          {{ post.title | escape }}
+        </a>
+      </h3>
+      {%- if site.minima.show_excerpts -%} {{ post.excerpt }} {%- endif -%}
+    </li>
+    {%- endfor -%}
+  </ul>
+
+  {% if site.paginate %}
+  <div class="pager">
+    <ul class="pagination">
+      {%- if paginator.previous_page %}
+      <li>
+        <a
+          href="{{ paginator.previous_page_path | relative_url }}"
+          class="previous-page"
+          title="Go to Page {{ paginator.previous_page }}"
+        >
+          {{ paginator.previous_page }}
+        </a>
+      </li>
+      {%- else %}
+      <li><div class="pager-edge">•</div></li>
+      {%- endif %}
+      <li><div class="current-page">{{ paginator.page }}</div></li>
+      {%- if paginator.next_page %}
+      <li>
+        <a
+          href="{{ paginator.next_page_path | relative_url }}"
+          class="next-page"
+          title="Go to Page {{ paginator.next_page }}"
+        >
+          {{ paginator.next_page }}
+        </a>
+      </li>
+      {%- else %}
+      <li><div class="pager-edge">•</div></li>
+      {%- endif %}
+    </ul>
+  </div>
+  {%- endif %} {%- endif -%}
+</div>

+ 14 - 0
_layouts/page.html

@@ -0,0 +1,14 @@
+---
+layout: base
+---
+<article class="post">
+
+  <header class="post-header">
+    <h1 class="post-title">{{ page.title | escape }}</h1>
+  </header>
+
+  <div class="post-content">
+    {{ content }}
+  </div>
+
+</article>

+ 50 - 0
_layouts/post.html

@@ -0,0 +1,50 @@
+---
+layout: base
+---
+<article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
+
+  <header class="post-header">
+    <h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}</h1>
+    <div class="post-meta">
+      {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
+      {% assign pdate = page.date | date_to_xmlschema %}
+      {%- if page.modified_date %}<span class="meta-label">Published:</span>{% endif %}
+      <time class="dt-published" datetime="{{ pdate }}" itemprop="datePublished">
+        {{ pdate | date: date_format }}
+      </time>
+      {%- if page.modified_date -%}
+        <span class="bullet-divider">•</span>
+        <span class="meta-label">Updated:</span>
+        {%- assign mdate = page.modified_date | date_to_xmlschema %}
+        <time class="dt-modified" datetime="{{ mdate }}" itemprop="dateModified">
+          {{ mdate | date: date_format }}
+        </time>
+      {%- endif -%}
+      {%- if page.author %}
+      <div class="{% unless page.modified_date %}force-inline {% endunless %}post-authors">
+        {%- for author in page.author %}
+          <span itemprop="author" itemscope itemtype="http://schema.org/Person">
+            <span class="p-author h-card" itemprop="name">{{ author }}</span></span>
+          {%- if forloop.last == false %}, {% endif -%}
+        {% endfor %}
+      </div>
+      {%- endif %}
+    </div>
+  </header>
+
+  <div class="post-content e-content" itemprop="articleBody">
+    {{ content }}
+  </div>
+
+  {% if jekyll.environment == 'production' -%}
+    {% if page.comments == false -%}
+    <div class="comments-disabled-message">
+      Comments have been disabled for this post.
+    </div>
+    {% else -%}
+      {%- include comments.html -%}
+    {% endif -%}
+  {% endif -%}
+
+  <a class="u-url" href="{{ page.url | relative_url }}" hidden></a>
+</article>

+ 286 - 0
_posts/2025-07-29-sesion01.md

@@ -0,0 +1,286 @@
+---
+layout: post
+title: "Sesión 1: ¿Qué es un sistema informático?"
+date: 2025-07-29
+excerpt: "Breve historia de las generaciones de computadoras y bases de los sistemas informáticos"
+permalink: sesion01
+---
+
+## [📸 Más que mil palabras: La HISTORIA DE LA COMPUTADORA: generaciones desde los 40 hasta los superordenadores](partials/01-1.html)
+
+**Objetivo:**  
+Comprender el origen y evolución de los sistemas informáticos, para valorar
+mejor su funcionamiento actual.
+
+---
+
+## 🍽️ Plato fuerte
+
+### Fundamentos de un Sistema Informático
+
+#### Introducción
+
+Todo sistema informático se compone de cuatro elementos esenciales:
+
+1.  **Hardware:** Son todos los componentes físicos y tangibles del ordenador,
+    desde los circuitos internos hasta los dispositivos externos.
+
+2.  **Software:** Es el conjunto de instrucciones y programas intangibles que
+    dirigen al hardware para que realice tareas específicas.
+
+3.  **Datos:** Es la información en bruto (cifras, texto, imágenes, etc.) que el
+    sistema procesa para convertirla en información útil.
+
+4.  **Usuarios:** Son las personas que operan y utilizan el ordenador.
+
+#### Procesamiento de la información
+
+El funcionamiento del sistema se basa en un **ciclo de procesamiento de la
+información** de cuatro pasos:
+
+-   Entrada de datos
+
+-   Procesamiento de datos
+
+-   Salida de resultados
+
+-   Almacenamiento para uso futuro
+
+#### El hardware
+
+##### Componentes internos
+
+El núcleo de un ordenador está en sus componentes internos, todos conectados a
+través de la **placa base (motherboard)**.
+
+El componente más importante es el **procesador (CPU)**, considerado el cerebro
+del sistema, ya que ejecuta todas las instrucciones.
+
+La **memoria** es crucial para el funcionamiento. Se divide en dos tipos
+principales:
+
+-   **Memoria RAM (Random Access Memory):** Es una memoria volátil que almacena
+    temporalmente los datos y programas que se están usando en el momento para
+    un acceso rápido.
+
+-   **Memoria ROM (Read-Only Memory):** Contiene instrucciones permanentes y
+    esenciales para el arranque del ordenador, que no se borran al apagarlo.
+
+Es importante diferenciar la memoria del **almacenamiento**, que es donde la
+información se guarda de forma permanente.
+
+##### Unidades de medida de almacenamiento
+
+Las unidades de medida para los datos son:
+
+-   El **bit** (la unidad mínima), un cero o un uno.
+
+-   El **byte** (un conjunto de 8 bits). Antiguamente se decía que equivale a un
+    carácter, aunque no es exactamente así.
+
+-   **Kilobyte (KB):** Equivale a 1024 bytes en el sistema binario, aunque
+    muchas veces se usa como múltiplo de 1000 en el sistema decimal
+    (especialmente en publicidad).
+
+-   **Megabyte (MB):** Equivale a 1024 kilobytes.
+
+-   **Gigabyte (GB):** Equivale a 1024 megabytes.
+
+-   **Terabyte (TB):** Equivale a 1024 gigabytes.
+
+##### Dispositivos de almacenamiento
+
+Existen varios tipos de dispositivos de almacenamiento:
+
+-   **Magnéticos:** Como los discos duros tradicionales (HDD).
+
+-   **Ópticos:** Como los CD, DVD o Blu-ray.
+
+-   **De estado sólido (SSD):** Usan memoria no volátil, siendo más rápidos y
+    fiables que los discos duros mecánicos.
+
+##### Dispositivos periféricos
+
+Para que el usuario pueda interactuar con el ordenador, se utilizan los
+dispositivos de entrada y salida:
+
+-   **Dispositivos de entrada:** Permiten introducir datos e instrucciones en el
+    sistema. Los más comunes son el teclado, el ratón (mouse), el escáner, la
+    webcam, los mandos de videojuegos (joysticks) y las pantallas táctiles.
+
+-   **Dispositivos de salida:** Muestran los resultados del procesamiento. El
+    ejemplo más claro es la impresora, además del propio monitor.
+
+-   **Dispositivos de comunicación:** Realizan ambas funciones (entrada y
+    salida), como los módems, que envían y reciben datos.
+
+#### El software
+
+El software es el conjunto de programas que da vida al hardware. Se clasifica en
+dos categorías:
+
+1.  **Software de sistema:** Es la base que controla el hardware y gestiona los
+    recursos. Su componente principal es el **sistema operativo** (como Windows,
+    macOS o Linux). También incluye **controladores (drivers)** que permiten al
+    sistema comunicarse con el hardware, y herramientas del sistema como
+    administradores de archivos o programas de configuración.
+
+2.  **Software de aplicación:** Son los programas que el usuario utiliza para
+    realizar tareas específicas, como procesadores de texto, hojas de cálculo,
+    editores de vídeo, navegadores web o redes sociales.
+
+#### El papel del usuario
+
+El usuario es una pieza fundamental del sistema y realiza una variedad de tareas
+clave para su funcionamiento y aprovechamiento, entre las que se incluyen:
+
+-   **Configuración y personalización** del sistema y los programas.
+
+-   **Instalación y ejecución** de aplicaciones.
+
+-   **Gestión de archivos:** Crear, guardar, organizar, hacer copias de
+    seguridad y eliminar documentos.
+
+-   **Mantenimiento del sistema** para resolver problemas y optimizar el
+    rendimiento.
+
+-   **Desarrollo de software**, en el caso de los usuarios con conocimientos de
+    programación.
+
+#### Conclusión
+
+Con estos conceptos básicos se establece una base sólida para comprender cómo
+funcionan los sistemas informáticos y cómo interactuamos con ellos a diario. A
+partir de aquí, se puede avanzar hacia temas más específicos y técnicos con
+mayor facilidad.
+
+## 🛠️ Manos a la obra
+
+### 1. Consulta las propiedades del sistema en tu dispositivo
+
+Busca la información de hardware de tu equipo o dispositivo:
+
+-   En **Windows**, abre el **Panel de control** o haz clic derecho en “Este
+    equipo” \> “Propiedades” y revisa datos como el procesador, memoria RAM y
+    tipo de sistema.
+
+-   En **iPhone (iOS)**, ve a **Configuración \> General \> Información** y
+    anota detalles como el modelo, la capacidad y la versión del sistema.
+
+### 2. Observa y anota el tamaño de diferentes archivos
+
+Elige tres archivos en tu dispositivo y anota su tamaño aproximado:
+
+-   Una **foto** (.jpg o .png)
+
+-   Un **vídeo corto** (.mp4)
+
+-   Un **documento** de texto (.docx o .pdf)
+
+### 3. Describe los pasos para ver el tamaño de un archivo
+
+Explica cómo puedes consultar el tamaño de un archivo en:
+
+-   **Windows**
+
+-   **iOS (iPhone o iPad)**
+
+### 4. Clasifica dispositivos en una tabla
+
+| Entrada | Salida | Procesamiento |
+| ------- | ------ | ------------- |
+|         |        |               |
+|         |        |               |
+|         |        |               |
+
+### 5. Identifica ejemplos de software y datos
+
+Escribe tres ejemplos para cada uno de los siguientes elementos:
+
+-   **Sistemas operativos**
+
+-   **Aplicaciones**
+
+-   **Datos (información que se puede procesar)**
+
+## 📚 Un poco de cultura general
+
+**Lectura:** *Las programadoras de ENIAC*
+
+**Objetivo:** Conocer el papel de las mujeres en los inicios de la programación
+y reflexionar sobre su invisibilización histórica.
+
+### Las programadoras de ENIAC
+
+Si bien fueron los ingenieros de ENIAC, Mauchly y Eckert, los que pasaron a la
+historia, hubo seis mujeres que se ocuparon de programar la ENIAC, cuya historia
+ha sido silenciada a lo largo de los años y recuperada en las últimas décadas.
+
+Clasificadas entonces como « subprofesionales » , posiblemente por una cuestión
+de género o para reducir los costos laborales, este equipo de programadoras
+destacaba por sus habilidades matemáticas y lógicas y trabajaron inventando la
+programación a medida que la realizaban.
+
+En 1943, durante el transcurso de la Segunda Guerra Mundial, las calculistas y
+supervisoras directas eran básicamente mujeres. Esto se debe a que por un lado,
+la Segunda Guerra Mundial fue un momento clave de la historia en lo que al
+empleo de la mujer respecta, ya que los hombres estaban reclutados en el combate
+y fueron las mujeres quienes los sustituyeron en el ámbito laboral.
+
+Un ejemplo de ello son las nuevas organizaciones civiles y militares
+estadounidenses como la WAAC (Women’s Auxiliary Army Corps, Cuerpo Auxiliar
+Femenino del Ejército), WAVES (Women Accepted for Volunteer Emergency Service,
+Mujeres Aceptadas para el Servicio Voluntario de Emergencia, perteneciente a la
+Armada) y la AWVS (American Women's Voluntary Services, Servicios Voluntarios de
+Mujeres Americanas), que encaminaron a las mujeres hacia diversos empleos.
+
+La prensa enfatizó la importancia de las máquinas en la guerra e hizo un
+llamamiento a las mujeres con conocimientos mecánicos para que se pusieran al
+servicio de la industria y del gobierno, bajo el lema «women wanted» (se buscan
+mujeres).
+
+Por otro lado, las mujeres dedicadas a lo que hoy en día se considera
+programación, a diferencia del sector masculino, no aspiraban a un empleo
+profesional en niveles superiores sino que se conformaban con puestos de poco
+renombre en el mundo de la computación donde poder hacer uso de sus capacidades.
+
+Según Herman Goldstine ( principal desarrollador del ENIAC) afirmó en una
+entrevista el 16 de noviembre de 1994, que fue el hecho de que las mujeres no
+aspirasen a mayores cargos lo que las convertía en el trabajador ideal.
+
+Los hombres que trabajaban en programación no lo veían como una meta sino como
+un trabajo momentáneo para conseguir ingresos de forma rápida. Los programadores
+aspiraban a un empleo más valorado y se dedicaban a competir entre ellos, de
+modo que no ponían tanto esfuerzo y dedicación en su trabajo como las mujeres
+para las cuales la programación constituía su única oportunidad laboral.
+
+En consecuencia, las mujeres eran más meticulosas y rápidas que los hombres en
+este trabajo y recibían un sueldo más modesto, por lo que su contratación
+suponía numerosas ventajas.
+
+El grupo de programadoras del ENIAC estaba conformado por: Betty Snyder
+Holberton, Jean Jennings Bartik, Kathleen McNulty Mauchly Antonelli, Marlyn
+Wescoff Meltzer, Ruth Lichterman Teitelbaum y Frances Bilas Spence, quienes
+prácticamente no aparecen en los libros de historia de la computación, aunque
+dedicaron largas jornadas a trabajar con la máquina, utilizada principalmente
+para cálculos de trayectoria balística y ecuaciones diferenciales, contribuyendo
+al desarrollo de la programación de computadoras.
+
+Cuando, posteriormente, la ENIAC se convirtió en una máquina legendaria, sus
+ingenieros se hicieron famosos, mientras que nunca se le otorgó crédito alguno a
+estas seis mujeres que se ocuparon de la programación.
+
+Aunque las mujeres empezaran a ocupar puestos relacionados con la ingeniería y
+la ciencia en la Segunda Guerra Mundial, la discriminación por género en el
+trabajo seguía estando presente. El reconocimiento recaía únicamente en los
+líderes varones y las fotografías publicitarias rara vez mostraban las
+contribuciones de las mujeres.
+
+Muchos registros de fotos de la época muestran la ENIAC con mujeres de pie
+frente a ella. Hasta la década de 1980, se dijo incluso que ellas eran sólo
+modelos que posaban junto a la máquina ( « Refrigerator ladies » ). Sin embargo,
+estas mujeres sentaron las bases para que la programación fuera sencilla y
+accesible para todos, crearon el primer set de rutinas, las primeras
+aplicaciones de software y las primeras clases en programación. Su trabajo
+modificó drásticamente la evolución de la programación entre las décadas del 40
+y el 50.

+ 29 - 0
_posts/_2025-07-29-welcome-to-jekyll.markdown

@@ -0,0 +1,29 @@
+---
+layout: post
+title:  "Welcome to Jekyll!"
+date:   2025-07-29 15:17:28 -0500
+categories: jekyll update
+---
+You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
+
+Jekyll requires blog post files to be named according to the following format:
+
+`YEAR-MONTH-DAY-title.MARKUP`
+
+Where `YEAR` is a four-digit number, `MONTH` and `DAY` are both two-digit numbers, and `MARKUP` is the file extension representing the format used in the file. After that, include the necessary front matter. Take a look at the source for this post to get an idea about how it works.
+
+Jekyll also offers powerful support for code snippets:
+
+{% highlight ruby %}
+def print_hi(name)
+  puts "Hi, #{name}"
+end
+print_hi('Tom')
+#=> prints 'Hi, Tom' to STDOUT.
+{% endhighlight %}
+
+Check out the [Jekyll docs][jekyll-docs] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll Talk][jekyll-talk].
+
+[jekyll-docs]: https://jekyllrb.com/docs/home
+[jekyll-gh]:   https://github.com/jekyll/jekyll
+[jekyll-talk]: https://talk.jekyllrb.com/

+ 296 - 0
_sass/minima/_base.scss

@@ -0,0 +1,296 @@
+html {
+  font-size: $base-font-size;
+}
+
+/**
+ * Reset some basic elements
+ */
+body, h1, h2, h3, h4, h5, h6,
+p, blockquote, pre, hr,
+dl, dd, ol, ul, figure {
+  margin: 0;
+  padding: 0;
+
+}
+
+
+
+/**
+ * Basic styling
+ */
+body {
+  font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
+  color: $text-color;
+  background-color: $background-color;
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-feature-settings: "kern" 1;
+     -moz-font-feature-settings: "kern" 1;
+       -o-font-feature-settings: "kern" 1;
+          font-feature-settings: "kern" 1;
+  font-kerning: normal;
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  overflow-wrap: break-word;
+}
+
+
+
+/**
+ * Set `margin-bottom` to maintain vertical rhythm
+ */
+h1, h2, h3, h4, h5, h6,
+p, blockquote, pre,
+ul, ol, dl, figure,
+%vertical-rhythm {
+  margin-bottom: $spacing-unit * .5;
+}
+
+hr {
+  margin-top: $spacing-unit;
+  margin-bottom: $spacing-unit;
+}
+
+/**
+ * `main` element
+ */
+main {
+  display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */
+}
+
+
+
+/**
+ * Images
+ */
+img {
+  max-width: 100%;
+  vertical-align: middle;
+}
+
+
+
+/**
+ * Figures
+ */
+figure > img {
+  display: block;
+}
+
+figcaption {
+  font-size: $small-font-size;
+}
+
+
+
+/**
+ * Lists
+ */
+ul, ol {
+  margin-left: $spacing-unit;
+}
+
+li {
+  > ul,
+  > ol {
+    margin-bottom: 0;
+  }
+}
+
+
+
+/**
+ * Headings
+ */
+h1, h2, h3, h4, h5, h6 {
+  color: $heading-color;
+  font-weight: 500;
+}
+
+
+
+/**
+ * Links
+ */
+a {
+  color: $link-base-color;
+  text-decoration: none;
+
+  &:visited {
+    color: $link-visited-color;
+  }
+
+  &:hover {
+    color: $link-hover-color;
+    text-decoration: underline $brand-color;
+    text-underline-offset: 3px;
+  }
+
+  .social-media-list &:hover {
+    text-decoration: none;
+
+    .username {
+      text-decoration: underline;
+    }
+  }
+}
+
+
+/**
+ * Blockquotes
+ */
+blockquote {
+  color: $brand-color;
+  border-left: 4px solid $border-color-01;
+  padding-left: $spacing-unit * .5;
+  @include relative-font-size(1.05);
+  font-style: italic;
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  i, em {
+    font-style: normal;
+  }
+}
+
+
+
+/**
+ * Code formatting
+ */
+pre,
+code {
+  font-family: $code-font-family;
+  background-color: $code-background-color;
+
+  @include media-query($on-palm) {
+    font-family: monospace;
+  }
+}
+
+pre {
+  padding: 8px 12px;
+  font-size: 15px;
+  line-height: 1.4;
+  color: $heading-color;
+  overflow-x: auto;
+
+  > code {
+    display: inline-block;
+    width: 100%;
+  }
+}
+
+div.highlight, figure.highlight {
+  @extend %vertical-rhythm;
+  border: 1px solid $border-color-01;
+  border-radius: 3px;
+  pre { margin: 0 }
+  table, tbody, th, tr, td {
+    margin: 0;
+    padding: 0;
+    border: 0
+  }
+  .lineno, .gl { text-align: right }
+}
+
+figure.highlight {
+  table { margin: -8px -12px -14px }
+  td.gutter { border-right: 1px solid $border-color-01 }
+  td.code { width: 100% }
+}
+
+code.highlighter-rouge {
+  padding: 1px 5px;
+  font-size: 14px;
+  border: 1px solid $border-color-01;
+  border-radius: 3px;
+}
+
+
+
+/**
+ * Wrapper
+ */
+.wrapper {
+  max-width: $content-width;
+  margin: 0 auto;
+  padding: 0 $spacing-unit;
+  @extend %clearfix;
+
+  @media screen and (max-width: $on-medium) {
+    padding-right: $spacing-unit * 0.6;
+    padding-left: $spacing-unit * 0.6;
+  }
+}
+
+
+
+/**
+ * Clearfix
+ */
+%clearfix:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+
+
+/**
+ * Icons
+ */
+
+.orange {
+  color: #f66a0a;
+}
+
+.grey {
+  color: #828282;
+}
+
+.svg-icon {
+  width: 1.25em;
+  height: 1.25em;
+  display: inline-block;
+  fill: currentColor;
+  vertical-align: text-bottom;
+  overflow: visible;
+}
+
+
+/**
+ * Tables
+ */
+table {
+  margin-bottom: $spacing-unit;
+  width: 100%;
+  text-align: $table-text-align;
+  color: $table-text-color;
+  border-collapse: collapse;
+  border: 1px solid $table-border-color;
+  tr {
+    &:nth-child(even) {
+      background-color: $table-zebra-color;
+    }
+  }
+  th, td {
+    padding: ($spacing-unit * 33.3333333333 * .01) ($spacing-unit * .5);
+  }
+  th {
+    background-color: $table-header-bg-color;
+    border: 1px solid $table-header-border;
+  }
+  td {
+    border: 1px solid $table-border-color;
+  }
+
+  @include media-query($on-laptop) {
+    display: block;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+            -ms-overflow-style: -ms-autohiding-scrollbar;
+  }
+}

+ 417 - 0
_sass/minima/_layout.scss

@@ -0,0 +1,417 @@
+/**
+ * Site header
+ */
+.site-header {
+  position: relative;
+  width: 100%;
+  min-height: $spacing-unit * 1.865;
+  line-height: $base-line-height * $base-font-size * 2.25;
+  background-color: $background-color;
+  border-top: 5px solid $border-color-03;
+  border-bottom: 1px solid $border-color-01;
+}
+
+.site-title {
+  @include relative-font-size(1.625);
+  font-weight: 300;
+  letter-spacing: -1px;
+  margin-bottom: 0;
+  float: left;
+
+  @include media-query($on-palm) {
+    padding-right: 45px;
+  }
+
+  &,
+  &:visited {
+    color: $site-title-color;
+  }
+}
+
+.site-nav {
+  float: right;
+  border: none;
+  background-color: inherit;
+
+  label[for="nav-trigger"], #nav-trigger {
+    display: none;
+  }
+
+  .nav-item {
+    color: $text-color;
+    &:not(:last-child) {
+      margin-right: $spacing-unit * 0.5;
+    }
+  }
+
+  @include media-query($on-medium) {
+    position: absolute;
+    top: 9px;
+    right: $spacing-unit * 0.6;
+    background-color: $background-color;
+    border: 1px solid $border-color-01;
+    border-radius: 5px;
+    text-align: right;
+
+    label[for="nav-trigger"] {
+      display: block;
+      float: right;
+      width: 36px;
+      height: 36px;
+      cursor: pointer;
+    }
+
+    .menu-icon {
+      float: right;
+      width: 36px;
+      height: 26px;
+      line-height: 0;
+      padding-top: 18px;
+      text-align: center;
+
+      &::before {
+        font-family: "Font Awesome 6 Free";
+        font-weight: 900;
+      }
+
+      > svg path {
+        fill: $border-color-03;
+      }
+    }
+
+    #nav-trigger {
+      ~ label[for=nav-trigger] .menu-icon {
+        &::before {
+          content: "\f0c9";
+          font-size: 1.25em;
+        }
+      }
+      ~ .nav-items {
+        clear: both;
+        display: none
+      }
+      &:checked {
+      ~ label[for=nav-trigger] .menu-icon {
+        &::before {
+          content: "\f00d";
+          font-size: 1.5em;
+        }
+      }
+        ~ .nav-items {
+          display: block;
+          padding-bottom: 5px;
+          .nav-item {
+            margin-left: 20px;
+            padding: 5px 10px;
+          }
+        }
+      }
+    }
+
+    .nav-item {
+      display: block;
+      padding: 5px 0;
+      color: $text-color;
+      line-height: $base-line-height;
+    }
+  }
+}
+
+
+
+/**
+ * Site footer
+ */
+.site-footer {
+  border-top: 1px solid $border-color-01;
+  padding: $spacing-unit 0;
+}
+
+.footer-heading {
+  @include relative-font-size(1.125);
+  margin-bottom: $spacing-unit * .5;
+}
+
+.feed-subscribe .svg-icon {
+  padding: 5px 5px 2px 0
+}
+
+.contact-list,
+.social-media-list {
+  list-style: none;
+  margin-left: 0;
+}
+
+.footer-col-wrapper,
+.social-links {
+  @include relative-font-size(0.9375);
+  color: $brand-color-dimmed;
+}
+
+.footer-col {
+  margin-bottom: $spacing-unit * .5;
+}
+
+.footer-col-1,
+.footer-col-2 {
+  width: calc(50% - (#{$spacing-unit} / 2));
+}
+
+.footer-col-3 {
+  width: calc(100% - (#{$spacing-unit} / 2));
+}
+
+@media screen and (min-width: $on-large) {
+  .footer-col-1 {
+    width: calc(35% - (#{$spacing-unit} / 2));
+  }
+
+  .footer-col-2 {
+    width: calc(20% - (#{$spacing-unit} / 2));
+  }
+
+  .footer-col-3 {
+    width: calc(45% - (#{$spacing-unit} / 2));
+  }
+}
+
+@media screen and (min-width: $on-medium) {
+  .footer-col-wrapper {
+    display: flex
+  }
+
+  .footer-col {
+    width: calc(100% - (#{$spacing-unit} / 2));
+    padding: 0 ($spacing-unit * .5);
+
+    &:first-child {
+      padding-right: $spacing-unit * .5;
+      padding-left: 0;
+    }
+
+    &:last-child {
+      padding-right: 0;
+      padding-left: $spacing-unit * .5;
+    }
+  }
+}
+
+
+
+/**
+ * Page content
+ */
+.page-content {
+  padding: $spacing-unit 0;
+  flex: 1 0 auto;
+}
+
+.page-heading {
+  @include relative-font-size(2);
+}
+
+.post-list-heading {
+  @include relative-font-size(1.75);
+}
+
+.post-list {
+  margin-left: 0;
+  list-style: none;
+
+  > li {
+    margin-bottom: $spacing-unit;
+  }
+}
+
+.post-meta {
+  font-size: $small-font-size;
+  color: $brand-color-dimmed;
+}
+
+.post-link {
+  display: block;
+  @include relative-font-size(1.5);
+}
+
+
+
+/**
+ * Posts
+ */
+.post-header {
+  margin-bottom: $spacing-unit;
+  padding-bottom: 18px;
+  text-align: center;
+  border-bottom: 1px solid $border-color-01;
+}
+
+.post-meta {
+  .bullet-divider { padding-inline: 15px }
+  .meta-label { font-weight: 600 }
+
+  .force-inline {
+    display: inline;
+    &::before {
+      content: "•";
+      padding-inline: 5px;
+    }
+  }
+  .post-authors { margin-top: 3px }
+}
+
+.post-title,
+.post-content h1 {
+  margin-bottom: 10px;
+  @include relative-font-size(2.625);
+  font-weight: $base-font-weight;
+  letter-spacing: -1px;
+  line-height: 1.15;
+
+  @media screen and (min-width: $on-large) {
+    @include relative-font-size(2.625);
+  }
+}
+
+.post-content {
+  margin-bottom: $spacing-unit;
+
+  h1, h2, h3, h4, h5, h6 { margin-top: $spacing-unit }
+
+  h2 {
+    @include relative-font-size(1.75);
+
+    @media screen and (min-width: $on-large) {
+      @include relative-font-size(2);
+    }
+  }
+
+  h3 {
+    @include relative-font-size(1.375);
+
+    @media screen and (min-width: $on-large) {
+      @include relative-font-size(1.625);
+    }
+  }
+
+  h4 {
+    @include relative-font-size(1.25);
+  }
+
+  h5 {
+    @include relative-font-size(1.125);
+  }
+  h6 {
+    @include relative-font-size(1.0625);
+  }
+}
+
+.comments-disabled-message {
+  text-align: center;
+  font-weight: 300;
+}
+
+.social-media-list {
+  display: table;
+  margin: 0 auto;
+  li {
+    float: left;
+    min-width: 45px;
+    min-height: 45px;
+    text-align: center;
+    margin: 5px 10px 5px 0;
+    &:last-of-type { margin-right: 0 }
+    a {
+      display: block;
+      padding: 10px 12px;
+      border: 1px solid $border-color-01;
+      &:hover { border-color: $border-color-02 }
+    }
+  }
+}
+
+
+
+/**
+ * Pagination navbar
+ */
+.pagination {
+  display: table;
+  margin: 0 auto;
+  list-style-type: none;
+  li {
+    float: left;
+    margin: 0 3px;
+    min-width: 45px;
+    min-height: 45px;
+    text-align: center;
+    a {
+      display: block;
+      text-decoration: none;
+      border: 1px solid $border-color-01;
+      &:hover { border-color: $border-color-02 }
+    }
+    a, div {
+      min-width: 41px;
+      padding: 10px 12px;
+      text-align: center;
+      box-sizing: border-box;
+    }
+    div {
+      border: 1px solid transparent;
+      &.pager-edge {
+        color: $border-color-01;
+        border: 1px dashed;
+      }
+      &.current-page {
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+
+
+/**
+ * Task-lists
+ */
+
+.task-list {
+  margin-left: 0;
+  padding-left: $spacing-unit * 0.6;
+}
+
+.task-list-item {
+  list-style-type: none;
+  &-checkbox {
+    position: relative;
+    margin-right: $spacing-unit * 0.3;
+    margin-left: -$spacing-unit * 0.5;
+    appearance: none;
+    border: 8px solid $border-color-01;
+    vertical-align: text-top;
+    z-index: -1;
+    &::after {
+      position: absolute;
+      top: -8px;
+      left: -3px;
+      width: 4px;
+      height: 10px;
+      content: "";
+      border: solid transparent;
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+    }
+    &:checked::after { border-color: $border-color-03 }
+  }
+}
+
+
+
+/**
+ * Grid helpers
+ */
+@media screen and (min-width: $on-large) {
+  .one-half {
+    width: calc(50% - (#{$spacing-unit} / 2));
+  }
+}

+ 2 - 0
_sass/minima/custom-styles.scss

@@ -0,0 +1,2 @@
+// Placeholder to allow defining custom styles that override everything else.
+// (Use `_sass/minima/custom-variables.scss` to override variable defaults)

+ 1 - 0
_sass/minima/custom-variables.scss

@@ -0,0 +1 @@
+// Placeholder to allow overriding predefined variables smoothly.

+ 50 - 0
_sass/minima/initialize.scss

@@ -0,0 +1,50 @@
+@charset "utf-8";
+
+// Define defaults for each variable.
+
+$base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", Roboto, Helvetica, Arial, sans-serif !default;
+$code-font-family: "Menlo", "Inconsolata", "Consolas", "Roboto Mono", "Ubuntu Mono", "Liberation Mono", "Courier New", monospace;
+$base-font-size:   16px !default;
+$base-font-weight: 400 !default;
+$small-font-size:  $base-font-size * 0.875 !default;
+$base-line-height: 1.5 !default;
+
+$spacing-unit:     30px !default;
+
+$table-text-align: left !default;
+
+// Width of the content area
+$content-width:    800px !default;
+
+$on-palm:          600px !default;
+$on-laptop:        800px !default;
+
+$on-medium:        $on-palm !default;
+$on-large:         $on-laptop !default;
+
+// Use media queries like this:
+// @include media-query($on-palm) {
+//   .wrapper {
+//     padding-right: $spacing-unit / 2;
+//     padding-left: $spacing-unit / 2;
+//   }
+// }
+// Notice the following mixin uses max-width, in a deprecated, desktop-first
+// approach, whereas media queries used elsewhere now use min-width.
+@mixin media-query($device) {
+  @media screen and (max-width: $device) {
+    @content;
+  }
+}
+
+@mixin relative-font-size($ratio) {
+  font-size: #{$ratio}rem;
+}
+
+// Import pre-styling-overrides hook and style-partials.
+@import
+  "minima/custom-variables", // Hook to override predefined variables.
+  "minima/base",             // Defines element resets.
+  "minima/layout",           // Defines structure and style based on CSS selectors.
+  "minima/custom-styles"     // Hook to override existing styles.
+;

+ 399 - 0
_sass/minima/skins/auto.scss

@@ -0,0 +1,399 @@
+@charset "utf-8";
+
+// Default color scheme settings
+// These are overridden in classic.css and dark.scss
+
+$color-scheme-auto: true !default;
+$color-scheme-dark: false !default;
+
+
+// Light mode
+// ----------
+
+$lm-brand-color:           #818181 !default;
+$lm-brand-color-light:     lighten($lm-brand-color, 40%) !default;
+$lm-brand-color-dimmed:    darken($lm-brand-color, 11%) !default;
+$lm-brand-color-dark:      darken($lm-brand-color, 25%) !default;
+
+$lm-site-title-color:      $lm-brand-color-dark !default;
+
+$lm-heading-color:         #111111 !default;
+$lm-text-color:            $lm-brand-color-dark !default;
+$lm-background-color:      #fdfdfd !default;
+$lm-code-background-color: #f6f8fa !default;
+
+$lm-link-base-color:       #1e69d8 !default;
+$lm-link-visited-color:    darken($lm-link-base-color, 15%) !default;
+$lm-link-hover-color:      $lm-text-color !default;
+
+$lm-border-color-01:       $lm-brand-color-light !default;
+$lm-border-color-02:       lighten($lm-brand-color, 35%) !default;
+$lm-border-color-03:       $lm-brand-color-dark !default;
+
+$lm-table-text-color:      lighten($lm-heading-color, 18%) !default;
+$lm-table-zebra-color:     lighten($lm-brand-color, 46%) !default;
+$lm-table-header-bg-color: lighten($lm-brand-color, 43%) !default;
+$lm-table-header-border:   lighten($lm-brand-color, 37%) !default;
+$lm-table-border-color:    $lm-border-color-01 !default;
+
+
+// Syntax highlighting styles should be adjusted appropriately for every "skin"
+// ----------------------------------------------------------------------------
+
+@mixin lm-highlight {
+  .highlight {
+    .err   { color: #e3d2d2; background-color: #a61717 } // Error
+
+    .c     { color: #9c9996 } // Comment
+    .cm    { color: #9c9996 } // Comment.Multiline
+    .cp    { color: #9c9996 } // Comment.Preproc
+    .c1    { color: #9c9996 } // Comment.Single
+    .cs    { color: #9c9996; font-style: italic } // Comment.Special
+
+    .gd    { color: #e25050 } // Generic.Deleted
+    .gd .x { color: #e25050 } // Generic.Deleted.Specific
+    .ge    { font-style: italic } // Generic.Emph
+    .gh    { color: #999999 } // Generic.Heading
+    .gi    { color: #3f993f } // Generic.Inserted
+    .gi .x { color: #3f993f } // Generic.Inserted.Specific
+    .go    { color: #888888 } // Generic.Output
+    .gp    { color: #555555 } // Generic.Prompt
+    .gr    { color: #aa0000 } // Generic.Error
+    .gs    { font-weight: bold } // Generic.Strong
+    .gt    { color: #aa0000 } // Generic.Traceback
+    .gu    { color: #aaaaaa } // Generic.Subheading
+
+    .k     { color: #cf222e } // Keyword
+    .kc    { color: #cf222e } // Keyword.Constant
+    .kd    { color: #cf222e } // Keyword.Declaration
+    .kp    { color: #cf222e } // Keyword.Pseudo
+    .kr    { color: #cf222e } // Keyword.Reserved
+    .kt    { color: #445588 } // Keyword.Type
+
+    .n     { color: #111111 }
+    .na    { color: #097e39 } // Name.Attribute
+    .nb    { color: #cf222e } // Name.Builtin
+    .bp    { color: #999999 } // Name.Builtin.Pseudo
+    .nc    { color: #097e39 } // Name.Class
+    .ne    { color: #990000 } // Name.Exception
+    .nf    { color: #2c7d74 } // Name.Function
+    .ni    { color: #097e39 } // Name.Entity
+    .nn    { color: #097e39 } // Name.Namespace
+    .no    { color: #a61154 } // Name.Constant
+    .nt    { color: #b81e63 } // Name.Tag
+    .nv    { color: #752a75 } // Name.Variable
+    .vc    { color: #752a75 } // Name.Variable.Class
+    .vg    { color: #752a75 } // Name.Variable.Global
+    .vi    { color: #752a75 } // Name.Variable.Instance
+
+    .o     { color: #0842a0 } // Operator
+    .ow    { color: #0842a0 } // Operator.Word
+
+    .m     { color: #005a99 } // Literal.Number
+    .mf    { color: #005a99 } // Literal.Number.Float
+    .mh    { color: #005a99 } // Literal.Number.Hex
+    .mi    { color: #005a99 } // Literal.Number.Integer
+    .il    { color: #005a99 } // Literal.Number.Integer.Long
+    .mo    { color: #005a99 } // Literal.Number.Oct
+
+    .s     { color: #914d08 } // Literal.String
+    .s1    { color: #914d08 } // Literal.String.Single
+    .s2    { color: #914d08 } // Literal.String.Double
+    .sb    { color: #914d08 } // Literal.String.Backtick
+    .sc    { color: #914d08 } // Literal.String.Char
+    .sd    { color: #914d08 } // Literal.String.Doc
+    .se    { color: #914d08 } // Literal.String.Escape
+    .sh    { color: #914d08 } // Literal.String.Heredoc
+    .si    { color: #914d08 } // Literal.String.Interpol
+    .sr    { color: #009926 } // Literal.String.Regex
+    .ss    { color: #0842a0 } // Literal.String.Symbol
+    .sx    { color: #914d08 } // Literal.String.Other
+
+    .w     { color: #bbbbbb } // Text.Whitespace
+
+    .lineno, .gl { color: #9c9996 } // Line Number
+    .hll   { background-color: #ffffcc } // Marked-lines
+  }
+}
+
+
+// Dark mode
+// ---------
+
+$dm-brand-color:           #999999 !default;
+$dm-brand-color-light:     lighten($dm-brand-color, 5%) !default;
+$dm-brand-color-dimmed:    darken($dm-brand-color, 8%) !default;
+$dm-brand-color-dark:      darken($dm-brand-color, 43%) !default;
+
+$dm-site-title-color:      $dm-brand-color-light !default;
+
+$dm-heading-color:         #bbbbbb !default;
+$dm-text-color:            darken($dm-heading-color, 15%) !default;
+$dm-background-color:      #181818 !default;
+$dm-code-background-color: #222222 !default;
+
+$dm-link-base-color:       #5691cd !default;
+$dm-link-visited-color:    #80bbff !default;
+$dm-link-hover-color:      $dm-text-color !default;
+
+$dm-border-color-01:       $dm-brand-color-dark !default;
+$dm-border-color-02:       $dm-brand-color-light !default;
+$dm-border-color-03:       $dm-brand-color !default;
+
+$dm-table-text-color:      $dm-text-color !default;
+$dm-table-zebra-color:     lighten($dm-background-color, 4%) !default;
+$dm-table-header-bg-color: lighten($dm-background-color, 10%) !default;
+$dm-table-header-border:   lighten($dm-background-color, 15%) !default;
+$dm-table-border-color:    $dm-border-color-01 !default;
+
+
+// Syntax highlighting styles should be adjusted appropriately for every "skin"
+// List of tokens: https://github.com/rouge-ruby/rouge/wiki/List-of-tokens
+// Some colors come from Material Theme Darker:
+// https://github.com/material-theme/vsc-material-theme/blob/master/scripts/generator/settings/specific/darker-hc.ts
+// https://github.com/material-theme/vsc-material-theme/blob/master/scripts/generator/color-set.ts
+// ----------------------------------------------------------------------------
+
+@mixin dm-highlight {
+  .highlight {
+    .err   { color: #e3d2d2; background-color: #8c2121 } // Error
+
+    .c     { color: #8a8a8a } // Comment
+    .c1    { color: #8a8a8a } // Comment.Single
+    .cm    { color: #8a8a8a } // Comment.Multiline
+    .cp    { color: #8a8a8a } // Comment.Preproc
+    .cs    { color: #8a8a8a; font-style: italic }  // Comment.Special
+
+    .gd    { color: #d85a5a } // Generic.Deleted
+    .gd .x { color: #d85a5a } // Generic.Deleted.Specific
+    .ge    { font-style: italic } // Generic.Emph
+    .gh    { color: #999999 } // Generic.Heading
+    .gi    { color: #4ec64e } // Generic.Inserted
+    .gi .x { color: #4ec64e } // Generic.Inserted.Specific
+    .go    { color: #888888 } // Generic.Output
+    .gp    { color: #555555 } // Generic.Prompt
+    .gr    { color: #f07178 } // Generic.Error
+    .gs    { font-weight: bold } // Generic.Strong
+    .gt    { color: #f07178 } // Generic.Traceback
+    .gu    { color: #aaaaaa } // Generic.Subheading
+
+    .k     { color: #d85a7b } // Keyword
+    .kc    { color: #d85a7b } // Keyword.Constant
+    .kd    { color: #d85a7b } // Keyword.Declaration
+    .kp    { color: #d85a7b } // Keyword.Pseudo
+    .kr    { color: #d85a7b } // Keyword.Reserved
+    .kt    { color: #ffcb6b } // Keyword.Type
+
+    .n     { color: #c7d1d8 }
+    .na    { color: #11a69f } // Name.Attribute
+    .nb    { color: #d85a7b } // Name.Builtin
+    .bp    { color: #999999 } // Name.Builtin.Pseudo
+    .nc    { color: #11a69f } // Name.Class
+    .ne    { color: #990000 } // Name.Exception
+    .nf    { color: #5ab780 } // Name.Function
+    .ni    { color: #11a69f } // Name.Entity
+    .nn    { color: #11a69f } // Name.Namespace
+    .no    { color: #9d99e6 } // Name.Constant
+    .nt    { color: #de3581 } // Name.Tag
+    .nv    { color: #9680b1 } // Name.Variable
+    .vc    { color: #9680b1 } // Name.Variable.Class
+    .vg    { color: #9680b1 } // Name.Variable.Global
+    .vi    { color: #9680b1 } // Name.Variable.Instance
+
+    .o     { color: #bcd890 } // Operator
+    .ow    { color: #bcd890 } // Operator.Word
+
+    .m     { color: #9d99e6 } // Literal.Number
+    .mf    { color: #9d99e6 } // Literal.Number.Float
+    .mh    { color: #9d99e6 } // Literal.Number.Hex
+    .mi    { color: #9d99e6 } // Literal.Number.Integer
+    .il    { color: #9d99e6 } // Literal.Number.Integer.Long
+    .mo    { color: #9d99e6 } // Literal.Number.Oct
+
+    .s     { color: #baa94a } // Literal.String
+    .s1    { color: #baa94a } // Literal.String.Single
+    .s2    { color: #baa94a } // Literal.String.Double
+    .sb    { color: #baa94a } // Literal.String.Backtick
+    .sc    { color: #baa94a } // Literal.String.Char
+    .sd    { color: #baa94a } // Literal.String.Doc
+    .se    { color: #baa94a } // Literal.String.Escape
+    .sh    { color: #baa94a } // Literal.String.Heredoc
+    .si    { color: #baa94a } // Literal.String.Interpol
+    .sr    { color: #009926 } // Literal.String.Regex
+    .ss    { color: #3c90f5 } // Literal.String.Symbol
+    .sx    { color: #baa94a } // Literal.String.Other
+
+    .w     { color: #eeffff } // Text.Whitespace
+
+    .lineno, .gl { color: #8a8a8a } // Line Number
+    .hll   { background-color: #373730 } // Marked-lines
+  }
+}
+
+
+// Mode selection
+// --------------
+
+
+// Classic skin (always light mode)
+// Assign outside of the if construct to establish global variable scope
+
+$brand-color: $lm-brand-color;
+$brand-color-light: $lm-brand-color-light;
+$brand-color-dimmed: $lm-brand-color-dimmed;
+$brand-color-dark: $lm-brand-color-dark;
+
+$site-title-color: $lm-site-title-color;
+
+$heading-color: $lm-heading-color;
+$text-color: $lm-text-color;
+$background-color: $lm-background-color;
+$code-background-color: $lm-code-background-color;
+
+$link-base-color: $lm-link-base-color;
+$link-visited-color: $lm-link-visited-color;
+$link-hover-color: $lm-link-hover-color;
+
+$border-color-01: $lm-border-color-01;
+$border-color-02: $lm-border-color-02;
+$border-color-03: $lm-border-color-03;
+
+$table-text-color: $lm-table-text-color;
+$table-zebra-color: $lm-table-zebra-color;
+$table-header-bg-color: $lm-table-header-bg-color;
+$table-header-border: $lm-table-header-border;
+$table-border-color: $lm-table-border-color;
+
+
+@if $color-scheme-auto {
+
+  // Auto mode
+
+  :root {
+    --minima-brand-color: #{$lm-brand-color};
+    --minima-brand-color-light: #{$lm-brand-color-light};
+    --minima-brand-color-dimmed: #{$lm-brand-color-dimmed};
+    --minima-brand-color-dark: #{$lm-brand-color-dark};
+
+    --minima-site-title-color: #{$lm-site-title-color};
+
+    --minima-heading-color: #{$lm-heading-color};
+    --minima-text-color: #{$lm-text-color};
+    --minima-background-color: #{$lm-background-color};
+    --minima-code-background-color: #{$lm-code-background-color};
+
+    --minima-link-base-color: #{$lm-link-base-color};
+    --minima-link-visited-color: #{$lm-link-visited-color};
+    --minima-link-hover-color: #{$lm-link-hover-color};
+
+    --minima-border-color-01: #{$lm-border-color-01};
+    --minima-border-color-02: #{$lm-border-color-02};
+    --minima-border-color-03: #{$lm-border-color-03};
+
+    --minima-table-text-color: #{$lm-table-text-color};
+    --minima-table-zebra-color: #{$lm-table-zebra-color};
+    --minima-table-header-bg-color: #{$lm-table-header-bg-color};
+    --minima-table-header-border: #{$lm-table-header-border};
+    --minima-table-border-color: #{$lm-table-border-color};
+  }
+
+  @include lm-highlight;
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --minima-brand-color: #{$dm-brand-color};
+      --minima-brand-color-light: #{$dm-brand-color-light};
+      --minima-brand-color-dimmed: #{$dm-brand-color-dimmed};
+      --minima-brand-color-dark: #{$dm-brand-color-dark};
+
+      --minima-site-title-color: #{$dm-site-title-color};
+
+      --minima-heading-color: #{$dm-heading-color};
+      --minima-text-color: #{$dm-text-color};
+      --minima-background-color: #{$dm-background-color};
+      --minima-code-background-color: #{$dm-code-background-color};
+
+      --minima-link-base-color: #{$dm-link-base-color};
+      --minima-link-visited-color: #{$dm-link-visited-color};
+      --minima-link-hover-color: #{$dm-link-hover-color};
+
+      --minima-border-color-01: #{$dm-border-color-01};
+      --minima-border-color-02: #{$dm-border-color-02};
+      --minima-border-color-03: #{$dm-border-color-03};
+
+      --minima-table-text-color: #{$dm-table-text-color};
+      --minima-table-zebra-color: #{$dm-table-zebra-color};
+      --minima-table-header-bg-color: #{$dm-table-header-bg-color};
+      --minima-table-header-border: #{$dm-table-header-border};
+      --minima-table-border-color: #{$dm-table-border-color};
+    }
+
+    @include dm-highlight;
+  }
+
+  $brand-color: var(--minima-brand-color);
+  $brand-color-light: var(--minima-brand-color-light);
+  $brand-color-dimmed: var(--minima-brand-color-dimmed);
+  $brand-color-dark: var(--minima-brand-color-dark);
+
+  $site-title-color: var(--minima-site-title-color);
+
+  $heading-color: var(--minima-heading-color);
+  $text-color: var(--minima-text-color);
+  $background-color: var(--minima-background-color);
+  $code-background-color: var(--minima-code-background-color);
+
+  $link-base-color: var(--minima-link-base-color);
+  $link-visited-color: var(--minima-link-visited-color);
+  $link-hover-color: var(--minima-link-hover-color);
+
+  $border-color-01: var(--minima-border-color-01);
+  $border-color-02: var(--minima-border-color-02);
+  $border-color-03: var(--minima-border-color-03);
+
+  $table-text-color: var(--minima-table-text-color);
+  $table-zebra-color: var(--minima-table-zebra-color);
+  $table-header-bg-color: var(--minima-table-header-bg-color);
+  $table-header-border: var(--minima-table-header-border);
+  $table-border-color: var(--minima-table-border-color);
+
+
+} @else if $color-scheme-dark {
+
+  // Dark skin (always dark mode)
+
+  $brand-color: $dm-brand-color;
+  $brand-color-light: $dm-brand-color-light;
+  $brand-color-dimmed: $dm-brand-color-dimmed;
+  $brand-color-dark: $dm-brand-color-dark;
+
+  $site-title-color: $dm-site-title-color;
+
+  $heading-color: $dm-heading-color;
+  $text-color: $dm-text-color;
+  $background-color: $dm-background-color;
+  $code-background-color: $dm-code-background-color;
+
+  $link-base-color: $dm-link-base-color;
+  $link-visited-color: $dm-link-visited-color;
+  $link-hover-color: $dm-link-hover-color;
+
+  $border-color-01: $dm-border-color-01;
+  $border-color-02: $dm-border-color-02;
+  $border-color-03: $dm-border-color-03;
+
+  $table-text-color: $dm-table-text-color;
+  $table-zebra-color: $dm-table-zebra-color;
+  $table-header-bg-color: $dm-table-header-bg-color;
+  $table-header-border: $dm-table-header-border;
+  $table-border-color: $dm-table-border-color;
+
+  @include dm-highlight;
+
+
+} @else {
+
+  // Classic skin syntax highlighting
+  @include lm-highlight;
+
+}

+ 5 - 0
_sass/minima/skins/classic.scss

@@ -0,0 +1,5 @@
+@charset "utf-8";
+
+$color-scheme-auto: false;
+$color-scheme-dark: false;
+@import "minima/skins/auto";

+ 5 - 0
_sass/minima/skins/dark.scss

@@ -0,0 +1,5 @@
+@charset "utf-8";
+
+$color-scheme-auto: false;
+$color-scheme-dark: true;
+@import "minima/skins/auto";

+ 5 - 0
_sass/minima/skins/solarized-dark.scss

@@ -0,0 +1,5 @@
+@charset "utf-8";
+
+$sol-is-auto: false;
+$sol-is-dark: true;
+@import "minima/skins/solarized";

+ 4 - 0
_sass/minima/skins/solarized-light.scss

@@ -0,0 +1,4 @@
+@charset "utf-8";
+
+$sol-is-auto: false;
+@import "minima/skins/solarized";

+ 258 - 0
_sass/minima/skins/solarized.scss

@@ -0,0 +1,258 @@
+@charset "utf-8";
+
+// Solarized skin
+// ==============
+// Created by Sander Voerman <mailto:sander@savoerman.nl> using the Solarized
+// color scheme by Ethan Schoonover <https://ethanschoonover.com/solarized>.
+
+// This style sheet implements three options for the minima.skin setting:
+// "solarized-light" for light mode, "solarized-dark" for dark mode, and
+// "solarized" for light or dark mode depending on user preference.
+$sol-is-auto: true !default;
+$sol-is-dark: false !default;
+
+
+// Color scheme
+// ------------
+// The inline comments show the canonical L*a*b values for each color.
+//
+// Some colors were altered from the canonical scheme to comply with
+// WCAG-contrast criteria between foreground and background colors.
+
+$sol-base03:   #002b36;  // 15 -12 -12
+$sol-base02:   #073642;  // 20 -12 -12
+$sol-base01:   #586e75;  // 45 -07 -07
+$sol-base00:   #4e626a;  // original hex: #657b83 ; L*a*b: 50 -07 -07
+$sol-base0:    #91a0a1;  // original hex: #839496 ; L*a*b: 60 -06 -03
+$sol-base1:    #93a1a1;  // 65 -05 -02
+$sol-base2:    #eee8d5;  // 92 -00  10
+$sol-base3:    #fdf6e3;  // 97  00  10
+$sol-yellow:   #b58900;  // 60  10  65
+$sol-orange:   #cb4b16;  // 50  50  55
+$sol-red:      #dc322f;  // 50  65  45
+$sol-magenta:  #d33682;  // 50  65 -05
+$sol-violet:   #6c71c4;  // 50  15 -45
+$sol-blue:     #268bd2;  // 55 -10 -45
+$sol-cyan:     #2aa198;  // 60 -35 -05
+$sol-green:    #859900;  // 60 -20  65
+
+// Non-canonical; Derived to comply with WCAG-contrast criterion.
+$sol-light-blue:   #469edd;
+$sol-light-blue2:  #64a5ce;
+$sol-dark-blue:    #2072ac;
+$sol-dark-blue2:   #376a8b;
+
+// Mixed colors
+// ------------
+// While not part of the original Solarized base tones, these derived tones
+// are meant to replicate the visual style of the classic skin. They should
+// not be used in cases where sufficiently contrasting colors are needed.
+
+$sol-light-mix1:  mix($sol-base1, $sol-base3);
+$sol-light-mix2:  mix($sol-blue, $sol-base00);
+$sol-light-mix3:  mix($sol-base2, $sol-base3);
+$sol-light-mix4:  #e8e3d4; // custom mixture of `$sol-base1` and `$sol-base3`.
+$sol-dark-mix1:   mix($sol-base01, $sol-base03);
+$sol-dark-mix2:   mix($sol-blue, $sol-base0);
+$sol-dark-mix3:   mix($sol-base02, $sol-base03);
+$sol-dark-mix4:   #193843; // custom mixture of `$sol-base01` and `$sol-base03`.
+
+// Mode selection
+// --------------
+
+$sol-mono3:    $sol-base3;
+$sol-mono2:    $sol-base2;
+$sol-mono1:    $sol-base1;
+$sol-mono00:   $sol-base00;
+$sol-mono01:   $sol-base01;
+$sol-mix1:     $sol-light-mix1;
+$sol-mix2:     $sol-light-mix2;
+$sol-mix3:     $sol-light-mix3;
+$sol-mix4:     $sol-light-mix4;
+
+$sol-mono1-dimmed: darken($sol-base1, 20%);
+$sol-link-color:   $sol-dark-blue;
+$sol-link-visited: $sol-dark-blue2;
+
+$sol-mark-line-bgcolor: #ffffcc;
+
+@if $sol-is-dark {
+  $sol-mono3:  $sol-base03;
+  $sol-mono2:  $sol-base02;
+  $sol-mono1:  $sol-base01;
+  $sol-mono00: $sol-base0;
+  $sol-mono01: $sol-base1;
+  $sol-mix1:   $sol-dark-mix1;
+  $sol-mix2:   $sol-dark-mix2;
+  $sol-mix3:   $sol-dark-mix3;
+  $sol-mix4:   $sol-dark-mix4;
+
+  $sol-mono1-dimmed: lighten($sol-base01, 16%);
+  $sol-link-color:   $sol-light-blue;
+  $sol-link-visited: $sol-light-blue2;
+
+  $sol-mark-line-bgcolor: #164145;
+}
+
+@if $sol-is-auto {
+  :root {
+    --solarized-mono3:  #{$sol-base3};
+    --solarized-mono2:  #{$sol-base2};
+    --solarized-mono1:  #{$sol-base1};
+    --solarized-mono00: #{$sol-base00};
+    --solarized-mono01: #{$sol-base01};
+    --solarized-mix1:   #{$sol-light-mix1};
+    --solarized-mix2:   #{$sol-light-mix2};
+    --solarized-mix3:   #{$sol-light-mix3};
+    --solarized-mix4:   #{$sol-light-mix4};
+
+    --solarized-mono1-dimmed: #{darken($sol-base1, 20%)};
+    --solarized-link-color:   #{$sol-dark-blue};
+    --solarized-link-visited: #{$sol-dark-blue2};
+
+    --solarized-mark-line-bg-color: #ffffcc;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --solarized-mono3:  #{$sol-base03};
+      --solarized-mono2:  #{$sol-base02};
+      --solarized-mono1:  #{$sol-base01};
+      --solarized-mono00: #{$sol-base0};
+      --solarized-mono01: #{$sol-base1};
+      --solarized-mix1:   #{$sol-dark-mix1};
+      --solarized-mix2:   #{$sol-dark-mix2};
+      --solarized-mix3:   #{$sol-dark-mix3};
+      --solarized-mix4:   #{$sol-dark-mix4};
+
+      --solarized-mono1-dimmed: #{lighten($sol-base01, 16%)};
+      --solarized-link-color:   #{$sol-light-blue};
+      --solarized-link-visited: #{$sol-light-blue2};
+
+      --solarized-mark-line-bg-color: #164145;
+    }
+  }
+
+  $sol-mono3:  var(--solarized-mono3);
+  $sol-mono2:  var(--solarized-mono2);
+  $sol-mono1:  var(--solarized-mono1);
+  $sol-mono00: var(--solarized-mono00);
+  $sol-mono01: var(--solarized-mono01);
+  $sol-mix1:   var(--solarized-mix1);
+  $sol-mix2:   var(--solarized-mix2);
+  $sol-mix3:   var(--solarized-mix3);
+  $sol-mix4:   var(--solarized-mix4);
+
+  $sol-mono1-dimmed: var(--solarized-mono1-dimmed);
+  $sol-link-color:   var(--solarized-link-color);
+  $sol-link-visited: var(--solarized-link-visited);
+
+  $sol-mark-line-bgcolor: var(--solarized-mark-line-bg-color);
+}
+
+
+// Minima color variables
+// ----------------------
+
+$brand-color:           $sol-mono1 !default;
+$brand-color-light:     $sol-mix4 !default;
+$brand-color-dimmed:    $sol-mono1-dimmed !default;
+$brand-color-dark:      $sol-mono00 !default;
+
+$site-title-color:      $sol-mono00 !default;
+
+$heading-color:         $sol-mono01 !default;
+$text-color:            $sol-mono00 !default;
+$background-color:      $sol-mono3 !default;
+$code-background-color: $sol-mix3 !default;
+
+$link-base-color:       $sol-link-color !default;
+$link-visited-color:    $sol-link-visited !default;
+$link-hover-color:      $sol-mono00 !default;
+
+$border-color-01:       $brand-color-light !default;
+$border-color-02:       $sol-mono1 !default;
+$border-color-03:       $sol-mono00 !default;
+
+$table-text-color:      $sol-mono00 !default;
+$table-zebra-color:     $sol-mix3 !default;
+$table-header-bg-color: $sol-mono2 !default;
+$table-header-border:   $sol-mix1 !default;
+$table-border-color:    $sol-mix1 !default;
+
+
+// Syntax highlighting styles
+// --------------------------
+
+.highlight {
+  .err   { color: #fefeec; background-color: $sol-red } // Error
+
+  .c     { color: $sol-mono1 } // Comment
+  .c1    { color: $sol-mono1 } // Comment.Single
+  .cm    { color: $sol-mono1 } // Comment.Multiline
+  .cp    { color: $sol-mono1 } // Comment.Preproc
+  .cs    { color: $sol-mono1; font-style: italic } // Comment.Special
+
+  .gd    { color: $sol-red } // Generic.Deleted
+  .gd .x { color: $sol-red } // Generic.Deleted.Specific
+  .ge    { color: $sol-mono00; font-style: italic } // Generic.Emph
+  .gh    { color: $sol-mono1 } // Generic.Heading
+  .gi    { color: $sol-green } // Generic.Inserted
+  .gi .x { color: $sol-green } // Generic.Inserted.Specific
+  .go    { color: $sol-mono00 } // Generic.Output
+  .gp    { color: $sol-mono00 } // Generic.Prompt
+  .gr    { color: $sol-red } // Generic.Error
+  .gs    { color: $sol-mono01; font-weight: bold } // Generic.Strong
+  .gt    { color: $sol-red } // Generic.Traceback
+  .gu    { color: $sol-mono1 } // Generic.Subheading
+
+  .k     { color: $sol-orange } // Keyword
+  .kc    { color: $sol-orange } // Keyword.Constant
+  .kd    { color: $sol-orange } // Keyword.Declaration
+  .kp    { color: $sol-orange } // Keyword.Pseudo
+  .kr    { color: $sol-orange } // Keyword.Reserved
+  .kt    { color: $sol-violet } // Keyword.Type
+
+  .na    { color: $sol-cyan } // Name.Attribute
+  .nb    { color: $sol-orange } // Name.Builtin
+  .bp    { color: $sol-blue } // Name.Builtin.Pseudo
+  .nc    { color: $sol-violet } // Name.Class
+  .ne    { color: $sol-violet } // Name.Exception
+  .nf    { color: $sol-blue } // Name.Function
+  .ni    { color: $sol-violet } // Name.Entity
+  .nn    { color: $sol-violet } // Name.Namespace
+  .no    { color: $sol-violet } // Name.Constant
+  .nt    { color: $sol-orange } // Name.Tag
+  .nv    { color: $sol-cyan } // Name.Variable
+  .vc    { color: $sol-cyan } // Name.Variable.Class
+  .vg    { color: $sol-cyan } // Name.Variable.Global
+  .vi    { color: $sol-cyan } // Name.Variable.Instance
+
+  .o     { color: $sol-green } // Operator
+  .ow    { color: $sol-green } // Operator.Word
+
+  .m     { color: $sol-violet } // Literal.Number
+  .mf    { color: $sol-violet } // Literal.Number.Float
+  .mh    { color: $sol-violet } // Literal.Number.Hex
+  .mi    { color: $sol-violet } // Literal.Number.Integer
+  .il    { color: $sol-violet } // Literal.Number.Integer.Long
+  .mo    { color: $sol-violet } // Literal.Number.Oct
+
+  .s     { color: $sol-magenta } // Literal.String
+  .s1    { color: $sol-magenta } // Literal.String.Single
+  .s2    { color: $sol-magenta } // Literal.String.Double
+  .sb    { color: $sol-magenta } // Literal.String.Backtick
+  .sc    { color: $sol-magenta } // Literal.String.Char
+  .sd    { color: $sol-magenta } // Literal.String.Doc
+  .se    { color: $sol-magenta } // Literal.String.Escape
+  .sh    { color: $sol-magenta } // Literal.String.Heredoc
+  .si    { color: $sol-magenta } // Literal.String.Interpol
+  .sr    { color: $sol-green } // Literal.String.Regex
+  .ss    { color: $sol-magenta } // Literal.String.Symbol
+  .sx    { color: $sol-magenta } // Literal.String.Other
+
+  .w     { color: $sol-mono1 } // Text.Whitespace
+
+  .lineno, .gl { color: $sol-mono1 } // Line Number
+  .hll   { background-color: $sol-mark-line-bgcolor } // Marked-lines
+}

+ 18 - 0
about.markdown

@@ -0,0 +1,18 @@
+---
+layout: page
+title: About
+permalink: /about/
+---
+
+This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at [jekyllrb.com](https://jekyllrb.com/)
+
+You can find the source code for Minima at GitHub:
+[jekyll][jekyll-organization] /
+[minima](https://github.com/jekyll/minima)
+
+You can find the source code for Jekyll at GitHub:
+[jekyll][jekyll-organization] /
+[jekyll](https://github.com/jekyll/jekyll)
+
+
+[jekyll-organization]: https://github.com/jekyll

+ 7 - 0
assets/css/style.scss

@@ -0,0 +1,7 @@
+---
+# Only the main Sass file needs front matter (the dashes are enough)
+---
+
+@import
+  "minima/skins/{{ site.minima.skin | default: 'classic' }}",
+  "minima/initialize";

+ 13 - 0
dev.sh

@@ -0,0 +1,13 @@
+#!/bin/bash
+
+echo "🧹 Limpiando caché de Jekyll..."
+rm -rf .jekyll-cache _site
+
+echo "🔍 Comprobando dependencias..."
+docker compose run --rm jekyll bundle check || {
+  echo "📦 Instalando dependencias faltantes..."
+  docker compose run --rm jekyll bundle install
+}
+
+echo "🚀 Arrancando servidor Jekyll en Docker..."
+docker compose up -d

+ 9 - 0
docker-compose.yml

@@ -0,0 +1,9 @@
+services:
+  jekyll:
+    image: jekyll/jekyll:latest
+    command: jekyll serve --watch --force_polling --host 0.0.0.0
+    ports:
+      - "4000:4000"
+    volumes:
+      - .:/srv/jekyll
+    working_dir: /srv/jekyll

+ 12 - 0
index.markdown

@@ -0,0 +1,12 @@
+---
+# Feel free to add content and custom Front Matter to this file.
+# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
+
+layout: home
+---
+
+# ¡Bienvenido al curso de Informática Básica desde Cero!
+
+Aprende los fundamentos esenciales de la informática, desde el uso básico de computadoras hasta herramientas de productividad, navegación web y conceptos clave de seguridad digital.
+
+Ideal para principiantes que desean desarrollar habilidades tecnológicas desde el principio.

+ 137 - 0
partials/01-1.md

@@ -0,0 +1,137 @@
+---
+layout: post
+title: "La HISTORIA DE LA COMPUTADORA: generaciones desde los 40 hasta los superordenadores"
+---
+
+**Actividad:**  
+Ver el vídeo de YouTube sobre la [historia de la
+computación.](https://www.youtube.com/watch?v=qBoJj6cvH-A)
+
+## Primera Generación (1940-1952) [[01:37](http://www.youtube.com/watch?v=qBoJj6cvH-A&t=97)].
+
+Esta fue la era pionera de la computación, donde las máquinas eran enormes y
+experimentales.
+
+-   **Tecnología Principal:** El componente clave eran los **tubos de vacío** y
+    los relés electromecánicos. Estos componentes generaban una enorme cantidad
+    de calor, consumían mucha energía y eran poco fiables, quemándose con
+    frecuencia.
+
+-   **Características:**
+
+    -   **Tamaño:** Ocupaban habitaciones enteras. La famosa **ENIAC**
+        (Electronic Numerical Integrator and Computer), mencionada en el video,
+        pesaba 27 toneladas y ocupaba una superficie de 167 m².
+
+    -   **Programación:** Se programaban directamente en lenguaje de máquina, a
+        menudo reconfigurando físicamente los circuitos mediante cables e
+        interruptores, un proceso tedioso y propenso a errores.
+
+    -   **Costo y Uso:** Eran extremadamente caras de construir y operar. Su uso
+        estaba restringido a ámbitos científicos y militares, principalmente
+        para cálculos balísticos, censos y criptografía.
+
+## Segunda Generación (1956-1964) [[05:58](http://www.youtube.com/watch?v=qBoJj6cvH-A&t=358)].
+
+La gran revolución de esta época fue el reemplazo de los tubos de vacío, lo que
+marcó un salto cualitativo en la computación.
+
+-   **Tecnología Principal:** La invención del **transistor**. Los transistores
+    eran mucho más pequeños, rápidos, fiables y eficientes energéticamente que
+    los tubos de vacío.
+
+-   **Características:**
+
+    -   **Tamaño y Costo:** Las computadoras se hicieron más pequeñas, más
+        baratas y más potentes. Aunque seguían siendo grandes para los
+        estándares actuales, ya no requerían habitaciones enteras.
+
+    -   **Programación:** Surgieron los primeros **lenguajes de programación de
+        alto nivel**, como FORTRAN y COBOL. Esto facilitó enormemente la
+        escritura de programas y los hizo más comprensibles para los humanos.
+
+    -   **Nuevas Aplicaciones:** Se empezaron a utilizar en sistemas de control
+        de tráfico aéreo, simulaciones y en el sector empresarial para la
+        gestión de nóminas y contabilidad.
+
+## Tercera Generación (1964-1971) [[09:24](http://www.youtube.com/watch?v=qBoJj6cvH-A&t=564)].
+
+Esta generación llevó la miniaturización a un nuevo nivel, sentando las bases de
+la computación moderna.
+
+-   **Tecnología Principal:** El **circuito integrado o chip**. Este dispositivo
+    permitía encapsular cientos de transistores en una pequeña pastilla de
+    silicio, aumentando exponencialmente la capacidad de procesamiento.
+
+-   **Características:**
+
+    -   **Eficiencia:** Las computadoras se volvieron aún más pequeñas, rápidas
+        y eficientes. La producción en masa de chips redujo drásticamente los
+        costos.
+
+    -   **Multiprogramación:** Aparecieron los primeros sistemas operativos que
+        permitían la **multiprogramación**, es decir, la capacidad de ejecutar
+        varios programas de forma simultánea.
+
+    -   **Estandarización:** La serie **IBM 360** fue un hito, ya que ofrecía
+        una familia de computadoras compatibles entre sí, permitiendo a las
+        empresas actualizar su hardware sin tener que reescribir todo su
+        software.
+
+## Cuarta Generación (1971-1981) [[12:27](http://www.youtube.com/watch?v=qBoJj6cvH-A&t=747)].
+
+Esta es la generación que vio nacer la computadora personal y que acercó la
+tecnología al público general.
+
+-   **Tecnología Principal:** El **microprocesador**. Un microprocesador integra
+    todos los componentes de la CPU (Unidad Central de Procesamiento) en un
+    único chip.
+
+-   **Características:**
+
+    -   **Computadoras Personales (PC):** La reducción drástica de tamaño y
+        costo hizo posible la creación de computadoras para el hogar y la
+        oficina, como la Apple II y la IBM PC.
+
+    -   **Interfaces Gráficas:** Se desarrollaron las primeras interfaces
+        gráficas de usuario (GUI), con iconos, ventanas y el uso del ratón, lo
+        que las hizo mucho más intuitivas y fáciles de usar.
+
+    -   **Redes:** Se sentaron las bases de las redes de computadoras, que
+        eventualmente darían lugar a Internet.
+
+## Quinta Generación (1983 - Actualidad) [[17:32](http://www.youtube.com/watch?v=qBoJj6cvH-A&t=1052)].
+
+Esta generación se define por la conectividad global y la búsqueda de una
+computación más "humana".
+
+-   **Tecnología Principal:** Se enfoca en el desarrollo de software y hardware
+    para la **inteligencia artificial (IA)**, el procesamiento en paralelo y las
+    redes neuronales.
+
+-   **Características:**
+
+    -   **Conectividad:** La expansión de Internet y la World Wide Web.
+
+    -   **Portabilidad:** La generalización de las **laptops**, tabletas y
+        smartphones, haciendo la computación omnipresente.
+
+    -   **Inteligencia Artificial:** Aunque el objetivo de una IA plenamente
+        consciente sigue en desarrollo, esta generación ha visto avances masivos
+        en el aprendizaje automático (machine learning), el reconocimiento de
+        voz y de imágenes.
+
+## Sexta Generación (Futuro) [[22:45](http://www.youtube.com/watch?v=qBoJj6cvH-A&t=1365)].
+
+El video menciona que algunos expertos ya hablan de una sexta generación, aunque
+sus límites aún no están claramente definidos.
+
+-   **Tecnología Emergente:** Se basa en conceptos revolucionarios como la
+    **computación cuántica**, que utiliza las propiedades de la mecánica
+    cuántica para realizar cálculos a una velocidad inalcanzable para las
+    computadoras clásicas.
+
+-   **Cerebros Artificiales:** Se investiga activamente en **circuitos de
+    aprendizaje neuronal** con el objetivo de crear hardware que imite la
+    estructura y el funcionamiento del cerebro humano, permitiendo un
+    aprendizaje y una resolución de problemas mucho más avanzados.