Skip to content

Commit 5a53904

Browse files
johnsamuelwritesjohnsamuelwrites
committed
Update CSS
1 parent 862e5d2 commit 5a53904

8 files changed

Lines changed: 1502 additions & 386 deletions

File tree

‎fr/apropos.html‎

Lines changed: 192 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="utf-8"/>
55
<meta http-equiv="Content-Language" content="fr"/>
66
<link rel="shortcut icon" href="../images/logo/favicon.png"/>
7-
<title>À propos: John Samuel</title>
7+
<title>John Samuel</title>
88
<style type="text/css">
99
body{
1010
background-color: #FFFFFF;
@@ -25,7 +25,7 @@
2525
font-size: 2.0vmax;
2626
font-family: 'Arial';
2727
}
28-
.title a:link,
28+
.title a:link,
2929
.title a:visited{
3030
text-decoration:none;
3131
color:#FFFFFF;
@@ -53,6 +53,11 @@
5353
.content a:visited{
5454
color:#1B80CF;
5555
}
56+
.content ul{
57+
color:#1B80CF;
58+
line-height: 3.0vmax;
59+
list-style:none;
60+
}
5661
.home ul{
5762
margin: 0;
5863
padding: 0;
@@ -62,10 +67,51 @@
6267
.home li{
6368
position: relative;
6469
float: left;
70+
padding-top:15px;
6571
margin-right: 1em;
72+
font-family: 'Arial';
73+
}
74+
.home li:hover {
75+
display:block;
76+
}
77+
.home li:hover a:link,
78+
.home li:hover a:visited{
79+
text-decoration:none;
80+
padding:15px;
81+
color:#FFFFFF;
82+
background-color: #87634B;
83+
}
84+
.home ul ul {
85+
display:none;
86+
position:absolute;
87+
padding:5px;
88+
}
89+
.home ul ul li{
90+
float:none;
91+
padding-left:0px;
92+
padding-top:15px;
93+
padding-bottom:15px;
94+
width:150px;
95+
}
96+
.home li:hover ul{
97+
display:block;
98+
}
99+
.content {
100+
line-height: 1.6em;
101+
font-size: 1.3vmax;
102+
font-family: 'Arial';
103+
margin-top: 8vh;
104+
}
105+
.content h3,h2,h4{
106+
color:#1B80CF;
107+
}
108+
.content a:link,
109+
.content a:visited{
110+
color:#1B80CF;
66111
}
67112
.home a:link,
68113
.home a:visited{
114+
text-decoration:none;
69115
color: #D3D3D3;
70116
}
71117
.page {
@@ -74,11 +120,132 @@
74120
margin-left:30vw;
75121
overflow: auto;
76122
padding: 0 1em;
77-
font-family: 'Arial';
78123
}
79124
.page img {
80-
max-width:50%;
81-
max-height:50%;
125+
max-width:90%;
126+
max-height:90%;
127+
border:0;
128+
}
129+
#backgroundimage {
130+
opacity:0.7;
131+
left:30vw;
132+
position:fixed;
133+
z-index:0;
134+
}
135+
#foregroundtext {
136+
text-align:right;
137+
position:relative;
138+
max-width:80%;
139+
z-index:1;
140+
}
141+
@media (max-width: 600px), screen and (orientation: portrait) {
142+
body {
143+
max-width:100%;
144+
max-height:100%;
145+
}
146+
#sidebar {
147+
position: fixed;
148+
background-color: #87634B;
149+
top: 0;
150+
left: 0;
151+
bottom: 60vh;
152+
width:100vw;
153+
}
154+
#sidebar .title {
155+
position:relative;
156+
text-align: center;
157+
top: 15vh;
158+
line-height: 7vh;
159+
font-size: 3.2vmax;
160+
font-family: 'Arial';
161+
}
162+
#sidebar a:link,
163+
#sidebar a:visited{
164+
text-decoration:none;
165+
color:#FFFFFF;
166+
}
167+
.content {
168+
line-height: 3.8vmax;
169+
font-size: 3.0vmax;
170+
font-family: 'Arial';
171+
}
172+
.content a:link,
173+
.content a:visited{
174+
color:#1B80CF;
175+
}
176+
.page {
177+
top: 40vh;
178+
width:100%;
179+
height:80vh;
180+
margin-left:0vw;
181+
}
182+
.page img {
183+
max-width:100%;
184+
max-height:100%;
185+
border:0;
186+
}
187+
#backgroundimage {
188+
opacity:0.7;
189+
position:fixed;
190+
left:0vw;
191+
bottom:10vh;
192+
z-index:0;
193+
}
194+
#foregroundtext {
195+
text-align:right;
196+
top:30vh;
197+
max-width:90%;
198+
z-index:1;
199+
}
200+
.home {
201+
text-align: left;
202+
font-family: 'Arial';
203+
font-size: 2.0vmax;
204+
color: #D3D3D3;
205+
}
206+
.home a:link,
207+
.home a:visited{
208+
text-decoration:none;
209+
color: #D3D3D3;
210+
}
211+
.home ul{
212+
font-size:1.6vmax;
213+
line-height: 4.0vh;
214+
}
215+
.content ul{
216+
color:#1B80CF;
217+
font-size: 2.0vmax;
218+
line-height: 5.0vmax;
219+
list-style:none;
220+
}
221+
}
222+
@media (max-width: 800px) and screen and (orientation: landscape) {
223+
.content ul{
224+
font-size: 2.0vmax;
225+
line-height: 4.0vmax;
226+
}
227+
.home{
228+
font-size:1.6vmax;
229+
}
230+
.home a:link,
231+
.home a:visited{
232+
text-decoration:none;
233+
color: #D3D3D3;
234+
}
235+
}
236+
@media (max-width: 600px) and screen and (orientation: landscape) {
237+
.content ul{
238+
font-size: 2.5vmax;
239+
line-height: 4.0vmax;
240+
}
241+
.home{
242+
font-size:1.6vmax;
243+
}
244+
.home a:link,
245+
.home a:visited{
246+
text-decoration:none;
247+
color: #D3D3D3;
248+
}
82249
}
83250
</style>
84251
</head>
@@ -128,14 +295,27 @@ <h1><a href="./index.html"><span property="headline">John Samuel</span></a></h1>
128295
</div>
129296
<div class="content">
130297
<br/>
131-
<img src="../images/writings/trees-boat-landscape.svg"
132-
style="opacity:0.7;filter:alpha(opacity=70);" alt="Coconut tree and boat"/>
133-
<h3>Personnelle</h3>
134-
<ul>
135-
<li><a href="recherche/index.html">CV</a></li>
136-
<li><a href="ecrits/livres-lus.html">Quelques livres lus</a></li>
137-
<li><a href="avertissement.html">Avertissement</a></li>
298+
<img property="image" src="../images/writings/trees-boat-landscape.svg" id="backgroundimage" alt="Coconut tree and boat"/>
299+
<div id="foregroundtext">
300+
<h3>Personnel</h3>
301+
<ul typeof="BreadcrumbList">
302+
<li property="itemListElement" typeof="ListItem">
303+
<a href="recherche/index.html">
304+
<span property="name">CV</span>
305+
</a>
306+
</li>
307+
<li property="itemListElement" typeof="ListItem">
308+
<a href="ecrits/livres-lus.html">
309+
<span property="name">Quelques livres lus</span>
310+
</a>
311+
</li>
312+
<li property="itemListElement" typeof="ListItem">
313+
<a href="avertissement.html">
314+
<span property="name">Avertissement</span>
315+
</a>
316+
</li>
138317
</ul>
318+
</div>
139319
</div>
140320
</div>
141321
</body>

0 commit comments

Comments
 (0)