R E S P O N S I V E
This commit is contained in:
Evarin
parent
7016e2df58
commit
214c235dd4
7 changed files with 599 additions and 170 deletions
13
avisstage/sass/_definitions.scss
Normal file
13
avisstage/sass/_definitions.scss
Normal 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
162
avisstage/sass/_responsive.scss
Normal 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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
#showmenu {
|
||||
display:none;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-table;
|
||||
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 {
|
||||
|
|
@ -680,6 +690,12 @@ 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";
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
11
avisstage/static/images/minimenu.svg
Normal file
11
avisstage/static/images/minimenu.svg
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="2" d="M47.062,41.393c0,3.131-2.538,5.669-5.669,5.669H8.608 c-3.131,0-5.669-2.538-5.669-5.669V8.608c0-3.131,2.538-5.669,5.669-5.669h32.785c3.131,0,5.669,2.538,5.669,5.669V41.393z"/>
|
||||
<g>
|
||||
<line fill="none" stroke="#FFFFFF" stroke-width="3" x1="10.826" y1="15" x2="40.241" y2="15"/>
|
||||
<line fill="none" stroke="#FFFFFF" stroke-width="3" x1="10.826" y1="25" x2="40.241" y2="25"/>
|
||||
<line fill="none" stroke="#FFFFFF" stroke-width="3" x1="10.826" y1="35" x2="40.241" y2="35"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 998 B |
|
|
@ -22,6 +22,7 @@
|
|||
<h1><a href="{% url 'avisstage:index' %}">ExperiENS <span class='beta'>beta</span></a></h1>
|
||||
|
||||
<nav>
|
||||
<a id="showmenu" href="#" onclick="$('header').toggleClass('expanded');return false;"><img src="{% static "images/minimenu.svg" %}" width="50px"></a>
|
||||
<ul id="menu">
|
||||
<li><a href="{% url 'avisstage:index' %}">Accueil</a></li>
|
||||
{% if user.is_authenticated %}
|
||||
|
|
@ -29,7 +30,7 @@
|
|||
<li><a href="{% url 'avisstage:recherche' %}">Recherche</a></li>
|
||||
{% endif %}
|
||||
{% if user.is_staff %}
|
||||
<li><a href="{% url 'admin:index' %}">Administration</a></li>
|
||||
<li><a href="{% url 'admin:index' %}">Admin</a></li>
|
||||
{% endif %}
|
||||
{% if user.is_authenticated %}
|
||||
<li><a href="{% url 'logout' %}"><span class="username">{{ user.username }}</span><br/> Déconnexion</a></li>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
{% block content %}
|
||||
<div class="homeh1">
|
||||
<h1>ExperiENS <span class="beta">beta</span></h1>
|
||||
<p>Partagez vos expériences de stages !</p>
|
||||
<p>Partagez vos expériences de stages !</p>
|
||||
</div>
|
||||
|
||||
<div class="betacadre">
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
{% if not user.is_authenticated %}
|
||||
<div class="entrer">
|
||||
<p><a href="{% url 'login' %}">Connexion</a></p>
|
||||
<p><a href="{% url 'login' %}" class="btn">Connexion</a></p>
|
||||
<p class="helptext">Connexion via le serveur central d'authentification ENS (identifiants clipper)</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
|
@ -23,16 +23,16 @@
|
|||
<article class="promo">
|
||||
<div class="explications">
|
||||
<div>
|
||||
<p>Ne partez plus en stage en terre inconnue : nourrissez-vous de l'expérience des stages effectués par la communauté normalienne, repérez les bons plans, et ne faites pas les mêmes erreurs !</p>
|
||||
{% if user.is_authenticated %}<p><a href="{% url 'avisstage:recherche' %}" class="btn">Rechercher des stages</a></p>{% endif %}
|
||||
<img src="{% static 'images/home2.jpg' %}"/>
|
||||
</div>
|
||||
<div>
|
||||
<img src="{% static 'images/home2.jpg' %}" width="350"/>
|
||||
<p>Ne partez plus en stage en terre inconnue : nourrissez-vous de l'expérience des stages effectués par la communauté normalienne, repérez les bons plans, et ne faites pas les mêmes erreurs !</p>
|
||||
{% if user.is_authenticated %}<p><a href="{% url 'avisstage:recherche' %}" class="btn">Rechercher des stages</a></p>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="explications">
|
||||
<div>
|
||||
<img src="{% static 'images/home1.jpg' %}" width="350"/>
|
||||
<img src="{% static 'images/home1.jpg' %}"/>
|
||||
</div>
|
||||
<div>
|
||||
<p>Vous revenez du bout du monde (ou de la rue d'à côté) ? N'attendez plus, rédigez un avis sur votre stage pour que votre expérience profite à d'autres !</p>
|
||||
|
|
|
|||
Loading…
Reference in a new issue