0
1
Fork 0

Vista de rejilla para noticiasy formacion

This commit is contained in:
Juan Ferrer Toribio 2015-07-20 09:34:43 +02:00
parent 06349730e8
commit 434e8e46c1
5 changed files with 41 additions and 56 deletions

View File

@ -8,37 +8,10 @@
.column
{
max-width: 120em;
margin: 0 auto;
text-align: center;
}
/* New */
.new-container
{
display: inline-block;
vertical-align: top;
}/*
.new-container:nth-child(2n+0)
{
float: right;
}*/
@media screen and (min-width: 300px)
{
.new-container { width: 100%; }
}
@media screen and (min-width: 700px)
{
.new-container { width: 50%; }
}
@media screen and (min-width: 1300px)
{
.new-container { width: 33.3%; }
}
@media screen and (min-width: 2000px)
{
.new-container { width: 25%; }
}
.new
{
text-align: left;

View File

@ -7,9 +7,9 @@
</db-model>
</vn-group>
<div id="form" class="home">
<div class="column" id="news-column">
<div class="column mansonry" id="news-column">
<htk-repeater model="news" form-id="new">
<div class="new-container">
<div class="masonry-box">
<div class="new">
<div class="top">
<h2><htk-text form="new" column="title"/></h2>

View File

@ -8,33 +8,10 @@
.column
{
max-width: 120em;
margin: 0 auto;
text-align: center;
}
/* New */
.new-container
{
display: inline-block;
vertical-align: top;
}
@media screen and (min-width: 800px)
{
.new-container { width: 100%; }
}
@media screen and (min-width: 1000px)
{
.new-container { width: 50%; }
}
@media screen and (min-width: 1300px)
{
.new-container { width: 33.3%; }
}
@media screen and (min-width: 2000px)
{
.new-container { width: 25%; }
}
.new
{
text-align: left;

View File

@ -7,9 +7,9 @@
</db-model>
</vn-group>
<div id="form" class="training">
<div class="column" id="news-column">
<div class="column masonry" id="news-column">
<htk-repeater model="news" form-id="new">
<div class="new-container">
<div class="masonry-box">
<div class="new">
<div class="top">
<h2><htk-text form="new" column="title"/></h2>

View File

@ -5,11 +5,11 @@
{
* { font-size: 8pt; }
}
@media screen and (min-width: 1150px)
@media screen and (min-device-width: 1150px)
{
* { font-size: 10pt; }
}
@media screen and (min-width: 1850px)
@media screen and (min-device-width: 1850px)
{
* { font-size: 12pt; }
}
@ -344,6 +344,41 @@ img.icon
height: 1.5em;
}
/* Masonry */
.masonry
{
margin: 0 auto;
text-align: left;
}
.masonry-box
{
width: 100%;
display: inline-block;
vertical-align: top;
}
@media screen and (min-width: 1000px) and (max-width: 1399px)
{
.masonry-box
{
width: 50%;
display: block;
float: left;
}
.masonry-box:nth-child(2n+0)
{
float: right;
}
}
@media screen and (min-width: 1400px)
{
.masonry-box { width: 33.3%; }
}
@media screen and (min-width: 2000px)
{
.masonry-box { width: 25%; }
}
/* Grid */
.htk-grid