pro/2022_WEBSITE_kosmopolit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ajout du script pour les fonts

Browse Source
This commit is contained in:
hugogogo
2021-05-16 20:00:33 +02:00
parent b7a64f7f80
commit 4d6290a3e8
9 changed files with 79 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
fr/actualites.html
View File

@@ -10,6 +10,7 @@
<link href="./styles/style.css" type="text/css" rel="stylesheet"> <link href="./styles/style.css" type="text/css" rel="stylesheet">
<link href="./styles/actualites.css" type="text/css" rel="stylesheet"> <link href="./styles/actualites.css" type="text/css" rel="stylesheet">
<style> html {visibility: hidden; opacity: 0;} </style> <style> html {visibility: hidden; opacity: 0;} </style>
<script src="./fr/script.js" defer></script>
</head> </head>
<body> <body>

1
fr/lettres.html
View File

@@ -10,6 +10,7 @@
<link href="./styles/style.css" type="text/css" rel="stylesheet"> <link href="./styles/style.css" type="text/css" rel="stylesheet">
<link href="./styles/lettres.css" type="text/css" rel="stylesheet"> <link href="./styles/lettres.css" type="text/css" rel="stylesheet">
<style> html {visibility: hidden; opacity: 0;} </style> <style> html {visibility: hidden; opacity: 0;} </style>
<script src="./fr/script.js" defer></script>
</head> </head>
<body> <body>

1
fr/lettres/lettres_2021.html
View File

@@ -10,6 +10,7 @@
<link href="./styles/style.css" type="text/css" rel="stylesheet"> <link href="./styles/style.css" type="text/css" rel="stylesheet">
<link href="./styles/lettres_2021.css" type="text/css" rel="stylesheet"> <link href="./styles/lettres_2021.css" type="text/css" rel="stylesheet">
<style> html {visibility: hidden; opacity: 0;} </style> <style> html {visibility: hidden; opacity: 0;} </style>
<script src="./fr/script.js" defer></script>
</head> </head>
<body> <body>

1
fr/litterall.html
View File

@@ -10,6 +10,7 @@
<link href="./styles/litterall.css" type="text/css" rel="stylesheet"> <link href="./styles/litterall.css" type="text/css" rel="stylesheet">
<link href="./styles/style.css" type="text/css" rel="stylesheet"> <link href="./styles/style.css" type="text/css" rel="stylesheet">
<style> html {visibility: hidden; opacity: 0;} </style> <style> html {visibility: hidden; opacity: 0;} </style>
<script src="./fr/script.js" defer></script>
</head> </head>
<body> <body>

49
fr/script.js
View File

