- made font available on all elements with body and pre

- added an example for later better accessibility with pre
This commit is contained in:
asus
2023-11-17 18:10:01 +01:00
parent 7e0cb01352
commit 0dfafb81d2
3 changed files with 35 additions and 13 deletions

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/global.css" type="text/css" rel="stylesheet"> <link href="./styles/global.css" type="text/css" rel="stylesheet">
<link href="./styles/text.css" type="text/css" rel="stylesheet"> <link href="./styles/text.css" type="text/css" rel="stylesheet">
<link href="./styles/pre.css" type="text/css" rel="stylesheet">
<link href="./styles/frames.css" type="text/css" rel="stylesheet"> <link href="./styles/frames.css" type="text/css" rel="stylesheet">
<link href="./styles/banners.css" type="text/css" rel="stylesheet"> <link href="./styles/banners.css" type="text/css" rel="stylesheet">
</head> </head>
@@ -40,6 +41,26 @@
:  57447 U+E067 :  57447 U+E067
<section style="height: 200px;" class="left child-left-dense horizontal"> <section style="height: 200px;" class="left child-left-dense horizontal">
accessibility pre : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre#specifications
<figure>
<pre role="img" aria-label="ASCII COW">
___________________________
&lt; I'm an expert in my field. &gt;
---------------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
</pre>
<figcaption id="cow-caption">
A cow saying, "I'm an expert in my field." The cow is illustrated using
preformatted text characters.
</figcaption>
</figure>
--> -->
<body> <body>

11
styles/pre.css Normal file
View File

@@ -0,0 +1,11 @@
pre {
line-height: 0.8;
font-size: 1.2rem;
}
@media screen and (max-width: 530px) {
pre {
font-size: 2.2vw;
}
}

View File

@@ -5,18 +5,14 @@
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
h1, h2, h3, h4, h5, h6, p, pre, li { /*
*/
body, pre {
font-family: "notomono", monospace; font-family: "notomono", monospace;
font-size: 1.5rem; font-size: 1.5rem;
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
p, li {
}
pre {
line-height: 0.8;
font-size: 1.2rem;
}
ul { ul {
/* /*
*/ */
@@ -29,9 +25,3 @@ li {
li::marker { li::marker {
font-size: 1.2rem; font-size: 1.2rem;
} }
@media screen and (max-width: 530px) {
pre {
font-size: 2.2vw;
}
}