Ajout C4.tex + C4.pdf

C4/C4_fichiers/github.css

@@ -0,0 +1,99 @@
+/*
+
+github.com style (c) Vasily Polovnyov <vast@whiteants.net>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  color: #333;
+  background: #f8f8f8;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #998;
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-subst {
+  color: #333;
+  font-weight: bold;
+}
+
+.hljs-number,
+.hljs-literal,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag .hljs-attr {
+  color: #008080;
+}
+
+.hljs-string,
+.hljs-doctag {
+  color: #d14;
+}
+
+.hljs-title,
+.hljs-section,
+.hljs-selector-id {
+  color: #900;
+  font-weight: bold;
+}
+
+.hljs-subst {
+  font-weight: normal;
+}
+
+.hljs-type,
+.hljs-class .hljs-title {
+  color: #458;
+  font-weight: bold;
+}
+
+.hljs-tag,
+.hljs-name,
+.hljs-attribute {
+  color: #000080;
+  font-weight: normal;
+}
+
+.hljs-regexp,
+.hljs-link {
+  color: #009926;
+}
+
+.hljs-symbol,
+.hljs-bullet {
+  color: #990073;
+}
+
+.hljs-built_in,
+.hljs-builtin-name {
+  color: #0086b3;
+}
+
+.hljs-meta {
+  color: #999;
+  font-weight: bold;
+}
+
+.hljs-deletion {
+  background: #fdd;
+}
+
+.hljs-addition {
+  background: #dfd;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}

C4/C4_fichiers/menu.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>

C4/C4_fichiers/script.js

@@ -0,0 +1,30 @@
+const menu = document.querySelector("header nav img")
+const aside = document.querySelector("aside")
+const content = document.querySelector(".content")
+
+let toggle = false;
+
+menu.addEventListener('click', () => {
+    toggle = !toggle
+        console.log('clic')
+    if (toggle) {
+        aside.classList.add('show_aside')
+        aside.classList.remove('hidden_aside')
+    } else {
+        aside.classList.add('hidden_aside')
+        aside.classList.remove('show_aside')
+    }
+
+})
+
+if (content != null) {
+    content.addEventListener('click', () => {
+        if (toggle) {
+            toggle = false
+            aside.classList.add('hidden_aside')
+            aside.classList.remove('show_aside')
+        }
+
+    })
+}
+

C4/C4_fichiers/style.css

@@ -0,0 +1,338 @@
+@font-face {
+    font-family: "input";
+    src: url("fonts/InputMonoNarrow-Light.ttf");
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    font-family: Helvetica, Georgia, sans-serif;
+
+}
+
+body {
+    background-color: rgb(255, 255, 255);
+}
+
+/*************************************header+aside****************************************/
+header {
+    background-color: #424242;
+    position: fixed;
+    width: 100%;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: white;
+    z-index: 100;
+}
+
+header nav {
+    margin-left: 40px;
+    width: 10%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    list-style: none;
+    text-decoration: none;
+}
+
+@media (max-width:800px) {
+    header h2 {
+        display: none;
+    }
+
+    header h3 {
+        font-size: 1rem;
+        margin-right: 10px;
+    }
+
+    header nav {
+        width: 50%
+    }
+}
+
+header nav img {
+    cursor: pointer;
+}
+
+header h2 {
+    margin-right: 40px;
+}
+
+@media (max-width:800px) {
+    .content {
+        width: 100%;
+    }
+}
+
+aside {
+    position: fixed;
+    top: 60px;
+    left: -300px;
+    width: 300px;
+    background-color: rgba(7, 7, 7, 0.8);
+    list-style: none;
+    height: 100vh;
+    overflow-y: scroll;
+    list-style: none;
+    text-decoration: none;
+}
+
+aside>ul {
+    padding-top: 30px;
+    padding-bottom: 70px;
+    padding-left: 20px;
+}
+
+aside ul {
+    list-style: none;
+    text-decoration: none;
+}
+
+aside ul li ul {
+    margin-left: 20px;
+}
+
+aside a {
+    display: inline-block;
+    color: rgb(200, 200, 200);
+    margin: 5px;
+    text-decoration: none;
+}
+
+aside::-webkit-scrollbar {
+    background: #000;
+    width: 10px;
+    display: none;
+}
+
+aside:hover::-webkit-scrollbar {
+    display: block;
+}
+
+aside::-webkit-scrollbar-thumb {
+    background-color: #838383;
+}
+
+aside::-webkit-scrollbar-thumb:hover {
+    background-color: #bbbbbb;
+}
+
+aside ul li a:hover {
+    color: rgb(110, 110, 110);
+}
+
+.show_aside {
+    transform: translateX(300px);
+    transition-property: transform;
+    transition-duration: 1s;
+}
+
+.hidden_aside {
+    transform: translateX(0px);
+    transition-property: transform;
+    transition-duration: 1s;
+}
+
+/*********************fin header+aside***********************************/
+
+/***********************content**************************************/
+.content_title {
+    min-height: 100vh;
+    width: 100%;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.content_title h1 {
+
+    color: black;
+    text-transform: uppercase;
+    font-size: 5rem;
+    letter-spacing: 1rem;
+    text-align: center;
+}
+
+.content_title h2 {
+    margin-top: 10px;
+    color: black;
+    font-size: 2rem;
+    letter-spacing: 0.4rem;
+    text-align: center;
+}
+
+@media (max-width:800px) {
+    .content_title h2 {
+        font-size: 1.5rem;
+    }
+
+    .content_title h1 {
+        font-size: 2.5rem;
+    }
+}
+
+.content {
+    width: 60%;
+    margin: 0 auto;
+    padding-top: 100px;
+    min-height: 100vh;
+}
+
+@media (max-width:1200px) {
+    .content {
+        width: 100%;
+    }
+}
+
+@media (max-width:900px) {
+    .content {
+        width: 100%;
+    }
+
+    .content img {
+        height: auto;
+        max-width: 500px;
+    }
+}
+
+@media (max-width:600px) {
+    .content img {
+        height: auto;
+        max-width: 320px;
+    }
+}
+
+@media (max-width:420px) {
+    .content img {
+        height: auto;
+        max-width: 220px;
+    }
+}
+
+.warning {
+    color: red;
+}
+
+.content h1 {
+    font-size: 1.5rem;
+    margin-top: 15px;
+    margin-bottom: 15px;
+    text-align: center;
+}
+
+.content h2 {
+    font-size: 1.2rem;
+    margin-top: 15px;
+    margin-bottom: 15px;
+    margin-left: 25px;
+}
+
+.content h3 {
+    font-size: 1.1rem;
+    margin-bottom: 10px;
+    margin-top: 10px;
+    margin-left: 35px;
+}
+
+.content h4 {
+    font-size: 1rem;
+    margin-bottom: 10px;
+    margin-top: 10px;
+    margin-left: 43px;
+}
+
+.content p {
+    font-size: 1.0rem;
+    margin-top: 15px;
+    margin-bottom: 15px;
+    margin-left: 50px;
+    margin-right: 50px;
+    text-align: justify;
+}
+
+.content ul,
+.content ol {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    margin-left: 50px;
+    margin-right: 50px;
+}
+
+.content li {
+    font-size: 1.0rem;
+    margin-bottom: 5px;
+    margin-top: 5px;
+    margin-left: 20px;
+}
+
+.content li p {
+    margin-left: 3px;
+}
+
+.content ul li ul li {
+    margin-left: 30px;
+}
+
+.content img {
+    margin-left: 30px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    display: block;
+}
+
+.content table {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    border-collapse: collapse;
+    width: 80%;
+    margin: 0 auto;
+}
+
+.content table td {
+    border: 1px solid #000;
+    padding: 8px;
+}
+
+.content table tr:nth-child(even) {
+    background-color: #d1d1d1;
+}
+
+.content table th {
+    padding-top: 12px;
+    padding-bottom: 12px;
+    text-align: center;
+    background-color: #6b6b6b;
+    color: white;
+    border: 1px solid #000;
+}
+
+.content table caption {
+    margin-bottom: 10px;
+}
+
+.content pre {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    margin-left: 35px;
+    margin-right: 35px;
+    padding: 5px;
+    border: 1px solid rgb(173, 173, 173);
+}
+
+.content pre code {
+    font-family: "input";
+    font-size: 0.9rem;
+}
+
+.content hr {
+    width: 30%;
+    margin: 20px auto;
+}
+
+.ok:hover {
+    color: rgb(0, 255, 0);
+}