PostERG/posterg-front-end
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wireframe tags

Browse Source
This commit is contained in:
Pontoporeia
2022-12-22 10:15:36 +01:00
parent 22d67c0821
commit d6bc3659a5
2 changed files with 127 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
index.html
View File

@@ -35,19 +35,50 @@
<div class=" grid-section"> <div class=" grid-section">
<section class="grid1"> <section class="grid1">
<ul id="mosaic"> <ul id="mosaic">
<li class="item"><a href="memoires/m1.html"><img src="memoires/memoire_1.jpg" alt=""><span><strong>Yeah I'm still searchin'</strong><br>Meryll Hardt</span></a></li> <li class="item"><a href="memoires/m1.html"><img src="memoires/memoire_1.jpg" alt=""><span><strong>Yeah I'm
<li class="item"><a href=""><img src="memoires/memoire_2.png" alt=""><span><strong>Froncer les sourcils</strong><br>Olivier Bertrand</span></a></li> still searchin'</strong><br>Meryll Hardt</span></a></li>
<li class="item"><a href=""><img src="memoires/memoire_3.png" alt=""><span><strong>Design Spéculatif: La guerre des imaginaires</strong><br>ANTOINE PUEL</span></a></li> <li class="item"><a href=""><img src="memoires/memoire_2.png" alt=""><span><strong>Froncer les
sourcils</strong><br>Olivier Bertrand</span></a></li>
<li class="item"><a href=""><img src="memoires/memoire_3.png" alt=""><span><strong>Design Spéculatif: La guerre
des imaginaires</strong><br>ANTOINE PUEL</span></a></li>
<li class="item"><a href=""><img src="memoires/memoire_3.png" alt=""><span><strong>Design Spéculatif: La guerre
des imaginaires</strong><br>ANTOINE PUEL</span></a></li>
</ul> </ul>
</section> </section>
<section class="grid2"> <section class="grid2">
<ul id="list"> <div class="list">
<ul id="memoire">
<li><a href="">2021</a></li> <li><a href="">2021</a></li>
<li><a href="">2020</a></li> <li><a href="">2020</a></li>
<li><a href="">2019</a></li> <li><a href="">2019</a></li>
<li><a href="">2018</a></li> <li><a href="">2018</a></li>
<li><a href="">2017</a></li> <li><a href="">2017</a></li>
</ul> </ul>
<hr>
<ul id="tag">
<li><a href="">edition</a></li>
<li><a href="">web2print</a></li>
<li><a href="">jardin</a></li>
<li><a href="">architecture</a></li>
<li><a href="">lgbtquia+</a></li>
</ul>
<hr>
<ul id="orientation">
<li><a href="">2021</a></li>
<li><a href="">2020</a></li>
<li><a href="">2019</a></li>
<li><a href="">2018</a></li>
<li><a href="">2017</a></li>
</ul>
<hr>
<ul id="ap">
<li><a href="">2021</a></li>
<li><a href="">2020</a></li>
<li><a href="">2019</a></li>
<li><a href="">2018</a></li>
<li><a href="">2017</a></li>
</ul>
</div>
</section> </section>
</div> </div>

140
style.css
View File

@@ -5,16 +5,25 @@
body { body {
background-color: white; background-color: white;
margin: 0;
} }
/* audio, /* RESET */
audio,
canvas, canvas,
iframe, iframe,
img, img,
svg, svg,
video { video {
vertical-align: middle; vertical-align: middle;
} */ }
ul,
li {
list-style-type: none;
margin: 0;
padding: 0;
}
/* PARAMÈTRE DE BASE DE BOUTTON */ /* PARAMÈTRE DE BASE DE BOUTTON */
.button { .button {
@@ -59,7 +68,6 @@
position: inherit; position: inherit;
width: 100vw; width: 100vw;
left: 0; left: 0;
/* background-color: rgb(255, 255, 255, 0.75%); */
background: linear-gradient(0deg, rgba(2, 0, 36, 0) 0%, rgba(255, 255, 255, 1) 25%); background: linear-gradient(0deg, rgba(2, 0, 36, 0) 0%, rgba(255, 255, 255, 1) 25%);
} }
@@ -99,7 +107,8 @@
font-size: 1rem; font-size: 1rem;
} }
form input { form input,
select {
position: relative; position: relative;
border-color: #c104fc; border-color: #c104fc;
border-radius: 5px; border-radius: 5px;
@@ -108,20 +117,13 @@
padding: 0.5rem; padding: 0.5rem;
width: auto; width: auto;
overflow: visible; overflow: visible;
} outline: none;
form select {
position: relative;
border-color: #c104fc;
border-radius: 5px;
border-style: solid;
margin: 1rem;
padding: 0.5rem;
background-color: white; background-color: white;
} }
select { form input:focus,
background: orange; select:focus {
border: 3px solid rgba(77, 168, 112, 1);
} }
#enter input { #enter input {
@@ -130,6 +132,17 @@
font-weight: bold; font-weight: bold;
padding: 1.2rem; padding: 1.2rem;
border-radius: 16px; border-radius: 16px;
background-color: none;
color: rgb(193, 4, 252);
border: 1px solid rgb(193, 4, 252);
text-align: center;
text-decoration: none;
cursor: pointer;
}
#enter input:hover {
background-color: rgb(193, 4, 252);
color: white;
} }
form .boutton { form .boutton {
@@ -155,56 +168,51 @@
/* GRILLE HOMEPAGE */ /* GRILLE HOMEPAGE */
.grid-section {
position: relative;
display: grid;
/* margin-top:20vh; */
margin-right: 1vw;
grid-template-columns: repeat(5, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.grid-section { .grid-section {
top: 15vh; top: 15vh;
padding: 1rem; position: relative;
/* display: block; */ display: grid;
} /* grid-auto-rows: minmax(100px, auto); */
ul,
li {
list-style-type: none;
margin: 0;
padding: 0;
} }
/* MOSAIC MEMOIRE */ /* MOSAIC MEMOIRE */
.grid1 { .grid1 {
grid-column: 1 / 5; position: relative;
grid-row: 1 / 12; grid-column: 1 / 6;
width: 100%;
margin: none;
padding: 1rem;
left: 0;
/* margin-right: 20vw; */
} }
#mosaic ul { #mosaic ul {
-webkit-flex-direction: row; -webkit-flex-direction: row;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
flex-wrap: nowrap;
/* default value; can be omitted */
} }
#mosaic li { #mosaic li {
/* display: flex; */
float: left; float: left;
overflow: hidden; overflow: hidden;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
width: 33.333333333%; max-width: 23%;
position: relative; /* position: relative; */
overflow: hidden; overflow: hidden;
padding: 1rem; padding: 1rem;
margin: 0.5rem;
} }
#mosaic img { #mosaic img {
max-width: 100%; max-width: 100%;
border-radius: 16px;
} }
#mosaic a { #mosaic a {
@@ -227,31 +235,43 @@
border-radius: 16px; border-radius: 16px;
} }
/* LISTE ANNÉE */ /* LISTE ANNÉE, tag, etc */
.grid2 { .grid2 {
grid-column: 5 / 5; position: relative;
grid-row: 1 / 12; display: flex;
position: fixed; grid-column: 6/ 6;
right: 0; right: 0;
padding: 2rem;
font-size: 0.8rem;
/* overflow: auto; */
justify-items: left;
height: 100vh;
}
.list ul {
margin: 1rem;
height: auto;
width: 100%;
align-items: center;
}
.list li {
/* -webkit-flex-direction: row;
flex-direction: row;
align-self: flex-start;
float: right; */
/* display: block; */
width: fit-content;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 1rem; margin: 1rem;
} }
#list ul { .list a {
flex-direction: column; padding: 0.4rem;
padding: 0 5rem 0 5rem;
width: 10vw;
}
#list a {
/* -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; */
/* float: left; */
display: block;
width: fit-content;
padding: 0.3rem;
background-color: #c104fc; background-color: #c104fc;
color: white; color: white;
border-radius: 12px; border-radius: 12px;
@@ -260,8 +280,14 @@
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
} }
#list a:hover { .list a:hover {
color: rgba(77, 168, 112, 1); color: rgba(77, 168, 112, 1);
} }
.list hr{
color: #c104fc;
width: 50%;
}