flambyte/RUX
1
0
Fork 0
mirror of https://old.git.ood.ovh/flambyte/RUX.git synced 2025-04-28 18:14:45 +02:00
Code Issues 11 Projects Releases Packages Wiki Activity Actions

remove useless classes

Browse source
This commit is contained in:
Petite Flamby 2023-03-14 17:40:22 +01:00
parent b496133192
commit 478befe00a
3 changed files with 33 additions and 181 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

153
assets/css/style.css
View file

@ -193,13 +193,6 @@ a :visited {
/*HEADER*/
body[data-menu] .mlink--header,
.link--header {
font-size: 26px;
color: var(--color-link);
}
header {
display: flex;
margin-top: auto;
@ -310,12 +303,10 @@ header {
font-size: 38px;
margin-top: 0;
text-align: center;
font-family: 'moodboardFont';
font-weight: 300;
background: black;
margin-left: -10vw;
margin-right: -3vw;
color: white;
font-family: 'Sora', sans-serif;
text-transform: uppercase;
}
@ -421,13 +412,6 @@ img {
position: static;
}
.highlight {
background: linear-gradient(120deg, #ff00e329 0%, #74ff0069 100%);
background-repeat: no-repeat;
background-size: 100% 20%;
background-position: 0 60%;
}
.miroframe {
max-width: 100%;
min-width: 100%;
@ -485,34 +469,6 @@ body[data-menu] {
padding: 2rem;
}
.content__objet {
background-color: #CDFB52;
margin-left: 0em;
margin-right: -3rem;
padding: 1em;
line-height: 1.45;
color: var(--color-txt-b);
}
.section__color {
padding-bottom: 4em;
}
.section__color--pink {
background-color: #ff00c84b;
}
.section__color--green {
background-color: #CDFB52;
color: var(--color-txt-b);
}
.section__color--blue {
background-color: #B4E9FF;
color: var(--color-txt-b);
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
@ -618,12 +574,6 @@ body[data-menu] {
float: inherit;
}
.section__color--slot {
box-shadow: 13em 2em 11em -2em #EDCCE7;
padding: 10px;
margin-bottom: 15px;
}
.details[open] {
border-radius: 5%;
}
@ -786,95 +736,6 @@ footer {
fill: var(--color-icone);
}
@media only screen and (min-width: 800px) {
.grid {
display: grid;
grid-template-columns: 1fr 6fr 6fr 1fr 1fr;
padding-left: 0;
padding-right: 0;
gap: 3em 20px;
}
.grid>* {
grid-column: 1/-1;
}
.grid>figure {
margin: 0;
}
.tgrid-start01 {
grid-column-start: 1;
}
.tgrid-start02 {
grid-column-start: 2;
}
.tgrid-start03 {
grid-column-start: 3;
}
.tgrid-start04 {
grid-column-start: 4;
}
.tgrid-start05 {
grid-column-start: 5;
}
.tgrid-start06 {
grid-column-start: 5;
}
.tgrid-end01 {
grid-column-end: 1;
}
.tgrid-end02 {
grid-column-end: 2;
}
.tgrid-end03 {
grid-column-end: 3;
}
.tgrid-end04 {
grid-column-end: 4;
}
.tgrid-end05 {
grid-column-end: 5;
}
.tgrid-end06 {
grid-column-end: 6;
}
.tgrid-end07 {
grid-column-end: 7;
}
header {
top: 0em;
height: 2%;
width: 71%;
}
}
.list--header,
.list {
text-decoration: none;
list-style: none;
display: flex;
gap: 46px;
}
@media only screen and (min-width: 750px) {
.header__navigation {
@ -954,15 +815,6 @@ footer {
grid-column-end: 7;
}
.title {
font-size: 47px;
margin-top: 0;
text-align: center;
font-family: 'moodboardFont';
font-weight: 300;
}
.header--second {
border: none;
box-shadow: .5em 0 0 #FF00C7, -.5em 0 0 #FF00C7;
@ -1118,9 +970,6 @@ footer {
gap: 3em 20px;
}
.grid--content {
gap: 9em 20px;
}
/*HEADER*/

BIN
assets/images/Section 5.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 417 KiB

61
index.html
View file

@ -26,6 +26,9 @@
<!-- CSS and Javascript -->
<link rel="stylesheet" href="assets/css/normalize.css">
<link rel="stylesheet" href="assets/css/style.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=Sora:wght@600&display=swap" rel="stylesheet">
<script src="assets/js/app.js" defer></script>
</head>
@ -50,36 +53,36 @@
<ul class="list--header">
<li>
<a class="link link--header" href="#partie0">0</a>
<a class="link" href="#partie0">0</a>
</li>
<li>
<a class="link link--header" href="#partie1">1</a>
<a class="link" href="#partie1">1</a>
</li>
<li>
<a class="link link--header" href="#partie2">2</a>
<a class="link" href="#partie2">2</a>
</li>
<li>
<a class="link link--header" href="#partie3">3</a>
<a class="link" href="#partie3">3</a>
</li>
<li>
<a class="link link--header" href="#partie4">4</a>
<a class="link" href="#partie4">4</a>
</li>
<li>
<a class="link link--header" href="#partie5">5</a>
<a class="link" href="#partie5">5</a>
</li>
<li>
<a class="link link--header" href="#partie6">6</a>
<a class="link" href="#partie6">6</a>
</li>
<li>
<a class="link link--header" href="#partie7">7</a>
<a class="link" href="#partie7">7</a>
</li>
<li>
<a class="link link--header" href="#partie8">8</a>
<a class="link" href="#partie8">8</a>
</li>
<li>
<a class="link link--header" href="#partie9">9</a>
<a class="link" href="#partie9">9</a>
</li>
</ul>
@ -162,12 +165,12 @@
repenser l’usage de la cour en proposant des moyens d’agencement. Pour réaliser cela, on a eu recours à
notre stratégie d’apprentissage ! </p>
<p class="mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start03 dgrid-end07 content__objet">
La fusion d'un <span class="highlight">travail collaboratif</span>, des travaux de recherches qui nous
La fusion d'un travail collaboratif, des travaux de recherches qui nous
permettent d’aller découvrir le monde
extérieur et <span class="highlight">nos utilisateurs</span> et le travail pratique, ainsi que la partie
extérieur et nos utilisateurs et le travail pratique, ainsi que la partie
individuelle pour mettre en œuvre notre
site web, qui représente le fruit de notre travail. On réalisera alors notre étude de cas ! Notre
<span class="highlight">Case-study</span> pour
Case-study pour
faire plus élégant.
</p>
</section>
@ -176,14 +179,14 @@
class="number-nav">3 </span>Prémices
bis</h2>
<p class="mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end05">La première étape à été
d'<span class="highlight">observer la
cour</span> afin d'avoir un visuel plus
d'observer la
cour afin d'avoir un visuel plus
globale sur la cour.</p>
<p class="mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end05"> Une fois terminé, la
classe qui était bavarde se
retrouve tout de suite dans un silence le plus total.
J'écrivais beaucoup de questions que je pourrais poser au directeur. Seulement les questions n’ont pas
été posées dans un <span class="highlight">ordre précis.</span></p>
été posées dans un ordre précis.</p>
<p class="mgrid-start02 mgrid-end05 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end05">Le directeur, celui qui
était censé répondre à
nos questions, a
@ -212,10 +215,10 @@
je suis partie du
principe que je ne sais pas
ce qu'il faut pour résoudre ce besoin. Même si nos futurs utilisateurs sont des élèves comme moi et mes
camarades, il est important de comprendre <span class="highlight">les utilisateurs, leurs
raisonnements</span> comment ils utilisent la cour, leur temps libre.</p>
camarades, il est important de comprendre les utilisateurs, leurs
raisonnements comment ils utilisent la cour, leur temps libre.</p>
<p class="mgrid-start01 mgrid-end05 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end05"> Et pour cela, on
prépare un <span class="highlight">guide d'entretien</span></p>
prépare un guide d'entretien</p>
<details class="section__color--slot tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end05" open="">
<summary class="title__slot">Voici le guide d'entretiens en entier:</summary>
<ul class="guide__liste">
@ -265,16 +268,16 @@
<summary class="title__slot">Réponses généralisé:</summary>
<ul>
<li>Q : Que penses tu de l’HEAJ et de ses environnements ?</li>
<li>R : Les locaux sont mal indiqués, triste et <span class="highlight">manque de vie</span> dans
<li>R : Les locaux sont mal indiqués, triste et manque de vie dans
l’école</li>
<li>Q : Si tu devais améliorer une partie de l’école, laquelle serait-il ? Pourquoi ? Comment ?
</li>
<li>R : <span class="highlight">Plus de vert</span>, retravailler les extérieurs avec des jeux </li>
<li>R : Plus de vert, retravailler les extérieurs avec des jeux </li>
<li>Q : Dans quels endroits extérieur te sens-tu le mieux ? Pourquoi ? </li>
<li>R : Là, où il y a de la <span class="highlight">verdure</span> et <span class="highlight">de la
vie</span> en générale.</li>
<li>R : Là, où il y a de la verdure et de la
vie en générale.</li>
<li>Q : Si tu avais une baguette magique, que changerais-tu dans la cour ?</li>
<li>R : Des tables, du sport, <span class="highlight">de la verdure.</span></li>
<li>R : Des tables, du sport, de la verdure.</li>
<li>Q : Si ton dessin se réalisait, passerais-tu plus de temps dans la cour ?
</li>
<li>R : Oui principalement</li>
@ -293,7 +296,7 @@
<p class="mgrid-start01 mgrid-end05 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end03">Le résultat de
interviews ont démontré que ce qui
revenait souvent était la
volonté <span class="highlight">d’ajouter des verdures</span>, ainsi qu’un espace pour travailler. </p>
volonté d’ajouter des verdures, ainsi qu’un espace pour travailler. </p>
<p class="mgrid-start02 mgrid-end05 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end03">Suite à cela, on
pouvait choisir quel
Top task nous intéressait le plus parmis celle qu'on aurait voté.</p>
@ -382,7 +385,7 @@
recherches et améliorations selon
un ou des
problème(s) trouvé(s), cela permet d’améliorer nos projets et de trouver une solution plus optimale pour le
projet. <span class="highlight">Slidez</span> pour naviguer dans les différentes situations</p>
projet. Slidez pour naviguer dans les différentes situations</p>
<ul>
<li class="slide"> <img class="image_slide" src="assets/images/user1.png"
alt="User journey réalisé sous forme d'une image d'un personnage 3D et de tableau expliquant le déroulement de l'étape"
@ -419,7 +422,7 @@
decoding="async">
</figure>
<figure class="img__content dgrid-start02 dgrid-end05">
<figure class="img__content dgrid-start02 dgrid-end04">
<img class="image_sequence" src="assets/images/bancs.png" srcset="assets/images/bancs@2x.png 2x"
alt="Illustration 3D d'un banc formant un S fait de bois pour la surface du dessus et de pierres."
loading="lazy" decoding="async">
@ -449,7 +452,7 @@
<figure class="img__content dgrid-start02 dgrid-end05">
<img class="image_sequence" src="assets/images/pneu.png" srcset="assets/images/pneu@2x.png 2x"
alt="Illustration 3D d'un gros pneu utilisé pour être assis dessus." loading="lazy"
decoding="async">grid-end06
decoding="async">
<figcaption class="figcaption"> → Un gros pneu posé au sol et que l'ont peut tirer.
</figcaption>
</figure>
@ -473,7 +476,7 @@
en codant.</p>
<p class="mgrid-start01 mgrid-end04 dgrid-start03 dgrid-end04">
Tout d'abord il y a eu le burger menu. La navigation avait un fond bleu, et était placée de façon latérale,
sur le coté gauche du mobile. Mais en le <span class="highlight">testant </span>sur le téléphone, je me suis
sur le coté gauche du mobile. Mais en le testant sur le téléphone, je me suis
bien vite rendue compte que ça n'était pas facile d'accéder aux différents liens avec une main.</p>
<p class="dgrid-start02 dgrid-end05">On navigue très peu souvent sur un smartphone en ayant celui-çi posé sur un
bureau. On ressent très vite le besoin de le maintenir en main pour avoir une libertée de controle. C'est