New (old) design

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "python.formatting.provider": "black",
+    "python.linting.pylintEnabled": false,
+    "python.linting.flake8Enabled": true,
+    "python.linting.enabled": true
+}

Felipe Martin.lektorproject

@@ -8,4 +8,3 @@ lektor-markdown-header-anchors = 0.3.1
 lektor-atom = 0.3
 lektor-htmlmin = 1.0.2
 lektor-markdown-highlighter = 0.3.1
-# lektor-thumbnail-generator = 0.4.0

configs/sassify.ini

@@ -1,3 +0,0 @@
-[sassify]
-dest_path=assets/static/css
-src_path=static/sass

configs/scss.ini

@@ -0,0 +1,3 @@
+source_dir=static/sass/
+output_dir=assets/static/css/
+output_style=compressed

content/about/contents.lr

@@ -13,37 +13,10 @@ I think that developers are like artists, writers and composers... we all make a
 
 If you want to get in touch feel free to drop me a line.
 
-<div class="grid">
+- <a target="_blank" href="mailto:me@fmartingr.com">me@fmartingr.com</a>
-    <div class="col-1-3">
+- <a target="_blank" href="https://www.linkedin.com/in/fmartingr/">linkedin.com/fmartingr</a>
-        <h4>E-Mail</h4>
+- <a target="_blank" rel="me" href="https://twitter.com/fmartingr">twitter.com/fmartingr</a>
-        <a target="_blank" href="mailto:me@fmartingr.com">me@fmartingr.com</a>
+- <a target="_blank" rel="me" href="https://fosstodon.org/@fmartingr">fmartingr@fosstodon.org</a>
-    </div>
+- <a target="_blank" href="https://t.me/fmartingr">telegram.me/fmartingr</a>
-    <div class="col-1-3">
+- <a target="_blank" href="https://github.com/fmartingr">github.com/fmartingr</a>
-        <h4>LinkedIn</h4>
+- <a target="_blank" href="https://code.fmartingr.dev/fmartingr">code.fmartingr.dev/fmartingr</a>, personal git server
-        <a target="_blank" href="https://www.linkedin.com/in/fmartingr/">linkedin.com/fmartingr</a>
-    </div>
-    <div class="col-1-3">
-        <h4>Twitter</h4>
-        <a target="_blank" rel="me" href="https://twitter.com/fmartingr">@fmartingr</a>
-    </div>
-    <div class="col-1-3">
-        <h4>Mastodon</h4>
-        <a target="_blank" rel="me" href="https://fosstodon.org/@fmartingr">fmartingr@fosstodon.org</a>
-    </div>
-    <div class="col-1-3">
-        <h4>Github</h4>
-        <a target="_blank" href="https://github.com/fmartingr">fmartingr</a>
-    </div>
-    <!--<div class="col-1-3">
-        <h4>Personal Gitea instance</h4>
-        <a target="_blank" href="https://code.fmartingr.dev">fmartingr</a>
-    </div>-->
-    <div class="col-1-3">
-        <h4>Telegram</h4>
-        <a target="_blank" href="https://t.me/fmartingr">@fmartingr</a>
-    </div>
-    <div class="col-1-3">
-        <h4>Mastodon</h4>
-        <a target="_blank" rel="me" href="https://fosstodon.org/@fmartingr">@fmartingr</a>
-    </div>
-</div>

packages/sassify/lektor_sassify.py

@@ -1,22 +0,0 @@
-import sass
-from lektor.pluginsystem import Plugin
-from werkzeug.utils import cached_property
-
-
-class SassifyPlugin(Plugin):
-    name = "Sassify"
-    description = "Sassify"
-
-    def on_before_build_all(self, builder, **extra):
-        sass.compile(
-            dirname=(
-                self.config["sassify"]["src_path"],
-                self.config["sassify"]["dest_path"],
-            ),
-            output_style="compressed",
-        )
-
-    @cached_property
-    def config(self):
-        conf = self.get_config()
-        return {section: conf.section_as_dict(section) for section in conf.sections()}

packages/sassify/setup.py

@@ -1,14 +0,0 @@
-from setuptools import setup
-
-
-setup(
-    name="lektor-sassify",
-    version="0.1",
-    py_modules=["lektor_sassify"],
-    entry_points={
-        "lektor.plugins": [
-            "sassify = lektor_sassify:SassifyPlugin",
-        ]
-    },
-    install_requires=["libsass==0.20.1"],
-)

static/sass/_layout.sass

@@ -2,6 +2,7 @@ body
   font-family: $font-family
   font-size: $font-size-base
   line-height: 1.5em
+  padding: 24px
 
 .center
   margin: 0 auto
@@ -61,7 +62,6 @@ p:first-child
 
 // New
 .page-content
-  display: flex
   margin: 0 auto
   flex-direction: row
   max-width: 980px
@@ -70,37 +70,35 @@ p:first-child
     display: block
     width: 100%
 
-  header
+header
-    width: 25%
+  text-align: right
-    text-align: center
+ 
+  h1
+    margin-top: 0
+    font-size: 1.5em
 
-    @media ($tablet)
+  .avatar
-      width: 100%
+    float: left
-      .avatar
+    width: 70px
-        max-width: 125px
+    margin: 0 auto
+    margin-right: 12px
 
-    h1
+    img
-      font-size: 1.3em
-
-    .avatar
-      width: 70%
-      margin: 0 auto
       border-radius: 12%
 
-    nav
+  nav
-      a
-        display: block
 
