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

essai de reglage largeur texte main

Browse Source
This commit is contained in:
hugogogo
2021-03-08 17:43:18 +01:00
parent edd79b3848
commit 360e10592a
4 changed files with 18 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
pages/litterall.html
View File

@@ -9,22 +9,6 @@
<meta name="keywords" content="truc, bidule, chouette"> <meta name="keywords" content="truc, bidule, chouette">
<link href="./styles/style.css" type="text/css" rel="stylesheet"> <link href="./styles/style.css" type="text/css" rel="stylesheet">
<link href="./styles/litterall.css" type="text/css" rel="stylesheet"> <link href="./styles/litterall.css" type="text/css" rel="stylesheet">
<style>
span.link {
color: var(--color-link);
cursor: pointer;
}
span.link:hover {
color: var(--color-link-hover);
}
span.link_visited {
color: var(--color-link-visited);
cursor: pointer;
}
span.link_visited:hover {
color: var(--color-link-hover);
}
</style>
</head> </head>
<body> <body>
<nav class="sticky"> <nav class="sticky">
@@ -60,8 +44,8 @@
</div> </div>
</div> </div>
<br><br> <br><br>
<p>Cette revue <span class="link">publie une fois</span> par an un choix de textes germanophones, inédits en traduction française.</p> <p>Cette revue publie une fois par an un choix de textes germanophones, inédits en traduction française.</p>
<p>Poésie, essai, récit, nouvelle, discours, <span class="link_visited">extrait de roman</span> – nous mettons en avant des voix singulières de la littérature et des formes créatives.</p> <p>Poésie, essai, récit, nouvelle, discours, extrait de roman – nous mettons en avant des voix singulières de la littérature et des formes créatives.</p>
<p>Fondée en 1989 par Les Amis du Roi des Aulnes et poursuivie depuis 2020 par KOSMOPOLIT, la revue peut prendre un tour thématique ou bien suivre sa propre voie, dans un souci de composition d’ensemble.</p> <p>Fondée en 1989 par Les Amis du Roi des Aulnes et poursuivie depuis 2020 par KOSMOPOLIT, la revue peut prendre un tour thématique ou bien suivre sa propre voie, dans un souci de composition d’ensemble.</p>
<div class="image full"> <div class="image full">
<img src="./docs/revues/bibliotheque_litterall.jpg" alt="bibliotheque litterall"> <img src="./docs/revues/bibliotheque_litterall.jpg" alt="bibliotheque litterall">
@@ -184,7 +168,7 @@
<p>litterall numero 01</p> <p>litterall numero 01</p>
</div> </div>
</div> </div>
<p class="date right"><i><small>mis à jour le 01/03/2020</small></i></p> <p class="date right"><i><small>le 01/03/2021</small></i></p>
</main> </main>
<aside class="relative_content"> <aside class="relative_content">

9
styles/global.css
View File

@@ -62,8 +62,6 @@ html {
/*BODY*/ /*BODY*/
/* the page is designed for a maximum screen*/ /* the page is designed for a maximum screen*/
body { body {
max-width: var(--max-screen);
margin: auto;
background-color: var(--base-back-color); background-color: var(--base-back-color);
} }
@@ -112,6 +110,7 @@ body nav a.nav_logo {
/*CONTAINER*/ /*CONTAINER*/
body .container_main { body .container_main {
margin: auto;
flex-direction: row; flex-direction: row;
} }
@@ -139,6 +138,7 @@ body aside.page_content .table_box > * {
/*MAIN*/ /*MAIN*/
body main { body main {
max-width: var(--max-main-width);
} }
body main > * { body main > * {
margin: var(--gap-unit) 0px; margin: var(--gap-unit) 0px;
@@ -152,11 +152,6 @@ body main h2 {
border-bottom: 1px solid lightgrey; border-bottom: 1px solid lightgrey;
} }
/*PATH*/
body main .page_path {
margin-top: 0px;
}
/*TITLE*/ /*TITLE*/
body main .page_title { body main .page_title {
position: relative; position: relative;

11
styles/style.css
View File

@@ -33,32 +33,35 @@
--font-texts: 'louisgeorge'; --font-texts: 'louisgeorge';
--font-fallback: 'cabrion'; --font-fallback: 'cabrion';
--max-p-width: 700px;
/* colors texts */ /* colors texts */
/*text*/ /*text*/
--color-text: hsl(0, 0%, 10%); --color-text: hsl(0, 0%, 10%);
--color-text-light: hsl(0, 0%, 25%); --color-text-light: hsl(0, 0%, 25%);
--color-text-strong: hsl(0, 0%, 5%); --color-text-strong: hsl(0, 0%, 5%);
/*links*/ /*links*/
--hue-link: 59;
--hue-link: 189;
--hue-link: 324; --hue-link: 324;
--hue-link: 189;
--hue-link: 59;
--color-link: hsl(var(--hue-link), 70%, 40%); --color-link: hsl(var(--hue-link), 70%, 40%);
--color-link-hover: hsl(var(--hue-link), 70%, 50%); --color-link-hover: hsl(var(--hue-link), 70%, 50%);
--color-link-active: hsl(var(--hue-link), 70%, 50%); --color-link-active: hsl(var(--hue-link), 70%, 50%);
--color-link-visited: hsl(var(--hue-link), 70%, 20%); --color-link-visited: hsl(var(--hue-link), 60%, 30%);
/*titles*/ /*titles*/
--color-title-1: hsl(0, 0%, 10%); --color-title-1: hsl(0, 0%, 10%);
--color-title-2: hsl(0, 0%, 10%); --color-title-2: hsl(0, 0%, 10%);
/*skeleton*/ /*skeleton*/
--gap-unit: 10px; --gap-unit: 10px;
--max-screen: 1060px; --max-screen: 1560px;
--base-font-size: 10px; --base-font-size: 10px;
--nav-height: 40px; --nav-height: 40px;
--base-back-color: white; --base-back-color: white;
--aside-left-width: 200px; --aside-left-width: 200px;
--aside-right-width: 200px; --aside-right-width: 200px;
--aside-margin: 30px; --aside-margin: 30px;
--max-main-width: var(--max-p-width);
} }

10
styles/text.css
View File

@@ -9,16 +9,17 @@ a, p, li {
font-family: var(--font-texts), var(--font-fallback), sans-serif; font-family: var(--font-texts), var(--font-fallback), sans-serif;
} }
/*colors*/ /*colors*/
a, a:link { /*links when they are part of a text*/
p a, p a:link {
color: var(--color-link); color: var(--color-link);
} }
a:visited { p a:visited {
color: var(--color-link-visited); color: var(--color-link-visited);
} }
a:hover { p a:hover {
color: var(--color-link-hover); color: var(--color-link-hover);
} }
a:active { p a:active {
color: var(--color-link-active); color: var(--color-link-active);
} }
p, span { p, span {
@@ -34,6 +35,7 @@ main {
p { p {
font-size: 1.8em; font-size: 1.8em;
line-height: 1.5em; line-height: 1.5em;
max-width: var(--max-p-width);
} }
h1 { h1 {
font-size: 3.5em; font-size: 3.5em;