I am working on my personal website - https://coordinatedoilylivedistro.elliott23.repl.co - and it has light and dark themes based on preferences. The thing is, is that when I have the linear gradients set to variables, it doesn't work and the whole background goes white. This is the HTML, CSS, and JS. Look at the website in browser if you want to see what's happening.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Elliott D'Orazio</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<meta content="Elliott-D'Orazio" property="og:title" />
<meta content="my amazing portfolio website" property="og:description" />
<script src="script.js" defer></script>
</head>
<body>
<div class="split right">
<h1>Elliott D'Orazio</h1>
<h3>Front-End Developer</h3>
<div class="icons">
<i class="fa-solid fa-bars fa-2x" style="color: #000000;"></i>
<i class="fa-solid fa-address-card fa-2x" style="color: #000000;;"></i>
<i class="fa-solid fa-phone fa-2x" style="color: #000000;"></i>
</div>
</div>
<div class="mobile">
This page isn't viewable on mobile, move to a desktop to view it!
</div>
</body>
</html>
:root{
--accent-color-: #4022d3;
}
body:not(.dark) {
--background: white;
--text: black;
}
body.dark {
--background: #222;
--text: white;
}
html {
height: 100%;
width: 100%;
background-image: linear-gradient(to right, transparent 20%, var(--background) 60% ), url('bd86goc4fhvenj72.jpg');
font-family: 'Rubik', monospace;
background-size: cover;
}
/* *{
outline: 1px red solid;
} */
.split {
height: 100%;
width: 40%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
text-align: center;
background-color: var(--background);
color: var(--text);
}
.right {
right: 0;
background-color: var(--background);
}
h1{
font-size: 7.4em;
font-weight: 800;
}
.icons{
display: flex;
flex-direction: row;
gap: 20px;
margin-left: 40%;
width: 136px;
}
.fa-solid{
color: var(--text) !important;
}
.fa-solid:hover{
content: '';
color: var(--accent-color-) !important;
cursor: pointer;
}
.mobile{
display: none;
}
@media screen and (max-width: 678px) {
body{
display: none;
}
.mobile{
display: block !important;
color: #fff;
}
}
let dark_prefered = window.matchMedia("(prefers-color-scheme: dark)")
if(dark_prefered.matches) document.body.classList.add("dark")
dark_prefered.addEventListener("change", () => {
if(dark_prefered.matches) document.body.classList.add("dark")
else document.body.classList.remove("dark")
})
I have tried making multiple gradients but that didn't work. I asked one of my more experienced friends, he wasn't able to figure it out. So I cam here instead of going to an AI like ChatGPT. Help is much appreciated. Thanks!
