fsylvain/portfolio
1
0
Fork 0
mirror of https://github.com/Floriansylvain/portfolio.git synced 2026-08-19 11:43:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

⚡️ Loading imgs background in css after main css

Browse Source
This commit is contained in:
Florian Sylvain
2022-02-06 21:55:43 +01:00
parent 815f7f707b
commit 0bf08f5eff
4 changed files with 666 additions and 653 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+4 -1
View File
@@ -5,7 +5,10 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" type="text/css" href="stylesheet-main.css">
<noscript>
<link rel="stylesheet" type="text/css" href="stylesheet-imgs.css">
</noscript>
<title>Florian Sylvain</title>
</head>
script.js
+11
View File
@@ -17,6 +17,17 @@ const projectsIDs = Array.from(projectsContentList)
let lastScrollTop = window.pageYOffset;
function loadCSS() {
"use strict";
const stylesheet = document.createElement('link');
stylesheet.href = 'stylesheet-imgs.css';
stylesheet.rel = 'stylesheet';
stylesheet.type = 'text/css';
document.querySelector('head').appendChild(stylesheet);
}
loadCSS();
function toAddClass(toClass, inClass) {
"use strict";
stylesheet-imgs.css
+44
View File
@@ -0,0 +1,44 @@
.pong2D {
background: center / contain no-repeat url('assets/imgs/Pong2D.webp'),
center / cover url('assets/imgs/Pong2D_blur.webp');
}
.pong2D:hover {
background: center / cover no-repeat url('assets/imgs/Pong2D-video.webp');
}
.pong3D {
background: center / contain no-repeat url('assets/imgs/Pong3D.webp'),
center / cover url('assets/imgs/Pong3D_blur.webp');
}
.pong3D:hover {
background: center / cover no-repeat url('assets/imgs/Pong3D-video.webp');
}
.risitasBot {
background: center / contain no-repeat url('assets/imgs/RisitasBot.webp'),
center / cover url('assets/imgs/RisitasBot_blur.webp');
}
.risitasBot:hover {
background: center / cover no-repeat url('assets/imgs/RisitasBot-video.webp');
}
.riverwood {
background: center / contain no-repeat url('assets/imgs/Riverwood.webp'),
center / cover url('assets/imgs/Riverwood_blur.webp');
}
.riverwood:hover {
background: center / cover no-repeat url('assets/imgs/Riverwood-video.webp');
}
.thesesFr {
background: center / contain no-repeat url('assets/imgs/ThesesFr.webp'),
center / cover url('assets/imgs/ThesesFr_blur.webp');
}
.thesesFr:hover {
background: center / cover no-repeat url('assets/imgs/ThesesFr-video.webp');
}
stylesheet.css → stylesheet-main.css
-45
View File
@@ -497,51 +497,6 @@ a {
color: #3AC414;
}
.pong2D {
background: center / contain no-repeat url('assets/imgs/Pong2D.webp'),
center / cover url('assets/imgs/Pong2D_blur.webp');
}
.pong2D:hover {
background: center / cover no-repeat url('assets/imgs/Pong2D-video.webp');
}
.pong3D {
background: center / contain no-repeat url('assets/imgs/Pong3D.webp'),
center / cover url('assets/imgs/Pong3D_blur.webp');
}
.pong3D:hover {
background: center / cover no-repeat url('assets/imgs/Pong3D-video.webp');
}
.risitasBot {
background: center / contain no-repeat url('assets/imgs/RisitasBot.webp'),
center / cover url('assets/imgs/RisitasBot_blur.webp');
}
.risitasBot:hover {
background: center / cover no-repeat url('assets/imgs/RisitasBot-video.webp');
}
.riverwood {
background: center / contain no-repeat url('assets/imgs/Riverwood.webp'),
center / cover url('assets/imgs/Riverwood_blur.webp');
}
.riverwood:hover {
background: center / cover no-repeat url('assets/imgs/Riverwood-video.webp');
}
.thesesFr {
background: center / contain no-repeat url('assets/imgs/ThesesFr.webp'),
center / cover url('assets/imgs/ThesesFr_blur.webp');
}
.thesesFr:hover {
background: center / cover no-repeat url('assets/imgs/ThesesFr-video.webp');
}
.degree {
font-variation-settings: 'wght' 400;
}