I'm working on my personal website - https://cooperativedoilylivedistro.elliott23.repl.co - it has light and dark themes depending on preference. The problem is that when I set the linear gradient to a variable it doesn't work and the whole background turns white. That's HTML, CSS, and JS. If you want to know what's going on, check out the website in your browser.
<!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've tried making multiple gradients without success. I asked a more experienced friend and he couldn't figure it out either. So I came here instead of going to an AI like ChatGPT. Thank you for your help. Thanks!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
This code can help you solve the linear gradient problem
:root{ --accent-color-: #4022d3; color-scheme: dark light; --background-white: white; --background-dark: #222; } body:not(.dark) { --text: black; /* background-color: var(--background-white); */ } body.dark { background: var( --background-dark); --text: white; } html { height: 100%; width: 100%; background-image: linear-gradient(to right, transparent 20%, var(--background-white) 60% ), url('http://www.skrenta.com/images/stackoverflow.jpg'); font-family: 'Rubik', monospace; background-size: cover; } /* *{ outline: 1px red solid; } */ .split { height: 100%; width: 80%; 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; } }