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;
$barre: $fond * 0.7;
$compl: #28BF8A;
$jaune: #FCEB26;
$vert: #27E35F;
$rouge: #C21B26;
body {
background: $fond;
@ -18,7 +22,19 @@ h1, h2, h3, h4 {
}
h1 {
font-size: 2em;
font-size: 2.3em;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.4em;
}
b {
font-weight: bold;
}
.beta {
@ -30,6 +46,8 @@ h1 {
a {
font-weight: bold;
color: $compl * 0.9;
text-decoration: none;
}
header {
@ -50,6 +68,7 @@ header {
padding: 0 20px;
height: 90px;
vertical-align: middle;
color: #fff;
&:hover {
background: $barre * 0.6;
@ -65,6 +84,7 @@ header {
h1 {
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");
/* 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,
@ -64,7 +65,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
display: block;
}
/* line 8, ../../sass/screen.scss */
/* line 12, ../../sass/screen.scss */
body {
background: #E80051;
font-family: 'Dosis', sans-serif;
@ -73,17 +74,32 @@ body {
font-weight: 300;
}
/* line 16, ../../sass/screen.scss */
/* line 20, ../../sass/screen.scss */
h1, h2, h3, h4 {
font-family: Podkova;
}
/* line 20, ../../sass/screen.scss */
/* line 24, ../../sass/screen.scss */
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 {
opacity: 0.5;
font-size: 0.7em;
@ -91,61 +107,65 @@ h1 {
transform: translate(-1em, 0.6em) rotate(-15deg);
}
/* line 31, ../../sass/screen.scss */
/* line 47, ../../sass/screen.scss */
a {
font-weight: bold;
color: #24ac7c;
text-decoration: none;
}
/* line 35, ../../sass/screen.scss */
/* line 53, ../../sass/screen.scss */
header {
background: #a20039;
display: flex;
justify-content: space-between;
align-items: center;
}
/* line 41, ../../sass/screen.scss */
/* line 59, ../../sass/screen.scss */
header nav ul {
display: inline-flex;
}
/* line 44, ../../sass/screen.scss */
/* line 62, ../../sass/screen.scss */
header nav ul li {
display: inline-table;
}
/* line 47, ../../sass/screen.scss */
/* line 65, ../../sass/screen.scss */
header nav ul li a {
text-align: center;
display: table-cell;
padding: 0 20px;
height: 90px;
vertical-align: middle;
color: #fff;
}
/* line 54, ../../sass/screen.scss */
/* line 73, ../../sass/screen.scss */
header nav ul li a:hover {
background: #610022;
}
/* line 61, ../../sass/screen.scss */
/* line 80, ../../sass/screen.scss */
header a {
color: #fff;
text-decoration: none;
}
/* line 66, ../../sass/screen.scss */
/* line 85, ../../sass/screen.scss */
header h1 {
padding: 15px;
word-wrap: none;
}
/* line 75, ../../sass/screen.scss */
/* line 95, ../../sass/screen.scss */
.content {
background: #efefef;
max-width: 900px;
padding: 30px;
margin: 15px auto;
}
/* line 81, ../../sass/screen.scss */
/* line 101, ../../sass/screen.scss */
.content p {
margin: 0.5em 0;
}
/* line 89, ../../sass/screen.scss */
/* line 109, ../../sass/screen.scss */
.homeh1 {
display: flex;
justify-content: space-between;
@ -155,7 +175,181 @@ header h1 {
border-bottom: 3px solid #000;
margin-bottom: 15px;
}
/* line 98, ../../sass/screen.scss */
/* line 118, ../../sass/screen.scss */
.homeh1 > * {
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;
}

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

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

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

@ -8,7 +8,7 @@
{% endif %}
<article class="stage">
<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>
<ul class="infos">
{% for matiere in object.matieres.all %}