styling in mobile column

This commit is contained in:
tykayn 2019-08-11 17:06:07 +02:00
parent 77e13788be
commit 56a7271325
8 changed files with 68 additions and 19 deletions

View File

@ -1,16 +1,18 @@
<div style="text-align:center"> <div style="text-align:center">
<a [routerLink]="'home'" <a
class="home_link" [routerLink]="'home'"
aria-roledescription="home"> class="home_link"
aria-roledescription="home"
>
<h1> <h1>
<span i18n>Bienvenue sur </span>
<span class="logo_first">Frama</span> <span class="logo_first">Frama</span>
<span class="logo_second">date</span> <span class="logo_second">date</span>
</h1> </h1>
<i i18n>
Ceci est une démo
</i>
</a> </a>
<i i18n>
Ceci est une démo
</i>
</div> </div>
<framadate-navigation></framadate-navigation> <framadate-navigation></framadate-navigation>
<router-outlet></router-outlet> <router-outlet></router-outlet>

View File

@ -2,4 +2,11 @@
body { body {
background-color: #fff; background-color: #fff;
} padding: 1rem;
}
app-root {
max-width: 500px; // to look like the styleguide, to remove when we will have full width views
display: block;
margin: 0 auto;
}

View File

@ -20,7 +20,7 @@
} }
.btn-outline { .btn-outline {
// background: $light; background: $white;
border: solid 1px $primary_color; border: solid 1px $primary_color;
} }

View File

@ -22,3 +22,18 @@ textarea {
margin-top: 1em; margin-top: 1em;
border-left: 3px solid $primary_color; border-left: 3px solid $primary_color;
} }
label {
&[for] {
cursor: pointer;
}
&:not([for]) {
color: $dusty-orange;
&:before {
content: "ce label n'a pas d'attribut for, c'est mal.";
color: $violet;
}
}
}

View File

@ -1 +1,10 @@
@charset "UTF-8"; @charset "UTF-8";
h1,
h2,
h3,
h4,
h5,
h6 {
border-bottom: 1px solid $primary_color;
}

View File

@ -1,8 +1,15 @@
.debug{ .debug {
background: #dedede; font-size: 1rem;
margin:2em; background: $dark-lavender;
margin: 2em;
padding: 2em; padding: 2em;
ul{
ul {
list-style-type: none; list-style-type: none;
} }
pre {
font-size: 1rem;
padding: 0.5em;
}
} }

View File

@ -1,5 +1,5 @@
.logo_first { .logo_first {
color: $font_color; color: $logo_color;
} }
.logo_second { .logo_second {

View File

@ -1,7 +1,16 @@
@charset "UTF-8"; @charset "UTF-8";
$primary_color: #FFD52C; // colors from styleguide https://app.zeplin.io/project/5d4d83d68866d6522ff2ff10/styleguide/colors?cid=5d502bb032e23e3516af8154
$camo: #839546;
$black: #000000;
$sun-yellow: #ffd52c;
$white: #ffffff;
$dark-lavender: #7d6c99;
$dusty-orange: #f18647;
$violet: #bd10e0;
$font_color: #000; // interpretations in app
$primary_color: $sun-yellow;
$logo_color_2: #8A9B51; $font_color: $black;
$logo_color: $dark-lavender;
$logo_color_2: $camo;