mirror of
https://old.git.ood.ovh/flambyte/RUX.git
synced 2025-04-29 05:12:06 +02:00
refacto(all): Rebuild website on my standards
This commit is contained in:
Hactarus
parent
9d197e1363
commit
c56c4138e3
3 changed files with 134 additions and 165 deletions
|
|
@ -1,30 +1,3 @@
|
||||||
@import 'normalize.css';
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'MoodboardFont';
|
|
||||||
font-weight: 400;
|
|
||||||
src: url('../fonts/moodboardfont-webfont.woff2') format('woff2'),
|
|
||||||
url('../fonts/moodboardfont-webfont.woff') format('woff');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Queensides';
|
|
||||||
font-weight: 400;
|
|
||||||
src: url('../fonts/Queensides-3z7Ey.ttf');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'QueensidesL';
|
|
||||||
font-weight: 300;
|
|
||||||
src: url('../fonts/QueensidesLight-ZVj3l.ttf');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'QueensidesM';
|
|
||||||
font-weight: 700;
|
|
||||||
src: url('../fonts/QueensidesMedium-x30zV.ttf');
|
|
||||||
}
|
|
||||||
|
|
||||||
*,
|
*,
|
||||||
:after,
|
:after,
|
||||||
:before {
|
:before {
|
||||||
|
|
@ -32,55 +5,12 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
|
||||||
--color-bg-head: #77A3D2;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
html {
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@media(prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
--color-bg-head: #77A3D2;
|
|
||||||
--color-bg: white;
|
|
||||||
--color-bg-sctn-pink: #EDCCE7;
|
|
||||||
--color-bg-sctn-green: #CDFB52;
|
|
||||||
--color-bg-sctn-blue: #52f8fb;
|
|
||||||
--color-bg-sctn-fuscia: #FF00C7;
|
|
||||||
--color-active: #FF00C7;
|
|
||||||
--color-visited: #4B003B;
|
|
||||||
--color-hover: #EDCCE7;
|
|
||||||
--color-link: #000000;
|
|
||||||
--color-icone: #fff;
|
|
||||||
--color-discu-pink: #FFB4EF;
|
|
||||||
--color-link-f: #00fa6c;
|
|
||||||
--color-link-block: #4B003B;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-theme="light"] {
|
|
||||||
--color-bg: white;
|
|
||||||
--color-txt: #001f1f;
|
|
||||||
--color-link: #000000;
|
|
||||||
--color-icone: #000;
|
|
||||||
--color-discu-pink: #FFB4EF;
|
|
||||||
--color-discu-green: #CEFFB2;
|
|
||||||
--color-discu-blue: #B4E9FF;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-theme="dark"] {
|
|
||||||
--color-bg: #000000;
|
|
||||||
--color-txt: #ffffff;
|
|
||||||
--color-txt-b: #000000;
|
|
||||||
--color-link: #ffff;
|
|
||||||
--color-icone: #fff;
|
|
||||||
--color-discu-pink: #4B003B;
|
|
||||||
--color-discu-green: #1C4D00;
|
|
||||||
--color-discu-blue: #00354B;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*BTN THEME*/
|
/*BTN THEME*/
|
||||||
[data-theme="dark"] .btn__dark {
|
[data-theme="dark"] .btn__dark {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
|
||||||
67
assets/css/style_hactarus.css
Normal file
67
assets/css/style_hactarus.css
Normal file
|
|
@ -0,0 +1,67 @@
|
||||||
|
/* Navigation */
|
||||||
|
body {
|
||||||
|
margin-top: 5vh;
|
||||||
|
}
|
||||||
|
header > nav {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1030;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav > ul {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
width: 100%;
|
||||||
|
list-style: none;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav > ul > li {
|
||||||
|
flex: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
padding-top: 5vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
background-color: var(--color-bg);
|
||||||
|
color: var(--color-txt);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Decorations */
|
||||||
|
.strip {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 90%;
|
||||||
|
height: 4em;
|
||||||
|
z-index: -1;
|
||||||
|
position: absolute;
|
||||||
|
margin-left: -19px;
|
||||||
|
background-color: #FF00C7;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.strip>.strip--1 {
|
||||||
|
top: 55em;
|
||||||
|
transform: skew(30deg) rotate(30deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.strip>.strip--2 {
|
||||||
|
top: 82em;
|
||||||
|
transform: skew(-30deg) rotate(-30deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.strip>.strip--3 {
|
||||||
|
top: 109em;
|
||||||
|
transform: skew(30deg) rotate(30deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.strip>.strip--cash {
|
||||||
|
max-width: 100%;
|
||||||
|
background-image: url(/assets/images/stripeuro.png);
|
||||||
|
background-size: cover;
|
||||||
|
filter: invert(1);
|
||||||
|
margin-top: -19em;
|
||||||
|
}
|
||||||
148
index.html
148
index.html
|
|
@ -44,98 +44,70 @@
|
||||||
|
|
||||||
<body data-theme="light">
|
<body data-theme="light">
|
||||||
<header>
|
<header>
|
||||||
|
<nav class="header--nav">
|
||||||
<button class="js-theme-trigger">
|
<ul class="header--nav--list">
|
||||||
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
|
<li>
|
||||||
|
<a href="#synopsis">Synopsis</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#team_building">Création de l'Équipe</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#premices">Prémices</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#ebauche">Ébauche</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#entretiens">Guide d'entretien</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#tasks">Top Task & fonctions</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#audits">Audits</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#journey">User Journey</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#croquis">Croquis</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#integration">Intégration</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<button class="js-theme-trigger" alt="theme switcher">
|
||||||
|
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd">
|
||||||
<path
|
<path
|
||||||
d="M13 9h9l-14 15 3-9h-9l14-15-3 9zm-8.699 5h8.086l-1.987 5.963 9.299-9.963h-8.086l1.987-5.963-9.299 9.963z" />
|
d="M13 9h9l-14 15 3-9h-9l14-15-3 9zm-8.699 5h8.086l-1.987 5.963 9.299-9.963h-8.086l1.987-5.963-9.299 9.963z" />
|
||||||
</svg></button>
|
</svg>
|
||||||
|
</button>
|
||||||
<div class="header--second">
|
|
||||||
|
|
||||||
|
|
||||||
<div class="btn__lightdark--blockd">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="header__navigation">
|
|
||||||
|
|
||||||
<nav>
|
|
||||||
|
|
||||||
<ul class="list--header">
|
|
||||||
<li>
|
|
||||||
<a class="link" href="#partie0">0</a>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<a class="link" href="#partie1">1</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="link" href="#partie2">2</a>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<a class="link" href="#partie3">3</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="link" href="#partie4">4</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="link" href="#partie5">5</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="link" href="#partie6">6</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="link" href="#partie7">7</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="link" href="#partie8">8</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="link" href="#partie9">9</a>
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
</nav>
|
</nav>
|
||||||
|
<section class="headback">
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="headback">
|
|
||||||
<div class="fond">
|
<div class="fond">
|
||||||
<img class="headtitle" src="assets/images/headlogo.png"
|
<img class="headtitle" src="assets/images/headlogo.png"
|
||||||
alt="illustration portant les initiales de l'atelier Rethinking User Experience. RUX">
|
alt="illustration portant les initiales de l'atelier Rethinking User Experience. RUX">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
<section class="grid grid--content" id="partie0">
|
</header>
|
||||||
|
<div id="strips" alt="decotration: lignes rose en diagonales">
|
||||||
<div class="strip strip--1"></div>
|
<div class="strip strip--1"></div>
|
||||||
<h1 class="title mgrid-start01 mgrid-end08 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
|
||||||
class="number-nav">0 </span>Synopsis
|
|
||||||
</h1>
|
|
||||||
<p class="mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end05 partie1_blackfill">
|
|
||||||
L’atelier RUX (rethinking UX)
|
|
||||||
est de
|
|
||||||
réaliser une interface adaptée et
|
|
||||||
compréhensible pour
|
|
||||||
l’utilisateur, pour une
|
|
||||||
navigation facile et rapide”</p>
|
|
||||||
<div class="strip strip--2"></div>
|
<div class="strip strip--2"></div>
|
||||||
<p class="mgrid-start02 mgrid-end05 tgrid-start02 tgrid-end05 dgrid-start03 dgrid-end05 partie1_blackfill">Le
|
|
||||||
directeur de la Haute école
|
|
||||||
Albert Jacquard nous à
|
|
||||||
donner une mission ! </p>
|
|
||||||
<div class="strip strip--3"></div>
|
<div class="strip strip--3"></div>
|
||||||
<p class="mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end05 partie1_blackfill">
|
</div>
|
||||||
Repenser notre cours de récré
|
<section class="grid" id="synopsis">
|
||||||
</p>
|
<h2>Synopsis</h2>
|
||||||
<p class="mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start03 dgrid-end05 partie1_blackfill">Notre
|
<p>L’atelier RUX (rethinking UX) est de réaliser une interface adaptée et compréhensible pour l’utilisateur,
|
||||||
|
pour une navigation facile et rapide”</p>
|
||||||
|
<p>Le directeur de la Haute école Albert Jacquard nous à donner une mission ! </p>
|
||||||
|
<p>Repenser notre cours de récré</p>
|
||||||
|
<p>Notre
|
||||||
budget est limité à
|
budget est limité à
|
||||||
200k€
|
200k€ ±</p>
|
||||||
+- </p>
|
|
||||||
<div class="strip strip--cash"></div>
|
|
||||||
<figure class="img__content tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end03">
|
<figure class="img__content tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end03">
|
||||||
<img class="image_undertxt image_undertxt--iv" src="assets/images/plancour.png"
|
<img class="image_undertxt image_undertxt--iv" src="assets/images/plancour.png"
|
||||||
srcset="assets/images/plancour@2x.png 2x"
|
srcset="assets/images/plancour@2x.png 2x"
|
||||||
|
|
@ -148,7 +120,7 @@
|
||||||
<figcaption class="figcaption">Photo prise de la cour "plan large"</figcaption>
|
<figcaption class="figcaption">Photo prise de la cour "plan large"</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
</section>
|
</section>
|
||||||
<section class="grid" id="partie1">
|
<section class="grid" id="team_building">
|
||||||
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
||||||
class="number-nav">1 </span>Création
|
class="number-nav">1 </span>Création
|
||||||
de l'Équipe</h2>
|
de l'Équipe</h2>
|
||||||
|
|
@ -163,7 +135,7 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="grid section__color section__color--pink" id="partie2">
|
<section class="grid section__color section__color--pink" id="premices">
|
||||||
<h2 class="title mgrid-start01 mgrid-end07 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
<h2 class="title mgrid-start01 mgrid-end07 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
||||||
class="number-nav">2 </span>Prémices
|
class="number-nav">2 </span>Prémices
|
||||||
</h2>
|
</h2>
|
||||||
|
|
@ -184,7 +156,7 @@
|
||||||
faire plus élégant.
|
faire plus élégant.
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
<section class="grid section__color section__color--green" id="partie3">
|
<section class="grid section__color section__color--green" id="ebauche">
|
||||||
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
||||||
class="number-nav">3 </span>Prémices
|
class="number-nav">3 </span>Prémices
|
||||||
bis</h2>
|
bis</h2>
|
||||||
|
|
@ -217,7 +189,7 @@
|
||||||
lieux d’exposition, déco des murs, activités, zone de
|
lieux d’exposition, déco des murs, activités, zone de
|
||||||
lecture. Distribution des diplômes. Lieu de concert. Boîte à livres. </p>
|
lecture. Distribution des diplômes. Lieu de concert. Boîte à livres. </p>
|
||||||
</section>
|
</section>
|
||||||
<section class="grid" id="partie4">
|
<section class="grid" id="entretiens">
|
||||||
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
||||||
class="number-nav">4 </span>Guide
|
class="number-nav">4 </span>Guide
|
||||||
d'entretien</h2>
|
d'entretien</h2>
|
||||||
|
|
@ -299,7 +271,7 @@
|
||||||
<figcaption class="figcaption">Une de nos plus belles interview</figcaption>
|
<figcaption class="figcaption">Une de nos plus belles interview</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
</section>
|
</section>
|
||||||
<section class="grid section__color section__color--blue" id="partie5">
|
<section class="grid section__color section__color--blue" id="tasks">
|
||||||
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
||||||
class="number-nav">5 </span>Top Task
|
class="number-nav">5 </span>Top Task
|
||||||
& fonctions</h2>
|
& fonctions</h2>
|
||||||
|
|
@ -317,7 +289,7 @@
|
||||||
<figcaption class="figcaption">On avait droit à 3 votes maximum.😇</figcaption>
|
<figcaption class="figcaption">On avait droit à 3 votes maximum.😇</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
</section>
|
</section>
|
||||||
<section class="grid section__color section__color--pink" id="partie6">
|
<section class="grid section__color section__color--pink" id="audits">
|
||||||
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
||||||
class="number-nav">6 </span>Audits
|
class="number-nav">6 </span>Audits
|
||||||
</h2>
|
</h2>
|
||||||
|
|
@ -387,7 +359,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
<section class="grid section__color section__color--green" id="partie7">
|
<section class="grid section__color section__color--green" id="journey">
|
||||||
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
||||||
class="number-nav">7 </span>User
|
class="number-nav">7 </span>User
|
||||||
Journey</h2>
|
Journey</h2>
|
||||||
|
|
@ -409,7 +381,7 @@
|
||||||
srcset="assets/images/user3@2x.png 2x" loading="lazy" decoding="async"></li>
|
srcset="assets/images/user3@2x.png 2x" loading="lazy" decoding="async"></li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
<section class="grid section__color section__color--blue" id="partie8">
|
<section class="grid section__color section__color--blue" id="croquis">
|
||||||
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
||||||
class="number-nav">8 </span>Croquis
|
class="number-nav">8 </span>Croquis
|
||||||
</h2>
|
</h2>
|
||||||
|
|
@ -476,7 +448,7 @@
|
||||||
<p class="mgrid-start01 mgrid-end04 dgrid-start03 dgrid-end04">Un couteau à bois, des vis des roulettes et le
|
<p class="mgrid-start01 mgrid-end04 dgrid-start03 dgrid-end04">Un couteau à bois, des vis des roulettes et le
|
||||||
plus beau rondin de bois suffit à créer un tabouret mobile !</p>
|
plus beau rondin de bois suffit à créer un tabouret mobile !</p>
|
||||||
</section>
|
</section>
|
||||||
<section class="grid" id="partie9">
|
<section class="grid" id="integration">
|
||||||
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
||||||
class="number-nav">9
|
class="number-nav">9
|
||||||
</span>Intégration</h2>
|
</span>Intégration</h2>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue