Comparer les révisions

salixor · salixor · salixor · salixor · salixor · salixor
--- a/cookies.js
+++ b/cookies.js
 function setCookie(cname, cvalue, exdays) {
  let d = new Date();
-  d.setTime(d.getTime() + (exdays*24*60*60*1000));
+  d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
-  let expires = "expires="+ d.toUTCString();
+  document.cookie = `${cname}=${cvalue};expires=${d.toUTCString()};samesite=strict`;
-  document.cookie = cname + "=" + cvalue + "; " + expires;
 }
 function getCookie(cname) {
  let name = cname + "=";
-  let ca = document.cookie.split(';');
+  let ca = document.cookie.split(";");
  for (let i = 0; i < ca.length; i++) {
-      let c = ca[i];
+    let c = ca[i];
-      while (c.charAt(0) == ' ')
+    while (c.charAt(0) == " ") c = c.substring(1);
-          c = c.substring(1);
+    if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
-      if (c.indexOf(name) == 0)
-          return c.substring(name.length, c.length);
  }
  return "";
 }
--- a/cours-ensiie.html
+++ b/cours-ensiie.html
@@ -26,13 +26,16 @@
    <header>
        <a href="index.html" class="header_content" title="Revenir à l'accueil">
            <img src="https://avatars1.githubusercontent.com/u/12085737?s=400" class="avatar" draggable="false" />
-            <div class="nickname"><b>Salixor</b></div>
+            <div>
-            <div class="description">Au fond, je suis un peu un weeb.</div>
+                <div class="nickname"><b>Salixor</b></div>
+                <div class="description">Au fond, je suis un peu un weeb.</div>
+            </div>
        </a>
-        <div class="floating_links">
+        <button type="button" class="theme_toggle" onclick="toggleLights(this)" title="Changer de thème">
-            <button type="button" class="theme_toggle" onclick="toggleLights(this)" data-dark="Thème sombre" data-light="Thème clair">{LIGHT SWITCHER}</button>
+            <svg id="theme-toggle-light" width="40" height="40" viewBox="0 0 40 40" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><text x="7" y="32">☀</text></svg>
-        </div>
+            <svg id="theme-toggle-dark" width="40" height="40" viewBox="0 0 40 40" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><text x="7" y="32">⚬</text></svg>
+        </button>
    </header>
    <section class="header_links">
@@ -130,30 +133,8 @@
 </body>
-<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 <script type="text/javascript" src="cookies.js"></script>
 <script type="text/javascript" src="lightsoff.js"></script>
-<script type="text/javascript">
+<script type="text/javascript" src="script.js"></script>
-$(document).ready(function() {
-    let color = ["#F17105", "#D11149", "#6610F2", "#177CC5", "#92A500"];
-    let col_rd = color[Math.floor(Math.random() * color.length)];
-    // Changement aléatoire de la couleur
-    $("header").css("background-color", col_rd);
-    $("section.cours a").css("background-color", col_rd);
-    $("section.header_links a").hover(
-        function() { $(this).css("background-color", col_rd); },
-        function() { $(this).removeAttr("style"); }
-    );
-    // Changement de la couleur pour Google Chrome Mobile
-    $('meta[name=theme-color]').remove();
-    $('head').append('<meta name="theme-color" content="'+ col_rd +'">');
-});
-</script>
-<!--[if IE]>
-    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
-<![endif]-->
 </html>
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
    <link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-    <link rel="icon" href="https://avatars1.githubusercontent.com/u/12085737?s=400" type="image/x-icon" />
+    <link rel="icon" href="https://git.iiens.net/uploads/-/system/user/avatar/257/avatar.png?width=512" type="image/x-icon" />
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="theme-color" content="#FA515D">
@@ -17,7 +17,7 @@
    <meta property="og:url" content="http://www.cocchi.iiens.net/">
    <meta property="og:title" content='Kévin "Salixor" Cocchi'>
    <meta property="og:description" content="Dépôts de corrections de TP et TD">
-    <meta property="og:image" content="https://avatars1.githubusercontent.com/u/12085737?s=400">
+    <meta property="og:image" content="https://git.iiens.net/uploads/-/system/user/avatar/257/avatar.png?width=512">
 </head>
 <body>
@@ -25,14 +25,17 @@
 <div class="container">
    <header>
        <a href="index.html" class="header_content" title="Revenir à l'accueil">