@@ -1,4 +1,45 @@
let nav = document.getElementsByClassName("nav_left");
let anchor = document.createElement("a"); fonts();
anchor.innerHTML = "test";
nav[0].appendChild(anchor); function fonts()
{
let url = window.location.href.match(/\#.*/);
if (url == "#fonts")
{
// go to the div "nav"
let nav = document.getElementsByClassName("nav_left");
// add an anchor
let anchor = document.createElement("a");
anchor.setAttribute('id', "fonts");
anchor.innerHTML = `
<p>fonts</p>
<div id="fonts_dropdown">
<button onclick="change_font()">louisgeorge (defaut)</button>
<button onclick="change_font()">cabrion</button>
<button onclick="change_font()">paradroid (titres)</button>
<button onclick="change_font()">evolvanta</button>
<button onclick="change_font()">ptroot</button>
<button onclick="change_font()">tgalcefun</button>
</div>
`;
nav[0].appendChild(anchor);
}
}
function change_font()
{
let name = event.target.textContent.split(' ')[0];
console.log(name);
document.documentElement.style.cssText = "--font-texts: " + name;
/*
let content = getComputedStyle(document.documentElement).getPropertyValue('font-family');
let content = getComputedStyle(document.documentElement).getPropertyValue('@font-face');
let content = Array.from(document.styleSheets);
console.log(content);
*/
}

31
styles/fonts.css
View File

@@ -19,37 +19,6 @@
url('../fonts/louisgeorge/louis_george_cafe.woff') format('woff'); url('../fonts/louisgeorge/louis_george_cafe.woff') format('woff');
url('../fonts/louisgeorge/louis_george_cafe.ttf') format('truetype'); url('../fonts/louisgeorge/louis_george_cafe.ttf') format('truetype');
} }
@font-face {
font-family: 'louisgeorge_bold';
src: url('../fonts/louisgeorge/louis_george_cafe_bold.woff2') format('woff2'),
url('../fonts/louisgeorge/louis_george_cafe_bold.woff') format('woff');
url('../fonts/louisgeorge/louis_george_cafe_bold.ttf') format('truetype');
}
@font-face {
font-family: 'louisgeorge_bolditalic';
src: url('../fonts/louisgeorge/louis_george_cafe_bold_italic.woff2') format('woff2'),
url('../fonts/louisgeorge/louis_george_cafe_bold_italic.woff') format('woff');
url('../fonts/louisgeorge/louis_george_cafe_bold_italic.ttf') format('truetype');
}
@font-face {
font-family: 'louisgeorge_italic';
src: url('../fonts/louisgeorge/louis_george_cafe_italic.woff2') format('woff2'),
url('../fonts/louisgeorge/louis_george_cafe_italic.woff') format('woff');
url('../fonts/louisgeorge/louis_george_cafe_italic.ttf') format('truetype');
}
@font-face {
font-family: 'louisgeorge_light';
src: url('../fonts/louisgeorge/louis_george_cafe_light.woff2') format('woff2'),
url('../fonts/louisgeorge/louis_george_cafe_light.woff') format('woff');
url('../fonts/louisgeorge/louis_george_cafe_light.ttf') format('truetype');
}
@font-face {
font-family: 'louisgeorge_lightitalic';
src: url('../fonts/louisgeorge/louis_george_cafe_light_italic.woff2') format('woff2'),
url('../fonts/louisgeorge/louis_george_cafe_light_italic.woff') format('woff');
url('../fonts/louisgeorge/louis_george_cafe_light_italic.ttf') format('truetype');
}
/*test fonts*/ /*test fonts*/

2
styles/global.css
View File

@@ -45,7 +45,6 @@
--font-titles: 'paradroid'; --font-titles: 'paradroid';
--font-texts: 'louisgeorge'; --font-texts: 'louisgeorge';
--font-fallback: 'cabrion'; --font-fallback: 'cabrion';
--font-fallback2: 'ptroot';
/* colors texts */ /* colors texts */
@@ -61,3 +60,4 @@
--footer-height: 150px; --footer-height: 150px;
} }

28
styles/skeleton.css vendored
View File

@@ -80,3 +80,31 @@ footer iframe {
} }
/*- - - - - - - - - - - - - - - - - - - - -*/
/* test for fonts */
/*- - - - - - - - - - - - - - - - - - - - -*/
.nav_left #fonts {
flex-direction: column;
position: relative;
}
.nav_left #fonts:hover #fonts_dropdown {
display: flex;
}
.nav_left #fonts #fonts_dropdown {
position: absolute;
top: 100%;
left: 0px;
flex-direction: column;
display: none;
}
.nav_left #fonts #fonts_dropdown button {
margin-left: 0px;
}

2
styles/text.css
View File

@@ -5,7 +5,7 @@ h1, h2, h3, h4, h5, h6, em {
font-family: var(--font-titles), var(--font-fallback), sans-serif; font-family: var(--font-titles), var(--font-fallback), sans-serif;
} }
a, p, li { a, p, li {
font-family: var(--font-texts), var(--font-fallback), var(--font-fallback2), sans-serif; font-family: var(--font-texts), var(--font-fallback), sans-serif;
} }
code { code {
font-family: monospace; font-family: monospace;