DGNum/experiENS
6
0
Fork 0
Code Issues 11 Pull requests 1 Projects Releases Packages Wiki Activity Actions

R E S P O N S I V E

Browse source
This commit is contained in:
Evarin 2017-04-29 03:49:39 +02:00
parent 7016e2df58
commit 214c235dd4
7 changed files with 599 additions and 170 deletions
Download patch file Download diff file Expand all files Collapse all files

13
avisstage/sass/_definitions.scss Normal file
View file

@ -0,0 +1,13 @@
$staticurl: "/experiens/static/";
$fond: #8fcc33;
$barre: darken($fond, 10%);
$compl: #f99b20;
$jaune: #fff60a;
$vert: #1a82dd;//09f7b0;
$rouge: #f70978;
$textfont: 'Dosis', sans-serif;
$textfontsize: 19px;
$headfont: Podkova, serif;

162
avisstage/sass/_responsive.scss Normal file
View file

@ -0,0 +1,162 @@
@media screen and (max-width: 850px) {
header {
font-size: 0.9em;
h1 {
font-size: 1.5em;
}
nav ul li a {
height: 60px;
}
}
.explications div {
max-width: 50vw;
overflow: hidden;
}
}
@media screen and (max-width: 600px) {
header {
z-index: 40;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
display: block;
max-height:100vh;
overflow-y: auto;
h1 {
padding: 10px;
}
#showmenu {
display: block;
float: right;
padding: 10px;
img {
width: 35px;
}
}
nav {
clear: both;
text-align: right;
ul {
display: none;
li {
display: block;
a {
display: block;
padding: 10px 20px;
height: auto;
text-align:right;
br {
display: none;
}
.username:after {
content: " | ";
}
}
}
}
}
}
header.expanded {
nav ul {
display:block;
}
}
#feedback-button {
transform: unset;
top: 0px;
left: 165px;
padding: 15px 5px;
z-index: 41;
background: rgba(#000, 0.5);
}
.content {
margin-top: 70px;
}
.article-wrapper {
display: block;
.toc-wrapper, article {
display: block;
}
.toc-wrapper {
max-width: unset;
width: unset;
}
.toc {
display: none;
position: relative;
font-size:0.9em;
border: 1px solid #000;
padding: 4px;
}
}
article.stage {
h3 {
margin-top: 10px;
}
section {
.avis-texte, .chapo {
padding: 10px;
}
}
section .plusmoins > div::before {
width: 70px;
}
}
.homeh1 {
display: block;
& > * {
display:block;
}
}
article.promo {
.explications {
display:block;
div {
max-width: 100%;
display: block;
}
}
}
form {
.field {
display: block;
label, .label {
display: block;
text-align: left;
font-size: 0.95em;
color: $compl * 0.8;
margin-top: 0;
width: auto;
}
.help_text {
text-align: right;
color: $fond * 0.4;
}
.input {
padding-left: 20px;
display: block;
text-align: right;
}
input, textarea, div.tinymce {
background: lighten($fond, 45%);
}
}
}
}

94
avisstage/sass/screen.scss
View file

@ -1,19 +1,10 @@
@import "compass/reset";
@import "_definitions.scss";
@import url('https://fonts.googleapis.com/css?family=Dosis:300,500,700|Podkova:700');
$fond: #8fcc33;
$barre: darken($fond, 10%);
$compl: #f99b20;
$jaune: #fff60a;
$vert: #1a82dd;//09f7b0;
$rouge: #f70978;
$staticurl: "/experiens/static/";
$textfont: 'Dosis', sans-serif;
$textfontsize: 19px;
$headfont: Podkova, serif;
* {
box-sizing: border-box;
}
body {
background: $fond;
@ -29,6 +20,7 @@ h1, h2, h3, h4 {
h1 {
font-size: 2.3em;
position: relative;
}
h2 {
@ -39,15 +31,20 @@ h3 {
font-size: 1.4em;
}
b, strong, em {
b, strong {
font-weight: bold;
}
em, i {
font-style: italic;
}
.beta {
position: absolute;
opacity: 0.5;
font-size: 0.7em;
display: inline-block;
transform: translate(-1em, 0.6em) rotate(-15deg);
transform: translate(-1em, 1em) rotate(-15deg);
}
a {
@ -62,22 +59,29 @@ header {
justify-content: space-between;
align-items: center;
nav ul {
display: inline-flex;
li {
display: inline-table;
#showmenu {
display:none;
}
nav {
display: inline;
ul {
display: inline-flex;
a {
text-align: center;
display: table-cell;
padding: 0 20px;
height: 90px;
vertical-align: middle;
color: lighten($fond, 40%);
li {
display: inline-table;
&:hover {
background: $barre * 0.6;
a {
text-align: center;
display: table-cell;
padding: 0 20px;
height: 90px;
vertical-align: middle;
color: lighten($fond, 40%);
&:hover {
background: $barre * 0.6;
}
}
}
}
@ -91,6 +95,7 @@ header {
h1 {
padding: 15px;
word-wrap: none;
display: inline-block;
}
}
@ -100,7 +105,8 @@ p {
.content {
background: #efefef;
max-width: 900px;
width: 900px;
max-width: 95vw;
padding: 30px;
margin: 15px auto;
@ -123,7 +129,9 @@ p {
& > * {
display: inline-block;
}
p {
text-align: right;
}
}
// Liste des stages
@ -204,11 +212,11 @@ article.stage {
h2 {
background: desaturate(lighten($jaune, 15%), 40%);
color: #fff;
color: #000;
padding: 10px 20px;
margin: -20px;
margin-bottom: 25px;
text-shadow: -3px 3px 0 rgba(#000, 0.3);
text-shadow: -3px 3px 0 rgba(#fff, 0.3);
}
h3 {
border-bottom: 2px solid desaturate($compl, 40%);
@ -377,6 +385,7 @@ input, textarea, select, div.tinymce {
line-height: 1.3em;
font-weight: 500;
padding: 5px;
text-align: left;
&:focus, &.mce-edit-focus {
background-color: lighten($fond, 40%);
@ -534,7 +543,7 @@ div.as-results {
li.as-result-item {
&.active {
background: lighten($compl, 50%);
background: lighten($compl, 30%);
}
}
@ -554,7 +563,7 @@ div.as-results {
overflow: hidden;
top: 0;
left: 0;
z-index: 10;
z-index: 50;
&.visible {
display:block;
@ -645,6 +654,7 @@ a.lieu-change {
#stages-map {
width:100%;
height: 600px;
max-height: 90vh;
}
#feedback-button {
@ -679,7 +689,13 @@ article.promo {
.explications {
display:table;
&:first-child {
direction: rtl;
& > * {
direction: ltr;
}
}
& > div {
display:table-cell;
@ -697,6 +713,10 @@ article.promo {
display: none;
}
.leaflet-container {
z-index: 1;
}
.stage-liste {
li {
display: block;
@ -725,3 +745,5 @@ article.promo {
}
}
}
@import "_responsive.scss";