Grille n°3
:root{
--columns: 10;
--rows: 10;
--color: #e9703f;
--background: hsl(51, 97%, 85%);
--color1 : #9ff413;
--color2 : #dfe0c8;
--color3 : #b11bba;
--color4 : #7fb456;
--color5 : #ae1081;
}
@font-face {
font-family: "ParkBold";
src: url("fonts/NationalPark-Bold.ttf")
}
@font-face {
font-family: "Certegeska";
src: url("fonts/CertegeskaBase.ttf");
font-weight: normal;
}
@font-face {
font-family: "Certegeska";
src: url("fonts/CertegeskaDemi.ttf");
font-weight: italic;
}
@font-face {
font-family: "Certegeska";
src: url("fonts/CertegeskaStraight.ttf");
font-weight: bold;
}
@font-face {
font-family: "Certegeska";
src: url("fonts/CertegeskaStraight.ttf");
font-weight: light;
}
@font-face {
font-family: "SpaceGroteskLight";
src: url("fonts/SpaceGrotesk-Light.otf") format("opentype");
}
@font-face {
font-family: "SpaceGroteskBold";
src: url("fonts/SpaceGrotesk-Bold.otf") format("opentype");
}
@font-face {
font-family: "SpaceGroteskMedium";
src: url("fonts/SpaceGrotesk-Medium.otf") format("opentype");
}
@font-face {
font-family: "SpaceGroteskRegular";
src: url("fonts/SpaceGrotesk-Regular.otf") format("opentype");
}
@font-face {
font-family: "SpaceGroteskSemiBold";
src: url("fonts/SpaceGrotesk-SemiBold.otf") format("opentype");
}
body{
transform: scale(1);
background: hsl(51, 97%, 85%);
overflow-x: hidden;
margin: auto;
width: 100%;
font-family: "SpaceGrotesk";
}
.container{
grid-template-columns: repeat(3, 1fr);
display:grid;
padding: 20px;
padding-top: 0;
}
.formatA4{
grid-column: 2 / 4;
}
.buttons{
grid-column: 1 / 2;
display: flex;
flex-direction: column;
max-width: 350px;
gap: 10px;
}
.page, .grille, .repere{
position: absolute;
grid-template-columns: repeat( var(--columns), 1fr);
grid-template-rows: repeat( var(--rows), 1fr);
display:grid;
width: 21cm;
height: 29.7cm;
padding: 0;
grid-column-gap: 0px;
grid-row-gap: 0px;
margin-bottom: 20px;
}
.page{
background:white;
}
.repere, .grille{
background: transparent;
}
.grille > div{
border:1px solid #6d6d6d;
}
.chiffres, .lettres{
font-family: "ParkBold";
font-size: 1em;
color: #6d6d6d;
position: relative;
text-align: center;
}
.chiffres{
bottom: 30px;
}
.lettres{
grid-column: 1;
right: 60px;
bottom: 60px;
}
button{
cursor: pointer;
font-family: "ParkBold";
font-size: 2em;
color: #6d6d6d;
border-radius: 10px;
padding: 15px;
border: 1px solid;
background: white;
}
h1{
font-family: "ParkBold";
font-size: 2em;
color: #6d6d6d;
padding: 0;
margin: 10px;
}
.hidden{
visibility: hidden;
}
.visible{
visibility: visible;
}
@media print {
@page{
size: 21cm 29.7cm;
}
.buttons, h1{
display: none;
}
.container{
display: block;
padding: 0;
}
}
.souligne {
text-decoration: underline 2.5px;
text-underline-offset: 1.5mm;
font-family: "SpaceGroteskRegular";
}
#vraititre {
grid-area: 4/3/6/9;
/* border: solid purple 4px; */
line-height: 1.1em;
font-size: 53pt;
text-align: center;
color: var(--color1);
font-weight: bolder;
z-index: 9;
letter-spacing: -0.02em;
font-family: "SpaceGroteskMedium";
}
#soustitre {
grid-area: 6/6/7/9;
font-family: "SpaceGroteskMedium";
line-height: 1em;
z-index: 10;
color: var(--color4);
font-size: 18pt;
text-align: right;
}
#date {
grid-area: 2/2/10/4;
line-height: 1em;
/* border: solid rgb(98, 255, 0) 2px; */
font-family: "SpaceGroteskLight";
z-index: 2;
}
#txtdate {
transform-origin: center;
rotate: -90deg;
translate : -11cm 9.8cm;
width: 30cm;
height: 4cm;
font-size : 92pt;
color: var(--color5) ;
text-align: center;
}
#lieu {
grid-area: 7/4/10/10;
line-height: 1em;
color: var(--color5);
font-family: "SpaceGroteskLight";
font-size: 30pt;
}
#adresse {
font-size: 18pt;
line-height: normal;
}
#degrade1 {
grid-area: 2/8/3/9;
background: linear-gradient(45deg,#9ff413, white);
z-index: 1;
}
#degrade2 {
grid-area: 9/3/10/4;
background: linear-gradient(-175deg,#9ff413, white);
z-index: 1;
}
#degrade3 {
grid-area: 3/9/4/10;
background: linear-gradient(45deg,#9ff413, white);
z-index: 1;
}
#degrade4 {
grid-area: 3/7/4/8;
background: linear-gradient(45deg,#9ff413, white);
z-index: 1;
}
#degrade5 {
grid-area: 2/9/3/10;
background: linear-gradient(-175deg,#9ff413, white);
z-index: 1;
}
#degrade6 {
grid-area: 2/10/3/11;
background: linear-gradient(45deg,#9ff413, white);
z-index: 1;
}
#degrade7 {
grid-area: 1/10/2/11;
background: linear-gradient(45deg,#9ff413, white);
z-index: 1;
}
#degrade8 {
grid-area: 4/10/5/11;
background: linear-gradient(45deg,#9ff413,white);
z-index: 1;
}
#degrade9 {
grid-area: 1/6/2/7;
background: linear-gradient(45deg,#9ff413,white);
z-index: 1;
}
#degrade10 {
grid-area: 10/4/11/5;
background: linear-gradient(45deg,#9ff413,white);
z-index: 1;
}
#degrade11 {
grid-area: 10/2/11/3;
background: linear-gradient(45deg,#9ff413,white);
z-index: 1;
}
#degrade12 {
grid-area: 8/1/9/2;
background: linear-gradient(45deg,#9ff413,white);
z-index: 1;
}
#img1 {
grid-area: 1/1/4/6;
background-size: cover;
background-color: var(--color1);
z-index: 0;
overflow: hidden;
background-color: var(--color5);
}
#code {
grid-area: 1/1/10/10;
color: var(--color5);
}
#img1 img {
height: 400mm;
mix-blend-mode:hard-light;
}
Graphisme et moyens de production
Organisé par les Journées du Logiciel Libre
7 et 8 mai 2024
Salle des Rancy
Entrée libre pour tous
→ Espace public numérique des Rancy
249 rue Vendôme, Lyon
Auvergne-Rhône-Alpes
Entrée libre pour tous
→ Espace public numérique des Rancy
249 rue Vendôme, Lyon
Auvergne-Rhône-Alpes
