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

update font

Browse source
This commit is contained in:
Christophe Robillard 2025-06-29 12:21:06 +02:00
parent fa50710648
commit 0a8400c20f
2 changed files with 22 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
public/main.css
View file

@ -1,6 +1,8 @@
body { body {
margin: 0px; margin: 0px;
font: 1.8rem "Fira Sans", sans-serif; font-family: "Sour Gummy", sans-serif;
font-weight: 350;
font-style: normal;
} }
.mode { .mode {
@ -15,6 +17,7 @@ body {
.title { .title {
grid-area: title; grid-area: title;
margin: 30px; margin: 30px;
font-size: 2rem;
} }
.legend .bar-creatif { .legend .bar-creatif {
@ -89,9 +92,10 @@ main {
grid-area: tracker; grid-area: tracker;
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-template-rows: 2fr 6fr 1fr; grid-template-rows: 2fr 1fr 6fr 1fr;
grid-template-areas: grid-template-areas:
"title title" "title title"
"info-day info-day"
"moods moods" "moods moods"
". legend"; ". legend";
background-color: lightgoldenrodyellow; background-color: lightgoldenrodyellow;
@ -107,6 +111,10 @@ main {
margin: 30px; margin: 30px;
} }
.info-day {
grid-area: info-day;
margin: 30px;
}
.info { .info {
grid-area: info; grid-area: info;
@ -127,6 +135,7 @@ main {
max-height: 100%; max-height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden;
} }
.legend { .legend {

20
views/index.erb
View file

@ -3,21 +3,22 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Delius&family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<script type="module"> <script type="module">
import { Application, Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js" import { Application, Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
window.Stimulus = Application.start() window.Stimulus = Application.start()
Stimulus.register("mood", class extends Controller { Stimulus.register("mood", class extends Controller {
static targets = [ "image" ] static targets = [ "image", "info" ]
showMode(event) { updateDayInfo(event) {
const image = this.imageTarget const image = this.imageTarget;
const infoDay = this.infoTarget;
image.src = event.target.dataset.mode + ".jpg" image.src = event.target.dataset.mode + ".jpg"
} infoDay.textContent = event.target.dataset.day;
showCurrent() {
const image = this.imageTarget
image.src = "<%= @mode %>.jpg"
} }
}) })
@ -31,13 +32,14 @@
<div class="title"> <div class="title">
<h1>Comment il va le Robi ?</h1> <h1>Comment il va le Robi ?</h1>
</div> </div>
<div class="info-day" data-mood-target="info">Aujourd'hui</div>
<div class="moods"> <div class="moods">
<div class="log"> <div class="log">
<% @mood_log.each do |week| %> <% @mood_log.each do |week| %>
<div class="week"> <div class="week">
<% week.each do |d| %> <% week.each do |d| %>
<% if d[1] %> <% if d[1] %>
<div data-mode="<%= d[1] %>" data-action="mouseover->mood#showMode mouseleave->mood#showMode" title="<%= d[0] %> : <%= d[1] %>" class="day <%= d[1] %>"></div> <div data-mode="<%= d[1] %>" data-day="<%= d[0] %>" data-action="mouseover->mood#updateDayInfo mouseleave->mood#updateDayInfo" title="<%= d[0] %> : <%= d[1] %>" class="day <%= d[1] %>"></div>
<% else %> <% else %>
<div class="day"></div> <div class="day"></div>
<% end %> <% end %>