Rivisto il layout largo e proporzionate scalarmente. Necessario test su qualche dispositivo tablet.

This commit is contained in:
Emiliano Vavassori 2021-11-18 00:39:56 +01:00
parent a975a41228
commit 8b5b381ef2
8 changed files with 145 additions and 59 deletions

View File

@ -0,0 +1,8 @@
title: Colophon - Conferenza Italiana LibreItalia
slug: colophon
# Licenza - LibreItalia Conference 2021 #
I contenuti del sito sono tutti rilasciati con licenza <a href="https://creativecommons.org/licenses/by/3.0/it/" title="Creative Commons - Attiribuzione 3.0">CC BY 3.0</a></p>
[![cc-by-3.0](https://i0.wp.com/www.libreitalia.org/wp-content/uploads/2017/11/by.png?fit=249%2C87&amp;ssl=1 "CC-BY 3.0 Logo")](https://creativecommons.org/licenses/by/3.0/it/ "Creative Commons - Attribuzione 3.0")

View File

@ -4,31 +4,16 @@ template: large
# Live - LibreItalia Conference 2020 # Live - LibreItalia Conference 2020
<div id="live">
<div id="embedded-video">
<iframe src="https://garr.tv/s/5fb82e7a175ddc33aa1e62d1?t=0" scrolling="no" marginwidth="0" height="100%" allow="autoplay; fullscreen;" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
</div>
<div id="embedded-chat">
<iframe src="https://chat.linux.it/channel/libreitaliaconf?layout=embedded" height="100%"></iframe>
</div>
</div>
**ATTENZIONE**: dovrete attivare manualmente la riproduzione del video per **ATTENZIONE**: dovrete attivare manualmente la riproduzione del video per
visualizzare lo *stream*, utilizzando il pulsante <i class="far visualizzare lo *stream*, utilizzando il pulsante <i class="far
fa-play-circle" style="font-size: 22px"></i> che comparirà al centro del fa-play-circle" style="font-size: 22px"></i> che comparirà al centro del
player! player!
### Link utili ### <div id="live">
<div id="embedded-video">
<div id="footlinks"><ul> <iframe src="https://garr.tv/s/5fb82e7a175ddc33aa1e62d1?t=0" scrolling="no" marginwidth="0" allow="autoplay; fullscreen;" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
<li><a href="https://www.libreitalia.org" title="LibreItalia" target="_blank">Sito LibreItalia</a></li> </div>
<li><a href="https://www.libreitalia.org/diventa-socio/" title="Diventa Socio LibreItalia" target="_blank">Diventa Socio</a></li> <div id="embedded-chat">
<li><a href="https://www.documentfoundation.org/" title="The Document Foundation" target="_blank">TDF</a></li> <iframe src="https://chat.linux.it/channel/libreitaliaconf?layout=embedded"></iframe>
<li><a href="https://www.documentfoundation.org/governance/why-be-a-member/" title="TDF Membership" target="_blank">TDF Membership</a></li> </div>
<li><a href="https://it.libreoffice.org/" title="LibreOffice" target="_blank">LibreOffice</a></li> </div>
<li><a href="https://it.libreoffice.org/scopri/cosa-e-open-document/" title="Cos'è Open Document Format" target="_blank">Cos'è ODF</a></li>
<li><a href="https://www.softwareheritage.org/" title="Software Heritage" target="_blank">Software Heritage</a></li>
<li><a href="https://www.omniscloud.eu/" title="Omnis Cloud" target="_blank">Omnis Cloud</a></li>
<li><a href="https://fuss.bz.it/" title="FUSS Project" target="_blank">FUSS</a></li>
</ul></div>

40
content/pages/partners.md Normal file
View File

@ -0,0 +1,40 @@
title: Partners - Conferenza Italiana LibreItalia
slug: partners
# Partners - LibreItalia Conference 2021
## ILS - Italian Linux Society ##
![ils logo](https://upload.wikimedia.org/wikipedia/commons/0/0d/Logoilsvettoriale.svg "Logo ILS"){:style="height: 200px"}
Sito web: [www.ils.org <i class="fas fa-external-link-alt"></i>](https://www.ils.org/){:target="_blank"}
*Italian Linux Society*, a tutti nota più semplicemente come **ILS**, nasce nel 1994
ed in breve tempo si estende a tutto il territorio nazionale fino a diventare
la più grande associazione italiana per la promozione e la divulgazione di
Linux e del Software Libero.
ILS favorisce la diffusione del sistema operativo libero [Linux <i class="fas
fa-external-link-alt"></i>](https://www.linux.it){:target="_blank"}, la libera
circolazione delle idee e della conoscenza in campo informatico e promuove lo
studio ed il libero utilizzo delle idee e degli algoritmi destinati al
funzionamento dei sistemi informatici.
<div style="margin-top: 50px"></div>
## Consortium GARR ##
![garr logo](https://www.garr.it/images/logo_medio_garr.png "Logo GARR")
Sito web: [www.garr.it <i class="fas fa-external-link-alt"></i>](https://www.garr.it/){:target="_blank"}
La rete GARR è ideata e gestita dal Consortium GARR, unassociazione senza
fini di lucro fondata sotto legida del Ministero dellIstruzione,
dellUniversità e della Ricerca. Gli enti soci sono
[CNR&nbsp;<i class="fas fa-external-link-alt"></i>](https://www.cnr.it/){:target="_blank"},
[ENEA&nbsp;<i class="fas fa-external-link-alt"></i>](http://www.enea.it/it){:target="_blank"},
[INAF&nbsp;<i class="fas fa-external-link-alt"></i>](http://www.inaf.it/it){:target="_blank"},
[INFN&nbsp;<i class="fas fa-external-link-alt"></i>](http://home.infn.it/it/){:target="_blank"},
[INGV&nbsp;<i class="fas fa-external-link-alt"></i>](http://www.ingv.it/){:target="_blank"},
e tutte le università italiane rappresentate dalla
[Fondazione CRUI&nbsp;<i class="fas fa-external-link-alt"></i>](http://www.fondazionecrui.it/){:target="_blank"}.

22
content/pages/social.md Normal file
View File

@ -0,0 +1,22 @@
title: Social - Conferenza Italiana LibreItalia
slug: social
# Social Media - LibreItalia Conference 2021
## LibreItalia ##
* [HomePage <i class="fas fa-external-link-alt"></i>](https://www.libreitalia.org){:target="_blank"}
* [Diventa Socio LibreItalia <i class="fas fa-external-link-alt"></i>](https://www.libreitalia.org/diventa-socio/){:target="_blank"}
* [Twitter <i class="fas fa-external-link-alt"></i>](http://twitter.com/libreitalia){:target="_blank"}
* [Facebook <i class="fas fa-external-link-alt"></i>](http://facebook.com/libreitalia){:target="_blank"}
* [Slideshare <i class="fas fa-external-link-alt"></i>](http://www.slideshare.net/libreitalia){:target="_blank"}
* [YouTube <i class="fas fa-external-link-alt"></i>](http://youtube.com/channel/UCxOY9LbVqShoGyEcl3vNRfQ){:target="_blank"}
* [Telegram <i class="fas fa-external-link-alt"></i>](https://telegram.me/libreitalia){:target="_blank"}
## Link utili ##
* [The Document Foundation <i class="fas fa-external-link-alt"></i>](https://www.documentfoundation.org/){:target="_blank}
* [TDF Membership <i class="fas fa-external-link-alt"></i>](https://www.documentfoundation.org/governance/why-be-a-member/){:target="_blank"}
* [LibreOffice <i class="fas fa-external-link-alt"></i>](https://it.libreoffice.org/){:target="_blank"}
* [Open Document Format <i class="fas fa-external-link-alt"></i>](https://it.libreoffice.org/scopri/cosa-e-open-document/){:target="_blank"}
* [FUSS <i class="fas fa-external-link-alt"></i>](https://fuss.bz.it/){:target="_blank"} - Free Upgrade in South Tyrol's Schools

View File

@ -1,39 +1,33 @@
article { /* vim:sts=2:sw=2 */
max-width:100%;
} article, footer {
img { margin: auto 5px auto 285px;
max-width: 100%; padding: 10px 5px 10px;
} }
#live iframe { article { max-width:100%; }
border: 0px; img { max-width: 100%; }
flex: 1;
width: 100%
}
#footlinks { #footlinks {
width: 100%; width: 100%;
margin: auto; margin: auto;
} }
#footlinks ul #footlinks ul {
{
column-count: 2; column-count: 2;
list-style: none; list-style: none;
padding: 0 50px; padding: 0 50px;
margin: 0 0; margin: 0 0;
} }
#footlinks li #footlinks li {
{
display: block; display: block;
width: 200px; width: 200px;
min-height: 50px; min-height: 50px;
margin: 0px 5px; margin: 0px 5px;
} }
#footlinks a #footlinks a {
{
-webkit-transition: 200ms; -webkit-transition: 200ms;
transition: 200ms; transition: 200ms;
display: block; display: block;
@ -56,24 +50,50 @@ img {
} }
#live { #live {
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
align-items: stretch; height: 77.5vh;
height: 75vh;
} }
#embedded-chat, #embedded-video { #live iframe {
border: 0px;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@media screen and (max-width: 1024px) { #live div { flex-grow: 1; }
#live iframe { #embedded-chat { border: 1px solid grey; }
min-height: 500px;
} #embedded-video {
#live { flex-grow: 3;
flex-direction: column; min-width: 66vw;
justify-content: space-between; }
height:auto;
} @media screen and (max-width: 1024px) {
#live {
flex-flow: column nowrap;
height: auto;
}
#live div { min-height: 30vw; }
#embedded-video { height: 55.1vw; }
#embedded-chat { border-bottom: 1px solid black; }
}
@media screen and (max-width: 1600px) {
#live {
flex-flow: column nowrap;
height: auto;
}
#live div { min-height: 30vw; }
#embedded-video { height: 46vw; }
#embedded-chat {
border-top: 1px solid black;
border-bottom: 1px solid black;
}
} }

View File

@ -16,6 +16,7 @@ h1, h2 {
} }
.mobile-menu { display: none; } .mobile-menu { display: none; }
.mobile-only { display: none; }
.title .title
{ {
@ -246,8 +247,11 @@ td.hours {
padding-top: 1px; padding-top: 1px;
} }
.nav .mobile-only {
{ display: list-item;
}
.nav {
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
} }
@ -267,7 +271,6 @@ td.hours {
#avatar { #avatar {
height: 50px; height: 50px;
width: 50px;
margin: 10px auto; margin: 10px auto;
} }

View File

@ -103,6 +103,10 @@
{% if DISPLAY_PAGES_ON_MENU and pages %}{% for p in pages %} {% if DISPLAY_PAGES_ON_MENU and pages %}{% for p in pages %}
<li><a class="nav__link" href="{{ SITEURL }}/{{ p.url }}">{{ p.title }}</a></li> <li><a class="nav__link" href="{{ SITEURL }}/{{ p.url }}">{{ p.title }}</a></li>
{% endfor %}{% endif %} {% endfor %}{% endif %}
<li class="mobile-only"><a class="nav__link" href="/partners" title="Partners">Partners</a></li>
<li class="mobile-only"><a class="nav__link" href="/social" title="Social Media">Social Media</a></li>
<li class="mobile-only"><a class="nav__link" href="/colophon" title="Colophon">Colophon</a></li>
</ul> </ul>
<script src="/js/livepointers.js" type="text/javascript"></script> <script src="/js/livepointers.js" type="text/javascript"></script>

View File

@ -62,9 +62,9 @@
<p>{{ SIDEBAR_DIGEST }}</p> <p>{{ SIDEBAR_DIGEST }}</p>
</div> </div>
{% endif %} {% endif %}
<br>
{% if TWITTER_USERNAME %} {% if TWITTER_USERNAME %}
<div class="twitter">
<a class="twitter-follow-button" <a class="twitter-follow-button"
href="https://twitter.com/{{ TWITTER_USERNAME }}" href="https://twitter.com/{{ TWITTER_USERNAME }}"
data-show-count="false" data-show-count="false"
@ -86,6 +86,7 @@
}); });
}(document, "script", "twitter-wjs")); }(document, "script", "twitter-wjs"));
</script> </script>
</div>
{% endif %} {% endif %}
<nav class="nav"> <nav class="nav">
@ -93,11 +94,14 @@
{% for name, link, blank in MENUITEMS %} {% for name, link, blank in MENUITEMS %}
{% if blank %} {% 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 %} {% 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 %} {% endif %}
{% endfor %} {% endfor %}
<li class="mobile-only"><a class="nav__link" href="/partners" title="Partners">Partners</a></li>
<li class="mobile-only"><a class="nav__link" href="/social" title="Social Media">Social Media</a></li>
<li class="mobile-only"><a class="nav__link" href="/colophon" title="Colophon">Colophon</a></li>
{% if DISPLAY_PAGES_ON_MENU and pages %}{% for p in pages %} {% if DISPLAY_PAGES_ON_MENU and pages %}{% for p in pages %}
<li><a class="nav__link" href="{{ SITEURL }}/{{ p.url }}">{{ p.title }}</a></li> <li><a class="nav__link" href="{{ SITEURL }}/{{ p.url }}">{{ p.title }}</a></li>