-            <img src="https://avatars1.githubusercontent.com/u/12085737?s=400" class="avatar" draggable="false" />
+            <img src="https://git.iiens.net/uploads/-/system/user/avatar/257/avatar.png?width=512" class="avatar" draggable="false" />
-            <div class="nickname"><b>Salixor</b></div>
+            <div>
-            <div class="description">Au fond, je suis un peu un weeb.</div>
+                <div class="nickname"><b>Salixor</b></div>
+                <div class="description">Au fond, je suis un peu un weeb.</div>
+            </div>
        </a>
-        <div class="floating_links">
+        <button type="button" class="theme_toggle" onclick="toggleLights(this)" title="Changer de thème">
-            <button type="button" class="theme_toggle" onclick="toggleLights(this)" data-dark="Thème sombre" data-light="Thème clair">{LIGHT SWITCHER}</button>
+            <svg id="theme-toggle-light" width="40" height="40" viewBox="0 0 40 40" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><text x="7" y="32">☀</text></svg>
-        </div>
+            <svg id="theme-toggle-dark" width="40" height="40" viewBox="0 0 40 40" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><text x="7" y="32">⚬</text></svg>
+        </button>
    </header>
    <section class="header_links">
@@ -45,40 +48,31 @@
        <a href="https://gitlab.com/salixor" target="_blank">GitLab</a>
        <a href="./hardware.txt" target="_blank">Hardware</a>
        <a href="./RIB.txt" target="_blank">RIB</a>
-        <a href="cours-ensiie.html">TDs/TPs</a>
    </section>
-    <section>
+    <section class="content">
-        C'est vide pour l'instant. Peut-être que je mettrai quelque chose ici prochainement !
+        <p>Bienvenue sur mon site perso, qui a assez peu bougé au fil des années.</p>
+        <p>Il me sert un peu d'annuaire, et de mini archive par rapport à l'école (vous pouvez retrouver les TPs et TDs que j'avais conservés en <a href="cours-ensiie.html">cliquant ici</a>).</p>
+        <p>Pour l'instant, il n'y a pas grand chose, et je pense que ça bougera très peu à l'avenir.</p>
+    </section>
+    <section class="content">
+        <p>Pour ceux qui ne me connaitraient pas, je suis un ancien de la promo 2019 (ça remonte !).</p>
+        <p>Je suis un membre encore assez présent du Bakaclub, et j'essaie de participer à quelques activités IRL de temps en temps.</p>
+        <p>Sans surprise, je suis donc assez passionné par les animes, la musique japonaise, et j'apprends petit à petit la langue.</p>
+    </section>
+    <section class="content">
+        <p>Je me suis récemment lancé dans la photographie, et j'ai ouvert un site dédié : <a href="https://nemophila.me">nemophila.me</a></p>
+        <p>Il m'arrive aussi de parler sur Twitter : <a href="">Twitter</a></p>
+        <p>Et sinon, l'ensemble des liens ci-dessus est une bonne référence.</p>
    </section>
 </div>
 </body>
-<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 <script type="text/javascript" src="cookies.js"></script>
 <script type="text/javascript" src="lightsoff.js"></script>
-<script type="text/javascript">
+<script type="text/javascript" src="script.js"></script>
-$(document).ready(function() {
-    let color = ["#F17105", "#D11149", "#6610F2", "#177CC5", "#92A500"];
-    let col_rd = color[Math.floor(Math.random() * color.length)];
-    // Changement aléatoire de la couleur
-    $("header").css("background-color", col_rd);
-    $("section.cours a").css("background-color", col_rd);
-    $("section.header_links a").hover(
-        function() { $(this).css("background-color", col_rd); },
-        function() { $(this).removeAttr("style"); }
-    );
-    // Changement de la couleur pour Google Chrome Mobile
-    $('meta[name=theme-color]').remove();
-    $('head').append('<meta name="theme-color" content="'+ col_rd +'">');
-});
-</script>
-<!--[if IE]>
-    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
-<![endif]-->
 </html>
--- a/lightsoff.js
+++ b/lightsoff.js
-$(document).ready(function() {
+const setElementDisplay = (element, display) => {
-  let lightsoff = getCookie("lightsoff") === "on";
+  element.style.display = display;
-  let switcher = document.getElementsByClassName("theme_toggle")[0];
+};
-  switcher.style.display = "inline-block";
-  switcher.innerHTML = lightsoff ? switcher.dataset.light : switcher.dataset.dark;
-  if (lightsoff) toggleLights(switcher);
+const toggleElementDisplay = (element) => {
+  setElementDisplay(
+    element,
+    element.style.display === "inline-block" ? "none" : "inline-block"
+  );
+};
+let lightDisplay, darkDisplay;
+document.addEventListener("DOMContentLoaded", function () {
+  const lightsoff = getCookie("lightsoff") === "on";
+  setElementDisplay(document.querySelector(".theme_toggle"), "inline-block");
+  lightDisplay = document.querySelector("#theme-toggle-light");
+  darkDisplay = document.querySelector("#theme-toggle-dark");
+  setElementDisplay(lightDisplay, lightsoff ? "inline-block" : "none");
+  setElementDisplay(darkDisplay, !lightsoff ? "inline-block" : "none");
+  if (lightsoff) updateTheme();
 });
-function toggleLights(switcher) {
+const updateTheme = () => {
-  let html_tag = document.getElementsByTagName("html")[0];
+  const htmlTag = document.querySelector("html");
-  let is_dark = (html_tag.className === "");
+  htmlTag.classList.toggle("dark");
+  const isLightsOff = htmlTag.classList.contains("dark") ? "on" : "off";
+  setCookie("lightsoff", isLightsOff, 365);
+};
-  html_tag.className = is_dark ? "dark" : "";
+const toggleLights = () => {
-  switcher.innerHTML = is_dark ? switcher.dataset.light : switcher.dataset.dark;
+  toggleElementDisplay(lightDisplay);
-  setCookie("lightsoff", is_dark ? "on" : "off", 365);
+  toggleElementDisplay(darkDisplay);
-}
+  updateTheme();
+};
--- a/script.js
+++ b/script.js
+const colors = [
+  "#E4ACB2",
+  "#C49C8B",
+  "#99BAB9",
+  "#8C9579",
+  "#EC5353",
+  "#B795E4",
+];
+const randomColor = colors[Math.floor(Math.random() * colors.length)];
+document.addEventListener("DOMContentLoaded", function () {
+  document.documentElement.style.setProperty("--accent-color", randomColor);
+});
+document
+  .querySelector('meta[name="theme-color"]')
+  .setAttribute("content", randomColor);
--- a/styles.css
+++ b/styles.css
@@ -7,6 +7,10 @@
    list-style: none;
 }
+:root {
+    --accent-color: #444;
+}
 .clear { clear: both; }
 html, body {
@@ -24,33 +28,33 @@ body > * {
 hr { border: 0; border-bottom: 1px dotted #DDDDDD; margin: 10px 0px; }
-a { color: #fff; transition: opacity 1s ease-out; text-decoration: none; }
-a:hover { background-color: rgba(51,51,51,0.8); color: #999; }
-a:active { color: #777; }
 div.container {
    margin: 0;
    box-shadow: 0 0 25px 0px rgba(0,0,0,0.15);
    background-color: #ffffff;
    width: 100%;
-    flex-grow: 1;
+    position: relative;
 }
 @media only screen and (min-width: 400px) {
-    div.container {
+    html, body {
-        margin: 60px 0 0;
+        flex-direction: column;
    }
-}
-@media only screen and (min-width: 530px) {
    div.container {
-        margin: 100px auto 0;
+        margin: 40px 0 0;
+        flex-grow: 1;
    }
 }
-@media only screen and (min-width: 1220px) {
+@media only screen and (min-width: 1200px) {
+    html, body {
+        flex-direction: row;
+        align-items: flex-end;
+        justify-content: center;
+    }
    div.container {
        margin: 150px auto 0;
+        min-height: 1000px;
        width: 1200px;
        border-radius: 7px 7px 0 0;
    }
@@ -59,7 +63,7 @@ div.container {
 .container .row { margin: 5px 10px; padding: 0 10px; }
 .container .row:first-of-type { margin-top: 15px; }
 .container .row:last-of-type { margin-bottom: 15px; }
-div.container { margin: 0 !important; flex-grow: 1; }
+div.container { margin: 0 !important; }
 section.container a, .container h3 {
    background-color: #222;
@@ -102,17 +106,16 @@ section.container a::after {
 }
 header {
-    background: #333333 url("ressources/bg_crop_kumiko.png") 95% bottom / contain no-repeat;
+    background: var(--accent-color) url("ressources/bg_crop_kumiko.png") 90% bottom / contain no-repeat;
    width: 100%;
-    height: 200px;
+    padding: 40px;
+    height: 190px;
    color: #FFFFFF;
    box-shadow: inset 0 -10px 0 0 rgba(0,0,0,0.5);
 }
 header a.header_content {
-    margin: 60px 0 0 40px;
+    display: inline-flex;
-    position: absolute;
-    display: block;
    text-decoration: none;
    color: #fff !important;
 }
@@ -124,13 +127,14 @@ header a.header_content:hover {
 header img.avatar {
    border-radius: 100%;
-    box-shadow: 0 0 0 10px #FFFFFF;
+    border: 10px double #fff;
-    height: 100px;
+    height: 110px;
-    width: 100px;
+    width: 110px;
-    float: left;
+    margin-right: 20px;
 }
-header div.nickname, header div.description { margin: 0 0 0 130px; }
+header a.header_content:hover img.avatar { border-style: solid; }
 header div.nickname { font-size: 42px; margin-top: 30px; font-weight: bold; }
 header div.description { font-size: 14px; margin-top: -5px; }
@@ -155,11 +159,24 @@ section.header_links a {
    font-size: 12px;
    text-transform: uppercase;
 }
-section.header_links a:hover { background: rgba(0,0,0,0.5); }
+section.header_links a:hover { background: var(--accent-color); }
 section.cours { padding: 15px; overflow: hidden; }
+section.content {
+    margin: 20px;
+    padding: 15px 20px;
+    line-height: 25px;
+    border-radius: 15px;
+    border: 2px dashed var(--accent-color);
+    color: #222;
+    background-color: #eee;
+}
+section.content a { color: var(--accent-color); }
+section.content a:hover { color: var(--accent-color); opacity: 0.5; }
 section.cours a {
-    background-color: #222;
+    background-color: var(--accent-color);
    border-radius: 3px;
    display: inline-block;
    font-size: 14px;
@@ -179,32 +196,28 @@ section.cours a::after {
 /* Styles used for the header of the page */
-div.floating_links {
-    float: right;
-    margin: 10px 15px 0 0;
-}
 button.theme_toggle {
-    display: block;
+    background: none;
+    position: absolute;
+    top: 0;
+    padding: 15px 0 3px 0;
+    right: 15px;
    cursor: pointer;
    outline: none;
    border: none;
-    border-radius: 5px;
-    padding: 5px 8px;
-    line-height: 8px;
-    color: #ffffff;
-    font-size: 8px;
-    text-transform: uppercase;
-    width: 100%;
    text-align: center;
+    line-height: 24px;
+    font-size: 30px;
+    display: none;
+    border-radius: 0 0 30px 30px;
+    border: 2px dashed transparent;
+    border-top: none;
 }
-button.theme_toggle { background-color: #333333; display: none; margin-bottom: 5px; }
+button.theme_toggle { color: #000; background-color: #e6e6e6; }
-button.theme_toggle:hover { background-color: #505050; }
+button.theme_toggle:hover { color: #252850; border-color: #252850; }
+html.dark button.theme_toggle { color: #fff; background-color: #222; }
-@media only screen and (min-width: 600px) {
+html.dark button.theme_toggle:hover { color: orange; border-color: orange; }
-  button.theme_toggle { line-height: 10px; font-size: 10px; }
-}
 /* Files list */
@@ -275,9 +288,6 @@ html.dark, html.dark body {
    color: #ffffff;
 }
-html.dark button.theme_toggle { background-color: #FFFFFF; color: #333333; }
-html.dark button.theme_toggle:hover { background-color: #DEDEDE; color: #333333; }
 html.dark a { color: #ccc; }
 html.dark a:hover { color: #999; }
 html.dark a:active { color: #bbb; }
@@ -303,3 +313,4 @@ html.dark ul.files-list li.color5::after { background: #3f7bf4; }
 html.dark ul.files-list li.color6::after { background: #e2e587; }
 html.dark section.header_links a { color: #FFFFFF !important; }
+html.dark section.content { background: #444444; color: #FFFFFF !important; }
No results found