flambyte/RUX
1
0
Fork 0
mirror of https://old.git.ood.ovh/flambyte/RUX.git synced 2025-04-28 22:37:51 +02:00
Code Issues 11 Projects Releases Packages Wiki Activity Actions

add fonts doc and input on css

Browse source
This commit is contained in:
Petite Flamby 2023-02-23 15:13:27 +01:00
parent 7e9f45f56e
commit 939e01061c
11 changed files with 175 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
assets/css/style.css
View file

@ -0,0 +1,59 @@
@import 'normalize.css';
@font-face {
font-family: 'MoodboardFont';
font-weight: 400;
src: url('assets/fonts/moodboardfont-webfont.woff2') format('woff2'),
url('assets/fonts/moodboardfont-webfont.woff2') format('woff');
}
@font-face {
font-family: 'Queensides';
font-weight: 400;
src: url('../fonts/Queensides-3z7Ey.ttf');
}
@font-face {
font-family: 'QueensidesL';
font-weight: 300;
src: url('../fonts/QueensidesLight-ZVj3l.ttf');
}
@font-face {
font-family: 'QueensidesM';
font-weight: 700;
src: url('../fonts/QueensidesMedium-x30zV.ttf');
}
:root {
--color-bg: #ffb4b4;
}
@media(prefers-color-scheme: dark) {
:root {
--color-bg: #2d2d47;
}
[data-theme="light"] {
--color-bg: #ffb4b4;
}
[data-theme="dark"] {
--color-bg: #2d2d47;
--color-txt-dark: #fff;
}
}
body {
font-family: 'QueensidesL';
font-size: 18px;
color: var(--color-txt-dark);
background-color: var(--color-bg);
padding: 0;
margin: 0;
}
.title {
font-family: 'MoodboardFont';
}
p {
font-family: 'QueensidesM';
font-size: 23px;
}
@media only screen and (min-width: 750px) {}

BIN
assets/fonts/Queensides-3z7Ey.ttf Normal file
View file

Binary file not shown.

BIN
assets/fonts/QueensidesLight-ZVj3l.ttf Normal file
View file

Binary file not shown.

BIN
assets/fonts/QueensidesMedium-x30zV.ttf Normal file
View file

Binary file not shown.

BIN
assets/fonts/moodboardfont-webfont.woff Normal file
View file

Binary file not shown.

BIN
assets/fonts/moodboardfont-webfont.woff2 Normal file
View file

Binary file not shown.

BIN
assets/fonts/queensides-font.zip Normal file
View file

Binary file not shown.

35
assets/js/app.js
View file

@ -1,12 +1,29 @@
'use strict'; 'use strict';
// image animation (joao)
var upItem = document.querySelector('.images--right'); // pour prendre la classe du bouton
var bottomItem = document.querySelector('.images--left');
const sideItem = document.querySelector('.svg__side');
window.addEventListener("scroll", function() { const themeTrigger = document.querySelector(".js-theme-trigger");
upItem.style.transform = "translateX(" + window.pageYOffset / 15 + "px)"; if(themeTrigger){
bottomItem.style.transform = "translateX(" + -window.pageYOffset / 10 + "px)"; themeTrigger.addEventListener("click", toggleTheme); //quand on inclu un click sur le bouton, on met un toggleTheme
sideItem.style.transform = "translateY(" + window.pageYOffset / 5 + "px)"; }
});
function toggleTheme(){ // pour changer le data attribut on doit d'abord récupérer l'attribut sur le body qui est data-theme.
let theme = document.body.getAttribute("data-theme");
if(theme == "dark"){
setTheme("light");
}else{
setTheme("dark");
}
}
function setTheme(theme){
document.body.setAttribute("data-theme", theme);
localStorage.setItem("theme", theme);
}
let activeTheme = localStorage.getItem("theme");
if(activeTheme !== null){
setTheme(activeTheme);
}
// permet de prendre en compte la dernière modification du theme.

36
credits.html Normal file
View file

@ -0,0 +1,36 @@
<!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">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@pinavetrano">
<meta name="twitter:site" content="pina-vetrano.be">
<meta name="twitter:title" content="PVetrano — RUX">
<meta name="twitter:description" content="L'atelier rethinking user experience — à HEAJ de Pina Vetrano">
<meta name="twitter:image" content="http://www.pinavetrano.be/projets/iolce/assets/images/logo_dark.svg">
<meta property="og:site_name" content="RUX — rethinking user experience ">
<meta property="og:title" content="vetrano-pina — RUX">
<meta property="og:description" content="L'atelier rethinking user experience — à HEAJ de Pina Vetrano">
<meta property="og:type" content="website">
<meta property="og:url" content="https://pinavetrano.be/">
<meta property="og:image" content="assets/images/logo_dark.svg">
<meta property="og:image:width" content="1800">
<meta property="og:image:height" content="945">
<link rel="icon" type="image/x-icon" href="./assets/images/favicon.svg">
<title>RUX Pina Vetrano — DWT — Heaj</title>
<!-- CSS and Javascript -->
<link rel="stylesheet" href="assets/css/normalize.css">
<link rel="stylesheet" href="assets/css/style.css">
<script src="assets/js/app.js" defer></script>
</head>
<title>RUX</title>
</head>
<body>
<h1 class="title title">RUX</h1>
<!--https://www.youtube.com/watch?v=vJNVramny9k use this ?-->
</body>
</html>

