diff --git a/org/articles.html b/org/articles.html
new file mode 100644
index 0000000..32217dc
--- /dev/null
+++ b/org/articles.html
@@ -0,0 +1,10 @@
+
+
+
diff --git a/org/articles/20260314_london_italy.org b/org/articles/20260314_london_italy.org
index dec9be9..dcb1361 100644
--- a/org/articles/20260314_london_italy.org
+++ b/org/articles/20260314_london_italy.org
@@ -1,12 +1,13 @@
#+LANGUAGE: it
#+OPTIONS: num:nil
-#+TITLE: Da Londra all'Italia con una bici da corsa - Marzo 2026
+#+OPTIONS: toc:nil
#+HTML_HEAD:
-#+HTML_HEAD:
-
+#+INCLUDE: "../header.html" export html
#+INCLUDE: "../gpx/20260314_london_italy/index.html" export html
+* Da Londra all'Italia con una bici da corsa - Marzo 2026
+
** Introduzione
Questo articolo vuole essere un piccolo resoconto di un viaggio non
diff --git a/org/header.html b/org/header.html
new file mode 100644
index 0000000..3286e94
--- /dev/null
+++ b/org/header.html
@@ -0,0 +1,13 @@
+
+
+
diff --git a/org/index.org b/org/index.org
index 06a4e41..cc60662 100644
--- a/org/index.org
+++ b/org/index.org
@@ -1,13 +1,19 @@
#+OPTIONS: toc:nil
#+OPTIONS: num:nil
-#+TITLE: Francesco's place
+# #+TITLE: Francesco's place
#+HTML_HEAD:
-** *~* Resources
-- [[https://wanderer.fragal.eu][Self-hosted Wanderer instance]]
-- [[https://fragal.eu/cartastraccia][News and online feed reader]] ([[https://fragal.eu/git/lagfra/cartastraccia][code]])
-- [[https://fragal.eu/git][Self-hosted Git]]
-- [[https://github.com/gallafrancesco][GitHub]]
+#+INCLUDE: "./header.html" export html
+
+** *~* Blog
+#+INCLUDE: "./articles.html" export html
+
+
+# ** *~* Resources
+# - [[https://wanderer.fragal.eu][Self-hosted Wanderer instance]]
+# - [[https://fragal.eu/cartastraccia][News and online feed reader]] ([[https://fragal.eu/git/lagfra/cartastraccia][code]])
+# - [[https://fragal.eu/git][Self-hosted Git]]
+# - [[https://github.com/gallafrancesco][GitHub]]
** *~* About
@@ -21,10 +27,6 @@
** *~* Contacts
-me (at) fragal.eu
-
-** *~* Articles
-
-- [[./articles/20260314_london_italy.org][**Da Londra all'Italia in bici da corsa** - Marzo 2026 - Lang: IT]]
-
+- *email*: [[mailto:me@fragal.eu][me (at) fragal.eu]]
+- *XMPP*: me (at) chat.fragal.eu
#+INCLUDE: "./footer.html" export html
diff --git a/site/css/stylesheet.css b/site/css/stylesheet.css
index e45de3c..3ba9e20 100644
--- a/site/css/stylesheet.css
+++ b/site/css/stylesheet.css
@@ -1,9 +1,14 @@
html {
font-family:sans-serif;
- color:#080808
+ color:#080808;
+ overflow-y: scroll;
+ height: 100%;
+ font: 100%/1.5 sans-serif;
+ word-wrap: break-word;
+ margin: 0 auto;
+ padding: 1.5em;
}
body {
- max-width:1280px;
margin:0 auto;
padding:1rem;
background: #f6f1ec;
@@ -12,6 +17,14 @@
line-height: 130%;
}
+
+@media (min-width: 768px) {
+ html {
+ font-size: 125%;
+ max-width: 48em;
+ }
+}
+
.figure {
text-align: center;
font-size: 15px;
@@ -23,12 +36,13 @@
}
.container {
- text-align: center;
+ /* padding:1rem; */
+ /* text-align: center; */
}
.container pre {
- display: inline-block;
- text-align: left;
+ display: inline;
+ justify-content: space-between;
}
main {
@@ -36,6 +50,7 @@
}
footer {
+ padding-top: 2em;
grid-area: footer;
}
@@ -58,18 +73,32 @@
color: purple;
}
-ul a:link {
+a:link {
color: #ce7e00;
text-decoration: none;
}
-ul a:visited {
- color: purple;
+a:visited {
+ color: #ce7e00;
text-decoration: none;
}
-ul a:hover {
- color: #dfd9e6;
+a:hover {
+ color: purple;
+}
+
+header a:link {
+ color: #f6f1ec;
+ text-decoration: none;
+}
+
+header a:visited {
+ color: #f6f1ec;
+ text-decoration: none;
+}
+
+header a:hover {
+ color: #ce7e00;
}
img {
@@ -163,134 +192,54 @@
max-width: 50%;
color: purple;
}
-pre .cp {
- color:#800
+
+/* TOP BAR */
+header {
+ padding:1rem;
+ background: purple;
+ display: flex;
+ font-size: 20px;
+ justify-content: space-between;
}
-pre .k {
- color:#008
+
+header .headertitle{
+ font-style: italic;
+ text-align: center;
+ color: #f6f1ec;
}
-pre .kt,
-pre .kd,
-pre .kc {
- color:#44f
+
+header nav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
}
-pre .s {
- color:#484;
- font-style:italic
+
+header a + a {
+ margin-left: 1rem;
}
-pre .cm,
-pre .c1 {
- color:#333;
- font-style:italic
+
+/* ARTICLE LIST */
+.posts {
+ margin: 0;
+ list-style: none;
}
-pre .gi {
- color:green
+.posts .post a {
+ display: flex;
+ padding: 0.5em 0;
+ color: black;
}
-pre .gd {
- color:red
+.posts .post a:hover, .posts .post a:focus, .posts .post a:active {
+ text-decoration: none;
+ background: rgba(200, 200, 200, 0.2);
}
-pre .gu {
- color:blue
+.posts .post date {
+ vertical-align: middle;
+ padding-right: 2rem;
+ color: grey;
}
-.webring {
- margin-top:2rem
-}
-.webring h2 {
- font-size:1.2rem
-}
-.webring .articles {
- display:flex
-}
-@media(max-width:640px) {
- .webring .articles {
- flex-direction:column
- }
-}
-.webring .title {
- margin:0
-}
-.webring .article {
- flex:1;
- display:flex;
- flex-direction:column;
- background:#eee;
- padding:.5rem;
- margin:0 .5rem
-}
-@media(max-width:640px) {
- .webring .article {
- margin:.5rem 0
- }
-}
-.webring .article:first-child {
- margin-left:0
-}
-.webring .article:last-child {
- margin-right:0
-}
-.webring .summary {
- font-size:.8rem;
- flex:1
-}
-.webring .attribution {
- float:right;
- font-size:.8rem;
- color:#555;
- line-height:3
-}
-.webring .date {
- color:#000
-}
-summary {
- cursor:pointer;
- background-color:#eee;
- padding:.25rem 1rem;
- margin:0 -1rem
-}
-details[open] {
- border-bottom:1rem solid #eee;
- margin:0 -1rem 1rem;
- padding:0 1rem
-}
-.text-center {
- text-align:center
-}
-blockquote {
- border-left:5px solid #bbb;
- background-color:#eee;
- padding:0 1rem;
- margin-left:calc(-1rem - 5px);
- margin-right:-1rem
-}
-blockquote blockquote {
- margin-right:0;
- margin-left:0
-}
-dl {
- display:grid;
- grid-template-columns:auto 1fr;
- grid-gap:.2rem 1rem
-}
-dl dt {
- font-weight:700;
- grid-column-start:1
-}
-dl dd {
- grid-column-start:2;
- margin:0
-}
-.alert {
- padding:.5rem;
- border:1px solid transparent;
- margin-bottom:1rem
-}
-.alert.alert-danger {
- background:#f8d7da;
- color:#721c24;
- border-color:#f5c6cb
-}
-.alert.alert-info {
- background:#d1ecf1;
- color:#0c5460;
- border-color:#bee5eb
+
+/* VALIDATION FORMAT */
+.status {
+ text-align: center;
+ font-size: 16px;
}