Download raw (5.3 KB)
@import "grid.less"; @import "colors.less"; /* SECTIONS */ /* COLUMN SETUP */ /* GROUPING */ /* GRID */ .menu { clear: both; position : fixed; min-height: 230px; z-index: 10; overflow: hidden; top: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; .fullwidth; padding-top: 4px; } .menu ul, footer ul { list-style: none; margin: auto; display: inline; padding: 0; } .menu li.sibling, .menu li.selected, footer li { display: inline-block; vertical-align: top; margin: 0px 16px 0px 16px; } .menu li.sibling > a:after, .menu li.selected > a:after { } .menu li, footer li{ line-height: 1.5; display: inline-block; margin: 0px 8px 0px 8px; } .menu li a, footer li a{ color: @color-A2; text-decoration: none; font-size: 20px; font-family: 'Alfphabet-Condensed'; &:hover { color: @color-B2; } } #newsletter { font-family: "Alfphabet-Condensed"; font-size: 20px; } #newsletter input#email { border: none; border-bottom: 1px solid black; font-family: "Alfphabet-Condensed"; max-width: 100px; } #newsletter input.button { background-color: none; border: none; font-family: "Alfphabet-Condensed"; font-size: 18px; } .logo { display: block; width: 100%; height: 170px; clear: both; line-height: 1; float: left; text-align: center; color: red; font-weight: 400; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .logo img{ height:100%; width: auto; } footer, footer.fullwidth { margin-top: 60px; margin-bottom: 12px; } .gros-article { .w6; background-size: cover; background-position: center; margin-bottom:0.65%; margin-left: 0%; min-height: 240px; overflow: hidden; } .gros-article img { } .gros-extrait { .w3; float: right; color: white; margin: 2% 2% 2% 0; padding: 2px 4px; background-image: url('/static/medor/img/50percenttransparent.png'); background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); } .auteur-feed{ font-size: 8 * @unit; font-family: 'Alfphabet-Condensed'; line-height: (@line-height / 8) * 4; } .chapeau-feed { margin-top: 3 * @unit;; font-size: 7 * @unit; line-height: (@line-height / 8) * 6; list-style-type: none; a { color: white; } } .titre-article{ font-family: "Erbar condensed"; font-weight: bold; text-transform: uppercase; margin-top: 10px; font-size: 20 * @unit; line-height: (@line-height / 8) * 17; } .titre-article a { text-decoration: none; color: inherit; } .sommaire .titre-article a { border-bottom: 2 * @unit solid; line-height: (@line-height / 8) * 24; } .flux-articles { .w4; float: right; } .petits-articles-feed { float:right; } .petits-articles-feed.enquete{ margin-bottom: 1.5em; } .gros-articles-feed { float:right; margin-left: 0; background-size: cover; overflow: hidden; } .thumbnail img { display: block; width: 32%; height:auto; margin-right: 10px; float: left; } .texte-petits-articles-feed{ float: right; width:66%; margin-bottom:1.5em; } .petits-articles-feed.blog .texte-petits-articles-feed { width: 100%; } .petits-articles-feed.blog .thumbnail { display:none; } .texte-gros-articles-feed{ float: left; padding: 20px; margin-bottom: 1.5em; } .feed-sidebar { .w2; margin-left: 0; float: left; clear: left; } .feed-sidebar img{ max-width:100%; height:auto; float: left; } .feed-sidebar p { margin-top: 3 * @unit;; font-size: 8 * @unit; line-height: (@line-height / 8) * 6; list-style-type: none; font-family: "Alfphabet-Condensed"; } .feed-sidebar .arrow { margin: 40px auto; } @media only screen and (min-width: 780px) { .menu.smaller { min-height: inherit; height: 80px; background-image: url(/static/img/white2transparentgradient.png); .logo { height: 50px; display: inline-block; width: 108px; float: left; margin-left: 8px; } ul { margin-top: 30px; } li.sibling, .menu li.selected, footer li { margin: 0px 8px 0px 8px; } li, footer li{ margin: 0px 4px 0px 4px; } } .gros-article { margin-top: 30px; } } /* GO FULL WIDTH BELOW 780 PIXELS */ @media only screen and (max-width: 780px) { .gros-extrait { .w6; } .col { margin: 1% 0 1% 0%; } .feed-sidebar, .flux-articles { width: 100%; } .feed-sidebar img{ .w3; max-width:100%; height:auto; float: left; } .thumbnail{ display:none; } .menu { position: relative; } .menu li.sibling { margin: 10px 15px; } .logo img { width: 100%; } section { margin-top: 0; } .feed-sidebar { margin: 40px auto; } .texte-petits-articles-feed{ width:100%; } }