krichtof/config
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

more css

Browse source
This commit is contained in:
Christophe Robillard 2025-04-26 19:04:07 +02:00
parent a688b0bb06
commit 5d799682aa
2 changed files with 115 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

126
public/main.css
View file

@ -3,59 +3,133 @@ body {
font: 1.8rem "Fira Sans", sans-serif; font: 1.8rem "Fira Sans", sans-serif;
} }
.mode {
grid-area: mode;
height: 50vh;
}
.tracker {
grid-area: tracker;
}
.title {
grid-area: title;
margin: 30px;
}
.moods {
grid-area: moods;
margin: 30px;
}
.legend {
grid-area: legend;
margin: 30px;
}
.info {
grid-area: info;
}
main { main {
display: flex; 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-areas: "mode tracker";
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-wrap: wrap;
} }
.mode { .mode {
height: 100vh; height: 100vh;
grid-area: mode;
} }
.tracker {
grid-area: tracker;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
grid-template-areas:
"title title"
"moods moods"
"moods moods"
"moods moods"
"info legend";
background-color: lightgoldenrodyellow;
align-items: center;
justify-content: center;
height: 100vh;
width: 100%;
gap: 45px;
}
.title {
grid-area: title;
margin: 30px;
}
.moods {
grid-area: moods;
margin: 30px;
}
.legend {
grid-area: legend;
}
.info {
grid-area: info;
}
.mode img { .mode img {
height: 100%; height: 100%;
width:100%; width:100%;
// min-width: 527px; // min-width: 527px;
object-fit: contain; object-fit: contain;
} }
.tracker { .title h1 {
display: flex;
flex: 1 527px;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
justify-content: center;
background-color: lightgoldenrodyellow;
height: 100vh;
width: 100%;
}
.info h1 {
margin-bottom: 40px;
font-weight: 350; font-weight: 350;
} }
.tracks { }
.moods {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
margin: 30px;
} }
.week { .moods .week {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-items: start; justify-items: start;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 20px; margin-bottom: 20px;
} }
.moods .day {
.day {
border: 1px; border: 1px;
margin: 4px; margin: 4px;
min-width: 20px; min-width: 15px;
min-height: 20px; min-height: 15px;
} }
.creatif { .creatif {
background-color: red; background-color: red;
@ -69,3 +143,7 @@ main {
.croisiere { .croisiere {
background-color: green; background-color: green;
} }
.info {
margin: 30px;
}

11
views/index.erb
View file

@ -28,11 +28,10 @@
<img data-mood-target="image" src="<%= @mode %>.png"> <img data-mood-target="image" src="<%= @mode %>.png">
</div> </div>
<div class="tracker"> <div class="tracker">
<div class="info"> <div class="title">
<h1>Comment il va le Robi ?</h1> <h1>Comment il va le Robi ?</h1>
</div> </div>
<div class="tracks"> <div class="moods">
<% @mood_log.each do |week| %> <% @mood_log.each do |week| %>
<div class="week"> <div class="week">
<% week.each do |d| %> <% week.each do |d| %>
@ -45,5 +44,11 @@
</div> </div>
<% end %> <% end %>
</div> </div>
<div class="legend">
Ici la légende
</div> </div>
<div class="info">
<div class="current-day">20 mai 2025</div>
</div>
</div
</main> </main>