un po di grafica
This commit is contained in:
redup nomade
parent
48e1b76178
commit
92b488cf17
2 changed files with 377 additions and 13 deletions
|
|
@ -18,6 +18,356 @@
|
|||
*/
|
||||
|
||||
|
||||
/* A bit custom styling */
|
||||
.ui-listview li .ui-btn p {
|
||||
color: #c0c0c0;
|
||||
}
|
||||
.ui-listview li .ui-btn .ui-li-aside {
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
/* First breakpoint is 48em (768px). 3 column layout. Tiles 250x250 pixels incl. margin at the breakpoint. */
|
||||
body{
|
||||
background: url("sfondo.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
|
||||
.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper {
|
||||
background-color:rgba(255,255,255,0.6);
|
||||
}
|
||||
.ui-content {
|
||||
|
||||
min-height:100% !important;
|
||||
padding: 0em; /* 9px */
|
||||
}
|
||||
|
||||
@media ( min-width: 48em ) {
|
||||
.ui-content {
|
||||
padding: .5625em; /* 9px */
|
||||
}
|
||||
.ui-listview li {
|
||||
float: left;
|
||||
width: 30.9333%; /* 33.3333% incl. 2 x 1.2% margin */
|
||||
height: 14.5em; /* 232p */
|
||||
margin: .5625em 1.2%;
|
||||
}
|
||||
/*h2 chiari*/
|
||||
.ui-listview .ui-li-has-thumb h2 {
|
||||
bottom: 2%;/* posizione 35%*/
|
||||
color: #FFFFFF;
|
||||
text-shadow: none;
|
||||
}
|
||||
.ui-listview li > .ui-btn {
|
||||
-webkit-box-sizing: border-box; /* include padding and border in height so we can set it to 100% */
|
||||
-moz-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
}
|
||||
.ui-listview li.ui-li-has-thumb .ui-li-thumb {
|
||||
height: auto; /* To keep aspect ratio. */
|
||||
max-width: 100%;
|
||||
max-height: none;
|
||||
}
|
||||
/* Make all list items and anchors inherit the border-radius from the UL. */
|
||||
.ui-listview li,
|
||||
.ui-listview li .ui-btn,
|
||||
.ui-listview .ui-li-thumb {
|
||||
-webkit-border-radius: inherit;
|
||||
border-radius: inherit;
|
||||
}
|
||||
/* Hide the icon */
|
||||
.ui-listview .ui-btn-icon-right:after {
|
||||
display: none;
|
||||
}
|
||||
/* Make text wrap. */
|
||||
.ui-listview h2,
|
||||
.ui-listview p {
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
/* Text position */
|
||||
.ui-listview h2 {
|
||||
font-size: 1.25em;
|
||||
margin: 0;
|
||||
padding: .125em 1em;
|
||||
bottom: 2%; /* posizione 50%*/
|
||||
background: none repeat scroll 0 0 #32872d !important; /*verde!*/
|
||||
}
|
||||
.ui-listview p {
|
||||
font-size: 1em;
|
||||
margin: 0;
|
||||
padding: 0 1.25em;
|
||||
min-height: 50%;
|
||||
bottom: 0;
|
||||
}
|
||||
/* Semi transparent background and different position if there is a thumb. The button has overflow hidden so we don't need to set border-radius. */
|
||||
.ui-listview .ui-li-has-thumb h2,
|
||||
.ui-listview .ui-li-has-thumb p {
|
||||
background: #111;
|
||||
background: rgba(0,0,0,.8);
|
||||
}
|
||||
.ui-listview .ui-li-has-thumb h2 {
|
||||
bottom: 2%; /* posizione 35%*/
|
||||
}
|
||||
.ui-listview .ui-li-has-thumb p {
|
||||
min-height: 35%;
|
||||
}
|
||||
/* ui-li-aside has class .ui-li-desc as well so we have to override some things. */
|
||||
.ui-listview .ui-li-aside {
|
||||
padding: .125em .625em;
|
||||
width: auto;
|
||||
min-height: 0;
|
||||
top: 0;
|
||||
left: auto;
|
||||
bottom: auto;
|
||||
/* Custom styling. */
|
||||
background: #990099;
|
||||
background: rgba(153,0,153,.85);
|
||||
-webkit-border-top-right-radius: inherit;
|
||||
border-top-right-radius: inherit;
|
||||
-webkit-border-bottom-left-radius: inherit;
|
||||
border-bottom-left-radius: inherit;
|
||||
-webkit-border-bottom-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
/* If you want to add shadow, don't kill the focus style. */
|
||||
.ui-listview li {
|
||||
-moz-box-shadow: 0px 0px 9px #888;
|
||||
-webkit-box-shadow: 0px 0px 9px #888;
|
||||
box-shadow: 0px 0px 9px #888;
|
||||
}
|
||||
|
||||
/* Images mask the hover bg color so we give desktop users feedback by applying the focus style on hover as well. */
|
||||
.ui-listview li > .ui-btn:hover {
|
||||
-moz-box-shadow: 0px 0px 12px #33ccff;
|
||||
-webkit-box-shadow: 0px 0px 12px #33ccff;
|
||||
box-shadow: 0px 0px 12px #33ccff;
|
||||
}
|
||||
/* Animate focus and hover style, and resizing. */
|
||||
.ui-listview li,
|
||||
.ui-listview .ui-btn {
|
||||
-webkit-transition: all 500ms ease;
|
||||
-moz-transition: all 500ms ease;
|
||||
-o-transition: all 500ms ease;
|
||||
-ms-transition: all 500ms ease;
|
||||
transition: all 500ms ease;
|
||||
}
|
||||
}
|
||||
|
||||
/* Second breakpoint is 63.75em (1020px). 4 column layout. Tiles will be 250x250 pixels incl. margin again at the breakpoint. */
|
||||
@media ( min-width: 63.75em ) {
|
||||
.ui-content {
|
||||
padding: .625em; /* 10px */
|
||||
}
|
||||
/* Set a max-width for the last breakpoint to prevent too much stretching on large screens.
|
||||
By setting the max-width equal to the breakpoint width minus padding we keep square tiles. */
|
||||
.ui-listview {
|
||||
max-width: 62.5em; /* 1000px */
|
||||
margin: 0 auto;
|
||||
}
|
||||
/* Because of the 1000px max-width the width will always be 230px (and margin left/right 10px),
|
||||
but we stick to percentage values for demo purposes. */
|
||||
.ui-listview li {
|
||||
width: 23%;
|
||||
height: 230px;
|
||||
margin: .625em 1%;
|
||||
}
|
||||
/*h2 chiari*/
|
||||
.ui-listview .ui-li-has-thumb h2 {
|
||||
bottom: 2%; /*position 35% scritte senza img*/
|
||||
color: #FFFFFF;
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* For this demo we used images with a size of 310x310 pixels. Just before the second breakpoint the images reach their max width: 1019px - 2 x 9px padding = 1001px x 30.9333% = ~310px */
|
||||
|
||||
|
||||
/* Set a max-width for the last breakpoint to prevent too much stretching on large screens.
|
||||
By setting the max-width equal to the breakpoint width minus padding we keep square tiles. */
|
||||
|
||||
/* Because of the 1000px max-width the width will always be 230px (and margin left/right 10px),
|
||||
but we stick to percentage values for demo purposes. */
|
||||
/*@media ( min-width: 0em ) {
|
||||
|
||||
|
||||
#pillole > .ui-listview {
|
||||
max-width: none;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#pillole > .ui-listview li {
|
||||
width: 10%;
|
||||
height: 135px;
|
||||
margin: .625em 1%;
|
||||
}
|
||||
|
||||
#pillole > .ui-btn-icon-right:after {
|
||||
margin-top: -17px !important;
|
||||
}
|
||||
}*/
|
||||
|
||||
@media ( min-width: 3em ) {
|
||||
|
||||
#pillole > .ui-listview li {
|
||||
float: left;
|
||||
width: 15%; /* 33.3333% incl. 2 x 1.2% margin */
|
||||
height: 110px; /* 232p */
|
||||
margin: .5625em 1.2%;
|
||||
}
|
||||
/*h2 chiari*/
|
||||
#pillole >.ui-listview .ui-li-has-thumb h2 {
|
||||
bottom: 35%;
|
||||
color: #FFFFFF;
|
||||
text-shadow: none;
|
||||
}
|
||||
#pillole > .ui-listview li > .ui-btn {
|
||||
-webkit-box-sizing: border-box; /* include padding and border in height so we can set it to 100% */
|
||||
-moz-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
}
|
||||
#pillole > .ui-listview li.ui-li-has-thumb .ui-li-thumb {
|
||||
height: auto; /* To keep aspect ratio. */
|
||||
max-width: 100%;
|
||||
max-height: none;
|
||||
}
|
||||
/* Make all list items and anchors inherit the border-radius from the UL. */
|
||||
#pillole > .ui-listview li,
|
||||
#pillole > .ui-listview li .ui-btn,
|
||||
#pillole > .ui-listview .ui-li-thumb {
|
||||
-webkit-border-radius: inherit;
|
||||
border-radius: inherit;
|
||||
}
|
||||
/* Hide the icon */
|
||||
#pillole > .ui-listview .ui-btn-icon-right:after {
|
||||
display: none;
|
||||
}
|
||||
/* Make text wrap. */
|
||||
#pillole > .ui-listview h2,
|
||||
#pillole > .ui-listview p {
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
/* Text position */
|
||||
#pillole > .ui-listview h2 {
|
||||
font-size: 1.25em;
|
||||
margin: 0;
|
||||
padding: .125em 1em;
|
||||
bottom: 50%;
|
||||
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
#pillole > .ui-listview p {
|
||||
font-size: 1em;
|
||||
margin: 0;
|
||||
padding: 0 1.25em;
|
||||
min-height: 50%;
|
||||
bottom: 0;
|
||||
}
|
||||
/* Semi transparent background and different position if there is a thumb. The button has overflow hidden so we don't need to set border-radius. */
|
||||
#pillole > .ui-listview .ui-li-has-thumb h2,
|
||||
#pillole > .ui-listview .ui-li-has-thumb p {
|
||||
background: #111;
|
||||
background: rgba(0,0,0,.8);
|
||||
}
|
||||
#pillole > .ui-listview .ui-li-has-thumb h2 {
|
||||
bottom: 35%;
|
||||
}
|
||||
#pillole > .ui-listview .ui-li-has-thumb p {
|
||||
min-height: 35%;
|
||||
}
|
||||
/* ui-li-aside has class .ui-li-desc as well so we have to override some things. */
|
||||
#pillole > .ui-listview .ui-li-aside {
|
||||
padding: .125em .625em;
|
||||
width: auto;
|
||||
min-height: 0;
|
||||
top: 0;
|
||||
left: auto;
|
||||
bottom: auto;
|
||||
/* Custom styling. */
|
||||
background: #990099;
|
||||
background: rgba(153,0,153,.85);
|
||||
-webkit-border-top-right-radius: inherit;
|
||||
border-top-right-radius: inherit;
|
||||
-webkit-border-bottom-left-radius: inherit;
|
||||
border-bottom-left-radius: inherit;
|
||||
-webkit-border-bottom-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
/* If you want to add shadow, don't kill the focus style. */
|
||||
#pillole > .ui-listview li {
|
||||
-moz-box-shadow: 0px 0px 9px #888;
|
||||
-webkit-box-shadow: 0px 0px 9px #888;
|
||||
box-shadow: 0px 0px 9px #888;
|
||||
}
|
||||
|
||||
/* Images mask the hover bg color so we give desktop users feedback by applying the focus style on hover as well. */
|
||||
#pillole > .ui-listview li > .ui-btn:hover {
|
||||
-moz-box-shadow: 0px 0px 12px #33ccff;
|
||||
-webkit-box-shadow: 0px 0px 12px #33ccff;
|
||||
box-shadow: 0px 0px 12px #33ccff;
|
||||
}
|
||||
/* Animate focus and hover style, and resizing. */
|
||||
#pillole > .ui-listview li,
|
||||
#pillole > .ui-listview .ui-btn {
|
||||
-webkit-transition: all 500ms ease;
|
||||
-moz-transition: all 500ms ease;
|
||||
-o-transition: all 500ms ease;
|
||||
-ms-transition: all 500ms ease;
|
||||
transition: all 500ms ease;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
|
||||
@media ( max-width: 480em ) {
|
||||
|
||||
#pillole > .ui-listview {
|
||||
max-width: 62.5em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#pillole > .ui-btn-icon-right:after {
|
||||
margin-top: -17px !important;
|
||||
}
|
||||
#pillole > .ui-listview li {
|
||||
float: left;
|
||||
height: 35px;
|
||||
margin: 0.625em 1%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
}*/
|
||||
|
||||
|
||||
.ui-icon-home:after {
|
||||
background-image: url("iconahome.png") !important;
|
||||
background-color: #FFFFFF !important;
|
||||
}
|
||||
.ui-icon-comment:after {
|
||||
background-color: rgba(65, 158, 69, 0.9) !important;
|
||||
}
|
||||
.ui-icon-alert:after {
|
||||
background-color: rgba(255,04,04,0.9) !important;
|
||||
}
|
||||
|
||||
|
||||
#aggiornahome{
|
||||
padding:1em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.overlaynero{
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
|
|
@ -791,15 +1141,15 @@ width: 150px;}
|
|||
|
||||
|
||||
/*footer*/
|
||||
#navfooter{ max-width: 800px;
|
||||
margin: 0 auto -34px;
|
||||
#navfooter{ /*max-width: 800px;
|
||||
margin: 0 auto -34px;*/
|
||||
}
|
||||
#navfooter ul {
|
||||
/*margin-top: -2em !important;*/
|
||||
max-width: 797px;
|
||||
margin-left: -1px;
|
||||
}
|
||||
/*BLOCCO DI TUTTO A MAX WIDTH:(800)*/
|
||||
/*BLOCCO DI TUTTO A MAX WIDTH:(800)
|
||||
|
||||
.ui-mobile .ui-page, body {
|
||||
|
||||
|
|
@ -819,6 +1169,7 @@ body{background-color:#000 !important;}
|
|||
.ui-header{
|
||||
border-width:0px !important;
|
||||
}
|
||||
*/
|
||||
|
||||
/*pagina dinamica*/
|
||||
|
||||
|
|
|
|||
|
|
@ -115,7 +115,7 @@
|
|||
<!--panel -->
|
||||
<div data-role="panel" data-position="right" id="outside" data-theme="a" data-position-fixed="true" data-display="overlay" data-swipe-close="true">
|
||||
<ul data-role="listview">
|
||||
<li><a class="nav" href="#ilove">XM loves me</a></li>
|
||||
<li><a class="nav" href="#ilove">I love XM24</a></li>
|
||||
<li><a class="nav" href="#info">Info</a></li>
|
||||
<li>
|
||||
<input type="text" class="cerca" value="" placeholder="Cerca" data-clear-btn="true" />
|
||||
|
|
@ -149,21 +149,34 @@
|
|||
</div>
|
||||
<!-- /header -->
|
||||
|
||||
|
||||
<div data-role="page" id="index" data-dom-cache="true" data-theme="a" class="ui-page">
|
||||
<div>
|
||||
<div id="box4">
|
||||
<!--a class="minibox red nav" href="#aggiorna"> Aggiorna</a-->
|
||||
<a class="minibox red nav" href="#ilove"> I love xm24</a>
|
||||
<a class="minibox green nav" href="#info"> Comunicati ed opinioni</a>
|
||||
<ul data-role="listview" data-inset="true">
|
||||
<li>
|
||||
<a class="nav" href="#ilove">
|
||||
<img src="./image/ilovexm24_puzzle-300x300.jpg" class="ui-li-thumb">
|
||||
<h2>I love XM24</h2>
|
||||
<p>Bla blabla</p>
|
||||
<!--p class="ui-li-aside">iOS</p-->
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="nav" href="#info">
|
||||
<img src="./image/ilovexm24_puzzle-300x300.jpg" class="ui-li-thumb">
|
||||
<h2>Info e comunicati</h2>
|
||||
<p>Bla Bla blabla</p>
|
||||
<!--p class="ui-li-aside">BlackBerry</p-->
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!--a class="minibox orange nav" href="#eventi"> Eventi</a>
|
||||
<a class="minibox green nav" href="#lab"> Laboratori</a>
|
||||
<a class="minibox green nav" href="#ultime"> News</a>
|
||||
<a class="minibox green nav" href="#tag"> Tag</a>
|
||||
<a class="minibox blue nav" href="#quotidiano"> Un post a caso</a-->
|
||||
<img src="./image/ilovexm24_puzzle-300x300.jpg" id="logohome" />
|
||||
</div>
|
||||
<br/ style="clear:both;">
|
||||
|
||||
<br/ style="clear:both;">
|
||||
<div id="aggiornahome">Aggiorna i contenuti dal sito XM24 di tanto in tanto.
|
||||
<br/> Per iniziare da capo e riscaricare tutti i contenuti clicca su reset. </p>
|
||||
|
||||
|
|
@ -192,7 +205,7 @@
|
|||
<input type="button" value="OK" onclick='$("#benvenuta").popup("close");alterContent(#info);' />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue