aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--assets/css/blueprint.css145
-rw-r--r--assets/fonts/firasans-regular.css8
l---------blueprint/charpente.css1
-rw-r--r--blueprint/index.html66
m---------charpente0
5 files changed, 151 insertions, 69 deletions
diff --git a/assets/css/blueprint.css b/assets/css/blueprint.css
index f4452d6..5c3c67d 100644
--- a/assets/css/blueprint.css
+++ b/assets/css/blueprint.css
@@ -4,55 +4,134 @@
@import url("../fonts/firasans-regular.css");
html, body {
- background-color: white;
- font-family: "Space Mono", Monaco, monospace !important;
+ background-color: white;
+ font-family: "Space Mono", Monaco, monospace !important;
}
p {
- font-family: "Fira Sans";
+ font-family: "Fira Sans", sans-serif;
}
-header {
- background-image: url("../images/ronce/illustration-ronce_1200x765px.png");
- height: 100vh;
- width: 100vw;
- /* Create the parallax scrolling effect */
- /* background-attachment: fixed; */
- background-position: center;
- /* background-repeat: no-repeat; */
- background-repeat: no-repeat;
- background-size: cover;
- margin-bottom: 5rem;
+
+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;
}
-header > p {
- width: 40%;
- position: relative;
- left: 55%;
- bottom: -75%;
- text-align: right;
+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;
}
-header > nav {
- background: none;
- position: fixed;
- width: 100vw;
+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;
}
-nav.nav a {
- font-weight: bold;
+header {
+ height: 100vh;
+ width: 100%;
+ background-image: url("../images/ronce/illustration-ronce_1200x765px.png");
+ /* Create the parallax scrolling effect */
+ /*background-attachment: fixed;*/
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ margin-bottom: 5rem;
+ padding: 0;
}
-header > p, header > nav.nav a {
- color: white;
- /* color | offset-x | offset-y | blur-radius */
- text-shadow: black 0px 0px 4px;
+header > p {
+ width: 40%;
+ position: relative;
+ left: 55%;
+ bottom: -75%;
+ text-align: right;
+}
+
+
+header > p, nav a {
+ color: white;
+ /* color | offset-x | offset-y | blur-radius */
+ text-shadow: black 0px 0px 4px;
+ margin: 0;
}
footer {
- border-top: black solid 2px;
- margin-top: 3rem;
- padding-top: 2rem;
+ border-top: black solid 2px;
+ margin-top: 3rem;
+ padding-top: 2rem;
} \ No newline at end of file
diff --git a/assets/fonts/firasans-regular.css b/assets/fonts/firasans-regular.css
index 5602ad4..7bca780 100644
--- a/assets/fonts/firasans-regular.css
+++ b/assets/fonts/firasans-regular.css
@@ -1,24 +1,24 @@
@font-face {
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-style: italic;
}
@font-face {
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-style: normal;
}
@font-face {
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-style: italic;
}
@font-face {
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-style: normal;
} \ No newline at end of file
diff --git a/blueprint/charpente.css b/blueprint/charpente.css
new file mode 120000
index 0000000..7240979
--- /dev/null
+++ b/blueprint/charpente.css
@@ -0,0 +1 @@
+../charpente/charpente.css \ No newline at end of file
diff --git a/blueprint/index.html b/blueprint/index.html
index ed4fa4a..5fc9764 100644
--- a/blueprint/index.html
+++ b/blueprint/index.html
@@ -1,40 +1,44 @@
<!DOCTYPE html>
-<html>
+<html lang="fr">
<head>
<meta charset="utf-8" />
- <meta http-equiv="x-ua-compatible" content="ie=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta http-equiv="x-ua-compatible" content="ie=edge" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Deuxfleurs</title>
<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">
</head>
<body>
- <header>
- <nav class="nav">
- <div class="nav-left">
- <a href="#" class="home"><h1>Deuxfleurs</h1></a>
- </div>
-
- <div class="nav-right">
- <ul>
- <li>
- <a href="#">Documentation</a>
- </li>
- <li>
- <a href="#">Blog</a>
- </li>
- <li>
- <a href="#">Mon compte</a>
- </li>
- </ul>
- </div>
- </nav>
+ <nav class="nav">
+
+ <div class="nav-left">
+ <h1>
+ <a class="home" href="#">Deuxfleurs</a>
+ </h1>
+ </div>
+
+ <div class="nav-right">
+ <ul>
+ <li>
+ <a href="#">Documentation</a>
+ </li>
+ <li>
+ <a href="#">Blog</a>
+ </li>
+ <li>
+ <a href="#">Mon compte</a>
+ </li>
+ </ul>
+ </div>
+ </nav>
+ <header>
<p>
Nous sommes un hébergeur associatif expérimental.<br>
Avec nos machines et nos logiciels, <br>
@@ -109,7 +113,7 @@
<div id="trombinoscope" class="row">
<figure class="col-6 col-3-md">
- <img src="">
+ <!-- <img src=""> -->
<figcaption>
<h4>Esther</h4>
Magicienne des images
@@ -117,7 +121,7 @@
</figure>
<figure class="col-6 col-3-md">
- <img src="">
+ <!-- <img src=""> -->
<figcaption>
<h4>Quentin</h4>
Bidouilleur d'ordinateurs
@@ -125,7 +129,7 @@
</figure>
<figure class="col-6 col-3-md">
- <img src="">
+ <!-- <img src=""> -->
<figcaption>
<h4>Adrien</h4>
Généraliste
@@ -133,7 +137,7 @@
</figure>
<figure class="col-6 col-3-md">
- <img src="">
+ <!-- <img src=""> -->
<figcaption>
<h4>Maximilien</h4>
Ordinateurologue
@@ -141,7 +145,7 @@
</figure>
<figure class="col-6 col-3-md">
- <img src="">
+ <!-- <img src=""> -->
<figcaption>
<h4>Alex</h4>
Bâtisseur d'empires
@@ -149,14 +153,12 @@
</figure>
</div>
</section>
-
+ </main>
<footer>
<p>Brodé avec amour par Deuxfleurs.</p>
<p class="is-right">Il y a sans doute un copyright.</p>
</footer>
- </main>
</body>
-
</html> \ No newline at end of file
diff --git a/charpente b/charpente
-Subproject a418d3037177a70c6a83f0d543c780a2559126d
+Subproject 9fd5420ce9fb61d93a219a0e6faf37dcc0b0f69
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-14 16:40:25 +0000