Conversation
…Lenis together, add truthy checks, add some fallback color CSS to avoid WebKit var()
…erly override Lenis blue issue
|
img attributes are used by the image preloader and ignored by the final WebKit renderer and media queries override. |
There was a problem hiding this comment.
Some changes that you made breaks the design:
| Before | After |
|---|---|
  |
  |
The smooth scroll is broken on Firefox. When I think about it, there's a css rule for that that we could apply on html directly so we don't have to do all this to get the smooth scroll.
html {
scroll-behavior: smooth;
}PS. This and removing lenis should've been done in another PR.
Also, as far as I know, CSS var hss been supported on every major browser for a while.
| document.createElement("article"); | ||
| // --></script> | ||
|
|
||
| <style type="text/css"> |
There was a problem hiding this comment.
Why did you put this here instead of the style.css? All css should be in the style.css
|
|
||
| /* | ||
| if (window.Lenis) { | ||
| var lenis = new Lenis({ autoRaf: true }), |
There was a problem hiding this comment.
If you want to remove this remove it completely, don't keep commented unused code.
| document.getElementById('scroll-down').addEventListener('click', (e) => lenis.scrollTo("#info")); | ||
| }); | ||
| </script> | ||
| <!-- |
There was a problem hiding this comment.
If we don't need it we can remove it
| <link rel="preconnect" href="https://www.gstatic.com" /> | ||
| <link rel="preconnect" href="https://unpkg.com" /> | ||
|
|
||
| <script type="text/javascript">//<!-- |
There was a problem hiding this comment.
What's the reason for doing this?
There was a problem hiding this comment.
Pre-initialize the new HTML5 tags so that CSS can be applied on them on non-WebKit browsers.
| <section id="info" class="bg-secondary"> | ||
| <div class="container-fluid info-container d-flex flex-fill"> | ||
| <section id="info" class="section bg-secondary"><a id="Info" name="Info"></a> | ||
| <div id="info-section" class="container-fluid info-container d-flex flex-fill"> |
There was a problem hiding this comment.
Why did you add sections? They don't seem to be used.
| <div class="col-lg-6 d-flex justify-content-center align-items-center separation left"> | ||
| <div class="row flex-column align-items-center box"> | ||
| <div class="col-md-6"> | ||
| <div id="goal-content" class="row flex-column align-items-center box"><a id="our-goal" name="our-goal"></a> |
There was a problem hiding this comment.
?
<a id="our-goal" name="our-goal"></a>There was a problem hiding this comment.
That's called a proper HTML anchor works in all browsers
There was a problem hiding this comment.
I understand but it's not used. We don't want to add unused code.
2 participants
XHTML5 make the code XML parser compliant. Minor JavaScript fixes to avoid broken web page, put Lenis together, add truthy checks, add some fallback color CSS to avoid WebKit var()