Skip to content

Commit

Permalink
fix(layout): Change language switcher and logo position
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeanjerome
jeanjerome committed Nov 18, 2023
1 parent 5503e2d commit e2bd540
Show file tree
Hide file tree
Showing 3 changed files with 154 additions and 73 deletions.
4 changes: 2 additions & 2 deletions _includes/head.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,8 +89,8 @@
<meta name="distribution" content="Global" >
<meta name="HandheldFriendly" content="True" >
<meta name="msapplication-tap-highlight" content="no" >
<link rel="apple-touch-icon" href="{{ site.url | append: site.baseurl | append: '/apple-touch-icon.png' }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ site.url | append: site.baseurl | append: '/apple-touch-icon-180x180.png' }}">
<link rel="apple-touch-icon" href="{{ site.url | append: site.baseurl | append: '/favicon-36.png' }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ site.url | append: site.baseurl | append: '/favicon-180-precomposed.png' }}">
<meta name="apple-mobile-web-app-title" content="Scalastic">
<link rel="manifest" href="/manifest.webmanifest">
<!-- css -->
Expand Down
31 changes: 17 additions & 14 deletions _layouts/main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@
<aside class="sidebar">
<header>
<div class="about">
{% if page.url == "/" or page.url contains "/page/" %}{% assign homeTitle = site.title | append: ' - Page ' | append: paginator.page %}<h1 class="logo">{{ homeTitle }}</h1>{% endif %}
<div class="cover-logo">
<a href="{{ site.url }}{{ site.baseurl }}{% if site.active_lang != site.default_lang %}/{{ site.active_lang }}{% endif %}/" aria-label="{{ site.data.i18n.aria-homepage }}">{% if page.url == "/" or page.url contains "/page/" %}<h1>{% endif %}
<a href="{{ site.url }}{{ site.baseurl }}{% if site.active_lang != site.default_lang %}/{{ site.active_lang }}{% endif %}/" aria-label="{{ site.data.i18n.aria-homepage }}">
<svg class="logo" viewBox="0 0 453 121" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<g id="logo">
<g id="label">
Expand All @@ -16,22 +17,24 @@
<path id="round" d="M57 10 C30.491 10 9 31.491 9 58 L9 64 C9 90.509 30.491 112 57 112 L397 112 C423.509 112 445 90.509 445 64 L445 58 C445 31.491 423.509 10 397 10 Z" fill="none" stroke-width="7" stroke-opacity="1" stroke-linejoin="round" stroke-linecap="round"/>
</g>
</svg>
{% if page.url == "/" or page.url contains "/page/" %}</h1>{% endif %}</a>
</a>
</div>
<div class="about-site">
{{site.data.i18n.about-author}}
</div>
{% if site.active_lang == "fr" %}
<input id="toggle-french" class="toggle toggle-left" name="toggle" value="fr" type="radio" checked>
<label for="toggle-french" class="btn" aria-label="{{ site.data.i18n.aria-francais-selected }}">Français</label>
<input id="toggle-english" class="toggle toggle-right" name="toggle" value="en" type="radio" onclick="window.location.assign( '{{site.baseurl}}/en{{page.url}}' );">
<label for="toggle-english" class="btn" aria-label="{{ site.data.i18n.aria-english }}">English</label>
{% else %}
<input id="toggle-french" class="toggle toggle-left" name="toggle" value="fr" type="radio" onclick="window.location.assign( '{{site.baseurl}}{{page.url}}' );">
<label for="toggle-french" class="btn" aria-label="{{ site.data.i18n.aria-francais }}">Français</label>
<input id="toggle-english" class="toggle toggle-right" name="toggle" value="en" type="radio" checked>
<label for="toggle-english" class="btn" aria-label="{{ site.data.i18n.aria-english-selected }}">English</label>
{% endif %}
<div class="language-switcher">
{% if site.active_lang == "fr" %}
<input type="radio" id="toggle-french" name="toggle" value="fr" checked/>
<label for="toggle-french" aria-label="{{ site.data.i18n.aria-francais-selected }}">Français</label>
<input type="radio" id="toggle-english" name="toggle" value="en" onclick="window.location.assign( '{{site.baseurl}}/en{{page.url}}' );" />
<label for="toggle-english" aria-label="{{ site.data.i18n.aria-english }}">English</label>
{% else %}
<input type="radio" id="toggle-french" name="toggle" value="fr" onclick="window.location.assign( '{{site.baseurl}}{{page.url}}' );"/>
<label for="toggle-french" aria-label="{{ site.data.i18n.aria-francais }}">Français</label>
<input type="radio" id="toggle-english" name="toggle" value="en" checked />
<label for="toggle-english" aria-label="{{ site.data.i18n.aria-english-selected }}">English</label>
{% endif %}
</div>
</div>
<div class="dark-mode-switcher " id="dark-mode-container">
<div class="dark-mode-switch animated light">
Expand Down Expand Up @@ -59,7 +62,7 @@ <h3 class="contact-title">{{site.data.i18n.contact-me}}</h3>
<li class="github"><a href="https://github.com/{{site.social-github}}" aria-label="{{ site.data.i18n.aria-github-author }}" target="_blank" rel="noopener noreferrer nofollow"><span><svg width="17.44" height="18" viewBox="0 0 496 512" xmlns="http://www.w3.org/2000/svg"><!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path xmlns="http://www.w3.org/2000/svg" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg></span></a></li>
{% endif %}
{% if site.social-linkedin %}
<li class="linkedin"><a href="https://in.linkedin.com/in/{{site.social-linkedin}}/" aria-label="{{ site.data.i18n.aria-linkedin }}" rel="noopener noreferrer nofollow" target="_blank"><span><svg width="15.75" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg></span></a></li>
<li class="linkedin"><a href="https://www.linkedin.com/in/jean-jerome-levy" aria-label="{{ site.data.i18n.aria-linkedin }}" rel="noopener noreferrer nofollow" target="_blank"><span><svg width="15.75" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg></span></a></li>
{% endif %}
{% if site.social-email %}
<li class="email"><a href="mailto:{{site.social-email}}" aria-label="{{ site.data.i18n.aria-mailto }}"><span><svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"/></svg></span></a></li>
Expand Down
192 changes: 135 additions & 57 deletions assets/css/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ sitemap:
@import 'normalize';
@import 'highlight';

