Modificato lo stile per i cellulari.

2021-11-11 00:30:24 +01:00 · 2021-11-11 00:30:24 +01:00 · 10ebcced16
parent 8aa5fc2430
commit 10ebcced16
5 changed files with 122 additions and 71 deletions
--- a/content/js/livepointers.js
+++ b/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>");
--- a/content/pages/2021/index.md
+++ b/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
-cliccare sulla scritta e accederete alla pagina della diretta streaming.
+stessa; nel menù a sinistra comparirà la scritta ***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 #

-<!--
-Trovate il programma della giornata, compreso i link per visualizzare le slide
-e i collegamenti alle registrazioni degli interventi nella [pagina del
-programma](/2020/programma).
-->
+[comment]: # (Trovate il programma della giornata, compreso i link per)
+[comment]: # (visualizzare le slide e i collegamenti alle registrazioni)
+[comment]: # (degli interventi nella [pagina del)
+[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.

-<!--
-Durante l'evento, sarà a disposizione una [chat <i class="fas
-fa-external-link-alt"></i>](https://chat.linux.it/channel/libreitaliaconf){:target="_blank"} per
-intervenire durante la giornata e una *Chill Room* (una stanza [Jitsi <i class="fas
-fa-external-link-alt"></i>](https://meet.jit.si/){:target="_blank"} offerta su infrastruttura
-GARR), in cui incontrare gli altri partecipanti durante le pause o quando
-vorrete prendere una pausa dagli interventi.
-->
+[comment]: # (Durante l'evento, sarà a disposizione una [chat <i)
+[comment]: # (class="fas)
+[comment]: # (fa-external-link-alt"></i>](https://chat.linux.it/channel/libreitaliaconf){:target="_blank"})
+[comment]: # (per intervenire durante la giornata e una *Chill Room* (una)
+[comment]: # (stanza [Jitsi <i class="fas)
+[comment]: # (fa-external-link-alt"></i>](https://meet.jit.si/){:target="_blank"})
+[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 #

--- a/pelicanconf.py
+++ b/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),
 )

--- a/themes/pelican-blue/static/css/style.css
+++ b/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 {
-  max-width: 100%;
-}
+@media screen and (max-width: 700px) {

-.liveactive {
-  font-weight: bold;
-  animation: blinker 1.7s cubic-bezier(.5, 0, 1,1) infinite;
-  -moz-animation: blinker 1s linear infinite;
+    #license,
+    aside #partners,
+    aside .social,
+    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;
-}
--- a/themes/pelican-blue/templates/base.html
+++ b/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>
-    <h1>{{ SITENAME }}</h1>
+    <div class="sidetitle">
+      <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" %}