Modificato lo stile per i cellulari.

content/js/livepointers.js

@@ -1 +1 @@
-$('.list-bare li a span.liveactive').html("<i class='far fa-hand-point-right'></i>&nbsp;<i class='far fa-hand-point-right'></i>&nbsp;Live&nbsp;<i class='far fa-hand-point-left'></i>&nbsp;<i class='far fa-hand-point-left'></i>");
+$('.list-bare li a span.liveactive').html("<i class='far fa-hand-point-right'></i>&nbsp;<i class='far fa-hand-point-right'></i>&nbsp;Diretta Streaming&nbsp;<i class='far fa-hand-point-left'></i>&nbsp;<i class='far fa-hand-point-left'></i>");

content/pages/2021/index.md

@@ -2,6 +2,8 @@ Title: Ottava Conferenza Italiana - LibreItalia - 2021
 Slug: 2021
 Alias: /
 
+<script type="text/javascript"> $( "#nav_2021" ).addClass('active'); </script>
+
 # La LibreItaliaConf 2021 in breve #
 
 <center style="margin-top: 60px;">
@@ -38,8 +40,9 @@ La partecipazione online non richiede registrazione.
 
 Potrete accedere ai contenuti della conferenza visitando il presente sito da
 circa 30 minuti prima dell'inizio della conferenza, fino al termine della
-stessa; nel menù a sinistra comparirà la scritta ***LIVE***: dovrete
+stessa; nel menù a sinistra comparirà la scritta ***Diretta Streaming***:
-cliccare sulla scritta e accederete alla pagina della diretta streaming.
+dovrete cliccare sulla scritta e accederete alla pagina della diretta
+streaming.
 
 Nella pagina *live* troverete un player multimediale che vi
 permetterà di seguire gli interventi.
@@ -81,33 +84,9 @@ L'organizzazione si incaricherà di verificare tutti i requisiti di legge e di
 far rispettare le distanze di sicurezza all'interno dei locali accessibili ai
 partecipanti alla conferenza.
 
-<!--
 **NOTA BENE**: i partecipanti alla Conferenza dal vivo che volessero
 visitare il Museo, potranno accedervi **gratuitamente**; consigliamo la visita
 al termine della Conferenza.
