--- /dev/null
+@font-face {
+ font-family: 'KarioDuplexVar';
+ src: URL('fonts/Kario39C3VarWEB-Roman.woff') format('woff');
+ src: URL('fonts/Kario39C3VarWEB-Roman.woff2') format('woff2');
+}
+
+:root {
+ --color-dark: #141414;
+ --color-neutral: #faf5f5;
+ --color-primary: #00ff00;
+ --color-secondary: #9673ff;
+ --color-additional-01: #ff3719;
+ --color-additional-02: #66f2ff;
+
+ --color-primary-tint-01: #009900;
+ --color-primary-tint-02: #00be00;
+ --color-primary-tint-03: #00d300;
+ --color-primary-tint-04: #00ea00;
+ --color-primary-tint-05: #a3ff90;
+ --color-primary-tint-06: #ccffbe;
+ --color-primary-tint-07: #ebffe5;
+
+ --color-secondary-tint-01: #4d2eed;
+ --color-secondary-tint-02: #5c33f4;
+ --color-secondary-tint-03: #7952fe;
+ --color-secondary-tint-04: #b69dfe;
+ --color-secondary-tint-05: #d4c4fe;
+ --color-secondary-tint-06: #efe7ff;
+}
+
+@keyframes font_weight_wave {
+ from {
+ font-weight: 10;
+ } to {
+ font-weight: 100;
+ }
+}
+
+.ccc {
+ font-family: KarioDuplexVar;
+ font-kerning: none;
+ font-size: 40px;
+}
+
+.ccc span {
+ animation: font_weight_wave 3s ease-in-out 0s infinite alternate both;
+}
+
+.ccc span:nth-child(1) { animation-delay: -0.1s; }
+.ccc span:nth-child(2) { animation-delay: -0.2s; }
+.ccc span:nth-child(3) { animation-delay: -0.3s; }
+.ccc span:nth-child(4) { animation-delay: -0.4s; }
+.ccc span:nth-child(5) { animation-delay: -0.5s; }
+.ccc span:nth-child(6) { animation-delay: -0.6s; }
+.ccc span:nth-child(7) { animation-delay: -0.7s; }
+.ccc span:nth-child(8) { animation-delay: -0.8s; }
+.ccc span:nth-child(9) { animation-delay: -0.9s; }
+.ccc span:nth-child(10) { animation-delay: -1.0s; }
+.ccc span:nth-child(11) { animation-delay: -1.1s; }
+.ccc span:nth-child(12) { animation-delay: -1.2s; }
+.ccc span:nth-child(13) { animation-delay: -1.2s; }
+.ccc span:nth-child(14) { animation-delay: -1.2s; }
+.ccc span:nth-child(15) { animation-delay: -1.2s; }
+.ccc span:nth-child(16) { animation-delay: -1.2s; }
+.ccc span:nth-child(17) { animation-delay: -1.2s; }
<meta http-equiv="Content-Security-Policy" content="default-src 'self';">
<link rel="icon" href="/img/favicon.gif" type="image/gif" />
<link rel="stylesheet" href="/css/style.css" />
+ <link rel="stylesheet" href="/css/ccc.css" />
%links%
</head>
<body>
<header>
<div>
<div id="header-glider">
- <h1><a href="index.html">gyiwr dot tf</a></h1>
- <img alt="glider" src="/img/glider.png" height=40 />
+ <h1><a class="ccc" href="index.html"><span>g</span><span>y</span><span>i</span><span>w</span><span>r</span><span> </span><span>d</span><span>o</span><span>t</span><span> </span><span>t</span><span>f</span><span> </span><span>a</span><span>t</span><span> </span><span><<39C3</span></a></h1>
+ <!--<img alt="glider" src="/img/glider.png" height=40 />-->
</div>
<h2>%subtitle%</h2>
</div>
<p>The Glider comes from <a href="http://www.catb.org/hacker-emblem/">catb website</a>.</p>
<h2>Web buttons in footer</h2>
- <p>The links on the buttons are often websites where I found them.</p>
+ <!--<p>The links on the buttons are often websites where I found them.</p>-->
+ <p>The font is Kario, designed by <a href="https://www.hvdfonts.com/fonts/officer-sans-free">Hannes von Döhren</a>, for the <a href="https://events.ccc.de/congress/2025/infos/startpage.html">39C3</a>. The CSS animation has been taken from <a href="https://events.ccc.de/congress/2025/infos/styleguide/latest/fonts.index.html">the example page</a>, under <a href="https://events.ccc.de/congress/2025/infos/styleguide.html">CC0 license</a>.</p>
<ul>
<li><a href="https://www.vim.org/buttons.php">Vim</a></li>
<p>Je liste ici toutes les ressources externes que je peux utiliser sur ce site. Vérifiez la licence, elles ne sont pas forcément sous la licence GPL3 qui s'applique uniquement au code source de ce site !</p>
<h2>Police</h2>
- <p>J'utilise la police par défaut de votre navigateur.</p>
+ <p>J'utilise la police par défaut de votre navigateur (sauf pour le header).</p>
<h2>Favicon</h2>
<p>GIF dessiné par <a href="https://linktr.ee/VioletCross">VioletCross</a> (tous droits réservés, mais c'est mon furso, et toc). L'<a href="/img/original.gif">original</a> (264ko).</p>
<h2>Header</h2>
- <p>Le Glider vient du site de <a href="http://www.catb.org/hacker-emblem/">catb</a>.</p>
+ <!--<p>Le Glider vient du site de <a href="http://www.catb.org/hacker-emblem/">catb</a>.</p>-->
+ <p>La police est Kario, designé par <a href="https://www.hvdfonts.com/fonts/officer-sans-free">Hannes von Döhren</a>, pour le <a href="https://events.ccc.de/congress/2025/infos/startpage.html">39C3</a>. L'animation CSS a été reprise de <a href="https://events.ccc.de/congress/2025/infos/styleguide/latest/fonts.index.html">la page d'exemple</a>, sous <a href="https://events.ccc.de/congress/2025/infos/styleguide.html">licence CC0</a>.</p>
<h2>Boutons web dans le footer</h2>
<p>Les liens des boutons sont souvent les sites sur lesquels j'ai pu trouver les boutons.</p>
projects / gyiwr.git / commitdiff