Initialize repository
This commit is contained in:
Thomas
GitHub
commit
e3a4fe1c5b
124
index.html
Normal file
124
index.html
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Hi! I'm Thomas</title>
|
||||
|
||||
<link rel="stylesheet" href="main.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="wrapper-full">
|
||||
<nav>
|
||||
<ul class="list-inline">
|
||||
<li><a href="#projects" aria-current="page">Projects</a></li>
|
||||
<li><a href="#about">About me</a></li>
|
||||
<li><a href="#experience">Experiece</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<div class="wrapper-full hero-section">
|
||||
<h1>Hi! I'm Thomas</h1>
|
||||
<p>Welcome to my website</p>
|
||||
</div>
|
||||
|
||||
<div class="wrapper-full projects-section">
|
||||
<h2 id="projects">My projects</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<article>
|
||||
<img src="https://placehold.co/200x150" alt="Placeholder image">
|
||||
<div>
|
||||
<h3>Title</h3>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo voluptatum expedita, cum odio odit, similique, ipsa quidem dolor amet consequuntur unde officia fugit atque.</p>
|
||||
<a href="#">Link</a>
|
||||
</div>
|
||||
</article>
|
||||
</li>
|
||||
<li>
|
||||
<article>
|
||||
<img src="https://placehold.co/200x150" alt="Placeholder image">
|
||||
<div>
|
||||
<h3>Title</h3>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo voluptatum expedita, cum odio odit, similique, ipsa quidem dolor amet consequuntur unde officia fugit atque.</p>
|
||||
<a href="#">Link</a>
|
||||
</div>
|
||||
</article>
|
||||
</li>
|
||||
<li>
|
||||
<article>
|
||||
<img src="https://placehold.co/200x150" alt="Placeholder image">
|
||||
<div>
|
||||
<h3>Title</h3>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo voluptatum expedita, cum odio odit, similique, ipsa quidem dolor amet consequuntur unde officia fugit atque.</p>
|
||||
<a href="#">Link</a>
|
||||
</div>
|
||||
</article>
|
||||
</li>
|
||||
<li>
|
||||
<article>
|
||||
<img src="https://placehold.co/200x150" alt="Placeholder image">
|
||||
<div>
|
||||
<h3>Title</h3>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo voluptatum expedita, cum odio odit, similique, ipsa quidem dolor amet consequuntur unde officia fugit atque.</p>
|
||||
<a href="#">Link</a>
|
||||
</div>
|
||||
</article>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="wrapper-full">
|
||||
<div class="about-section">
|
||||
<div>
|
||||
<img src="https://placehold.co/200" alt="Placeholder image">
|
||||
</div>
|
||||
<div>
|
||||
<h2 id="about">About me</h2>
|
||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit culpa dignissimos laborum, dolor voluptatem perspiciatis earum placeat modi minus officia perferendis rerum alias maiores deleniti et quia provident quo doloribus.</p>
|
||||
<ul class="list-inline">
|
||||
<li>
|
||||
<a href="#">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35" height="35" viewBox="0 0 35 35"><rect width="100%" height="100%" fill="#DDDDDD"/><path d="M6.56 16.46L6.11 16.38Q6.16 16.02 6.31 15.74Q6.46 15.47 6.68 15.28Q6.91 15.10 7.20 15.01Q7.50 14.91 7.83 14.91L7.83 14.91Q8.18 14.91 8.46 15.01Q8.74 15.11 8.94 15.29Q9.14 15.47 9.25 15.70Q9.36 15.94 9.36 16.22L9.36 16.22Q9.36 16.46 9.30 16.64Q9.25 16.83 9.15 16.96Q9.05 17.10 8.90 17.20Q8.74 17.29 8.56 17.35L8.56 17.35Q9.01 17.50 9.23 17.79Q9.46 18.08 9.46 18.53L9.46 18.53Q9.46 18.91 9.32 19.20Q9.18 19.49 8.94 19.69Q8.70 19.88 8.39 19.98Q8.08 20.09 7.73 20.09L7.73 20.09Q7.34 20.09 7.06 20.00Q6.78 19.91 6.57 19.74Q6.36 19.57 6.21 19.32Q6.06 19.07 5.96 18.75L5.96 18.75L6.34 18.59Q6.49 18.53 6.62 18.56Q6.75 18.59 6.81 18.70L6.81 18.70Q6.88 18.82 6.95 18.94Q7.03 19.06 7.13 19.15Q7.24 19.24 7.38 19.30Q7.52 19.36 7.72 19.36L7.72 19.36Q7.94 19.36 8.10 19.29Q8.27 19.21 8.38 19.10Q8.49 18.98 8.54 18.84Q8.59 18.70 8.59 18.56L8.59 18.56Q8.59 18.38 8.56 18.23Q8.52 18.08 8.39 17.97Q8.27 17.87 8.04 17.81Q7.81 17.75 7.43 17.75L7.43 17.75L7.43 17.13Q7.75 17.13 7.96 17.07Q8.17 17.02 8.29 16.92Q8.42 16.82 8.46 16.68Q8.51 16.54 8.51 16.37L8.51 16.37Q8.51 16.01 8.31 15.83Q8.11 15.64 7.78 15.64L7.78 15.64Q7.63 15.64 7.50 15.69Q7.37 15.73 7.27 15.81Q7.16 15.89 7.09 15.99Q7.02 16.10 6.99 16.22L6.99 16.22Q6.93 16.38 6.83 16.44Q6.74 16.49 6.56 16.46L6.56 16.46ZM11.39 15.75L11.21 16.81Q11.38 16.77 11.53 16.76Q11.68 16.74 11.83 16.74L11.83 16.74Q12.23 16.74 12.53 16.86Q12.84 16.98 13.04 17.19Q13.25 17.40 13.35 17.68Q13.46 17.96 13.46 18.29L13.46 18.29Q13.46 18.69 13.32 19.02Q13.18 19.36 12.92 19.59Q12.67 19.83 12.33 19.96Q11.98 20.09 11.58 20.09L11.58 20.09Q11.34 20.09 11.12 20.04Q10.91 19.99 10.72 19.91Q10.54 19.82 10.38 19.72Q10.22 19.61 10.09 19.49L10.09 19.49L10.36 19.12Q10.44 19.00 10.58 19.00L10.58 19.00Q10.67 19.00 10.76 19.06Q10.85 19.12 10.97 19.18Q11.08 19.25 11.24 19.31Q11.40 19.36 11.63 19.36L11.63 19.36Q11.86 19.36 12.05 19.29Q12.23 19.21 12.35 19.07Q12.47 18.93 12.53 18.74Q12.59 18.55 12.59 18.33L12.59 18.33Q12.59 17.91 12.35 17.68Q12.11 17.45 11.64 17.45L11.64 17.45Q11.28 17.45 10.90 17.58L10.90 17.58L10.37 17.43L10.79 14.97L13.28 14.97L13.28 15.34Q13.28 15.52 13.17 15.64Q13.05 15.75 12.78 15.75L12.78 15.75L11.39 15.75ZM19.23 18.87L18.77 19.32L17.59 18.14L16.39 19.33L15.93 18.88L17.13 17.68L15.99 16.54L16.44 16.08L17.58 17.22L18.72 16.09L19.18 16.54L18.04 17.68L19.23 18.87ZM22.14 16.46L21.69 16.38Q21.74 16.02 21.89 15.74Q22.04 15.47 22.27 15.28Q22.49 15.10 22.79 15.01Q23.08 14.91 23.41 14.91L23.41 14.91Q23.76 14.91 24.05 15.01Q24.33 15.11 24.53 15.29Q24.73 15.47 24.83 15.70Q24.94 15.94 24.94 16.22L24.94 16.22Q24.94 16.46 24.89 16.64Q24.83 16.83 24.73 16.96Q24.63 17.10 24.48 17.20Q24.33 17.29 24.14 17.35L24.14 17.35Q24.59 17.50 24.82 17.79Q25.04 18.08 25.04 18.53L25.04 18.53Q25.04 18.91 24.90 19.20Q24.76 19.49 24.52 19.69Q24.28 19.88 23.97 19.98Q23.66 20.09 23.31 20.09L23.31 20.09Q22.93 20.09 22.64 20.00Q22.36 19.91 22.15 19.74Q21.94 19.57 21.79 19.32Q21.65 19.07 21.54 18.75L21.54 18.75L21.92 18.59Q22.07 18.53 22.20 18.56Q22.34 18.59 22.39 18.70L22.39 18.70Q22.46 18.82 22.53 18.94Q22.61 19.06 22.71 19.15Q22.82 19.24 22.96 19.30Q23.10 19.36 23.30 19.36L23.30 19.36Q23.52 19.36 23.68 19.29Q23.85 19.21 23.96 19.10Q24.07 18.98 24.12 18.84Q24.18 18.70 24.18 18.56L24.18 18.56Q24.18 18.38 24.14 18.23Q24.10 18.08 23.98 17.97Q23.85 17.87 23.63 17.81Q23.40 17.75 23.01 17.75L23.01 17.75L23.01 17.13Q23.33 17.13 23.54 17.07Q23.75 17.02 23.87 16.92Q24.00 16.82 24.05 16.68Q24.10 16.54 24.10 16.37L24.10 16.37Q24.10 16.01 23.90 15.83Q23.70 15.64 23.36 15.64L23.36 15.64Q23.21 15.64 23.08 15.69Q22.95 15.73 22.85 15.81Q22.74 15.89 22.67 15.99Q22.60 16.10 22.57 16.22L22.57 16.22Q22.51 16.38 22.41 16.44Q22.32 16.49 22.14 16.46L22.14 16.46ZM26.97 15.75L26.79 16.81Q26.96 16.77 27.11 16.76Q27.27 16.74 27.41 16.74L27.41 16.74Q27.81 16.74 28.11 16.86Q28.42 16.98 28.62 17.19Q28.83 17.40 28.94 17.68Q29.04 17.96 29.04 18.29L29.04 18.29Q29.04 18.69 28.90 19.02Q28.76 19.36 28.51 19.59Q28.25 19.83 27.91 19.96Q27.56 20.09 27.16 20.09L27.16 20.09Q26.92 20.09 26.71 20.04Q26.49 19.99 26.31 19.91Q26.12 19.82 25.96 19.72Q25.80 19.61 25.67 19.49L25.67 19.49L25.94 19.12Q26.02 19.00 26.16 19.00L26.16 19.00Q26.25 19.00 26.34 19.06Q26.43 19.12 26.55 19.18Q26.66 19.25 26.82 19.31Q26.98 19.36 27.21 19.36L27.21 19.36Q27.45 19.36 27.63 19.29Q27.81 19.21 27.93 19.07Q28.05 18.93 28.11 18.74Q28.17 18.55 28.17 18.33L28.17 18.33Q28.17 17.91 27.93 17.68Q27.69 17.45 27.22 17.45L27.22 17.45Q26.86 17.45 26.49 17.58L26.49 17.58L25.95 17.43L26.37 14.97L28.87 14.97L28.87 15.34Q28.87 15.52 28.75 15.64Q28.64 15.75 28.36 15.75L28.36 15.75L26.97 15.75Z" fill="#999999"/></svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35" height="35" viewBox="0 0 35 35"><rect width="100%" height="100%" fill="#DDDDDD"/><path d="M6.56 16.46L6.11 16.38Q6.16 16.02 6.31 15.74Q6.46 15.47 6.68 15.28Q6.91 15.10 7.20 15.01Q7.50 14.91 7.83 14.91L7.83 14.91Q8.18 14.91 8.46 15.01Q8.74 15.11 8.94 15.29Q9.14 15.47 9.25 15.70Q9.36 15.94 9.36 16.22L9.36 16.22Q9.36 16.46 9.30 16.64Q9.25 16.83 9.15 16.96Q9.05 17.10 8.90 17.20Q8.74 17.29 8.56 17.35L8.56 17.35Q9.01 17.50 9.23 17.79Q9.46 18.08 9.46 18.53L9.46 18.53Q9.46 18.91 9.32 19.20Q9.18 19.49 8.94 19.69Q8.70 19.88 8.39 19.98Q8.08 20.09 7.73 20.09L7.73 20.09Q7.34 20.09 7.06 20.00Q6.78 19.91 6.57 19.74Q6.36 19.57 6.21 19.32Q6.06 19.07 5.96 18.75L5.96 18.75L6.34 18.59Q6.49 18.53 6.62 18.56Q6.75 18.59 6.81 18.70L6.81 18.70Q6.88 18.82 6.95 18.94Q7.03 19.06 7.13 19.15Q7.24 19.24 7.38 19.30Q7.52 19.36 7.72 19.36L7.72 19.36Q7.94 19.36 8.10 19.29Q8.27 19.21 8.38 19.10Q8.49 18.98 8.54 18.84Q8.59 18.70 8.59 18.56L8.59 18.56Q8.59 18.38 8.56 18.23Q8.52 18.08 8.39 17.97Q8.27 17.87 8.04 17.81Q7.81 17.75 7.43 17.75L7.43 17.75L7.43 17.13Q7.75 17.13 7.96 17.07Q8.17 17.02 8.29 16.92Q8.42 16.82 8.46 16.68Q8.51 16.54 8.51 16.37L8.51 16.37Q8.51 16.01 8.31 15.83Q8.11 15.64 7.78 15.64L7.78 15.64Q7.63 15.64 7.50 15.69Q7.37 15.73 7.27 15.81Q7.16 15.89 7.09 15.99Q7.02 16.10 6.99 16.22L6.99 16.22Q6.93 16.38 6.83 16.44Q6.74 16.49 6.56 16.46L6.56 16.46ZM11.39 15.75L11.21 16.81Q11.38 16.77 11.53 16.76Q11.68 16.74 11.83 16.74L11.83 16.74Q12.23 16.74 12.53 16.86Q12.84 16.98 13.04 17.19Q13.25 17.40 13.35 17.68Q13.46 17.96 13.46 18.29L13.46 18.29Q13.46 18.69 13.32 19.02Q13.18 19.36 12.92 19.59Q12.67 19.83 12.33 19.96Q11.98 20.09 11.58 20.09L11.58 20.09Q11.34 20.09 11.12 20.04Q10.91 19.99 10.72 19.91Q10.54 19.82 10.38 19.72Q10.22 19.61 10.09 19.49L10.09 19.49L10.36 19.12Q10.44 19.00 10.58 19.00L10.58 19.00Q10.67 19.00 10.76 19.06Q10.85 19.12 10.97 19.18Q11.08 19.25 11.24 19.31Q11.40 19.36 11.63 19.36L11.63 19.36Q11.86 19.36 12.05 19.29Q12.23 19.21 12.35 19.07Q12.47 18.93 12.53 18.74Q12.59 18.55 12.59 18.33L12.59 18.33Q12.59 17.91 12.35 17.68Q12.11 17.45 11.64 17.45L11.64 17.45Q11.28 17.45 10.90 17.58L10.90 17.58L10.37 17.43L10.79 14.97L13.28 14.97L13.28 15.34Q13.28 15.52 13.17 15.64Q13.05 15.75 12.78 15.75L12.78 15.75L11.39 15.75ZM19.23 18.87L18.77 19.32L17.59 18.14L16.39 19.33L15.93 18.88L17.13 17.68L15.99 16.54L16.44 16.08L17.58 17.22L18.72 16.09L19.18 16.54L18.04 17.68L19.23 18.87ZM22.14 16.46L21.69 16.38Q21.74 16.02 21.89 15.74Q22.04 15.47 22.27 15.28Q22.49 15.10 22.79 15.01Q23.08 14.91 23.41 14.91L23.41 14.91Q23.76 14.91 24.05 15.01Q24.33 15.11 24.53 15.29Q24.73 15.47 24.83 15.70Q24.94 15.94 24.94 16.22L24.94 16.22Q24.94 16.46 24.89 16.64Q24.83 16.83 24.73 16.96Q24.63 17.10 24.48 17.20Q24.33 17.29 24.14 17.35L24.14 17.35Q24.59 17.50 24.82 17.79Q25.04 18.08 25.04 18.53L25.04 18.53Q25.04 18.91 24.90 19.20Q24.76 19.49 24.52 19.69Q24.28 19.88 23.97 19.98Q23.66 20.09 23.31 20.09L23.31 20.09Q22.93 20.09 22.64 20.00Q22.36 19.91 22.15 19.74Q21.94 19.57 21.79 19.32Q21.65 19.07 21.54 18.75L21.54 18.75L21.92 18.59Q22.07 18.53 22.20 18.56Q22.34 18.59 22.39 18.70L22.39 18.70Q22.46 18.82 22.53 18.94Q22.61 19.06 22.71 19.15Q22.82 19.24 22.96 19.30Q23.10 19.36 23.30 19.36L23.30 19.36Q23.52 19.36 23.68 19.29Q23.85 19.21 23.96 19.10Q24.07 18.98 24.12 18.84Q24.18 18.70 24.18 18.56L24.18 18.56Q24.18 18.38 24.14 18.23Q24.10 18.08 23.98 17.97Q23.85 17.87 23.63 17.81Q23.40 17.75 23.01 17.75L23.01 17.75L23.01 17.13Q23.33 17.13 23.54 17.07Q23.75 17.02 23.87 16.92Q24.00 16.82 24.05 16.68Q24.10 16.54 24.10 16.37L24.10 16.37Q24.10 16.01 23.90 15.83Q23.70 15.64 23.36 15.64L23.36 15.64Q23.21 15.64 23.08 15.69Q22.95 15.73 22.85 15.81Q22.74 15.89 22.67 15.99Q22.60 16.10 22.57 16.22L22.57 16.22Q22.51 16.38 22.41 16.44Q22.32 16.49 22.14 16.46L22.14 16.46ZM26.97 15.75L26.79 16.81Q26.96 16.77 27.11 16.76Q27.27 16.74 27.41 16.74L27.41 16.74Q27.81 16.74 28.11 16.86Q28.42 16.98 28.62 17.19Q28.83 17.40 28.94 17.68Q29.04 17.96 29.04 18.29L29.04 18.29Q29.04 18.69 28.90 19.02Q28.76 19.36 28.51 19.59Q28.25 19.83 27.91 19.96Q27.56 20.09 27.16 20.09L27.16 20.09Q26.92 20.09 26.71 20.04Q26.49 19.99 26.31 19.91Q26.12 19.82 25.96 19.72Q25.80 19.61 25.67 19.49L25.67 19.49L25.94 19.12Q26.02 19.00 26.16 19.00L26.16 19.00Q26.25 19.00 26.34 19.06Q26.43 19.12 26.55 19.18Q26.66 19.25 26.82 19.31Q26.98 19.36 27.21 19.36L27.21 19.36Q27.45 19.36 27.63 19.29Q27.81 19.21 27.93 19.07Q28.05 18.93 28.11 18.74Q28.17 18.55 28.17 18.33L28.17 18.33Q28.17 17.91 27.93 17.68Q27.69 17.45 27.22 17.45L27.22 17.45Q26.86 17.45 26.49 17.58L26.49 17.58L25.95 17.43L26.37 14.97L28.87 14.97L28.87 15.34Q28.87 15.52 28.75 15.64Q28.64 15.75 28.36 15.75L28.36 15.75L26.97 15.75Z" fill="#999999"/></svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper-full studies-section">
|
||||
<h2 id="experience">My experiences</h2>
|
||||
<ol class="list-inline timeline">
|
||||
<li>
|
||||
<h3>School 1</h3>
|
||||
<h4>Lorem ipsum</h4>
|
||||
<div><time datetime="2023">2023</time><span>-</span><time datetime="2023">2023</time></div>
|
||||
</li>
|
||||
<li>
|
||||
<h3>School 2</h3>
|
||||
<h4>Lorem ipsum</h4>
|
||||
<div><time datetime="2023">2023</time><span>-</span><time datetime="2023">2023</time></div>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="download-section">
|
||||
<a href="#" download class="btn">Download as PDF</a>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="wrapper-full">
|
||||
<ul class="list-inline">
|
||||
<li>Built with <a href="https://11ty.dev/" target="_blank">Eleventy</a></li>
|
||||
<li>Source on <a href="https://github.com/TheThomaas" target="_blank">Github</a></li>
|
||||
</ul>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
748
main.scss
Normal file
748
main.scss
Normal file
|
|
@ -0,0 +1,748 @@
|
|||
:root {
|
||||
--light-1: #efefef;
|
||||
--dark-1: #1e1e1e;
|
||||
--dark-2: #0f0f0f;
|
||||
--primary: #C2B280;
|
||||
--primary-light: #D3C7A2;
|
||||
--primary-dark: #BAB298;
|
||||
--secondary: #B3CF99;
|
||||
--secondary-light: #C2D9AD;
|
||||
--secondary-dark: #9FAF8F;
|
||||
|
||||
--background: var(--primary-light);
|
||||
--text: var(--dark-1);
|
||||
--text-2: var(--dark-2);
|
||||
|
||||
--font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", sans-serif;
|
||||
--font-italic: "Georgia", serif;
|
||||
--font-code: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
|
||||
--font-size: 1.2rem;
|
||||
--font-weight-semibold: 700;
|
||||
--font-weight-bold: 900;
|
||||
--leading: 1.45;
|
||||
--gutter: clamp(1ch, 2.5vmax, 3ch);
|
||||
--stack: clamp(1.25ex, 1ex + 2.5vmax, 1.75ex);
|
||||
--line-length-small: 30ch;
|
||||
--line-length: 75ch;
|
||||
--line-length-large: 115ch;
|
||||
--page-padding-inline: calc((100vw - min(var(--line-length), 80vw)) / 2);
|
||||
--border-width: 1px;
|
||||
--border-radius: 4px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
Josh's Custom CSS Reset
|
||||
https://www.joshwcomeau.com/css/custom-css-reset/
|
||||
*/
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
:where(html) {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
:where(html, body) {
|
||||
block-size: 100%;
|
||||
}
|
||||
:where(body) {
|
||||
text-rendering: optimizeSpeed;
|
||||
line-height: 1.5;
|
||||
}
|
||||
:where(img, picture, video, canvas) {
|
||||
display: block;
|
||||
max-inline-size: 100%;
|
||||
}
|
||||
:where(input, button, textarea, select, a) {
|
||||
font: inherit;
|
||||
}
|
||||
:where(p, h1, h2, h3, h4, h5, h6) {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
:where(ul, ol):where([role='list'], [class]) {
|
||||
list-style: none;
|
||||
}
|
||||
:where(html:focus-within) {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
:where(img, picture) {
|
||||
block-size: auto;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-play-state: paused !important;
|
||||
transition: none !important;
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.wrapper {
|
||||
$wrapper-gap: var(--gutter);
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
1fr
|
||||
min(var(--wrapper-max-length, var(--line-length)), calc(100% - var(--wrapper-gap, $wrapper-gap) * 2))
|
||||
1fr;
|
||||
grid-column-gap: var(--wrapper-gap, $wrapper-gap);
|
||||
|
||||
> * {
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-full {
|
||||
@extend .wrapper;
|
||||
$wrapper-gap: var(--gutter);
|
||||
grid-template-columns:
|
||||
1fr
|
||||
min(var(--wrapper-max-length, var(--line-length-large)), calc(100% - var(--wrapper-gap, $wrapper-gap) * 2))
|
||||
1fr;
|
||||
}
|
||||
|
||||
.full-bleed {
|
||||
inline-size: 100%;
|
||||
grid-column: 1 / -1;
|
||||
padding: var(--padding-block, 1rem) var(--padding-inline, 2rem);
|
||||
background-color: var(--background-color, none);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.sr-only {
|
||||
position: absolute !important;
|
||||
block-size: 1px !important;
|
||||
inline-size: 1px !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
overflow: hidden !important;
|
||||
clip: rect(0, 0, 0, 0) !important;
|
||||
white-space: nowrap !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ------------------------------------ *\
|
||||
https://codepen.io/mikemai2awesome/full/KKvMZVz
|
||||
\* ------------------------------------ */
|
||||
|
||||
:root {
|
||||
color: var(--text);
|
||||
background-color: var(--background);
|
||||
accent-color: var(--text);
|
||||
}
|
||||
|
||||
:where(a) {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
:where(input, textarea, select) {
|
||||
color: var(--text);
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
:where(button, .btn) {
|
||||
color: var(--primary-light);
|
||||
background-color: var(--text);
|
||||
}
|
||||
|
||||
:where(code) {
|
||||
color: var(--text);
|
||||
background-color: var(--primary-dark);
|
||||
}
|
||||
|
||||
/* ------------------------------------ *\
|
||||
Typography
|
||||
\* ------------------------------------ */
|
||||
|
||||
:root {
|
||||
font-size: clamp(
|
||||
var(--font-size),
|
||||
var(--font-size) * 0.9 + 0.25vw,
|
||||
var(--font-size) * 2
|
||||
); // % ensures browser zoom is supported.
|
||||
font-family: var(--font); // Use system UI font.
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: var(--leading); // Standard leading for good legibility.
|
||||
letter-spacing: var(--tracking);
|
||||
}
|
||||
|
||||
:where(a) {
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: var(--border-width);
|
||||
text-underline-offset: calc(var(--border-width) * 2);
|
||||
}
|
||||
|
||||
:where(a):hover {
|
||||
text-decoration-thickness: calc(var(--border-width) * 2);
|
||||
}
|
||||
|
||||
:where(pre, code, kbd, dl, figcaption, abbr, table) {
|
||||
font-family: var(
|
||||
--font-code
|
||||
); // Differentiate preformatted, code, description, and table text from body text.
|
||||
|
||||
font-size: 0.8em; // Make monospace and small text smaller than body text.
|
||||
}
|
||||
|
||||
:where(big) {
|
||||
font-size: 1.2em; // <big> is technically deprecated, but I love using it. This creates a fallback if a browser doesn't support it.
|
||||
letter-spacing: 0.006em;
|
||||
}
|
||||
|
||||
:where(pre code) {
|
||||
display: block; // Define block code.
|
||||
font-size: 1em; // Prevent cascading.
|
||||
}
|
||||
|
||||
:where(blockquote, em, i, cite) {
|
||||
font-family: var(
|
||||
--font-italic
|
||||
); // Differentiate blockquote, citation, idiomatic, and emphasisized text from body text. Also, sans-serif italic is ugly.
|
||||
font-weight: var(
|
||||
--font-weight-regular
|
||||
); // Prevent italics to be bold. Bold italic is also ugly and unnecessary.
|
||||
}
|
||||
|
||||
:where(blockquote) {
|
||||
font-size: clamp(1.5rem, 1.25rem + 1vw, 3rem);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
:where(blockquote p) {
|
||||
max-inline-size: 35ch;
|
||||
}
|
||||
|
||||
:where(blockquote q):before {
|
||||
position: absolute;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
:where(strong, b, th, button, .btn) {
|
||||
font-weight: var(
|
||||
--font-weight-semibold
|
||||
); // Make non-heading emphasized text less bold than heading text.
|
||||
}
|
||||
|
||||
:where(h1, h2, h3, h4, h5, h6, summary strong, legend) {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
:where(h1, h2, h3, h4, h5, h6, summary strong, legend, big) {
|
||||
font-stretch: var(--font-stretch, expanded);
|
||||
}
|
||||
|
||||
:where(button, .btn, input[type="file"]) {
|
||||
font-stretch: var(--font-stretch, condensed);
|
||||
}
|
||||
|
||||
:where(abbr) {
|
||||
text-decoration: underline;
|
||||
text-decoration-style: dotted; // Differentiate abbreviaions from links.
|
||||
text-underline-offset: calc(var(--border-width) * 2);
|
||||
}
|
||||
|
||||
:where(button, label, select, summary) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
:where(summary:hover > *) {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: calc(var(--border-width) * 2);
|
||||
}
|
||||
|
||||
:where(figcaption) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:where(th) {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
:where(th, td) {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
:where(fieldset > ol) {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* ------------------------------------ *\
|
||||
Spacing
|
||||
\* ------------------------------------ */
|
||||
|
||||
:where(h1, h2, h3, h4, h5, h6, p, figure, form, pre, blockquote, ul, ol, dl, li, details) {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
:where(h1, h2, h3, h4, h5, h6) {
|
||||
margin-block-start: calc(var(--stack) * 1.75);
|
||||
}
|
||||
|
||||
:where(p, figure, form, fieldset, pre, blockquote, ul, ol, dl, details) {
|
||||
margin-inline: 0;
|
||||
margin-block-start: var(--stack);
|
||||
}
|
||||
|
||||
:where(h1, h2, h3, h4, h5, h6, p, figure, form, fieldset, pre, blockquote, ul, ol, dl, details):first-child,
|
||||
:where(legend + *) {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
:where(h1, h2, h3, h4, h5, h6) + * {
|
||||
margin-block-start: calc(var(--stack) / 5);
|
||||
}
|
||||
|
||||
// :where(ul, ol) {
|
||||
// padding: 0;
|
||||
// }
|
||||
|
||||
:where(li > ul, li > ol) {
|
||||
margin-block-start: calc(var(--stack) / 5);
|
||||
}
|
||||
|
||||
:where(details ul, details ol) {
|
||||
margin-inline-start: 4ch; // Unify indent for all lists inside details.
|
||||
}
|
||||
|
||||
:where(li > ul, li > ol, fieldset ul, fieldset ol) {
|
||||
margin-inline-start: 2.25ch; // Unify indent for all nested lists.
|
||||
}
|
||||
|
||||
:where(li + li) {
|
||||
margin-block-start: calc(var(--stack) / 5);
|
||||
}
|
||||
|
||||
:where(fieldset > ol li + li) {
|
||||
margin-block-start: calc(var(--stack) / 2);
|
||||
}
|
||||
|
||||
:where(fieldset > ol) {
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
:where(hr) {
|
||||
margin-block-start: calc(var(--stack) * 3);
|
||||
margin-block-end: calc(var(--stack) * 3);
|
||||
}
|
||||
|
||||
:where(hr + *) {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
:where(figure > img, table) {
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
:where(blockquote > *) {
|
||||
margin-block-start: calc(var(--stack) / 4);
|
||||
}
|
||||
|
||||
:where(blockquote:not(:last-child)) {
|
||||
padding-block-end: calc(var(--stack) / 2);
|
||||
}
|
||||
|
||||
:where(button, .btn, dd, th, td) {
|
||||
// Unify inset spacing on bordered elements.
|
||||
padding-block: calc(var(--stack) / 6);
|
||||
padding-inline: calc(var(--gutter) / 3);
|
||||
}
|
||||
|
||||
:where(input, textarea) {
|
||||
padding-inline: 2px;
|
||||
}
|
||||
|
||||
:where(caption, figcaption) {
|
||||
padding-block: calc(var(--stack) / 2);
|
||||
}
|
||||
|
||||
:where(code, kbd) {
|
||||
padding-block: 0.25ex;
|
||||
padding-inline: 0.5ch;
|
||||
}
|
||||
|
||||
:where(figure, pre) {
|
||||
padding-block-start: calc(
|
||||
var(--stack) / 2.5
|
||||
); // Line up top of images/codeblocks with text in an adjacent column layout.
|
||||
}
|
||||
|
||||
:where(pre) {
|
||||
padding-block-end: calc(var(--stack) / 2.5);
|
||||
}
|
||||
|
||||
:where(pre code) {
|
||||
padding-block: var(--stack);
|
||||
padding-inline: var(--gutter);
|
||||
}
|
||||
|
||||
details[open] summary + * {
|
||||
margin-block-start: calc(var(--stack) / 4);
|
||||
}
|
||||
|
||||
/* ------------------------------------ *\
|
||||
General
|
||||
\* ------------------------------------ */
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
font-feature-settings: "kern";
|
||||
font-kerning: normal;
|
||||
-moz-osx-font-smoothing: grayscale !important;
|
||||
-webkit-font-smoothing: antialiased !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:where(input, textarea, select, fieldset, button, kbd, dd, table, th, td) {
|
||||
// Unify border styles.
|
||||
border: var(--border-width) solid var(--text);
|
||||
}
|
||||
|
||||
:where(input, textarea, select, fieldset, button, .btn, kbd) {
|
||||
// Unify interactive elements border radius.
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
:where(pre) {
|
||||
white-space: -moz-pre-wrap;
|
||||
white-space: -o-pre-wrap;
|
||||
white-space: pre-wrap;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
:where(dl) {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(75%, 1fr);
|
||||
gap: calc(var(--gutter) / 2);
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
:where(dt) {
|
||||
border-block-end: var(--border-width) dotted;
|
||||
}
|
||||
|
||||
:where(dd) {
|
||||
block-size: 100%;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
|
||||
display: block;
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
:where(input[type="radio"], input[type="checkbox"]) {
|
||||
size: 1.5ex;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
:where(input[type="file"]) {
|
||||
padding-inline: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
appearance: button;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
:where(input, textarea, select) ~ * {
|
||||
margin-block-start: 0;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
:where(input:required + mark) {
|
||||
display: none;
|
||||
color: var(--text);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
:where(input:required:invalid + mark) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
:where(hr) {
|
||||
block-size: 0;
|
||||
border: 0;
|
||||
border-block-start: var(--border-width) dashed var(--text);
|
||||
}
|
||||
|
||||
:where(figure, figure table) {
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
:where(figure) {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
:where(figure > img) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
:where(table) {
|
||||
caption-side: bottom;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
:where(tr > *:first-child) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:where(summary > *) {
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* ------------------------------------ *\
|
||||
Add-ons
|
||||
- Requires data attributes.
|
||||
- Remove to do your own layouts.
|
||||
\* ------------------------------------ */
|
||||
|
||||
:where(body main) {
|
||||
padding-block-start: clamp(var(--stack) * 1, 10vmax, var(--stack) * 2);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.list-inline {
|
||||
$item-gap : 1ch;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
margin-left: calc(var(--item-gap, $item-gap) * 3 * -1);
|
||||
clip-path: inset(0 0 0 calc(var(--item-gap, $item-gap) * 3));
|
||||
align-items: center;
|
||||
color: var(--item-color, var(--text));
|
||||
|
||||
li {
|
||||
padding-left: var(--item-gap, $item-gap);
|
||||
&::before {
|
||||
content: var(--item-separator, '•');
|
||||
display: inline-block;
|
||||
margin-right: var(--item-gap, $item-gap);
|
||||
width: var(--item-gap, $item-gap);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--item-color, var(--text));
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
header, footer {
|
||||
background-color: var(--primary);
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
header {
|
||||
position: fixed;
|
||||
inset-block-start: 0;
|
||||
inset-inline: 0;
|
||||
nav {
|
||||
ul {
|
||||
justify-content: end;
|
||||
}
|
||||
li {
|
||||
padding: 6px 20px;
|
||||
--item-separator: none;
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
a[aria-current="page"] {
|
||||
color: var(--text-2);
|
||||
text-decoration: underline;
|
||||
font-weight: var(--font-weight-semibold)
|
||||
}
|
||||
}
|
||||
}
|
||||
main {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
h2 {
|
||||
margin-block: 2rem 1rem;
|
||||
font-size: calc(var(--font-size) * 1.6);
|
||||
}
|
||||
.list-inline {
|
||||
--item-gap: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
ul:not(.list-inline) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
li {
|
||||
--item-separator: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
footer {
|
||||
justify-items: center;
|
||||
.list-inline {
|
||||
a {
|
||||
text-decoration: underline;
|
||||
--item-color: var(--text-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
background-color: var(--primary);
|
||||
height: 65vh;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.projects-section {
|
||||
margin-block: 1rem;
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: var(--gutter);
|
||||
overflow-y: scroll;
|
||||
}
|
||||
article {
|
||||
width: clamp(9rem, 20vw, 13rem);
|
||||
// width: 14rem;
|
||||
// min-width: 200px;
|
||||
// max-width: 250px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--primary);
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
img {
|
||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
||||
}
|
||||
|
||||
div {
|
||||
padding: .5rem 1rem .8rem 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
float: inline-end;
|
||||
border-radius: var(--border-radius);
|
||||
border: var(--border-width) solid var(--text);
|
||||
margin-block-start: 1rem;
|
||||
padding: .1rem .5rem;
|
||||
transition: background-color .2s ease-in-out, color .2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--text);
|
||||
color: var(--background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.about-section {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
align-items: center;
|
||||
& > div:first-child {
|
||||
inline-size: 30%;
|
||||
}
|
||||
& > div:last-child {
|
||||
inline-size: 60%;
|
||||
}
|
||||
img {
|
||||
margin: 1rem auto;
|
||||
inline-size: 100%;
|
||||
min-inline-size: 150px;
|
||||
max-inline-size: 300px;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 100%;
|
||||
border: 4px solid var(--primary-dark)
|
||||
}
|
||||
ul {
|
||||
margin-block-start: 1rem;
|
||||
gap: .2rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.download-section {
|
||||
text-align: center;
|
||||
margin-block: 2rem 1rem;
|
||||
}
|
||||
.btn {
|
||||
padding: .4rem .8rem;
|
||||
text-decoration: none;
|
||||
transition: background-color .2s ease-in-out, text-decoration .2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--dark-2);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
48
palette.html
Normal file
48
palette.html
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Palette</title>
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100vh;
|
||||
}
|
||||
body > ul {
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
max-width: 300px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
gap: .2rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
li {
|
||||
aspect-ratio: 1;
|
||||
background-color: var(--background, #eee);
|
||||
padding: 3rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li style="--background:#efefef" title="Background"></li>
|
||||
<li style="--background:#1e1e1e" title="Text"></li>
|
||||
<li style="--background:#0f0f0f" title="Text variant"></li>
|
||||
<li style="--background:#C2B280" title="Primary"></li>
|
||||
<li style="--background:#D3C7A2" title="Primary light"></li>
|
||||
<li style="--background:#BAB298" title="Primary dark"></li>
|
||||
<li style="--background:#B3CF99" title="Secondary"></li>
|
||||
<li style="--background:#C2D9AD" title="Secondary light"></li>
|
||||
<li style="--background:#9FAF8F" title="Secondary dark"></li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue