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 .column
{ {
max-width: 120em; max-width: 120em;
margin: 0 auto;
text-align: center;
} }
/* New */ /* 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 .new
{ {
text-align: left; text-align: left;

View File

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

View File

@ -8,33 +8,10 @@
.column .column
{ {
max-width: 120em; max-width: 120em;
margin: 0 auto;
text-align: center;
} }
/* New */ /* 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 .new
{ {
text-align: left; text-align: left;

View File

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

View File

@ -5,11 +5,11 @@
{ {
* { font-size: 8pt; } * { font-size: 8pt; }
} }
@media screen and (min-width: 1150px) @media screen and (min-device-width: 1150px)
{ {
* { font-size: 10pt; } * { font-size: 10pt; }
} }
@media screen and (min-width: 1850px) @media screen and (min-device-width: 1850px)
{ {
* { font-size: 12pt; } * { font-size: 12pt; }
} }
@ -344,6 +344,41 @@ img.icon
height: 1.5em; 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 */ /* Grid */
.htk-grid .htk-grid