Website update
* Change links color
* Change color of sidebar menu title
Make it less contrasty so it's not confused with links
* Style tweaks
* Fix white flickering when on dark mode
* Tweak style of teams page
MODIFY
website/src/_includes/layouts/sections/head.njk
website/src/_includes/layouts/sections/head.njk
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-tomorrow.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap">
<link rel="stylesheet" href="{{ '/static/styles.css' | url }}">
+ <script>
+
+ // Fix white flickering when on dark mode
+ (function () {
+ const themeInStorage = window.localStorage.getItem('data-theme');
+ const $doc = document.documentElement;
+
+ if(!themeInStorage) {
+ window.localStorage.setItem('data-theme', 'light');
+ }
+
+ $doc.setAttribute("data-theme", themeInStorage);
+ })();
+
+ </script>
</head>

MODIFY
website/src/contributing/team.md
website/src/contributing/team.md
@@ -8,39 +8,39 @@ showHero: false
<ul class="team-list">
<li>
- <img src="https://github.com/EduardoLopes.png?s=150">
+ <img src="https://github.com/EduardoLopes.png?s=176">
<p><a href="https://github.com/EduardoLopes">Eduardo Lopes</a></p>
</li>
<li>
- <img src="https://github.com/ooflorent.png?s=150">
+ <img src="https://github.com/ooflorent.png?s=176">
<p><a href="https://github.com/ooflorent">Florent Cailhol</a></p>
</li>
<li>
- <img src="https://github.com/jamiebuilds.png?s=150">
+ <img src="https://github.com/jamiebuilds.png?s=176">
<p><a href="https://github.com/jamiebuilds">Jamie Kyle</a></p>
</li>
<li>
- <img src="https://github.com/Kelbie.png?s=150">
+ <img src="https://github.com/Kelbie.png?s=176">
<p><a href="https://github.com/Kelbie">Kevin Kelbie</a></p>
</li>
<li>
- <img src="https://github.com/diokey.png?s=150">
+ <img src="https://github.com/diokey.png?s=176">
<p><a href="https://github.com/diokey">Olivier Dusabimana</a></p>
</li>
<li>
- <img src="https://github.com/bitpshr.png?s=150">
+ <img src="https://github.com/bitpshr.png?s=176">
<p><a href="https://github.com/bitpshr">Paul Bouchon</a></p>
</li>
<li>
- <img src="https://github.com/sebmck.png?s=150">
+ <img src="https://github.com/sebmck.png?s=176">
<p><a href="https://github.com/sebmck">Sebastian McKenzie</a></p>
</li>
<li>
- <img src="https://github.com/VictorHom.png?s=150">
+ <img src="https://github.com/VictorHom.png?s=176">
<p><a href="https://github.com/VictorHom">Victor Hom</a></p>
</li>
<li>
- <img src="https://github.com/yassere.png?s=150">
+ <img src="https://github.com/yassere.png?s=176">
<p><a href="https://github.com/yassere">Yasser Elassal</a></p>
</li>
</ul>

MODIFY
website/src/styles/_global.scss
website/src/styles/_global.scss
@@ -59,7 +59,18 @@ h4 {
}
a {
- color: inherit;
+ color: var(--logo-font-color);
+ font-weight: bold;
+}
+
+a:hover {
+ text-decoration: none;
+ opacity: 0.7;
+}
+
+a:active {
+ color: var(--primary-color);
+ opacity: 1;
}
.sr-only {

MODIFY
website/src/styles/_header.scss
website/src/styles/_header.scss
@include mobile-only() {
display: none;
}
+
+ a:hover{
+ opacity: 1;
+ }
}
.logo {
font-size: 44px;
margin-left: $unit;
margin-bottom: $unit * 2;
+ opacity: 1;
svg {
width: 1em;

MODIFY
website/src/styles/_sidebar.scss
website/src/styles/_sidebar.scss
font-size: 0.8em;
font-weight: bold;
font-family: inherit;
+ color: var(--sub-text-color);
}
ul {
text-decoration: none;
font-size: 1.1em;
transition-duration: 100ms;
- transition-property: color;
+ transition-property: padding-left;
height: auto;
padding: $unit / 5 $unit / 2;
- margin-left: $unit / 2;
display: inline-block;
- color: var(--logo-font-color);
padding-left: 0;
margin-left: 0;
}
}
a:active {
- padding-left: $unit / 1.5;
+ padding-left: $unit / 2;
text-decoration: dashed;
- opacity: 0.6;
+ opacity: 1;
}
}
}
+ svg:active{
+ .cls-1, .one, .two{
+ fill: var(--primary-color);
+ }
+ }
+
@include desktop-only() {
border-top: 1px solid var(--soft-border-color);
}
padding: 5px 10px;
cursor: pointer;
width: 100%;
- margin: auto $unit * 2 $unit $unit * 2;
+ margin: auto $unit * 2 $unit * 2 $unit * 2;
font-weight: bold;
}

MODIFY
website/src/styles/_table-of-contents.scss
website/src/styles/_table-of-contents.scss
@include transition-timing;
transition-property: background-color;
transition-duration: 100ms;
+ font-weight: normal;
&:hover {
color: var(--toc-link-color-hover);

MODIFY
website/src/styles/_team.scss
website/src/styles/_team.scss
.team-list {
text-align: center;
margin: 0;
+ margin-top: 32px;
padding: 0;
+ display: flex;
+ align-items: start;
+ justify-content: center;
+ flex-wrap: wrap;
li {
- display: inline-block;
list-style: none;
- width: 150px;
+ border: 1px solid var(--soft-border-color);
+ margin: 0 $unit;
+ margin-bottom: $unit;
+ padding-bottom: $unit;
+ width: 176px;
}
img {
- width: 150px;
- height: 150px;
+ width: 176px;
+ height: 176px;
+ }
+
+ p{
+ margin: 0;
+ padding-top: $unit - 10;
}
}

MODIFY
website/src/styles/_variables.scss
website/src/styles/_variables.scss
@@ -16,9 +16,11 @@ $gray-7: lighten(#27272A, 75%);
$gray-8: lighten(#27272A, 80%);
:root {
+ --primary-color: #{$color-4};
--logo-font-color: #{$gray-4};
--background-color: #fff;
--font-color: #{$gray-4};
+ --sub-text-color: #{$gray-6};
--top-border-color: #{$gray-4};
--soft-border-color: #{$gray-7};
--pattern-color: #{rgba($gray-7, 0.6)};

MODIFY
website/static/js/index.js
website/static/js/index.js
@@ -155,19 +155,15 @@ function modeSwitch(event){
}
-
const themeInStorage = window.localStorage.getItem('data-theme');
-if(!themeInStorage){
- window.localStorage.setItem('data-theme', 'light');
-} else {
- const $doc = document.documentElement;
+if(themeInStorage){
+
if (themeInStorage === "dark") {
elements.modeSwitch.innerText = "Light Mode";
}
-}
-document.documentElement.setAttribute("data-theme", themeInStorage);
+}
//remove permalinkSymbol "#" from table of contents
elements.tocLinks.forEach(function(link){

Website update (#641)

* Change links color

* Change color of sidebar menu title

Make it less contrasty so it's not confused with links

* Style tweaks

* Fix white flickering when on dark mode

* Tweak style of teams page