diff --git a/cookies.js b/cookies.js
new file mode 100644
index 0000000000000000000000000000000000000000..5c734fe0fad7260364784b0a5702cc39b7eeebf7
--- /dev/null
+++ b/cookies.js
@@ -0,0 +1,19 @@
+function setCookie(cname, cvalue, exdays) {
+ let d = new Date();
+ d.setTime(d.getTime() + (exdays*24*60*60*1000));
+ let expires = "expires="+ d.toUTCString();
+ document.cookie = cname + "=" + cvalue + "; " + expires;
+}
+
+function getCookie(cname) {
+ let name = cname + "=";
+ let ca = document.cookie.split(';');
+ for (let i = 0; i < ca.length; i++) {
+ let c = ca[i];
+ while (c.charAt(0) == ' ')
+ c = c.substring(1);
+ if (c.indexOf(name) == 0)
+ return c.substring(name.length, c.length);
+ }
+ return "";
+}
diff --git a/index.html b/index.html
index 41bf2850de0ddce4f7dc087fc1a9b3ed44cad26c..41e2227c52c112fcf08c167f0fa3741f7df12f21 100644
--- a/index.html
+++ b/index.html
@@ -2,14 +2,15 @@
<html lang="en">
<head>
<meta charset=utf-8 />
- <title>Kévin "Salixor" Cocchi</title>
+ <title>Kévin Cocchi • Salixor</title>
<link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
- <link href="https://fonts.googleapis.com/css?family=Roboto:300i,400" rel="stylesheet">
+ <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" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
- <meta name="theme-color" content="#2f2b6f">
+ <meta name="theme-color" content="#FA515D">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Perso de Salixor">
@@ -21,118 +22,126 @@
<body>
-<header>
- <div class="image"></div>
- <div class="subcontainer">
- <div class="nickname"><b>Salixor</b></div>
- <div class="name">> Dépôt de corrections</div>
- <div class="avatar"></div>
- </div>
-</header>
-
-<section class="container">
- <div class="row">
- <h3>IPF3</h3>
- <a href="cours/IPFS3/Files-IPF.ml">Files</a>
- <a href="cours/IPFS3/Ensembles-IPF.ml">Ensembles</a>
- <a href="cours/IPFS3/ArbresBinaires-IPF.ml">Arbres binaires</a>
- <a href="cours/IPFS3/Associations-IPF.ml">Associations</a>
- <a href="cours/IPFS3/Graphes-IPF.ml">Graphes</a>
- <a href="cours/IPFS3/TD1-IPF.pdf">TD1</a>
- <a href="cours/IPFS3/TD2-IPF.pdf">TD2</a>
- </div>
-
- <div class="row">
- <h3>IPF3 toclean</h3>
- <a href="cours/IPFS3/TP4-IPF.ml">TP4</a>
- <a href="cours/IPFS3/TP5-IPF.ml">TP5</a>
- </div>
-
- <hr/>
-
- <div class="row">
- <h3>PAP</h3>
- <a href="cours/PAP/TP1-PAP.tgz">TP1</a>
- <a href="cours/PAP/TP2-PAP.tgz">TP2</a>
- </div>
-
- <hr/>
-
- <div class="row">
- <h3>IPI TP</h3>
- <a href="cours/IPI/TP1-IPI.c">TP1</a>
- <a href="cours/IPI/TP2-IPI.c">TP2</a>
- <a href="cours/IPI/TP3-IPI.c">TP3</a>
- <a href="cours/IPI/TP4-IPI.c">TP4</a>
- <a href="cours/IPI/TP5-IPI.c">TP5</a>
- <a href="cours/IPI/TP6-IPI.tgz">TP6</a>
- <a href="cours/IPI/TP7-IPI.c">TP7</a>
- <a href="cours/IPI/TP8-IPI.c">TP8</a>
- <a href="cours/IPI/TP9-IPI.tgz">TP9</a>
- </div>
-
- <div class="row">
- <h3>IPI TD</h3>
- <a href="cours/IPI/TD1-IPI.c">TD1</a>
- <a href="cours/IPI/TD2-IPI.c">TD2</a>
- <a href="cours/IPI/TD3-IPI.c">TD3</a>
- </div>
-
- <hr/>
-
- <div class="row">
- <h3>MAN</h3>
- <a href="cours/MAN/TP1-MAN.tgz">TP1</a>
- <a href="cours/MAN/TP2-MAN.tgz">TP2</a>
- </div>
-
- <hr/>
-
- <div class="row">
- <h3>IPF2</h3>
- <a href="cours/IPFS2/TP1-IPF.ml">TP1</a>
- <a href="cours/IPFS2/TP2-IPF.ml">TP2</a>
- <a href="cours/IPFS2/TP3-IPF.ml">TP3</a>
- <a href="cours/IPFS2/TP4-IPF.ml">TP4</a>
- <a href="cours/IPFS2/TP5-IPF.ml">TP5</a>
- <a href="cours/IPFS2/TP6-IPF.ml">TP6</a>
- </div>
-
- <hr/>
-
- <div class="row">
- <h3>IPW</h3>
- <a href="cours/IPW/TP-PHP.tgz">TP PHP</a>
- <a href="cours/IPW/TP-Curseurs.tgz">TP Curseurs</a>
- </div>
-
- <div class="row">
- <h3>IPW Résumé</h3>
- <a href="cours/IPW/Resume-HTML.pdf">HTML</a>
- <a href="cours/IPW/Resume-PHP.pdf">PHP</a>
- <a href="cours/IPW/Resume-XML.pdf">XML</a>
- </div>
-
- <div class="row">
- <h3>IPW Correction</h3>
- <a href="cours/IPW/CorrectionTPWeb2015.pdf">TP 2015</a>
- <a href="cours/IPW/CorrectionTPWeb2016.pdf">TP 2016</a>
- </div>
-
- <hr/>
-
- <div class="row">
- <h3>ILO</h3>
- <a href="cours/ILO/TD1-ILO.java">TD1</a>
- <a href="cours/ILO/TP1-ILO.tgz">TP1</a>
- <a href="cours/ILO/TP2-ILO.tgz">TP2</a>
- </div>
-</section>
+<div class="container">
+ <header>
+ <div class="header_content">
+ <img src="https://avatars1.githubusercontent.com/u/12085737?s=400" class="avatar" draggable="false" />
+ <div class="nickname"><b>Salixor</b></div>
+ <div class="description">> Dépôt de ressources pour les cours</div>
+ </div>
+
+ <div class="floating_links">
+ <button type="button" class="theme_toggle" onclick="toggleLights(this)" data-dark="Thème sombre" data-light="Thème clair">{LIGHT SWITCHER}</button>
+ <a target="_blank" href="index.html" class="ensiie_link">Site GitHub Pages</a>
+ </div>
+ </header>
+
+ <section class="container">
+ <div class="row">
+ <h3>IPF3 Structures</h3>
+ <a target="_blank" href="cours/IPFS3/Files-IPF.ml">Files</a>
+ <a target="_blank" href="cours/IPFS3/Ensembles-IPF.ml">Ensembles</a>
+ <a target="_blank" href="cours/IPFS3/ArbresBinaires-IPF.ml">Arbres binaires</a>
+ <a target="_blank" href="cours/IPFS3/Associations-IPF.ml">Associations</a>
+ <a target="_blank" href="cours/IPFS3/Graphes-IPF.ml">Graphes</a>
+ </div>
+
+ <div class="row">
+ <h3>IPF3 TD/TP</h3>
+ <a target="_blank" href="cours/IPFS3/TD1-IPF.pdf">TD1</a>
+ <a target="_blank" href="cours/IPFS3/TD2-IPF.pdf">TD2</a>
+ <a target="_blank" href="cours/IPFS3/TP4-IPF.ml">TP4</a>
+ <a target="_blank" href="cours/IPFS3/TP5-IPF.ml">TP5</a>
+ </div>
+
+ <hr/>
+
+ <div class="row">
+ <h3>PAP</h3>
+ <a target="_blank" href="cours/PAP/TP1-PAP.tgz">TP1</a>
+ <a target="_blank" href="cours/PAP/TP2-PAP.tgz">TP2</a>
+ </div>
+
+ <hr/>
+
+ <div class="row">
+ <h3>IPI TP</h3>
+ <a target="_blank" href="cours/IPI/TP1-IPI.c">TP1</a>
+ <a target="_blank" href="cours/IPI/TP2-IPI.c">TP2</a>
+ <a target="_blank" href="cours/IPI/TP3-IPI.c">TP3</a>
+ <a target="_blank" href="cours/IPI/TP4-IPI.c">TP4</a>
+ <a target="_blank" href="cours/IPI/TP5-IPI.c">TP5</a>
+ <a target="_blank" href="cours/IPI/TP6-IPI.tgz">TP6</a>
+ <a target="_blank" href="cours/IPI/TP7-IPI.c">TP7</a>
+ <a target="_blank" href="cours/IPI/TP8-IPI.c">TP8</a>
+ <a target="_blank" href="cours/IPI/TP9-IPI.tgz">TP9</a>
+ </div>
+
+ <div class="row">
+ <h3>IPI TD</h3>
+ <a target="_blank" href="cours/IPI/TD1-IPI.c">TD1</a>
+ <a target="_blank" href="cours/IPI/TD2-IPI.c">TD2</a>
+ <a target="_blank" href="cours/IPI/TD3-IPI.c">TD3</a>
+ </div>
+
+ <hr/>
+
+ <div class="row">
+ <h3>MAN</h3>
+ <a target="_blank" href="cours/MAN/TP1-MAN.tgz">TP1</a>
+ <a target="_blank" href="cours/MAN/TP2-MAN.tgz">TP2</a>
+ </div>
+
+ <hr/>
+
+ <div class="row">
+ <h3>IPF2</h3>
+ <a target="_blank" href="cours/IPFS2/TP1-IPF.ml">TP1</a>
+ <a target="_blank" href="cours/IPFS2/TP2-IPF.ml">TP2</a>
+ <a target="_blank" href="cours/IPFS2/TP3-IPF.ml">TP3</a>
+ <a target="_blank" href="cours/IPFS2/TP4-IPF.ml">TP4</a>
+ <a target="_blank" href="cours/IPFS2/TP5-IPF.ml">TP5</a>
+ <a target="_blank" href="cours/IPFS2/TP6-IPF.ml">TP6</a>
+ </div>
+
+ <hr/>
+
+ <div class="row">
+ <h3>IPW</h3>
+ <a target="_blank" href="cours/IPW/TP-PHP.tgz">TP PHP</a>
+ <a target="_blank" href="cours/IPW/TP-Curseurs.tgz">TP Curseurs</a>
+ </div>
+
+ <div class="row">
+ <h3>IPW Résumé</h3>
+ <a target="_blank" href="cours/IPW/Resume-HTML.pdf">HTML</a>
+ <a target="_blank" href="cours/IPW/Resume-PHP.pdf">PHP</a>
+ <a target="_blank" href="cours/IPW/Resume-XML.pdf">XML</a>
+ </div>
+
+ <div class="row">
+ <h3>IPW Correction</h3>
+ <a target="_blank" href="cours/IPW/CorrectionTPWeb2015.pdf">TP 2015</a>
+ <a target="_blank" href="cours/IPW/CorrectionTPWeb2016.pdf">TP 2016</a>
+ </div>
+
+ <hr/>
+
+ <div class="row">
+ <h3>ILO</h3>
+ <a target="_blank" href="cours/ILO/TD1-ILO.java">TD1</a>
+ <a target="_blank" href="cours/ILO/TP1-ILO.tgz">TP1</a>
+ <a target="_blank" href="cours/ILO/TP2-ILO.tgz">TP2</a>
+ </div>
+ </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="scripts.js"></script>
+<script type="text/javascript" src="cookies.js"></script>
+<script type="text/javascript" src="lightsoff.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
diff --git a/lightsoff.js b/lightsoff.js
new file mode 100644
index 0000000000000000000000000000000000000000..e0edaea0a1ccca4aaebcbe0d7a0bf1abca46da97
--- /dev/null
+++ b/lightsoff.js
@@ -0,0 +1,17 @@
+$(document).ready(function() {
+ let lightsoff = getCookie("lightsoff") === "on";
+ 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);
+});
+
+function toggleLights(switcher) {
+ let html_tag = document.getElementsByTagName("html")[0];
+ let is_dark = (html_tag.className === "");
+
+ html_tag.className = is_dark ? "dark" : "";
+ switcher.innerHTML = is_dark ? switcher.dataset.light : switcher.dataset.dark;
+ setCookie("lightsoff", is_dark ? "on" : "off", 365);
+}
diff --git a/ressources/bg_crop_kumiko.png b/ressources/bg_crop_kumiko.png
new file mode 100644
index 0000000000000000000000000000000000000000..c58f60ed11b0b13f9b784578843f38d245ab5766
Binary files /dev/null and b/ressources/bg_crop_kumiko.png differ
diff --git a/ressources/header_bg_crop_asuka.png b/ressources/header_bg_crop_asuka.png
deleted file mode 100644
index bd17c3f972cec0809dc6c6e045602d66daeddd8a..0000000000000000000000000000000000000000
Binary files a/ressources/header_bg_crop_asuka.png and /dev/null differ
diff --git a/ressources/header_bg_crop_chitanda.png b/ressources/header_bg_crop_chitanda.png
deleted file mode 100644
index 183657cdaaab03c3141685d6ffc29ef461127153..0000000000000000000000000000000000000000
Binary files a/ressources/header_bg_crop_chitanda.png and /dev/null differ
diff --git a/ressources/header_bg_crop_reina.png b/ressources/header_bg_crop_reina.png
deleted file mode 100644
index 04ce4de764ce0a554b95c60fccd363bc4e4a466c..0000000000000000000000000000000000000000
Binary files a/ressources/header_bg_crop_reina.png and /dev/null differ
diff --git a/ressources/header_bg_crop_yohane.png b/ressources/header_bg_crop_yohane.png
deleted file mode 100644
index 7b4688e8ae3dbe1f3c0138be7807b19066af672b..0000000000000000000000000000000000000000
Binary files a/ressources/header_bg_crop_yohane.png and /dev/null differ
diff --git a/scripts.js b/scripts.js
index 9fe88a5d0cef0389ae820b40ea485d68d6120cb6..302736772b66fd884de966f34fc77b109f6b38be 100644
--- a/scripts.js
+++ b/scripts.js
@@ -1,55 +1,34 @@
$(document).ready(function() {
var color = ["#F17105", "#D11149", "#6610F2", "#177CC5", "#92A500"]; // Couleurs
- var pics = ["asuka", "kumiko", "chitanda", "yohane"]; // Fonds
+ var col_rd = Math.floor(Math.random() * color.length);
- var col_rd = "#FFFFFF";
- var pic_rd = "";
-
- function changeStyle() {
- // On randomise la couleur
- do {
- col_rd = Math.floor(Math.random() * color.length);
- } while( $("header").css("background-color") == hexToRgbA(color[col_rd]) )
-
- // On randomise l'image
- do {
- pic_rd = Math.floor(Math.random() * pics.length);
- } while( $("div.image").css("background-image") == 'url("ressources/header_bg_crop_'+ pics[pic_rd] +'.png")' )
-
- // Changement aléatoire de l'image et de la couleur parce que pourquoi pas ?
+ $( document ).ready(function() {
+ // Changement aléatoire de la couleur
$("header").css("background-color", color[col_rd]);
- $("div.image").css("background", 'url("ressources/header_bg_crop_'+ pics[pic_rd] +'.png") 90% 90% / contain no-repeat');
- $(".container a").css("background", color[col_rd]);
- $("hr").css("border-color", color[col_rd]);
- $(".container a").hover(function(){
- $(this).css("background", hexToRgbA(color[col_rd], 0.8));
+ $("section.container a").css("background-color", color[col_rd]);
+ // $("hr").css("border-color", color[col_rd]);
+ $("section.container a").hover(function(){
+ $(this).css("background-color", hexToRgbA(color[col_rd], 0.8));
}, function(){
- $(this).css("background", hexToRgbA(color[col_rd], 1));
+ $(this).css("background-color", hexToRgbA(color[col_rd], 1));
});
// Changement de la couleur pour Google Chrome Mobile
$('meta[name=theme-color]').remove();
$('head').append('<meta name="theme-color" content="'+ color[col_rd] +'">');
- }
-
- $( document ).ready(function() {
- // On change le style au chargement de la page et avec le bouton de refresh
- changeStyle();
});
function hexToRgbA(hex, opacity = 0) {
var c;
if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
c= hex.substring(1).split('');
- if(c.length== 3){
+ if(c.length== 3)
c= [c[0], c[0], c[1], c[1], c[2], c[2]];
- }
c= '0x'+c.join('');
if(opacity > 0)
return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(', ')+','+opacity+')';
- else {
+ else
return 'rgb('+[(c>>16)&255, (c>>8)&255, c&255].join(', ')+')';
- }
}
throw new Error('Bad Hex');
}
diff --git a/styles.css b/styles.css
index ac10d872d093c9839dd19aad1e15df844ad2bd8e..aea07f5c69055211d86247011e661cfeb546237b 100644
--- a/styles.css
+++ b/styles.css
@@ -1,66 +1,97 @@
* {
- -webkit-tap-highlight-color: #fff rgba(255,255,255,0.5);
box-sizing: border-box;
- list-style: none;
margin: 0;
- outline: none;
padding: 0;
text-decoration: none;
- user-select: none;
+ outline: none;
+ list-style: none;
}
-::selection { background: #d5602f; }
.clear { clear: both; }
html, body {
- background-color: #fff;
- color: #fff;
- font-family: 'Roboto', sans-serif;
+ background-color: #ededed;
+ color: #333333;
+ font-family: 'Nunito', sans-serif;
+ display: flex;
+ flex-direction: column;
height: 100%;
- overflow-x: hidden;
}
-hr { border: 0; border-bottom: 1px solid #333; margin: 15px 50px; opacity: 0.3;}
+body > * {
+ flex-shrink: 0;
+}
+
+hr { border: 0; border-bottom: 1px dotted #DDDDDD; margin: 10px 0px; }
-a { color: #fff; transition: opacity 0.1s ease-out; }
+a { color: #fff; transition: opacity 1s ease-out; }
a:hover { background-color: rgba(51,51,51,0.8); }
+a { color: #666; text-decoration: none; }
+a:hover { color: #999; }
+a:active { color: #777; }
+
+div.container {
+ margin: 30px 0 0;
+ box-shadow: 0 0 25px 0px rgba(0,0,0,0.15);
+ background-color: #ffffff;
+ width: 100%;
+ flex-grow: 1;
+}
-.container .row { line-height: 50px; margin: 0 10px; }
+@media only screen and (min-width: 400px) {
+ div.container {
+ margin: 60px 0 0;
+ }
+}
+
+@media only screen and (min-width: 530px) {
+ div.container {
+ margin: 100px auto 0;
+ }
+}
+
+@media only screen and (min-width: 1220px) {
+ div.container {
+ margin: 150px auto 0;
+ width: 1200px;
+ border-radius: 7px 7px 0 0;
+ }
+}
-.container a, .container h3 {
+.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; }
+
+section.container a, .container h3 {
background-color: #222;
border-radius: 3px;
- /*box-shadow: 0 1px 4px rgba(0,0,0,0.4);*/
display: inline-block;
font-size: 14px;
font-weight: normal;
height: 40px;
line-height: 40px;
- margin: 0 10px 0 0;
- overflow: hidden;
- padding: 0 12px;
+ color: #FFFFFF;
position: relative;
- text-overflow: ellipsis;
vertical-align: middle;
width: auto;
}
-.container a { font-style: italic; }
+
+section.container a { padding: 0 40px 0 12px; }
+.container a:hover { color: #FFFFFF; }
.container h3 {
- color: #FFF;
cursor: default;
font-size: 20px;
- text-align: left;
overflow: hidden;
- padding: 0 15px;
- white-space: pre-wrap;
+ padding: 0 12px;
+ margin: 0 5px 0 0;
}
-.container a::after {
+section.container a::after {
background: rgba(0,0,0,0.15);
bottom: 0;
content: "➜";
- display: none;
font-size: 14px;
font-style: normal;
height: 100%;
@@ -68,117 +99,97 @@ a:hover { background-color: rgba(51,51,51,0.8); }
position: absolute;
right: 0;
text-align: center;
- vertical-align: middle;
width: 30px;
+ display: block;
}
-@media only screen and (min-width: 1100px) {
- .container .row { line-height: normal; margin: 10px; }
- .container a, .container h3 { font-size: 16px; height: 56px; line-height: 56px; padding: 0 20px; }
- .container a { padding-right: 40px; }
- .container h3 { font-size: 28px; width: auto; }
- .container a::after { display: block; }
-}
-
-header, div.image, div.subcontainer { transform-origin: bottom left; }
-header { transform: rotate(-2deg); }
-div.image, div.subcontainer { transform: rotate(2deg); }
-
header {
- background: #333;
- background-size: contain;
- display: inline-block;
- overflow: hidden;
- position: relative;
- position: sticky;
- width: 103%;
- z-index: 500;
-}
-
-div.image {
- background: url("/ressources/header_bg_crop_kumiko.png") 90% 90% / contain no-repeat;
- content: '';
- float: right;
- height: 100%;
- position: relative;
+ background: #333333 url("ressources/bg_crop_kumiko.png") 95% bottom / contain no-repeat;
width: 100%;
- z-index: 2;
+ height: 200px;
+ color: #FFFFFF;
+ box-shadow: inset 0 -10px 0 0 rgba(0,0,0,0.5);
}
-header::before {
- background-color: #000;
- bottom: 0;
- content: '';
- height: 10px;
- opacity: 0.5;
+header div.header_content {
+ margin: 60px 0 0 40px;
position: absolute;
- width: 100%;
- z-index: 1;
}
-header::after, div.image::after {
- content: '';
- display: block;
- padding-top: 40%;
+header img.avatar {
+ border-radius: 100%;
+ box-shadow: 0 0 0 10px #FFFFFF;
+ height: 100px;
+ width: 100px;
+ float: left;
}
-@media only screen and (min-width: 1100px) {
- header { height: 430px; top: -300px; }
- div.image { bottom: 25px; height: 430px; }
- header::after, div.image::after { padding-top: 0; }
+header div.nickname, header div.description { margin: 0 0 0 130px; }
+header div.nickname { font-size: 42px; margin-top: 30px; font-weight: bold; }
+header div.description { font-size: 14px; margin-top: -5px; }
+
+@media only screen and (min-width: 1220px) {
+ hr { margin: 15px 0; }
+ div.container { margin: 75px auto 0 !important; }
+ .container .row { line-height: normal; margin: 10px; }
+ section.container a, .container h3 { font-size: 16px; height: 46px; line-height: 46px; }
+ .container h3 { font-size: 28px; padding: 0 15px; }
+ header { border-radius: 7px 7px 0 0; }
}
-div.subcontainer {
- bottom: 10px;
- left: 0;
- position: absolute;
- right: 0;
- top: 0;
- z-index: 3;
+/* Turn off the lights ... */
+
+html.dark, html.dark body {
+ background-color: #222222;
+ color: #ffffff;
}
-section.container { color: #333; }
-.container, div.subcontainer { margin: 0 auto; }
-div.avatar, div.nickname, div.name { position: absolute; }
+html.dark button.theme_toggle { background-color: #FFFFFF; color: #333333; }
+html.dark button.theme_toggle:hover { background-color: #DEDEDE; color: #333333; }
-div.avatar {
- background: #fff url("https://avatars1.githubusercontent.com/u/12085737?s=400") no-repeat center; background-size: contain;
- border: 4px #fff solid;
- border-radius: 100%;
- bottom: 15px;
- box-shadow: 0 0 7px rgba(0,0,0,0.25);
- height: 50px;
- margin-left: 15px;
- transition: background 0.3s ease;
- width: 50px;
+html.dark a.ensiie_link { background-color: #c9a192; color: #333333; }
+html.dark a.ensiie_link:hover { background-color: #ac877a; color: #333333; }
+
+html.dark a { color: #ccc; text-decoration: none; }
+html.dark a:hover { color: #999; }
+html.dark a:active { color: #bbb; }
+
+html.dark div.container { background-color: #333333; }
+
+html.dark div.section { border-bottom-color: #444444; }
+html.dark div.section h2 { color: #ee6770; }
+
+html.dark hr { border-bottom-color: #444444; }
+html.dark section.container a { color: #FFFFFF; }
+
+/* Styles used for the header of the page */
+
+div.floating_links {
+ float: right;
+ margin: 10px 15px 0 0;
}
-div.nickname, div.name {
- float: left;
- font-family: 'Roboto';
- font-style: italic;
- font-weight: 300;
- margin: 0 0 0 60px;
- text-shadow: 1px 2px 3px rgba(0,0,0,0.25);
-}
-
-div.nickname, div.name { margin: 0 0 0 75px; }
-div.nickname { bottom: 32px; font-size: 28px; }
-div.name { bottom: 16px; font-size: 14px; }
-
-@media only screen and (min-width: 450px) {
- div.avatar {
- border: 6px #fff solid;
- height: 80px;
- margin-left: 35px;
- width: 80px;
- }
- div.nickname, div.name { margin: 0 0 0 125px; }
- div.nickname { bottom: 40px; font-size: 38px; }
- div.name { bottom: 25px; font-size: 16px; }
+button.theme_toggle, a.ensiie_link {
+ display: block;
+ 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;
}
-@media only screen and (min-width: 1100px) {
- .container { width: 1100px; }
- div.subcontainer { bottom: 15px; width: 1100px; }
+button.theme_toggle { background-color: #333333; display: none; margin-bottom: 5px; }
+button.theme_toggle:hover { background-color: #505050; }
+
+a.ensiie_link { background-color: #54413b; }
+a.ensiie_link:hover { background-color: #775f57; }
+
+@media only screen and (min-width: 600px) {
+ button.theme_toggle, a.ensiie_link { line-height: 10px; font-size: 10px; }
}