--->
-
-<!--
-Nella pagina *live* troverete un player multimediale che vi
-permetterà di seguire gli interventi.
-
-**ATTENZIONE**: dovrete attivare manualmente la riproduzione del video per
-visualizzare lo *stream*, utilizzando il pulsante <i class="far
-fa-play-circle" style="font-size: 22px"></i> che comparirà al centro del
-player!
-
-Accanto al player video, avrete a disposizione una chat per poter interagire
-con i relatori. [Questa chat <i class="fas
-fa-external-link-alt"></i>](https://chat.linux.it/channel/libreitaliaconf){:target="_blank"} è
-già disponibile su infrastruttura fornita da [GARR Consortium <i class="fas
-fa-external-link-alt"></i>](https://www.garr.it/it/){:target="_blank"} e gestita da [Italian Linux
-Society <i class="fas
-fa-external-link-alt"></i>](http://www.ils.org/){:target="_blank"} ed è
-possibile partecipare alla chat sia in maniera autenticata (la procedura di
-registrazione è disponibile sulla stessa pagina) che in maniera anonima
-(usando la funzione *O parla come anonimo*, presente nella parte bassa della
-chat).
--->
 
 # <i class="fas fa-route"></i> &mdash; Come raggiungere la sede #
 
@@ -138,11 +117,11 @@ museo <i class="fas fa-external-link-alt"></i>](https://www.m9museum.it/visita-m
 
 # <i class="fas fa-clipboard-list"></i> &mdash; Programma ufficiale #
 
-<!--
+[comment]: # (Trovate il programma della giornata, compreso i link per)
-Trovate il programma della giornata, compreso i link per visualizzare le slide
+[comment]: # (visualizzare le slide e i collegamenti alle registrazioni)
-e i collegamenti alle registrazioni degli interventi nella [pagina del
+[comment]: # (degli interventi nella [pagina del)
-programma](/2020/programma).
+[comment]: # (programma](/2020/programma).)
--->
+
 Troverete il programma **provvisorio** della giornata nella relativa [pagina
 del programma](/2021/programma).
 
@@ -155,14 +134,15 @@ fa-telegram-plane"></i>](https://t.me/joinchat/ADz10w6NHuROjg6QjWxS_w){:target="
 La presente pagina sarà poi costantemente aggiornata e arricchita di
 contenuti, per tenervi al corrente di ogni variazione in maniera tempestiva.
 
-<!--
+[comment]: # (Durante l'evento, sarà a disposizione una [chat <i)
-Durante l'evento, sarà a disposizione una [chat <i class="fas
+[comment]: # (class="fas)
-fa-external-link-alt"></i>](https://chat.linux.it/channel/libreitaliaconf){:target="_blank"} per
+[comment]: # (fa-external-link-alt"></i>](https://chat.linux.it/channel/libreitaliaconf){:target="_blank"})
-intervenire durante la giornata e una *Chill Room* (una stanza [Jitsi <i class="fas
+[comment]: # (per intervenire durante la giornata e una *Chill Room* (una)
-fa-external-link-alt"></i>](https://meet.jit.si/){:target="_blank"} offerta su infrastruttura
+[comment]: # (stanza [Jitsi <i class="fas)
-GARR), in cui incontrare gli altri partecipanti durante le pause o quando
+[comment]: # (fa-external-link-alt"></i>](https://meet.jit.si/){:target="_blank"})
-vorrete prendere una pausa dagli interventi.
+[comment]: # (offerta su infrastruttura GARR), in cui incontrare gli altri)
--->
+[comment]: # (partecipanti durante le pause o quando vorrete prendere una)
+[comment]: # (pausa dagli interventi.)
 
 # <i class="fas fa-hands-helping"></i> &mdash; Partner e sponsor #
 

pelicanconf.py

@@ -33,7 +33,7 @@ MENUITEMS = (
     ("2020", "/2020", False),
     ("2021", "/2021", False),
     ("Programma", "/2021/programma", False),
-    #("<span class='liveactive'>Live</span>", "/live", 1),
+    #("<span class='liveactive'>%nbsp;</span>", "/live", 1),
     #("Chill Room", "https://open.meet.garr.it/libreitaliaconf-chillroom", 1),
 )
 

themes/pelican-blue/static/css/style.css

@@ -5,13 +5,17 @@ html {
 }
 
 /* Titles */
-h1 { text-transform: uppercase }
+h1 {
+    text-transform: uppercase;
+    display: block;
+}
 h1, h2 { 
   font-weight: normal; 
   margin-top: 10px;
   margin-bottom: 10px;
 }
 
+.mobile-menu { display: none; }
 
 .title
 {
@@ -147,8 +151,8 @@ aside > h2 {
 }
 
 #avatar img {
+  max-width: 100px;
   display: block;
-  width: 100px;
   -webkit-transition: 200ms;
      -moz-transition: 200ms;
       -ms-transition: 200ms;
@@ -200,6 +204,7 @@ aside > h2 {
   border-radius: 10px 10px;
 }
 
+#mobile-menu { display: none; }
 
 .blog_roll_link 
 {
@@ -210,10 +215,27 @@ aside > h2 {
   border-radius: 10px 10px;
 } 
 
+.liveactive {
+  font-weight: bold;
+  animation: blinker 1.7s cubic-bezier(.5, 0, 1,1) infinite;
+  -moz-animation: blinker 1s linear infinite;
+}
+
+td.icon {
+    width: 15px;
+    text-align: center;
+    vertical-align: top;
+}
+
+td.hours {
+    width: 100px;
+    text-align: center;
+    vertical-align: top;
+}
 
 /*--------Responsive------------*/
 
-@media (max-width: 800px) {
+@media screen and (max-width: 1024px) {
 
   aside {
     left: 0;
@@ -251,26 +273,55 @@ aside > h2 {
   }
 }
 
-img {
+@media screen and (max-width: 700px) {
-  max-width: 100%;
-}
 
-.liveactive {
+    #license,
-  font-weight: bold;
+    aside #partners,
-  animation: blinker 1.7s cubic-bezier(.5, 0, 1,1) infinite;
+    aside .social,
-  -moz-animation: blinker 1s linear infinite;
+    aside nav.nav { display: none; }
+    aside .sidetitle {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0px 0px;
+    }
+
+    aside #avatar,
+    aside .sidetitle h1,
+    aside .sidetitle span {
+	flex-grow: 1;
+	display: inline-block;
+	float: left;
+	margin: 0px;
+    }
+
+    aside #avatar img,
+    aside #avatar img a {
+	padding: 0px;
+	max-height: 100%;
+    }
+
+    aside .sidetitle h1 {
+	flex-grow: 4;
+	padding: 0em 0.5em;
+	text-align: left;
+    }
+
+    aside .sidetitle span {
+	float: right;
+	padding: 0px 0px;
+  	border: 0px solid #73d08a;
+  	border-radius: 10px 10px;
+    }
+
+    aside .sidetitle span a {
+	color: white;
+	float: right;
+	border: 1px solid white;
+	padding: 0.77273rem 1rem;
+  	margin: 0px 5px 0px 0px;
+  	border-radius: 10px 10px;
+    }
 }
 
 @keyframes blinker { 50% { opacity: 0; } }
-
-td.icon {
-    width: 15px;
-    text-align: center;
-    vertical-align: top;
-}
-
-td.hours {
-    width: 100px;
-    text-align: center;
-    vertical-align: top;
-}

themes/pelican-blue/templates/base.html

@@ -41,19 +41,34 @@
     {% endblock %}
     <script src="https://kit.fontawesome.com/0a2f7dbe4a.js" crossorigin="anonymous"></script>
     <script src="/js/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
+    
+    <script type="text/javascript">
+      function mobileMenu() {
+	var navdisplay = $( "nav.nav" ).css("display");
+	if (navdisplay == "none")
+	  $( "nav.nav" ).css("display", "block");
+	else
+	  $( "nav.nav" ).css("display", "none");
+      }
+    </script>
 </head>
 
 <body>
 <!-- Sidebar -->
 <aside>
-    <center id="avatar"><a href="{{ SITEURL }}"><img src="{{ AVATAR }}"></a></center>
+    <div class="sidetitle">
-    <h1>{{ SITENAME }}</h1>
+      <center id="avatar"><a href="{{ SITEURL }}"><img src="{{ AVATAR }}"></a></center>
+      <h1>{{ SITENAME }}</h1>
+      <span><a href="javascript:void(0);" onclick="mobileMenu()"><i class="fa fa-bars"></i></a></span>
+    </div>
     {% if SIDEBAR_DIGEST %}
-        <p>{{ SIDEBAR_DIGEST }}</p>
+    <div class="digest">
+      <p>{{ SIDEBAR_DIGEST }}</p>
+    </div>
     {% endif %}
-    <br>
 
     {% if TWITTER_USERNAME %}
+    <div class="twitter">
         <a class="twitter-follow-button"
            href="https://twitter.com/{{ TWITTER_USERNAME }}"
            data-show-count="false"
@@ -75,6 +90,7 @@
                     });
             }(document, "script", "twitter-wjs"));
         </script>
+      </div>
     {% endif %}
 
     <nav class="nav">
@@ -82,9 +98,9 @@
 
             {% for name, link, blank in MENUITEMS %}
 	      {% if blank %}
-	      <li><a class="nav__link" href="{{ link }}" title="{{ name|striptags }}" target="_blank">{{ name }}</a></li>
+	      <li><a id="nav_{{ name | lower() }}" class="nav__link" href="{{ link }}" title="{{ name|striptags }}" target="_blank">{{ name }}</a></li>
 	      {% else %}
-	      <li><a class="nav__link" href="{{ link }}" title="{{ name|striptags }}">{{ name }}</a></li>
+	      <li><a id="nav_{{ name | lower() }}" class="nav__link" href="{{ link }}" title="{{ name|striptags }}">{{ name }}</a></li>
 	      {% endif %}
             {% endfor %}
 
@@ -93,26 +109,30 @@
             {% endfor %}{% endif %}
 
         </ul>
+	<script src="/js/livepointers.js" type="text/javascript"></script>
     </nav>
-    <script src="/js/livepointers.js" type="text/javascript"></script>
 
     {% if DISPLAY_CATEGORIES_ON_MENU and categories %}
+    <div class="categories">
         <h2>Categories</h2>
         <ul class="navbar">
             {% for cat, null in categories %}
                 <li{% if cat == category %} class="active"{% endif %}><a
                         href="{{ SITEURL }}/{{ cat.url }}">{{ cat }}</a></li>
             {% endfor %}
-        </ul>
+	  </ul>
+    </div>
     {% endif %}
 
     {% if LINKS %}
+    <div class="links">
         <h2 class="blog_roll_link"><br/>BLOGROLLS</h2>
         <ul class="navbar">
             {% for name, link in LINKS %}
                 <li><a href="{{ link }}">{{ name }}</a></li>
             {% endfor %}
         </ul>
+    </div>
     {% endif %}
 
     {% include "partners.html" %}