use bulma and kluk classes
This commit is contained in:
Christophe Robillard
parent
976ade253c
commit
43cb410e71
3 changed files with 217 additions and 10 deletions
|
|
@ -36,4 +36,5 @@
|
|||
// @import "bulma/sass/layout/hero.sass";
|
||||
// @import "bulma/sass/layout/section.sass";
|
||||
|
||||
@import 'bulma/bulma';
|
||||
@use 'bulma/bulma';
|
||||
@use './kluk';
|
||||
|
|
|
|||
208
app/assets/stylesheets/kluk.css
Normal file
208
app/assets/stylesheets/kluk.css
Normal file
|
|
@ -0,0 +1,208 @@
|
|||
/*
|
||||
* This is a manifest file that'll be compiled into application.css.
|
||||
*
|
||||
* With Propshaft, assets are served efficiently without preprocessing steps. You can still include
|
||||
* application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
|
||||
* cascading order, meaning styles declared later in the document or manifest will override earlier ones,
|
||||
* depending on specificity.
|
||||
*
|
||||
* Consider organizing styles into separate files for maintainability.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0px;
|
||||
font-family: "Sour Gummy", sans-serif;
|
||||
font-weight: 350;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.mode {
|
||||
grid-area: mode;
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
.tracker {
|
||||
grid-area: tracker;
|
||||
}
|
||||
|
||||
.title {
|
||||
grid-area: title;
|
||||
margin: 30px;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.legend .bar-afond {
|
||||
background: black;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.legend .bar-creatif {
|
||||
background: red;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.legend .bar-frigo {
|
||||
background: gray;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.legend .bar-croisiere {
|
||||
background: green;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.legend .bar-en-charge {
|
||||
background: orange;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.legend .bar-explain {
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
.legend-mood {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
main {
|
||||
display: block;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
grid-template-areas:
|
||||
"mode"
|
||||
"tracker";
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.mode img {
|
||||
height: 100%;
|
||||
width:100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.tracker {
|
||||
grid-area: tracker;
|
||||
}
|
||||
.title h1 {
|
||||
font-weight: 350;
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
main {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-areas: "mode tracker";
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mode {
|
||||
height: 100vh;
|
||||
grid-area: mode;
|
||||
}
|
||||
.tracker {
|
||||
grid-area: tracker;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 2fr 1fr 6fr 1fr;
|
||||
grid-template-areas:
|
||||
"title title"
|
||||
"info-day info-day"
|
||||
"moods moods"
|
||||
". legend";
|
||||
background-color: lightgoldenrodyellow;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
gap: 45px;
|
||||
}
|
||||
|
||||
.title {
|
||||
grid-area: title;
|
||||
margin: 30px;
|
||||
}
|
||||
|
||||
.info-day {
|
||||
grid-area: info-day;
|
||||
margin: 30px;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.info {
|
||||
grid-area: info;
|
||||
}
|
||||
|
||||
.mode img {
|
||||
height: 100%;
|
||||
width:100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.title h1 {
|
||||
font-weight: 350;
|
||||
}
|
||||
}
|
||||
.moods {
|
||||
grid-area: moods;
|
||||
margin: 30px;
|
||||
max-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.legend {
|
||||
grid-area: legend;
|
||||
margin: 4px;
|
||||
font-size: 0.8rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
margin: 30px;
|
||||
}
|
||||
.log {
|
||||
align-self: flex-end;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
overflow: hidden;
|
||||
}
|
||||
.moods .log .week {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-items: start;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.moods .log .day {
|
||||
border: 1px;
|
||||
margin: 4px;
|
||||
min-width: 15px;
|
||||
min-height: 15px;
|
||||
}
|
||||
.creatif {
|
||||
background-color: red;
|
||||
}
|
||||
.en-charge {
|
||||
background-color: orange;
|
||||
}
|
||||
.frigo-vide {
|
||||
background-color: grey;
|
||||
}
|
||||
.croisiere {
|
||||
background-color: green;
|
||||
}
|
||||
.afond {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin: 30px;
|
||||
}
|
||||
|
|
@ -1,13 +1,11 @@
|
|||
<main data-controller="mood">
|
||||
<div class="mode">
|
||||
<main data-controller="mood" class="columns">
|
||||
<section class="mode section column">
|
||||
<%= image_tag(@mode + ".jpg", "data-mood-target": "image") %>
|
||||
</div>
|
||||
<div class="tracker">
|
||||
<div class="title">
|
||||
<h1>Comment ça KLUK aujourd'hui ?</h1>
|
||||
</div>
|
||||
</section>
|
||||
<section class="tracker section column">
|
||||
<h1 class="title is-1">Comment ça KLUK aujourd'hui ?</h1>
|
||||
<div class="info-day" data-mood-target="info">Aujourd'hui</div>
|
||||
<div class="moods">
|
||||
<div class="moods container">
|
||||
<div class="log">
|
||||
<% @mood_log.each do |week| %>
|
||||
<div class="week">
|
||||
|
|
@ -44,5 +42,5 @@
|
|||
<div class="bar-explain">A fond</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue