Deuxfleurs/design
24
1
Fork 0
Code Issues 1 Pull requests Releases Wiki Activity

Flex menu on its way

Browse source
This commit is contained in:
ADRN 2021-10-23 23:22:39 +02:00
parent f898676f3e
commit 1ace9d2759
5 changed files with 153 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

107
assets/css/blueprint.css
View file

@ -9,20 +9,107 @@ html, body {
} }
p { p {
font-family: "Fira Sans"; font-family: "Fira Sans", sans-serif;
}
nav {
background: white;
background: rgba(255, 255, 255, .8);
z-index: 10;
/*padding: 1rem 2rem;*/
position: fixed;
width: 100%;
/*position: -webkit-sticky;
position: sticky;
top: 0;*/
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
nav a {
display: block;
padding: 1rem 2rem;
line-height: 1;
font-weight: bold;
text-decoration: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
nav h1 {
margin: 0;
}
nav .home {
font-weight: normal;
font-size: 2rem;
}
nav .nav-left, nav .nav-right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
nav .nav-left {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
nav .nav-right {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
nav ul {
margin: 0;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
} }
header { header {
background-image: url("../images/ronce/illustration-ronce_1200x765px.png");
height: 100vh; height: 100vh;
width: 100vw; width: 100%;
background-image: url("../images/ronce/illustration-ronce_1200x765px.png");
/* Create the parallax scrolling effect */ /* Create the parallax scrolling effect */
/*background-attachment: fixed;*/ /*background-attachment: fixed;*/
background-position: center; background-position: center;
/* background-repeat: no-repeat; */
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
margin-bottom: 5rem; margin-bottom: 5rem;
padding: 0;
} }
header > p { header > p {
@ -33,20 +120,12 @@ header > p {
text-align: right; text-align: right;
} }
header > nav {
background: none;
position: fixed;
width: 100vw;
}
nav.nav a { header > p, nav a {
font-weight: bold;
}
header > p, header > nav.nav a {
color: white; color: white;
/* color | offset-x | offset-y | blur-radius */ /* color | offset-x | offset-y | blur-radius */
text-shadow: black 0px 0px 4px; text-shadow: black 0px 0px 4px;
margin: 0;
} }

8
assets/fonts/firasans-regular.css
View file

@ -1,24 +1,24 @@
@font-face { @font-face {
font-family: 'Fira Sans'; font-family: 'Fira Sans';
src: url('../fonts/spacemono/FiraSans-BoldItalic.ttf') format('truetype'); src: url('../fonts/firasans/FiraSans-BoldItalic.ttf') format('truetype');
font-weight: bold; font-weight: bold;
font-style: italic; font-style: italic;
} }
@font-face { @font-face {
font-family: 'Fira Sans'; font-family: 'Fira Sans';
src: url('../fonts/spacemono/FiraSans-Bold.ttf') format('truetype'); src: url('../fonts/firasans/FiraSans-Bold.ttf') format('truetype');
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Fira Sans'; font-family: 'Fira Sans';
src: url('../fonts/spacemono/FiraSans-Italic.ttf') format('truetype'); src: url('../fonts/firasans/FiraSans-Italic.ttf') format('truetype');
font-weight: normal; font-weight: normal;
font-style: italic; font-style: italic;
} }
@font-face { @font-face {
font-family: 'Fira Sans'; font-family: 'Fira Sans';
src: url('../fonts/spacemono/FiraSans-Regular.ttf') format('truetype'); src: url('../fonts/firasans/FiraSans-Regular.ttf') format('truetype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }

1
blueprint/charpente.css Symbolic link
View file

@ -0,0 +1 @@
../charpente/charpente.css

30
blueprint/index.html
View file

@ -1,23 +1,26 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="fr">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<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" />
<title>Deuxfleurs</title> <title>Deuxfleurs</title>
<link rel="stylesheet" href="assets/css/normalize.css"> <link rel="stylesheet" href="assets/css/normalize.css">
<link rel="stylesheet" href="assets/css/chota.min.css"> <link rel="stylesheet" href="charpente.css">
<!-- <link rel="stylesheet" href="assets/css/chota.css"> -->
<link rel="stylesheet" href="assets/css/blueprint.css"> <link rel="stylesheet" href="assets/css/blueprint.css">
</head> </head>
<body> <body>
<header>
<nav class="nav"> <nav class="nav">
<div class="nav-left"> <div class="nav-left">
<a href="#" class="home"><h1>Deuxfleurs</h1></a> <h1>
<a class="home" href="#">Deuxfleurs</a>
</h1>
</div> </div>
<div class="nav-right"> <div class="nav-right">
@ -35,6 +38,7 @@
</div> </div>
</nav> </nav>
<header>
<p> <p>
Nous sommes un hébergeur associatif expérimental.<br> Nous sommes un hébergeur associatif expérimental.<br>
Avec nos machines et nos logiciels, <br> Avec nos machines et nos logiciels, <br>
@ -109,7 +113,7 @@
<div id="trombinoscope" class="row"> <div id="trombinoscope" class="row">
<figure class="col-6 col-3-md"> <figure class="col-6 col-3-md">
<img src=""> <!-- <img src=""> -->
<figcaption> <figcaption>
<h4>Esther</h4> <h4>Esther</h4>
Magicienne des images Magicienne des images
@ -117,7 +121,7 @@
</figure> </figure>
<figure class="col-6 col-3-md"> <figure class="col-6 col-3-md">
<img src=""> <!-- <img src=""> -->
<figcaption> <figcaption>
<h4>Quentin</h4> <h4>Quentin</h4>
Bidouilleur d'ordinateurs Bidouilleur d'ordinateurs
@ -125,7 +129,7 @@
</figure> </figure>
<figure class="col-6 col-3-md"> <figure class="col-6 col-3-md">
<img src=""> <!-- <img src=""> -->
<figcaption> <figcaption>
<h4>Adrien</h4> <h4>Adrien</h4>
Généraliste Généraliste
@ -133,7 +137,7 @@
</figure> </figure>
<figure class="col-6 col-3-md"> <figure class="col-6 col-3-md">
<img src=""> <!-- <img src=""> -->
<figcaption> <figcaption>
<h4>Maximilien</h4> <h4>Maximilien</h4>
Ordinateurologue Ordinateurologue
@ -141,7 +145,7 @@
</figure> </figure>
<figure class="col-6 col-3-md"> <figure class="col-6 col-3-md">
<img src=""> <!-- <img src=""> -->
<figcaption> <figcaption>
<h4>Alex</h4> <h4>Alex</h4>
Bâtisseur d'empires Bâtisseur d'empires
@ -149,14 +153,12 @@
</figure> </figure>
</div> </div>
</section> </section>
</main>
<footer> <footer>
<p>Brodé avec amour par Deuxfleurs.</p> <p>Brodé avec amour par Deuxfleurs.</p>
<p class="is-right">Il y a sans doute un copyright.</p> <p class="is-right">Il y a sans doute un copyright.</p>
</footer> </footer>
</main>
</body> </body>
</html> </html>

2
charpente

@ -1 +1 @@
Subproject commit a418d3037177a70c6a83f0d543c780a2559126d1 Subproject commit 9fd5420ce9fb61d93a219a0e6faf37dcc0b0f69a