19.0 RC4

[index]
- revamp full projects list (mobile optimized)

[general]
- fix svg icons
- small fixes and tweaks

Author: miermontoto

assets/icons/tech/github.svg

@@ -2,7 +2,7 @@
 title: epiCalendar
 desc: web (and python) app that downloads your personal University of Oviedo calendar in ICS or CSV format.
 source: https://github.com/miermontoto/epiCalendar
-links: [{icon: 'ⓘ', url: "/epiCalendar"}]
+links: [{icon: 'ⓘ', url: "/epiCalendar", "name": "readme"}]
 demo: https://epicalendar.mier.info
 permalink: /epiCalendar/
 redirect_from: /epicalendar/

assets/icons/tech/js.svg

@@ -2,8 +2,8 @@
 title: mier.info
 desc: my personal portfolio, the very website you are looking at right now.
 source: https://github.com/miermontoto/miermontoto
-icons: [eleventy, firebase, sass, markdown, nunjucks]
+icons: [eleventy, firebase, sass, markdown, nunjucks, js]
 status: https://dashboard.mier.info/api/badge/1/uptime/48?style=flat-square
-links: [{icon: "β", url: "https://mier-f6277--beta-ski9fkat.web.app/"}]
+links: [{icon: "β", url: "https://mier-f6277--beta-ski9fkat.web.app/", "name": "beta"}]
 star: star
 ---

package.json

@@ -74,26 +74,34 @@ js: index
                         {% else %}
                             {{ project.data.title }}
                         {% endif %}
-                    </div>
-
-                    <div class="project-links">
-                        {% if project.data.source and project.data.demo %}
-                            <a href="{{ project.data.source }}" target="_blank" rel="noopener noreferrer" aria-label="source code for {{ project.data.title }}">
-                                {{ macros.renderIcon('git') }}
-                            </a>
+                        {% if project.data.star %}
+                            <span class="star info">⭐</span>
                         {% endif %}
-                        {% for link in project.data.links %}
-                            <a href="{{ link.url }}" target="_blank" rel="noopener noreferrer">{{ link.icon | safe }}</a>
-                        {% endfor %}
+                        {% if project.data.new %}
+                            <span class="new info">new!</span>
+                        {% endif %}
+
+                        <div class="project-tech">
+                            {{ macros.renderIcons(project.data.icons) }}
+                        </div>
                     </div>
 
                     <div class="project-description">
                         {{ project.data.desc | safe }}
                     </div>
 
-                    <div class="project-tech">
-                        {{ macros.renderIcons(project.data.icons) }}
-                    </div>
+                    {% if project.data.links or project.data.source and project.data.demo %}
+                        <div class="project-links">
+                            {% if project.data.source and project.data.demo %}
+                                <a href="{{ project.data.source }}" target="_blank" rel="noopener noreferrer" aria-label="source code for {{ project.data.title }}">
+                                    {{ macros.renderIcon('git') }} [source]
+                                </a>
+                            {% endif %}
+                            {% for link in project.data.links %}
+                                <a href="{{ link.url }}" target="_blank" rel="noopener noreferrer">{{ link.icon | safe }} [{{ link.name}}]</a>
+                            {% endfor %}
+                        </div>
+                    {% endif %}
                 </li>
             {% endfor %}
         </ul>

src/content/collections/projects/epicalendar.md

@@ -156,9 +156,6 @@ quote
 .hidden
     display: none
 
-ul, ol
-    line-height: 1.35em
-
 .easter
     font-style: italic
     color: colors.$secondary
@@ -177,3 +174,7 @@ img
 .dragover
     border: 2px dashed colors.$light
     background-color: colors.$secondary
+
+.new
+    color: colors.$correct
+    font-weight: bolder

src/content/collections/projects/web.md

@@ -156,10 +156,10 @@ video#background
     .project-tech
         display: flex
         align-content: center
+        top: 0.125em
 
         *:not(:last-child)
             margin-right: 0.5em
-            top: 0.125em
 
 
 #featured .project
@@ -202,32 +202,40 @@ video#background
     .project-links
         font-size: 1.25em
 
-#project-list .project
-    display: flex
-    align-items: center
-    border: 1px solid transparent
-    border-radius: base.$radius
+#project-list
+    margin-left: -1.25em
 
-    div
-        margin: 0.75em
+    .project
+        display: grid
+        border: 1px solid transparent
+        border-radius: base.$radius
+        gap: 1em
+        padding: 1em
 
-    &:hover
-        border-color: colors.$light
+        &:hover
+            border-color: colors.$light
 
-        .project-tech
-            opacity: 1
+            .project-tech
+                opacity: 1
 
-    .project-title
-        white-space: nowrap
-        font-size: 1.1em
+        .project-title
+            white-space: nowrap
+            font-size: 1.5em
+            display: flex
 
-    .project-description
-        font-style: italic
-        font-size: 0.85em
+            .info
+                margin-left: 0.5em
 
-    .project-tech
-        opacity: 0
+        .project-links
+            font-size: 1.125em
+
+            .icon
+                top: 0.125em
+
+        .project-tech
+            opacity: 0
+            margin-left: 1em
+            font-size: 0.85em
 
-        .icon
-            font-size: 1.25em
-            top: -0.125em
+            .icon
+                top: -0.125em

src/index.njk

@@ -1,6 +1,9 @@
 *
     text-align: left
 
+ul, ol
+    line-height: 1.35em
+
 #back
     position: static
 

src/static/css/global.sass

@@ -2,4 +2,3 @@ import './index/sections.js';
 import './index/overlay.js';
 import './index/video.js';
 import './index/marquee.js';
-import './index/projects.js';