styling in mobile column

develop
tykayn 3 years ago
parent 77e13788be
commit 56a7271325
  1. 16
      src/app/app.component.html
  2. 9
      src/assets/scss/_global_layout.scss
  3. 2
      src/assets/scss/atoms/_buttons.scss
  4. 15
      src/assets/scss/atoms/_forms.scss
  5. 11
      src/assets/scss/atoms/_headings.scss
  6. 15
      src/assets/scss/molecules/_debug.scss
  7. 2
      src/assets/scss/molecules/_logo.scss
  8. 17
      src/assets/scss/variables.scss

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

@ -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;
}

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

@ -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;
}
}
}

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

@ -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;
}
}

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

@ -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;

Loading…
Cancel
Save