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

Des couleurs qui pètent mais pas trop trop

Browse source
This commit is contained in:
Evarin 2017-04-14 01:05:50 +02:00
parent 68e1166ea3
commit c36141c7c5
4 changed files with 416 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

193
avisstage/sass/screen.scss
View file

@ -4,6 +4,10 @@
$fond: #E80051; $fond: #E80051;
$barre: $fond * 0.7; $barre: $fond * 0.7;
$compl: #28BF8A;
$jaune: #FCEB26;
$vert: #27E35F;
$rouge: #C21B26;
body { body {
background: $fond; background: $fond;
@ -18,7 +22,19 @@ h1, h2, h3, h4 {
} }
h1 { h1 {
font-size: 2em; font-size: 2.3em;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.4em;
}
b {
font-weight: bold;
} }
.beta { .beta {
@ -30,6 +46,8 @@ h1 {
a { a {
font-weight: bold; font-weight: bold;
color: $compl * 0.9;
text-decoration: none;
} }
header { header {
@ -50,6 +68,7 @@ header {
padding: 0 20px; padding: 0 20px;
height: 90px; height: 90px;
vertical-align: middle; vertical-align: middle;
color: #fff;
&:hover { &:hover {
background: $barre * 0.6; background: $barre * 0.6;
@ -65,6 +84,7 @@ header {
h1 { h1 {
padding: 15px; padding: 15px;
word-wrap: none;
} }
} }
@ -100,3 +120,174 @@ p {
} }
} }
// Liste des stages
.stagelist {
li {
display: table;
width: 100%;
//border: 1px solid $fond * 1.3;
background: #fff;
margin: 12px;
& > *, &:before {
display: table-cell;
vertical-align: middle;
padding: 15px;
}
a {
width: auto;
&:hover {
background: #ccc;
}
}
&:before {
content: "&nbsp";
text-align: right;
width: 150px;
opacity: 0.8;
color: #fff;
}
&.stage-brouillon:before {
content: "Brouillon";
background: $rouge;
}
&.stage-publie:before {
content: "Publié";
background: $vert;
}
&.stage-ajout:before {
content:"+";
color: #000;
}
}
}
// Les stages
article.stage {
font-weight: normal;
h2 {
background: desaturate($jaune * 1.6, 40%);
padding: 10px 20px;
margin: -20px;
margin-bottom: 25px;
text-shadow: -3px 3px 0 rgba(#000, 0.3);
}
h3 {
background: desaturate($compl, 40%);
margin-left: -25px;
margin-top: 30px;
padding: 5px;
padding-left: 20px;
color: #fff;
text-shadow: -3px 3px 0 rgba(#000, 0.3);
//margin-right: 25px;
}
section {
background: #eee;
padding: 14px;
max-width: 600px;
margin: 30px auto;
&.misc {
ul.infos {
margin: 0 -3px;
li {
display: inline-block;
padding: 5px;
margin: 3px;
font-weight: normal;
color: #fff;
font-size: 0.9em;
border-radius: 4px;
&.thematique {
background-color: $compl;
}
&.matiere {
background-color: $fond;
}
}
}
}
.chapo, .avis-texte {
margin-bottom: 15px;
background: #fff;
padding: 20px;
}
.chapo {
font-size: 1.1em;
font-weight: 500;
font-variant: small-caps;
}
.avis-texte {
border-left: 1px solid #ccc;
padding-left: 15px;
}
.plusmoins {
max-width: 600px;
margin: 15px auto;
& > div {
display: table;
width: 100%;
&:before {
content: "&nbsp";
width: 100px;
font-size: 1.8em;
font-weight: bold;
text-align: right;
padding-right: 12px;
}
& > *, &:before {
display:table-cell;
}
& > div {
padding: 15px;
color: #fff;
h4 {
font-weight: normal;
margin-left: -5px;
font-size: 0.9em;
opacity: 0.9;
}
p {
font-weight: bold;
margin: 2px;
}
}
}
.plus {
& > div {
background: $vert * 0.9;
}
&:before {
content: "Les +";
vertical-align: bottom;
color: $vert * 0.7;
}
}
.moins {
& > div {
background: $rouge * 0.9;
}
&:before {
content: "Les -";
vertical-align: top;
color: $rouge * 0.7;
}
}
}
}
}

228
avisstage/static/css/screen.css
View file

@ -1,3 +1,4 @@
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Dosis:300,500,700|Podkova:700"); @import url("https://fonts.googleapis.com/css?family=Dosis:300,500,700|Podkova:700");
/* line 5, ../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ /* line 5, ../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe, html, body, div, span, applet, object, iframe,
@ -64,7 +65,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
display: block; display: block;
} }
/* line 8, ../../sass/screen.scss */ /* line 12, ../../sass/screen.scss */
body { body {
background: #E80051; background: #E80051;
font-family: 'Dosis', sans-serif; font-family: 'Dosis', sans-serif;
@ -73,17 +74,32 @@ body {
font-weight: 300; font-weight: 300;
} }
/* line 16, ../../sass/screen.scss */ /* line 20, ../../sass/screen.scss */
h1, h2, h3, h4 { h1, h2, h3, h4 {
font-family: Podkova; font-family: Podkova;
} }
/* line 20, ../../sass/screen.scss */ /* line 24, ../../sass/screen.scss */
h1 { h1 {
font-size: 2em; font-size: 2.3em;
} }
/* line 24, ../../sass/screen.scss */ /* line 28, ../../sass/screen.scss */
h2 {
font-size: 1.8em;
}
/* line 32, ../../sass/screen.scss */
h3 {
font-size: 1.4em;
}
/* line 36, ../../sass/screen.scss */
b {
font-weight: bold;
}
/* line 40, ../../sass/screen.scss */
.beta { .beta {
opacity: 0.5; opacity: 0.5;
font-size: 0.7em; font-size: 0.7em;
@ -91,61 +107,65 @@ h1 {
transform: translate(-1em, 0.6em) rotate(-15deg); transform: translate(-1em, 0.6em) rotate(-15deg);
} }
/* line 31, ../../sass/screen.scss */ /* line 47, ../../sass/screen.scss */
a { a {
font-weight: bold; font-weight: bold;
color: #24ac7c;
text-decoration: none;
} }
/* line 35, ../../sass/screen.scss */ /* line 53, ../../sass/screen.scss */
header { header {
background: #a20039; background: #a20039;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
/* line 41, ../../sass/screen.scss */ /* line 59, ../../sass/screen.scss */
header nav ul { header nav ul {
display: inline-flex; display: inline-flex;
} }
/* line 44, ../../sass/screen.scss */ /* line 62, ../../sass/screen.scss */
header nav ul li { header nav ul li {
display: inline-table; display: inline-table;
} }
/* line 47, ../../sass/screen.scss */ /* line 65, ../../sass/screen.scss */
header nav ul li a { header nav ul li a {
text-align: center; text-align: center;
display: table-cell; display: table-cell;
padding: 0 20px; padding: 0 20px;
height: 90px; height: 90px;
vertical-align: middle; vertical-align: middle;
color: #fff;
} }
/* line 54, ../../sass/screen.scss */ /* line 73, ../../sass/screen.scss */
header nav ul li a:hover { header nav ul li a:hover {
background: #610022; background: #610022;
} }
/* line 61, ../../sass/screen.scss */ /* line 80, ../../sass/screen.scss */
header a { header a {
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
} }
/* line 66, ../../sass/screen.scss */ /* line 85, ../../sass/screen.scss */
header h1 { header h1 {
padding: 15px; padding: 15px;
word-wrap: none;
} }
/* line 75, ../../sass/screen.scss */ /* line 95, ../../sass/screen.scss */
.content { .content {
background: #efefef; background: #efefef;
max-width: 900px; max-width: 900px;
padding: 30px; padding: 30px;
margin: 15px auto; margin: 15px auto;
} }
/* line 81, ../../sass/screen.scss */ /* line 101, ../../sass/screen.scss */
.content p { .content p {
margin: 0.5em 0; margin: 0.5em 0;
} }
/* line 89, ../../sass/screen.scss */ /* line 109, ../../sass/screen.scss */
.homeh1 { .homeh1 {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -155,7 +175,181 @@ header h1 {
border-bottom: 3px solid #000; border-bottom: 3px solid #000;
margin-bottom: 15px; margin-bottom: 15px;
} }
/* line 98, ../../sass/screen.scss */ /* line 118, ../../sass/screen.scss */
.homeh1 > * { .homeh1 > * {
display: inline-block; display: inline-block;
} }
/* line 128, ../../sass/screen.scss */
.stagelist li {
display: table;
width: 100%;
background: #fff;
margin: 12px;
}
/* line 135, ../../sass/screen.scss */
.stagelist li > *, .stagelist li:before {
display: table-cell;
vertical-align: middle;
padding: 15px;
}
/* line 140, ../../sass/screen.scss */
.stagelist li a {
width: auto;
}
/* line 142, ../../sass/screen.scss */
.stagelist li a:hover {
background: #ccc;
}
/* line 146, ../../sass/screen.scss */
.stagelist li:before {
content: "&nbsp";
text-align: right;
width: 150px;
opacity: 0.8;
color: #fff;
}
/* line 153, ../../sass/screen.scss */
.stagelist li.stage-brouillon:before {
content: "Brouillon";
background: #C21B26;
}
/* line 157, ../../sass/screen.scss */
.stagelist li.stage-publie:before {
content: "Publié";
background: #27E35F;
}
/* line 161, ../../sass/screen.scss */
.stagelist li.stage-ajout:before {
content: "+";
color: #000;
}
/* line 170, ../../sass/screen.scss */
article.stage {
font-weight: normal;
}
/* line 173, ../../sass/screen.scss */
article.stage h2 {
background: #d8d864;
padding: 10px 20px;
margin: -20px;
margin-bottom: 25px;
text-shadow: -3px 3px 0 rgba(0, 0, 0, 0.3);
}
/* line 180, ../../sass/screen.scss */
article.stage h3 {
background: #56917c;
margin-left: -25px;
margin-top: 30px;
padding: 5px;
padding-left: 20px;
color: #fff;
text-shadow: -3px 3px 0 rgba(0, 0, 0, 0.3);
}
/* line 190, ../../sass/screen.scss */
article.stage section {
background: #eee;
padding: 14px;
max-width: 600px;
margin: 30px auto;
}
/* line 197, ../../sass/screen.scss */
article.stage section.misc ul.infos {
margin: 0 -3px;
}
/* line 200, ../../sass/screen.scss */
article.stage section.misc ul.infos li {
display: inline-block;
padding: 5px;
margin: 3px;
font-weight: normal;
color: #fff;
font-size: 0.9em;
border-radius: 4px;
}
/* line 209, ../../sass/screen.scss */
article.stage section.misc ul.infos li.thematique {
background-color: #28BF8A;
}
/* line 212, ../../sass/screen.scss */
article.stage section.misc ul.infos li.matiere {
background-color: #E80051;
}
/* line 219, ../../sass/screen.scss */
article.stage section .chapo, article.stage section .avis-texte {
margin-bottom: 15px;
background: #fff;
padding: 20px;
}
/* line 224, ../../sass/screen.scss */
article.stage section .chapo {
font-size: 1.1em;
font-weight: 500;
font-variant: small-caps;
}
/* line 229, ../../sass/screen.scss */
article.stage section .avis-texte {
border-left: 1px solid #ccc;
padding-left: 15px;
}
/* line 234, ../../sass/screen.scss */
article.stage section .plusmoins {
max-width: 600px;
margin: 15px auto;
}
/* line 238, ../../sass/screen.scss */
article.stage section .plusmoins > div {
display: table;
width: 100%;
}
/* line 242, ../../sass/screen.scss */
article.stage section .plusmoins > div:before {
content: "&nbsp";
width: 100px;
font-size: 1.8em;
font-weight: bold;
text-align: right;
padding-right: 12px;
}
/* line 251, ../../sass/screen.scss */
article.stage section .plusmoins > div > *, article.stage section .plusmoins > div:before {
display: table-cell;
}
/* line 255, ../../sass/screen.scss */
article.stage section .plusmoins > div > div {
padding: 15px;
color: #fff;
}
/* line 258, ../../sass/screen.scss */
article.stage section .plusmoins > div > div h4 {
font-weight: normal;
margin-left: -5px;
font-size: 0.9em;
opacity: 0.9;
}
/* line 264, ../../sass/screen.scss */
article.stage section .plusmoins > div > div p {
font-weight: bold;
margin: 2px;
}
/* line 272, ../../sass/screen.scss */
article.stage section .plusmoins .plus > div {
background: #23cc56;
}
/* line 275, ../../sass/screen.scss */
article.stage section .plusmoins .plus:before {
content: "Les +";
vertical-align: bottom;
color: #1b9f43;
}
/* line 282, ../../sass/screen.scss */
article.stage section .plusmoins .moins > div {
background: #af1822;
}
/* line 285, ../../sass/screen.scss */
article.stage section .plusmoins .moins:before {
content: "Les -";
vertical-align: top;
color: #88131b;
}

20
avisstage/templates/avisstage/detail/avis.html
View file

@ -1,6 +1,6 @@
<section class="avis"> <section class="avis">
<h1>{{ titre }}</h1> <h2>{{ titre }}</h2>
{% if avis.chapo %} {% if avis.chapo %}
<p class="chapo"> <p class="chapo">
{{ avis.chapo }} {{ avis.chapo }}
@ -8,9 +8,9 @@
{% endif %} {% endif %}
{% for av in avis.avis_all %} {% for av in avis.avis_all %}
{% if av.1 %} {% if av.1 %}
<div class="avis_item"> <div class="avis-item">
<h2>{{ av.0 }}</h2> <h3>{{ av.0 }}</h3>
<div class="avis_texte"> <div class="avis-texte">
{{ av.1|safe }} {{ av.1|safe }}
</div> </div>
</div> </div>
@ -19,14 +19,18 @@
<div class="plusmoins"> <div class="plusmoins">
{% if avis.les_plus %} {% if avis.les_plus %}
<div class="plus"> <div class="plus">
<h3>Super si vous aimez...</h3> <div>
<p>{{ avis.les_plus }}</p> <h4>Super si vous aimez...</h4>
<p>{{ avis.les_plus }}</p>
</div>
</div> </div>
{% endif %} {% endif %}
{% if avis.les_moins %} {% if avis.les_moins %}
<div class="moins"> <div class="moins">
<h3>Pas génial pour...</h3> <div>
<p>{{ avis.les_moins }}</p> <h4>Pas génial pour...</h4>
<p>{{ avis.les_moins }}</p>
</div>
</div> </div>
{% endif %} {% endif %}
</div> </div>

2
avisstage/templates/avisstage/detail/stage.html
View file

@ -8,7 +8,7 @@
{% endif %} {% endif %}
<article class="stage"> <article class="stage">
<section class="misc"> <section class="misc">
<h2>À propos du stage</h2> <h3>À propos du stage</h3>
<p>{{ object.auteur.nom }} a fait ce stage du {{ object.date_debut }} au {{ object.date_fin }}, supervisé par {{ object.encadrants }}</p> <p>{{ object.auteur.nom }} a fait ce stage du {{ object.date_debut }} au {{ object.date_fin }}, supervisé par {{ object.encadrants }}</p>
<ul class="infos"> <ul class="infos">
{% for matiere in object.matieres.all %} {% for matiere in object.matieres.all %}