web/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FIX: Icons don't cause content layout shifts.

Browse Source
This commit is contained in:
MajorDroolz
2022-12-19 16:37:41 -05:00
parent b123c11550
commit 1bcaa617d0
3 changed files with 18 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
resume/index.css
View File

@@ -82,6 +82,7 @@ nav.navbar {
}
.resume-header {
position: absolute;
color: white;
filter: opacity(0.5);
font: 800 8em Poppins;
@@ -122,7 +123,8 @@ footer.navbar {
font-size: 4em !important;
user-select: none;
filter: brightness(0) invert(1);
width: 1em;
height: 1.2em;
transform: scale(1);
}
@@ -198,6 +200,12 @@ body::before {
page-break-inside: avoid;
}
.topic-icon {
width: 1em;
height: 1em;
display: inline-block;
}
/*---- Experience Title ------------------------------------------------------*/
.experience {
@@ -287,6 +295,8 @@ body::before {
.icon {
margin-right: 0.5em;
width: 1em;
height: 1em;
user-select: none;
display: inline-block;
}

15
resume/index.html
View File

@@ -9,13 +9,14 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Security-Policy" content="
default-src 'self';
default-src 'self' 'unsafe-inline';
style-src 'self' https://fonts.googleapis.com https://cdn.jsdelivr.net;
font-src 'self' https://cdn.jsdelivr.net https://fonts.gstatic.com;
connect-src 'self' ws:;
">
<script async src="index.js"></script>
<!-- Resume styling. -->
<link rel="preload stylesheet" as="style" href="index.css">
<!-- Site's Icon -->
<link rel="icon" type="image/png" href="/res/favicon.ico">
@@ -26,16 +27,14 @@
<!-- Preconnect with the web-font services. -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
<!-- The font and icons. -->
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,800&display=swap" as="style">
<link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css" as="style">
<!-- Resume styling. -->
<link rel="preload" href="index.css" as="style">
<link rel="preload stylesheet" as="style" href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,800&display=swap">
<link rel="preload stylesheet" as="style" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
</head>
<body hidden>
<body>
<i>&nbsp;</i>
<nav class="navbar">
<header class="resume-header">Resume</header>

5
resume/index.js
View File

@@ -1,5 +0,0 @@
window.onload = () => {
const links = document.querySelectorAll('link[rel="preload"]');
for (const link of links) link.rel = 'stylesheet';
document.body.removeAttribute("hidden");
}