initial commit
This commit is contained in:
Nico
commit
52c86295e9
|
|
@ -0,0 +1,99 @@
|
||||||
|
# Created by .ignore support plugin (hsz.mobi)
|
||||||
|
### local TLS
|
||||||
|
localhost*.*
|
||||||
|
|
||||||
|
### Node template
|
||||||
|
# Logs
|
||||||
|
/logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
.yarn
|
||||||
|
.pnp*
|
||||||
|
|
||||||
|
# conf
|
||||||
|
.editorconfig
|
||||||
|
.vscode
|
||||||
|
|
||||||
|
# Runtime data
|
||||||
|
pids
|
||||||
|
*.pid
|
||||||
|
*.seed
|
||||||
|
*.pid.lock
|
||||||
|
|
||||||
|
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||||
|
lib-cov
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage
|
||||||
|
|
||||||
|
# nyc test coverage
|
||||||
|
.nyc_output
|
||||||
|
|
||||||
|
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
||||||
|
.grunt
|
||||||
|
|
||||||
|
# Bower dependency directory (https://bower.io/)
|
||||||
|
bower_components
|
||||||
|
|
||||||
|
# node-waf configuration
|
||||||
|
.lock-wscript
|
||||||
|
|
||||||
|
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||||
|
build/Release
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
node_modules/
|
||||||
|
jspm_packages/
|
||||||
|
|
||||||
|
# TypeScript v1 declaration files
|
||||||
|
typings/
|
||||||
|
|
||||||
|
# Optional npm cache directory
|
||||||
|
.npm
|
||||||
|
|
||||||
|
# Optional eslint cache
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
|
# Optional REPL history
|
||||||
|
.node_repl_history
|
||||||
|
|
||||||
|
# Output of 'npm pack'
|
||||||
|
*.tgz
|
||||||
|
|
||||||
|
# Yarn Integrity file
|
||||||
|
.yarn-integrity
|
||||||
|
|
||||||
|
# dotenv environment variables file
|
||||||
|
.env
|
||||||
|
|
||||||
|
# parcel-bundler cache (https://parceljs.org/)
|
||||||
|
.cache
|
||||||
|
|
||||||
|
# next.js build output
|
||||||
|
.next
|
||||||
|
|
||||||
|
# nuxt.js build output
|
||||||
|
.nuxt
|
||||||
|
|
||||||
|
# Nuxt generate
|
||||||
|
dist
|
||||||
|
|
||||||
|
# vuepress build output
|
||||||
|
.vuepress/dist
|
||||||
|
|
||||||
|
# Serverless directories
|
||||||
|
.serverless
|
||||||
|
|
||||||
|
# IDE / Editor
|
||||||
|
.idea
|
||||||
|
|
||||||
|
# Service worker
|
||||||
|
sw.*
|
||||||
|
|
||||||
|
# macOS
|
||||||
|
.DS_Store
|
||||||
|
|
||||||
|
# Vim swap files
|
||||||
|
*.swp
|
||||||
|
|
@ -0,0 +1,101 @@
|
||||||
|
export default {
|
||||||
|
lang: "fr",
|
||||||
|
title: "3W",
|
||||||
|
titleTemplate: "Support de cours",
|
||||||
|
description: "C’est cool je crois.",
|
||||||
|
lastUpdated: true,
|
||||||
|
|
||||||
|
themeConfig: {
|
||||||
|
nav: [
|
||||||
|
{
|
||||||
|
text: "Dev",
|
||||||
|
items: [
|
||||||
|
{ text: "Sommaire", link: "/dev/" },
|
||||||
|
{ text: "B1", link: "/dev/B1/" },
|
||||||
|
{ text: "B2", link: "/dev/B2/" },
|
||||||
|
{ text: "B3", link: "/dev/B3/" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{ text: "Design", link: "/design/", activeMatch: "/design/" }
|
||||||
|
],
|
||||||
|
sidebar: {
|
||||||
|
// This sidebar gets displayed when user is
|
||||||
|
// under `dev` directory.
|
||||||
|
"/dev/": [
|
||||||
|
{
|
||||||
|
text: "Général",
|
||||||
|
items: [
|
||||||
|
{ text: "Sommaire", link: "/dev/" }, // /dev/index.md
|
||||||
|
{ text: "Documentations", link: "/dev/docs" },
|
||||||
|
{ text: "Outils", link: "/dev/outils" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "B1",
|
||||||
|
collapsible: true,
|
||||||
|
collapsed: true,
|
||||||
|
items: [
|
||||||
|
{ text: "Sommaire", link: "/dev/B1/" },
|
||||||
|
{ text: "Introduction", link: "/dev/B1/introduction" },
|
||||||
|
{ text: "HTML", link: "/dev/B1/html" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "B2",
|
||||||
|
collapsible: true,
|
||||||
|
collapsed: true,
|
||||||
|
items: [
|
||||||
|
{ text: "Sommaire", link: "/dev/B2/" },
|
||||||
|
{ text: "Introduction", link: "/dev/B2/introduction" },
|
||||||
|
{ text: "HTML", link: "/dev/B2/html" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "B3",
|
||||||
|
collapsible: true,
|
||||||
|
collapsed: true,
|
||||||
|
items: [
|
||||||
|
{ text: "Sommaire", link: "/dev/B3/" },
|
||||||
|
{ text: "Introduction", link: "/dev/B3/introduction" },
|
||||||
|
{ text: "HTML", link: "/dev/B3/html" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "Code Camp",
|
||||||
|
collapsible: true,
|
||||||
|
collapsed: true,
|
||||||
|
items: [{ text: "Théorie", link: "/dev/code-camp/" }]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"/design/": [
|
||||||
|
{
|
||||||
|
text: "Design",
|
||||||
|
items: [
|
||||||
|
{ text: "Index", link: "/design/" },
|
||||||
|
{ text: "Introduction", link: "/design/introduction" }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
outlineTitle: "Sur cette page",
|
||||||
|
lastUpdatedText: "Mis à jour le",
|
||||||
|
|
||||||
|
footer: {
|
||||||
|
message: "Ces contenus sont publiés sous licence Creative Commons",
|
||||||
|
copyright: "CC BY 4.0"
|
||||||
|
},
|
||||||
|
|
||||||
|
docFooter: {
|
||||||
|
prev: "Précédent",
|
||||||
|
next: "Suivant"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
markdown: {
|
||||||
|
theme: "one-dark-pro",
|
||||||
|
externalLinks: {
|
||||||
|
target: "_self"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
:root {
|
||||||
|
--vp-code-font-size: 0.9375rem;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
import DefaultTheme from "vitepress/theme";
|
||||||
|
import "./custom.css";
|
||||||
|
|
||||||
|
export default DefaultTheme;
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
# Design
|
||||||
|
|
||||||
|
cool
|
||||||
|
|
||||||
|
::: info
|
||||||
|
This is an info box.
|
||||||
|
:::
|
||||||
|
|
||||||
|
## Introduction
|
||||||
|
|
||||||
|
### definition
|
||||||
|
|
||||||
|
## Getting started
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
# HTML B2
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
# Frontend B2
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
# Intro B2
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
# HTML B2
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
# Frontend B3
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
# Intro B3
|
||||||
|
|
@ -0,0 +1,183 @@
|
||||||
|
# Code camp
|
||||||
|
|
||||||
|
Vous êtes sur le point de commencer une semaine intensive de développement web. Soufflez un coup, tout va bien se passer :relaxed:
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
## Concepts et architecture
|
||||||
|
|
||||||
|
- **Internet** = réseau de réseaux, infrastructure globale (TPC/IP)
|
||||||
|
- **Web** = application basée sur le réseau d’internet (HTTP/HTTPS)
|
||||||
|
- **DNS** = annuaire adresse IP/nom de domaine
|
||||||
|
- **FTP**/SFTP = transfert de fichiers
|
||||||
|
- **HTML** = contenus
|
||||||
|
- **CSS** = styles
|
||||||
|
- **Javascript** = éléments dynamiques
|
||||||
|
- **Fonts** = polices de caractères
|
||||||
|
|
||||||
|
## Configuration et préparation
|
||||||
|
|
||||||
|
- Paramétrons votre environnement de développement.
|
||||||
|
- Préparons votre dossier de travail local.
|
||||||
|
- Jetons un œil à la maquette.
|
||||||
|
|
||||||
|
::: details Afficher la structure
|
||||||
|
|
||||||
|
```
|
||||||
|
code-camp/
|
||||||
|
├── 00_sources/
|
||||||
|
│ ├── fonts/
|
||||||
|
│ │ └── arial.ttf
|
||||||
|
│ └── images/
|
||||||
|
│ └── unsplash-concert_crowd.png
|
||||||
|
├── 01_templates/
|
||||||
|
│ ├── index.fig
|
||||||
|
│ ├── index.sketch
|
||||||
|
│ └── index.xd
|
||||||
|
├── 02_export/
|
||||||
|
│ ├── images/
|
||||||
|
│ │ └── hero.jpg
|
||||||
|
│ └── icons/
|
||||||
|
│ └── icon-guitar.svg
|
||||||
|
└── 03_web/
|
||||||
|
├── assets/
|
||||||
|
│ ├── css/
|
||||||
|
│ │ └── style.css
|
||||||
|
│ ├── fonts/
|
||||||
|
│ │ └── arial.woff2
|
||||||
|
│ ├── images/
|
||||||
|
│ │ └── hero.jpg
|
||||||
|
│ ├── js/
|
||||||
|
│ │ └── main.js
|
||||||
|
│ └── svg/
|
||||||
|
│ └── icon-guitar.svg
|
||||||
|
├── favicon.ico
|
||||||
|
└── index.html
|
||||||
|
```
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
## HTML
|
||||||
|
|
||||||
|
Le HTML est un langage de programmation qui sert à structurer, hiérarchiser et afficher le contenu d'une page web. Il s'écrit avec des balises suivant cette syntaxe :
|
||||||
|
`<` `nom de la balise` `attributs` `>`
|
||||||
|
`contenu de la balise`
|
||||||
|
`<` `nom de la balise` `/>`
|
||||||
|
|
||||||
|
La structure d'un document HTML est donc une suite de balises que l'on organise afin de donner du sens à notre contenu. Il nous revient de construire notre document HTML afin qu'il soit le plus explicite et sémantiquement correcte.
|
||||||
|
|
||||||
|
### Les balises indispensables
|
||||||
|
|
||||||
|
- `<!DOCTYPE>` = déclaration du type de document
|
||||||
|
- `<html>` = racine du document, contient tous les autres éléments
|
||||||
|
- `<head>` = fournit des informations générales (métadonnées) sur le document
|
||||||
|
- `<body>` = contenu principal du document
|
||||||
|
|
||||||
|
### Les balises et attributs recommandés
|
||||||
|
|
||||||
|
- `lang` = déclaration du langage utilisé pour le contenu
|
||||||
|
- `dir` = Sens de lecture du contenu
|
||||||
|
- `charset` = définit l'encodage des caractères utilisés
|
||||||
|
- `title` = définit le titre du document (fenêtre/onglet/référencement)
|
||||||
|
|
||||||
|
::: details Afficher le code
|
||||||
|
<<< @/snippets/html/base.html#base
|
||||||
|
:::
|
||||||
|
|
||||||
|
### Les balises structurantes
|
||||||
|
|
||||||
|
- `<header>` = en-tête
|
||||||
|
- `<nav>` = élément contenant des liens, destiné à la navigation
|
||||||
|
- `<main>` = contenu principal du document
|
||||||
|
- `<article>` = une composition autonome pouvant être utilisée seule
|
||||||
|
- `<section>` = zone générique du document, plus utile au développeur qu’à l’utilisateur
|
||||||
|
- `<aside>` = contenu secondaire ou indirect à l’inverse de `<main>`
|
||||||
|
- `<h1>` - `<h6>` = niveaux des titres du document
|
||||||
|
- `<footer>` = pied de page
|
||||||
|
|
||||||
|
::: details Afficher le code
|
||||||
|
<<< @/snippets/html/base.html#structure
|
||||||
|
:::
|
||||||
|
|
||||||
|
### Les balises de contenus
|
||||||
|
|
||||||
|
On distingue deux catégories de balises: bloc (<span lang="en">block</span>) et en ligne (<span lang="en">inline</span>). Les balises en ligne ne peuvent pas contenir de balises bloc.
|
||||||
|
|
||||||
|
Ci-dessous, quelques exemples de balises (listes non exhaustives).
|
||||||
|
|
||||||
|
#### Balises bloc
|
||||||
|
|
||||||
|
- `<blockquote>` = une citation
|
||||||
|
- `<p>` = un paragraphe
|
||||||
|
- `<ol>` = liste ordonnée
|
||||||
|
- `<ul>` = liste désordonnée (liste à puce)
|
||||||
|
- `<li>` = élément d’une liste
|
||||||
|
- `<div>` = conteneur générique
|
||||||
|
|
||||||
|
#### Balises en ligne
|
||||||
|
|
||||||
|
- `<img>` = insertion d’une image
|
||||||
|
- `<a>` = un lien
|
||||||
|
- `<span>` = conteneur générique en ligne
|
||||||
|
- `<strong>` = contenu important (en gras)
|
||||||
|
- `<br>` = saut de ligne
|
||||||
|
|
||||||
|
::: details Afficher le code
|
||||||
|
<<< @/snippets/html/base.html#full
|
||||||
|
:::
|
||||||
|
|
||||||
|
## Sélecteurs CSS
|
||||||
|
|
||||||
|
### Sélecteurs de balise
|
||||||
|
|
||||||
|
Ils sont identiques aux balises HTML (sauf head).
|
||||||
|
|
||||||
|
::: details Afficher le code
|
||||||
|
<<< @/snippets/css/base.css#tag
|
||||||
|
:::
|
||||||
|
|
||||||
|
### Sélecteurs de classe
|
||||||
|
|
||||||
|
Cible une classe définie dans le HTML avec un point.
|
||||||
|
|
||||||
|
::: details Afficher le code
|
||||||
|
<<< @/snippets/css/base.css#class
|
||||||
|
:::
|
||||||
|
|
||||||
|
### Sélecteurs d’attribut
|
||||||
|
|
||||||
|
Cible un attribut spécifique avec ou sans valeur entre crochets.
|
||||||
|
|
||||||
|
::: details Afficher le code
|
||||||
|
<<< @/snippets/css/base.css#attr
|
||||||
|
:::
|
||||||
|
|
||||||
|
### Sélecteurs multiples et chaînés
|
||||||
|
|
||||||
|
Il est possible de cibler plusieurs éléments ou d’enchaîner les sélecteurs.
|
||||||
|
|
||||||
|
::: details Afficher le code
|
||||||
|
<<< @/snippets/css/base.css#chain
|
||||||
|
:::
|
||||||
|
|
||||||
|
## Propriétés CSS
|
||||||
|
|
||||||
|
::: info
|
||||||
|
Il en existe beaucoup trop pour essayer de les résumer ici.
|
||||||
|
Se référer à [la documentation.](https://developer.mozilla.org/fr/docs/Web/CSS/Reference)
|
||||||
|
:::
|
||||||
|
|
||||||
|
## La cascade du style
|
||||||
|
|
||||||
|
Le CSS est régit par un concept appelé la cascade. La cascade est un ensemble de règles de priorité et d'importance. Elles servent à déterminer la règle CSS qui sera appliquée en cas de « conflit » entre plusieurs règles.
|
||||||
|
|
||||||
|
Les deux éléments de la cascade que nous utiliseront le plus ici sont **la spécificité et l'ordre.**
|
||||||
|
|
||||||
|
- [Cette présentation](https://slidr.io/bramus/the-css-cascade-a-deep-dive-2022-06-09-css-day#1) en anglais explique en détails le fonctionnement de la cascade.
|
||||||
|
- [Cette page](https://wattenberger.com/blog/css-cascade) (en anglais également) permet de visualiser graphiquement la cascade.
|
||||||
|
|
||||||
|
## Accessibilité
|
||||||
|
|
||||||
|
## Mise en ligne
|
||||||
|
|
||||||
|
## Bonus
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
# Liens et documentation
|
||||||
|
|
||||||
|
Tous les liens sont externes.
|
||||||
|
|
||||||
|
## HTML
|
||||||
|
|
||||||
|
- [Commencer avec HTML](https://developer.mozilla.org/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started)
|
||||||
|
- [Liste de toutes les balises HTML](https://developer.mozilla.org/fr/docs/Web/HTML/Element)
|
||||||
|
- [L'élément `button`](https://www.buttoncheatsheet.com/)
|
||||||
|
- [Mauvais exemples (et corrections) HTML](https://www.htmhell.dev/)
|
||||||
|
|
||||||
|
## CSS
|
||||||
|
|
||||||
|
- [Commencer avec CSS](https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web/CSS_basics)
|
||||||
|
- [Liste et documentation de toutes les propriétés CSS](https://tympanus.net/codrops/css_reference/)
|
||||||
|
- [La cascade CSS et les spécificités de styles](https://wattenberger.com/blog/css-cascade)
|
||||||
|
- [La spécificité expliquée visuellement](https://www.matuzo.at/blog/2022/specificity/)
|
||||||
|
- [Cours de google sur le CSS](https://web.dev/learn/css/)
|
||||||
|
- [Exercice intéractif sur les sélecteurs](https://flukeout.github.io/)
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
# HTML B1
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
# Frontend B1
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
# Intro B1
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
# Dev
|
||||||
|
|
||||||
|
Bienvenue dans le monde merveilleux du développement web.
|
||||||
|
|
||||||
|
En commençant par les bases HTML/CSS, nous approfondirons nos connaissances de ces deux langages avant de poursuivre vers le JavaScript.
|
||||||
|
|
||||||
|
Nous aborderons l'apprentissage du développement web par le prisme de [l’accessibilité numérique](https://access42.net/decouvrir-accessibilite?lang=fr) et de « [l’amélioration progressive](https://briefs.video/videos/is-progressive-enhancement-dead-yet/) »
|
||||||
|
|
||||||
|
## Ressources
|
||||||
|
|
||||||
|
- [Documentations](./docs)
|
||||||
|
- [Outils](./outils)
|
||||||
|
|
||||||
|
## Niveaux
|
||||||
|
|
||||||
|
- [B1 — première année](./B1/)
|
||||||
|
- [B2 — deuxième année](./B2/)
|
||||||
|
- [B3 — troisième année](./B3/)
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
# Liste d'outils utiles
|
||||||
|
|
||||||
|
## Générique
|
||||||
|
|
||||||
|
- [Tableaux de support des navigateurs pour les technologies web](https://caniuse.com/)
|
||||||
|
|
||||||
|
## Typo
|
||||||
|
|
||||||
|
### Bibliothèques
|
||||||
|
|
||||||
|
- [Font squirrel](https://www.fontsquirrel.com/)
|
||||||
|
- [Coollabs (remplacement google fonts)](https://fonts.coollabs.io/)
|
||||||
|
|
||||||
|
### Outils webfont
|
||||||
|
|
||||||
|
- [Générateur de fichier webfont](https://transfonter.org/)
|
||||||
|
- [Analyse de fichier font](https://wakamaifondue.com/)
|
||||||
|
|
||||||
|
## Image
|
||||||
|
|
||||||
|
- [Outil d’optimisation d’image](https://squoosh.app/)
|
||||||
|
|
||||||
|
## Couleurs
|
||||||
|
|
||||||
|
- [Génération de palette](https://coolors.co/generate)
|
||||||
|
- [Génération avancée de palette](http://khroma.co/train/)
|
||||||
|
- [Générateur de dégradé](https://www.joshwcomeau.com/gradient-generator/)
|
||||||
|
- [Générateur d’ombre portée](https://www.joshwcomeau.com/shadow-palette/)
|
||||||
|
|
||||||
|
## Illustrations
|
||||||
|
|
||||||
|
- [Undraw](https://undraw.co/illustrations)
|
||||||
|
- [Blush](https://blush.design/)
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
---
|
||||||
|
layout: home
|
||||||
|
|
||||||
|
hero:
|
||||||
|
name: 3W
|
||||||
|
text: Ressources et supports de cours.
|
||||||
|
tagline: Lezgongue
|
||||||
|
actions:
|
||||||
|
- theme: brand
|
||||||
|
text: Développement
|
||||||
|
link: /dev/
|
||||||
|
- theme: alt
|
||||||
|
text: Design
|
||||||
|
link: /design/
|
||||||
|
# features:
|
||||||
|
# - icon: ⚡️
|
||||||
|
# title: Vite, The DX that can't be beat
|
||||||
|
# details: Lorem ipsum...
|
||||||
|
# - icon: 🖖
|
||||||
|
# title: Power of Vue meets Markdown
|
||||||
|
# details: Lorem ipsum...
|
||||||
|
# - icon: 🛠️
|
||||||
|
# title: Simple and minimal, always
|
||||||
|
# details: Lorem ipsum...
|
||||||
|
---
|
||||||
|
|
||||||
|
# Hello VitePress
|
||||||
|
|
||||||
|
- [le dev](./dev/)
|
||||||
|
- [et ici le design](./design/)
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
// #region tag
|
||||||
|
body {}
|
||||||
|
main {}
|
||||||
|
ul {}
|
||||||
|
p {}
|
||||||
|
span {}
|
||||||
|
// #endregion tag
|
||||||
|
|
||||||
|
// #region class
|
||||||
|
.class-personnelle {}
|
||||||
|
.container {}
|
||||||
|
// #endregion class
|
||||||
|
|
||||||
|
// #region attr
|
||||||
|
a[href] {}
|
||||||
|
a[href="/"] {}
|
||||||
|
// #endregion attr
|
||||||
|
|
||||||
|
// #region chain
|
||||||
|
ul, ol {}
|
||||||
|
ul.class-personnelle {}
|
||||||
|
ul > li {}
|
||||||
|
.class-personnelle img {}
|
||||||
|
* + * {}
|
||||||
|
// #endregion chain
|
||||||
|
|
||||||
|
// #region property
|
||||||
|
body {
|
||||||
|
margin-top: -40px;
|
||||||
|
padding: 0 20px;
|
||||||
|
overflow-x: hidden;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 2rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
color: var(--dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
color: var(--blue);
|
||||||
|
font-weight: 500;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
// #endregion property
|
||||||
|
|
@ -0,0 +1,88 @@
|
||||||
|
// #region base
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr" dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
[Contenu du site]
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
// #endregion base
|
||||||
|
|
||||||
|
// #region structure
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr" dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<nav></nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section>
|
||||||
|
<h1>Titre principal</h1>
|
||||||
|
<article>
|
||||||
|
<header>
|
||||||
|
<h2>Titre secondaire</h2>
|
||||||
|
</header>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<aside>
|
||||||
|
<h2></h2>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<footer></footer>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
// #endregion structure
|
||||||
|
|
||||||
|
// #region full
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr" dir="ltr">
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<nav>
|
||||||
|
<a href="/">accueil</a>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section>
|
||||||
|
<h1>Titre principal</h1>
|
||||||
|
<article>
|
||||||
|
<header>
|
||||||
|
<h2>Titre secondaire</h2>
|
||||||
|
</header>
|
||||||
|
<p>Lorem <strong>ipsum</strong> dolor sit amet.</p>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<aside>
|
||||||
|
<h2></h2>
|
||||||
|
<ul>
|
||||||
|
<li>item 1</li>
|
||||||
|
<li>item 2</li>
|
||||||
|
</ul>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<footer></footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
// #endregion full
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
{
|
||||||
|
"name": "vitepress-starter",
|
||||||
|
"packageManager": "yarn@3.2.1",
|
||||||
|
"scripts": {
|
||||||
|
"docs:dev": "vitepress dev docs",
|
||||||
|
"docs:build": "vitepress build docs",
|
||||||
|
"docs:serve": "vitepress serve docs"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"vitepress": "^1.0.0-alpha.4",
|
||||||
|
"vue": "^3.2.37"
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue