Skip to content

Commit

Permalink
Flickering fix
Browse files Browse the repository at this point in the history 
Signed-off-by: Archit Sharma <archit8679@gmail.com>
Signed-off-by: Suruchi Kumari <suruchikumarimfp4@gmail.com>

change script position in head

Signed-off-by: Suruchi Kumari <suruchikumarimfp4@gmail.com>

add changes

Signed-off-by: Suruchi Kumari <suruchikumarimfp4@gmail.com>

added dark mode class in body

Signed-off-by: Suruchi Kumari <suruchikumarimfp4@gmail.com>

added dark mode class

Signed-off-by: Suruchi Kumari <suruchikumarimfp4@gmail.com>

added script in body

Signed-off-by: Suruchi Kumari <suruchikumarimfp4@gmail.com>

script for light mode

Signed-off-by: Suruchi Kumari <suruchikumarimfp4@gmail.com>

Flickering fix

Signed-off-by: Archit Sharma <archit8679@gmail.com>
Signed-off-by: Suruchi Kumari <suruchikumarimfp4@gmail.com>

fix-logo-flicker

Signed-off-by: Suruchi Kumari <suruchikumarimfp4@gmail.com>

Revert "fix-logo-flicker"

This reverts commit 64c38b1.

Signed-off-by: Suruchi Kumari <suruchikumarimfp4@gmail.com>

fix-logo-flicker

Signed-off-by: coder12git <suruchikumarimfp4@gmail.com>

Code formatting

Signed-off-by: Archit Sharma <archit8679@gmail.com>
  • Loading branch information
@coder12git @iArchitSharma
coder12git authored and iArchitSharma committed Oct 15, 2023
1 parent 1663bc0 commit 0410e22
Show file tree
Hide file tree
Showing 8 changed files with 390 additions and 397 deletions.
213 changes: 7 additions & 206 deletions _includes/footer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@
<ul class="footer-links">
<li>
<h2><a {% if column.new_window %}target="_blank" {% endif %}
href="{% include relative-src.html src=column.link %}" {% if column.social_icon
%}class="{{ column.social_icon || downcase }}-icon" {% endif %}>
{% if column.social_icon %}
{% include social-icon.html icon=column.social_icon %}
{% endif %}
{{ column.title }}</a></h2>
href="{% include relative-src.html src=column.link %}" {% if column.social_icon
%}class="{{ column.social_icon || downcase }}-icon" {% endif %}>
{% if column.social_icon %}
{% include social-icon.html icon=column.social_icon %}
{% endif %}
{{ column.title }}</a></h2>
</li>
{% for link in column.links %}
<li><a {% if link.new_window %}target="_blank" {% endif %}
Expand Down Expand Up @@ -42,203 +42,4 @@ <h2><a {% if column.new_window %}target="_blank" {% endif %}
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
{% if jekyll.environment == 'production' %}
<script src="{{ site.baseurl }}/js/stellarnav.min.js"></script>
{% else %}
<script src="{{ site.baseurl }}/js/stellarnav.js"></script>
{% endif %}

<script src="{{ site.baseurl }}/js/main.js"></script>

<!-- Site Navigation Menu -->
<script type="text/javascript">
jQuery(document).ready(function ($) {
jQuery('.stellarnav').stellarNav({ breakpoint: 1140 });
jQuery('.stellarnav.mobile').css('text-align', 'end');
});
</script>
<!--Script for Copy to Clipboard-->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script src="{{ site.baseurl }}/js/vanilla-tilt.min.js"></script>

<script>

function resetCopyText(element) {
let childElements = element.childNodes
if (childElements.length > 3) {
childElements[3].innerHTML = "Copy to clipboard";
} else {
childElements[1].innerHTML = "Copy URL";
childElements[1].style.color = 'white';
childElements[1].style.background = "#00b39fff";
}
}


var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function (e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
let childElements = e.trigger.childNodes;
if (childElements.length > 3) {
childElements[3].innerHTML = "Copied!";
} else {
childElements[1].innerHTML = "Copied";
childElements[1].style.color = 'white';
childElements[1].style.background = "#1a2421";
}
e.clearSelection();
});
clipboard.on('error', function (e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
</script>

<script>
function displayCode(id) {
var divId = id + "_code";
var element = document.getElementById(divId);
element.classList.toggle("showDiv");
var toggleDivs = document.getElementsByClassName("toggle");
if (element.style.maxHeight) {
element.style.maxHeight = null;
} else {
element.style.maxHeight = element.scrollHeight + "px";
console.log(element.style.maxHeight);
}
for (let i = 0; i < toggleDivs.length; i++) {
if (toggleDivs[i] != element) {
toggleDivs[i].classList.remove("showDiv");
if (toggleDivs[i].style.maxHeight) {
toggleDivs[i].style.maxHeight = null;
}
}
}
}
</script>
<script type="text/javascript">
let toggleBtn = document.getElementById("mode-toggle-btn")
// console.log(document.body.classList);
// console.log(localStorage.getItem("mode"));
toggleBtn.onclick = setMode;

if (localStorage.getItem("mode") === null) {
localStorage.setItem("mode", "dark-mode");
}

const isDark = document.body.classList.contains("dark-mode");
const currentMode = localStorage.getItem("mode");
if (isDark ^ (currentMode === "dark-mode")) {
setMode();
}

function setMode() {
document.body.classList.toggle("dark-mode")
let layer5Logos = document.querySelectorAll("#layer5-logo");
let allLogos = document.querySelectorAll("#logo-dark-light");
if (document.body.classList.contains("dark-mode")) {
layer5Logos.forEach(e => e.src = '../assets/images/company-logo/layer5-dark-mode-logo.svg')
allLogos.forEach(e => e.src = e.dataset.logoForDark)
} else {
layer5Logos.forEach(e => e.src = '../assets/images/company-logo/layer5-no-trim.svg')
allLogos.forEach(e => e.src = e.dataset.logoForLight)
}
if (document.body.classList.contains("dark-mode")) {
localStorage.setItem("mode", "dark-mode")
} else {
localStorage.setItem("mode", "light-mode")
}
}

</script>

<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
$(document).ready(function () {
$('.slider').slick({

dots: false,
arrows: false,
infinite: true,
speed: 400,
slidesToShow: 3,
slidesToScroll: 0.5,
autoplay: true, // true
autoplaySpeed: 1500,


responsive: [
{
breakpoint: 1300,
settings: {
slidesToShow: 2.5,
}
},
{
breakpoint: 1200,
settings: {
slidesToShow: 2,
}
},
{
breakpoint: 1024,
settings: {
slidesToShow: 2,
}
},
{
breakpoint: 800,
settings: {
slidesToShow: 1.5,
slidesToScroll: 0.5,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
autoplaySpeed: 2000,
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
},
{
breakpoint: 400,
settings: {
slidesToShow: 1,
adaptiveWidth: true,
slidesToScroll: 1
}
},
{
breakpoint: 380,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
adaptiveWidth: true,
}
},
{
breakpoint: 360,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
adaptiveWidth: true,
}
}
]
});
});
</script>
</body>

</html>
{% include scripts.html %}
47 changes: 47 additions & 0 deletions _includes/head.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- Google Tag Manager -->
<script>(function (w, d, s, l, i) {
w[l] = w[l] || []; w[l].push({
'gtm.start':
new Date().getTime(), event: 'gtm.js'
}); var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-KL6SSW5');</script>
<!-- End Google Tag Manager -->

{% seo %} {% feed_meta %} {% if jekyll.environment == 'production' %}
<link rel="stylesheet" href="{{ site.baseurl }}/css/stellarnav.css" />
{% else %}
<link rel="stylesheet" href="{{ site.baseurl }}/css/stellarnav.css" />
{% endif %}
<link rel="stylesheet" href="{{ site.baseurl }}/css/screen.css" />
<link rel="icon" type="image/png" href="{{ site.baseurl }}/favicon.ico" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" />
<link rel="stylesheet" href="{{ site.baseurl }}/css/subscribe.css" />

{% if page.title == 'Programs' or page.title == 'CNCF' or page.title ==
'LFX' or page.title == 'Google Summer of Code 2019' or
page.title == 'Google Summer of Code' or page.title == 'GSOD2020' or
page.title == 'MLH' %}
<link rel="stylesheet" href="{{ site.baseurl }}/css/program.css" />
{% endif %}
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:title" content="Meshery" />
<meta name="twitter:site" content="@mesheryio" />
<meta name="twitter:creator" content="@mesheryio" />
<meta name="author" content="Meshery Authors">
<meta name="twitter:image"
content="https://raw.githubusercontent.com/meshery/meshery.io/master/assets/images/logos/meshery-gradient.png" />
<meta name="image" property="og:image"
content="https://raw.githubusercontent.com/meshery/meshery.io/master/assets/images/logos/meshery-gradient.png" />
<meta property="og:type" content="website">
<meta name="og:image"
content="https://raw.githubusercontent.com/meshery/meshery.io/master/assets/images/logos/meshery-gradient.png" />

</head>
115 changes: 26 additions & 89 deletions _includes/header.html
View file
Original file line number Diff line number Diff line change
@@ -1,91 +1,28 @@
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-KL6SSW5');</script>
<!-- End Google Tag Manager -->

{% seo %} {% feed_meta %} {% if jekyll.environment == 'production' %}
<link rel="stylesheet" href="{{ site.baseurl }}/css/stellarnav.css" />
{% else %}
<link rel="stylesheet" href="{{ site.baseurl }}/css/stellarnav.css" />
{% if page.title != "Meshery | The Kubernetes and Cloud Native Manager" and page.title != "Programs" %}
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KL6SSW5" height="0" width="0"
style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<header id="mainHeader" class="filledHeader">
{% else %}
<header id="mainHeader">
{% endif %}
<link rel="stylesheet" href="{{ site.baseurl }}/css/screen.css" />
<link rel="icon" type="image/png" href="{{ site.baseurl }}/favicon.ico" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Open+Sans"
/>

<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css"
/>
<link rel="stylesheet" href="{{ site.baseurl }}/css/subscribe.css" />

{% if page.title == 'Programs' or page.title == 'CNCF' or page.title ==
'LFX' or page.title == 'Google Summer of Code 2019' or
page.title == 'Google Summer of Code' or page.title == 'GSOD2020' or
page.title == 'MLH' %}
<link rel="stylesheet" href="{{ site.baseurl }}/css/program.css" />
{% endif %}
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:title" content="Meshery" />
<meta name="twitter:site" content="@mesheryio" />
<meta name="twitter:creator" content="@mesheryio" />
<meta name="author" content="Meshery Authors">
<meta
name="twitter:image"
content="https://raw.githubusercontent.com/meshery/meshery.io/master/assets/images/logos/meshery-gradient.png"
/>
<meta name="image" property="og:image" content="https://raw.githubusercontent.com/meshery/meshery.io/master/assets/images/logos/meshery-gradient.png" />
<meta property="og:type" content="website">
<meta name="og:image" content="https://raw.githubusercontent.com/meshery/meshery.io/master/assets/images/logos/meshery-gradient.png" />

</head>

<body style="overflow-x: hidden">
{% if page.title != "Meshery | The Kubernetes and Cloud Native Manager" and page.title != "Programs" %}
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KL6SSW5"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<header id="mainHeader" class="filledHeader">
{% else %}
<header id="mainHeader">
{% endif %}
<div class="container nav-container">
<div class="project-name">
<a href="{{ site.baseurl }}/">
<img
src="{{ site.baseurl }}/assets/images/logos/meshery-logo.png"
alt="Meshery Logo"
/>&nbsp;
<img
src="{{ site.baseurl }}/assets/images/logos/meshery-logo-text-dark.png"
data-logo-for-dark="{{ site.baseurl }}/assets/images/logos/meshery-logo-text.png"
data-logo-for-light="{{ site.baseurl }}/assets/images/logos/meshery-logo-text-dark.png"
alt="Meshery Logo"
id="logo-dark-light"
/>
</a>
</div>
{% include navigation.html %}
<div class="nav-mode-icon" id="mode-toggle-btn" style="text-align: center;">
<img class="nav-text" id="logo-dark-light" src="{{ site.baseurl }}/assets/images/nav-icons/mode-toggle-icon-sun.png"
data-logo-for-dark="{{ site.baseurl }}/assets/images/nav-icons/mode-toggle-icon-moon.png"
data-logo-for-light="{{ site.baseurl }}/assets/images/nav-icons/mode-toggle-icon-sun.png"
/>
</div>
<div class="container nav-container">
<div class="project-name">
<a href="{{ site.baseurl }}/">
<img src="{{ site.baseurl }}/assets/images/logos/meshery-logo.png" alt="Meshery Logo" />&nbsp;
<img src="{{ site.baseurl }}/assets/images/logos/meshery-logo-text.png"
data-logo-for-dark="{{ site.baseurl }}/assets/images/logos/meshery-logo-text.png"
data-logo-for-light="{{ site.baseurl }}/assets/images/logos/meshery-logo-text-dark.png" alt="Meshery Logo"
id="logo-dark-light" />
</a>
</div>
{% include navigation.html %}
<div class="nav-mode-icon" id="mode-toggle-btn" style="text-align: center;">
<img class="nav-text" id="logo-dark-light"
src="{{ site.baseurl }}/assets/images/nav-icons/mode-toggle-icon-moon.png"
data-logo-for-dark="{{ site.baseurl }}/assets/images/nav-icons/mode-toggle-icon-moon.png"
data-logo-for-light="{{ site.baseurl }}/assets/images/nav-icons/mode-toggle-icon-sun.png" />
</div>
</header>
</body>
</html>
</div>
</header>

0 comments on commit 0410e22

Please sign in to comment.