-    .social
+    a
-      list-style: none
+      display: inline-block
-      padding: 0
+      padding-left: 20px
 
-  .main-content
+  .social
-    @media ($tablet)
+    list-style: none
-      width: 100%
+    padding: 0
 
-    width: 75%
+.main-content
-    padding-right: 16px
+  @media ($tablet)
+    width: 100%
 
 *:target
   background-color: lighten($highlight-color, 40%)
@@ -113,3 +111,7 @@ h2
 
 h3
   font-size: 1.3em
+
+footer
+  text-align: center
+  font-size: 0.8em

static/sass/style.sass

@@ -5,6 +5,7 @@
 @import ./grid
 @import ./layout
 @import ./blog
+@import ./home
 @import ./portfolio
 @import ./table
 @import ./syntax

templates/_base.html

@@ -15,54 +15,27 @@
     {% block endhead %}{% endblock %}
   </head>
   <body class="{% block body_class %}{% endblock %}">
-    <div class="page-content">
+    <div class="page-content center">
-      <section class="main-content">
-        {% block main_content %}asd{% endblock %}
-      </section>
       <header>
+        <div class="avatar">
+          <img class="avatar" src="{{ '/static/images/avatar.jpg'|asseturl }}">
+        </div>
         <h1>Felipe Martín</h1>
-        <img class="avatar" src="{{ '/static/images/avatar.jpg'|asseturl }}">
-        <hr />
         <nav>
           <a {% if this.path == '/' %}class="text-bold"{% endif %} href="{{ '/'|url }}">/home</a>
           {% for section in site.get('/').children.order_by("title") %}
             <a {% if this.is_child_of(section) %}class="text-bold"{% endif %} href="{{ section|url }}">{{ section.path }}</a>
           {% endfor %}
         </nav>
-        <hr />
-        <ul class="social text-size-small">
-          <li>
-            <span class="title">E-mail</span>
-            <a target="_blank" href="mailto:me@fmartingr.com">me@fmartingr.com</a>
-          </li>
-          <li>
-            <span class="title">Github</span>
-          <a target="_blank" href="https://github.com/fmartingr">fmartingr</a>
-          </li>
-          <li>
-            <span class="title">LinkedIn</span>
-            <a target="_blank" href="https://www.linkedin.com/in/fmartingr/">linkedin.com/fmartingr</a>
-          </li>
-          <li>
-            <span class="title">Twitter</span>
-            <a target="_blank" rel="me" href="https://twitter.com/fmartingr">@fmartingr</a>
-          </li>
-          <li>
-            <span class="title">PGP</span>
-            <a href="/pubkey.txt">716B C147 715E 716F</a>
-          <li>
-            <a href="{{ '/about'|url }}">[+ more]</a>
-          </li>
-        </ul>
-        <hr />
-        <ul class="social text-size-small">
-          <li>
-            <span class="title">Site created using</span>
-            <a target="_blank" href="https://www.getlektor.com/">lektor</a>
-          </li>
-        </ul>
       </header>
-    </div>
+      <hr>
-   {% block endbody %}{% endblock %}
+      <section class="main-content">
+        {% block main_content %}asd{% endblock %}
+      </section>
+      <hr>
+      <footer>
+        Site created using <a target="_blank" href="https://getlektor.com">Lektor</a>. Source code available in <a target="_blank" href="https://github.com/fmartingr/fmartingr.com">Github</a>
+      </footer>
+    {% block endbody %}{% endblock %}
   </body>
 </html>

templates/blog-list.html

@@ -7,7 +7,7 @@
     {{ render_blog_post(child, from_index=true) }}
   {% endfor %}
 
-  <div class="center">{{ render_pagination(this.pagination) }}</div>
+  <div>{{ render_pagination(this.pagination) }}</div>
 {% endblock %}
 
 {% block endbody %}

templates/blog-post.html

@@ -7,7 +7,7 @@
 
 {% block main_content %}
   {{ render_blog_post(this) }}
-  <div class="center block-info">
+  <div class="block-info">
     If you want to approach me directly about this post use the most appropriate channel 
     from <a href="{{ '/about'|url }}">the about page</a>.
   </div>

templates/home.html

@@ -6,11 +6,11 @@
 {% block main_content %}
   <h2>Latest blog posts</h2>
   {% for post in site.get('/blog').pagination.for_page(1).pagination.items %}
-  <article class="blog-post center">
+  <article class="blog-post">
     <h3 class="title"><a href="{{ post|url }}">{{ post.title }}</a></h3>
-    <div class="info">{{ post.pub_date.strftime("%B %d, %Y") }}</div>
+    <div class="info text-small">{{ post.pub_date.strftime("%B %d, %Y") }}</div>
   </article>
-  <hr />
+  {% if not loop.last %}<hr />{% endif %}
   {% endfor %}
   {{ this.body }}
 {% endblock %}

templates/macros/blog.html

@@ -1,6 +1,6 @@
 {% macro render_blog_post(post, from_index=false, include_content=true) %}
   {% set summary = post.body.html.split('<!-- readmore -->') %}
-  <article class="blog-post center">
+  <article class="blog-post">
     <h1 class="title"><a href="{{ post|url }}">{{ post.title }}</a></h1>
     <div class="info">
       Published on {{ post.pub_date.strftime("%B %d, %Y") }}

templates/page.html

@@ -6,7 +6,7 @@
 
 {% block main_content %}
 <h2>{{ this.title }}</h2>
-<div class="center">
+<div>
   {{ this.body }}
 </div>
 {% endblock %}