Add hacking blueprint

src/web/blueprints/hacking/data/writeups.yaml

@@ -0,0 +1,16 @@
+- name: C3TF v2.23
+  img: /hacking/static/img/writeups/ctfs/c3tf_v2.23.png
+  file: /hacking/static/files/writeups/ctfs/2023-03-29_C3TF_v.2.23.pdf
+  date: ['29','03','2023']
+- name: Cibergal
+  img: /hacking/static/img/writeups/ctfs/Cibergal.png
+  file: /hacking/static/files/writeups/ctfs/2021-11-10_Cibergal.pdf
+  date: ['10','11','2021']
+- name: DEADFACE
+  img: /hacking/static/img/writeups/ctfs/DEADFACE_2021.png
+  file: /hacking/static/files/writeups/ctfs/2021-10-15_DEADFACE_CTF.pdf
+  date: ['15','10','2021']
+- name: DECONSTRUCT.F
+  img: /hacking/static/img/writeups/ctfs/DECONSTRUCT.F.png
+  file: /hacking/static/files/writeups/ctfs/2021-10-01_DeconstruCT.F.pdf
+  date: ['01','10','2021']

src/web/blueprints/hacking/src/scss/hacking.scss

@@ -0,0 +1,77 @@
+@import "../../../../src/scss/colors";
+
+$color-writeup-title: rgb(224, 221, 59);
+$color-writeup-date: white;
+$writeup-width: 15em;
+
+.writeups {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+    align-items: center;
+
+    margin: 10px auto;
+
+    a.writeup {
+        display: flex;
+        flex-flow: column nowrap;
+        justify-content: space-between;
+        align-items: center;
+
+        box-sizing: border-box;
+        width: $writeup-width;
+        height: $writeup-width;
+        padding: 5px;
+        border: 3px solid $color-ipau;
+        border-radius: 15px;
+        margin: 1%;
+
+        background-color: black;
+
+        text-overflow: ellipsis;
+        text-decoration: none;
+
+        .writeup-title {
+            height: 10%;
+            color: $color-writeup-title;
+            text-overflow: clip;
+            font-size: 1.5em;
+        }
+
+        .writeup-img {
+            max-width: 90%;
+            max-height: 70%;
+
+            &:hover,
+            &:focus {
+                max-width: 80%;
+                max-height: 60%;
+            }
+        }
+
+        .writeup-date {
+            height: 10%;
+            color: $color-writeup-date;
+            text-overflow: ellipsis;
+        }
+
+        &:hover,
+        &:focus {
+            border-color: green;
+            background-color: #202020;
+            box-shadow: 0em 0em 0.2em 0.1em green;
+        }
+
+        @media screen and (max-width: 425px) {
+            & {
+                width: 45vw;
+                height: 45vw;
+
+                .writeup-title {
+                    height: 1em;
+                    font-size: 1em;
+                }
+            }
+        }
+    }
+}

src/web/blueprints/hacking/templates/includes/head.html

@@ -0,0 +1,8 @@
+{% extends 'base_head.html' %}
+
+{% block title -%}Hacking | {{ super() }}{% endblock title %}
+
+{% block style -%}
+{{ super() }}
+<link rel="stylesheet" type="text/css" href="/{{ blueprint }}/static/css/hacking.css">
+{%- endblock style %}

src/web/blueprints/hacking/templates/includes/writeups_ctfs.html

@@ -0,0 +1,10 @@
+<div class="writeups">
+    {%- for writeup in writeups %}
+    <a class="writeup" href="{{ writeup.file }}">
+        <span class="writeup-title">{{ writeup.name }}</span>
+        <img class="writeup-img" src="{{ writeup.img }}" alt="{{ writeup.name }} logo">
+        {% set ctf_day,ctf_month,ctf_year = writeup.date[0],writeup.date[1],writeup.date[2] -%}
+        <span class="writeup-date"><time datetime="{{ctf_year}}-{{ctf_month}}-{{ctf_day}}">{{ctf_day}}/{{ctf_month}}/{{ctf_year}}</time></span>
+    </a>
+    {%- endfor %}
+</div>

src/web/blueprints/hacking/templates/index.html

@@ -0,0 +1,20 @@
+{% extends 'layout.html' %}
+
+{% block head %}{% include "includes/head.html" %}{% endblock head %}
+
+{% block content -%}
+
+<main>
+    <h1>Hacking</h1>
+    <article>
+        <h2 id="writeups">Write Ups</h2>
+        <section>
+            <h3 id="ctfs">CTFs</h3>
+            {% filter indent(width=12) -%}
+            {% include "includes/writeups_ctfs.html" %}
+            {%- endfilter %}
+        </section>
+    </article>
+</main>
+
+{%- endblock content %}

src/web/templates/base_nav.html

@@ -1,6 +1,7 @@
 <nav>
     {%- set nav_links = {
         'Home': '/home',
+        'Hacking': '/hacking',
         'Redes sociales': '/social',
         'Webrings': '/webrings'
     }-%}