21
index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -13,7 +14,7 @@
<meta name="twitter:image" content="http://www.pinavetrano.be/projets/iolce/assets/images/logo_dark.svg"> <meta name="twitter:image" content="http://www.pinavetrano.be/projets/iolce/assets/images/logo_dark.svg">
<meta property="og:site_name" content="RUX — rethinking user experience "> <meta property="og:site_name" content="RUX — rethinking user experience ">
<meta property="og:title" content="vetrano-pina — IOLCE"> <meta property="og:title" content="vetrano-pina — RUX">
<meta property="og:description" content="L'atelier rethinking user experience — à HEAJ de Pina Vetrano"> <meta property="og:description" content="L'atelier rethinking user experience — à HEAJ de Pina Vetrano">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:url" content="https://pinavetrano.be/"> <meta property="og:url" content="https://pinavetrano.be/">
@ -21,16 +22,26 @@
<meta property="og:image:width" content="1800"> <meta property="og:image:width" content="1800">
<meta property="og:image:height" content="945"> <meta property="og:image:height" content="945">
<link rel="icon" type="image/x-icon" href="./assets/images/favicon.svg"> <link rel="icon" type="image/x-icon" href="./assets/images/favicon.svg">
<title>IOLCE Pina Vetrano — DWT — Heaj</title> <title>RUX Pina Vetrano — DWT — Heaj</title>
<!-- CSS and Javascript --> <!-- CSS and Javascript -->
<link rel="stylesheet" href="assets/css/normalize.css"> <link rel="stylesheet" href="assets/css/normalize.css">
<link rel="stylesheet" href="assets/css/style.css"> <link rel="stylesheet" href="assets/css/style.css">
<script src="assets/js/app.js" defer></script> <script src="assets/js/app.js" defer></script>
</head> </head>
<title>RUX</title> <title>RUX</title>
</head> </head>
<body>
<h1 class="title title">RUX</h1> <body data-theme="light">
<!--https://www.youtube.com/watch?v=vJNVramny9k use this ?--> <button class="js-theme-trigger">Theme</button>
<img class="full-width mgrid-start02 tgrid-start01 tgrid-end03 dgrid-start dgrid-end06" src="assets/images/akitadog.jpg"
alt="akita dog sur le site">
<h1 class="title">RUX</h1>
<!--<pre class="language-css" tabindex="0"><code class="language-css"><span class="token selector">.awesome-layouts</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>-->
<p>Le pouvoir de l'amitié ! Meeting minutes</p>
</body> </body>
</html> </html>

36
uikit.html Normal file
View file

@ -0,0 +1,36 @@
<!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">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@pinavetrano">
<meta name="twitter:site" content="pina-vetrano.be">
<meta name="twitter:title" content="PVetrano — RUX">
<meta name="twitter:description" content="L'atelier rethinking user experience — à HEAJ de Pina Vetrano">
<meta name="twitter:image" content="http://www.pinavetrano.be/projets/iolce/assets/images/logo_dark.svg">
<meta property="og:site_name" content="RUX — rethinking user experience ">
<meta property="og:title" content="vetrano-pina — RUX">
<meta property="og:description" content="L'atelier rethinking user experience — à HEAJ de Pina Vetrano">
<meta property="og:type" content="website">
<meta property="og:url" content="https://pinavetrano.be/">
<meta property="og:image" content="assets/images/logo_dark.svg">
<meta property="og:image:width" content="1800">
<meta property="og:image:height" content="945">
<link rel="icon" type="image/x-icon" href="./assets/images/favicon.svg">
<title>RUX Pina Vetrano — DWT — Heaj</title>
<!-- CSS and Javascript -->
<link rel="stylesheet" href="assets/css/normalize.css">
<link rel="stylesheet" href="assets/css/style.css">
<script src="assets/js/app.js" defer></script>
</head>
<title>RUX</title>
</head>
<body>
<h1 class="title title">RUX</h1>
<!--https://www.youtube.com/watch?v=vJNVramny9k use this ?-->
</body>
</html>