// Variables
:root {
--body-background: #fbfbfb;
--body-color: #515151;
Expand All @@ -34,61 +35,17 @@ html[data-mode='dark'] {
--code-color: #fbfbfb;
}

.dark-mode-switcher {
display: flex;
align-content: center;
flex-wrap: wrap;
justify-content: space-around;
input[type="checkbox"] {
opacity: 0;
width: 0;
height: 0;
}
.dark-mode-switch {
border: 1px solid var(--body-color);
border-radius: 50px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px;
position: relative;
width: 55px;
background-color: var(--body-background);
.ball {
background-color: var(--body-color);
border-radius: 50%;
position: absolute;
top: 4px;
left: 4px;
height: 20px;
width: 20px;
transform: translateX(0);
}
svg {
fill: var(--body-color);
}
&.dark {
.ball {
transform: translateX(25px);
}
}
&.animated {
.ball {
transition: transform 0.2s ease-out;
}
}
}
}

// Reset
*, *::after, *::before {
box-sizing: border-box;
}

// HTML
html {
line-height: 1.5;
}

// Body
body {
color: var(--body-color);
font-family: 'Nunito Sans',sans-serif;
Expand All @@ -101,16 +58,35 @@ body {
-moz-osx-font-smoothing: grayscale;
}

// Clearfix
.clearfix::before, .clearfix::after {
content: "";
display: table;
}

.clearfix::after {
clear: both;
}

// Headings
h1, h2, h3, h4, h4, h6 {
font-family: 'metropolisbold',sans-serif;
font-weight: 400;
}

h1 img {

h1.img {
fill: var(--body-color);
stroke: var(--body-color);
}

h1.logo {
margin-top: 0px;
margin-bottom: 0px;
font-size: 0px;
}

// Images
img {
max-width: 100%;
height: auto;
Expand All @@ -134,6 +110,7 @@ img + em {
font-size: 14px;
}

// Blockquote
blockquote {
border-left: 5px solid #000;
padding-left: 1.1rem;
Expand All @@ -142,6 +119,7 @@ blockquote {
color: var(--discreet-color);
}

// Pre
pre {
padding: 1rem 2rem;
overflow: auto;
Expand All @@ -160,11 +138,12 @@ pre {
}
}

// SVG
svg {
vertical-align: -0.15em;
}

/* Markdown Table CSS */
// Table
table {
width: 100%;
border-collapse: collapse;
Expand Down Expand Up @@ -198,20 +177,127 @@ table.scrollable {
overflow-y: auto;
}

// Hide
.hide{
display:none;
}

// Wrapper
.wrapper {
max-width: 1250px;
width: 100%;
position: relative;
}

// Post
.post, .article-page {
background-color: var(--body-background);
width: 100%;
}

// Lang Switcher
.language-switcher {
display: flex;
align-content: center;
overflow: hidden;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 25px;
}

.language-switcher input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}

.language-switcher label {
border: 1px solid var(--body-color);
background-color: var(--body-background);
color: var(--body-color);
line-height: 1.1;
text-align: center;
padding: 6px 10px;
margin-right: -1px;
transition: all 0.1s ease-in-out;
}

.language-switcher label:hover {
cursor: pointer;
}

.language-switcher input:checked + label {
color: var(--body-background);
background-color: var(--body-color);
cursor: default;
}

.language-switcher label:first-of-type {
border-radius: 15px 0 0 15px;
}

.language-switcher label:last-of-type {
border-radius: 0 15px 15px 0;
}

// Dark Mode Switcher
.dark-mode-switcher {
display: flex;
align-content: center;
flex-wrap: wrap;
justify-content: space-around;

input[type="checkbox"] {
opacity: 0;
width: 0;
height: 0;
}

.dark-mode-switch {
border: 1px solid var(--body-color);
border-radius: 50px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px;
position: relative;
width: 55px;
background-color: var(--body-background);

.ball {
background-color: var(--body-color);
border-radius: 50%;
position: absolute;
top: 4px;
left: 4px;
height: 20px;
width: 20px;
transform: translateX(0);
}

svg {
fill: var(--body-color);
}

&.dark {
.ball {
transform: translateX(25px);
}
}

&.animated {
.ball {
transition: transform 0.2s ease-out;
}
}
}
}

// Selection
/*
::-moz-selection {
background: rgba(209, 193, 177, 0.8);
Expand All @@ -223,14 +309,6 @@ table.scrollable {
color: var(--body-background);
}
*/
.clearfix::before, .clearfix::after {
content: "";
display: table;
}

.clearfix::after {
clear: both;
}

/* - - - - - - - - - - Home Page Styles - - - - - - - - - - */
@import 'parts/home-page';
Expand Down

0 comments on commit e2bd540

Please sign in to comment.