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">
<a [routerLink]="'home'"
<a
[routerLink]="'home'"
class="home_link"
aria-roledescription="home">
aria-roledescription="home"
>
<h1>
<span i18n>Bienvenue sur </span>
<span class="logo_first">Frama</span>
<span class="logo_second">date</span>
</h1>
</a>
<i i18n>
Ceci est une démo
</i>
</a>
</div>
<framadate-navigation></framadate-navigation>
<router-outlet></router-outlet>

View File

@ -2,4 +2,11 @@
body {
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 {
// background: $light;
background: $white;
border: solid 1px $primary_color;
}

View File

@ -22,3 +22,18 @@ textarea {
margin-top: 1em;
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";
h1,
h2,
h3,
h4,
h5,
h6 {
border-bottom: 1px solid $primary_color;
}

View File

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

View File

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

View File

@ -1,7 +1,16 @@
@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;
$logo_color_2: #8A9B51;
// interpretations in app
$primary_color: $sun-yellow;
$font_color: $black;
$logo_color: $dark-lavender;
$logo_color_2: $camo;