made website responsive
This commit is contained in:
Phuntsok Drak-pa
parent
6c5a7de071
commit
d02e08bfbf
13
index.html
13
index.html
|
|
@ -7,13 +7,14 @@
|
|||
<meta name="author" content="Lucien Cartier-Tilet" />
|
||||
<link rel="sortcut icon" href="https://cdn.phundrak.fr/img/mahakala-128x128.png" type="img/png" media="screen" />
|
||||
<meta property="og:image" content="https://cdn.phundrak.fr/img/rich_preview.png" />
|
||||
<meta property="og:title" content="Langues construites de P’undrak" />
|
||||
<meta property="og:description" content="Collection de documents et pages webs de linguistique et de langues construites de P’undrak" />
|
||||
<meta property="og:title" content="Lucien Cartier-Tilet" />
|
||||
<meta property="og:description" content="Site web personnel de Lucien Cartier-Tilet" />
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:site" content="@phundrak" />
|
||||
<meta name="twitter:creator" content="@phundrak" />
|
||||
<meta name="description" content="Site web personnel de Lucien Cartier-Tilet" />
|
||||
<meta name="keywords" content="Lucien, Cartier, Tilet, Cartier-Tilet, université, informatique, étudiant, university, college, student, computer, computer science, science, ALYS, LEORA, VoxWave, voice, vocal synthesis, French, English, Japanese, AlterEgo, VOCALOID, UTAU, CeVIO, Chipspeech, Plogue, linguistique, langue, hjelp, hjalpi, conlang, conlangs" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="style/main.css" type="text/css" media="screen" />
|
||||
</head>
|
||||
|
||||
|
|
@ -41,7 +42,7 @@
|
|||
</div>
|
||||
<div class="sidebar">
|
||||
<img class="side-picture center" src="https://cdn.phundrak.fr/img/photo.jpg" />
|
||||
<div class="side-card">
|
||||
<div class="side-card side-contact">
|
||||
<div>
|
||||
<div class="header-container">
|
||||
<h4>Contact</h4>
|
||||
|
|
@ -53,7 +54,7 @@
|
|||
<p>+33.(0)6.83.90.56.89</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="side-card">
|
||||
<div class="side-card side-situation">
|
||||
<div>
|
||||
<div class="header-container">
|
||||
<h4>Situation Pro</h4>
|
||||
|
|
@ -66,7 +67,7 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
<div class="side-card">
|
||||
<div class="side-card side-bio">
|
||||
<div>
|
||||
<div class="header-container">
|
||||
<h4>Présentation</h4>
|
||||
|
|
@ -79,7 +80,7 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
<div class="side-card">
|
||||
<div class="side-card side-liens">
|
||||
<div>
|
||||
<div class="header-container">
|
||||
<h4>Mes liens</h4>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ body {
|
|||
grid-template-areas:
|
||||
'ribbon ribbon'
|
||||
'sidebar content';
|
||||
grid-template-columns: 300px auto;
|
||||
background-color: #3498db;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -92,33 +93,42 @@ h2 {
|
|||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
/* .ribbon li::before { */
|
||||
/* top: 0; */
|
||||
/* left: 0; */
|
||||
/* width: 100%; */
|
||||
/* height: 0%; */
|
||||
/* content: ""; */
|
||||
/* position: absolute; */
|
||||
/* background: #000; */
|
||||
/* transition: height 0.5s; */
|
||||
/* } */
|
||||
|
||||
/* .ribbon li:hover::before { */
|
||||
/* height: 100%; */
|
||||
/* } */
|
||||
|
||||
/* sidebar *******************************************************************/
|
||||
|
||||
.sidebar {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
'side-picture'
|
||||
'side-contact'
|
||||
'side-situation'
|
||||
'side-bio'
|
||||
'side-links';
|
||||
grid-area: sidebar;
|
||||
margin: 10px 5px 10px 10px;
|
||||
width: 300px;
|
||||
grid-auto-rows: min-content;
|
||||
}
|
||||
|
||||
.side-picture {
|
||||
grid-area: side-picture;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.side-contact {
|
||||
grid-area: side-contact;
|
||||
}
|
||||
|
||||
.side-situation {
|
||||
grid-area: side-situation;
|
||||
}
|
||||
|
||||
.side-bio {
|
||||
grid-area: side-bio;
|
||||
}
|
||||
|
||||
.side-liens {
|
||||
grid-area: side-links;
|
||||
}
|
||||
|
||||
.side-card {
|
||||
margin: 10px;
|
||||
background-color: #ecf0f1;
|
||||
|
|
@ -225,6 +235,7 @@ h5 {
|
|||
width: 120%;
|
||||
max-width: 90vw;
|
||||
z-index: 10;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.highlight-h1 {
|
||||
|
|
@ -271,3 +282,46 @@ h5 {
|
|||
.list-no-style {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* smaller displays **********************************************************/
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.two-col-ul {
|
||||
collumns: 1;
|
||||
-webkit-columns: 1;
|
||||
-moz-columns: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1050px) {
|
||||
body {
|
||||
grid-template-areas:
|
||||
'ribbon'
|
||||
'sidebar'
|
||||
'content';
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: auto auto auto;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
grid-template-areas:
|
||||
'side-picture side-links'
|
||||
'side-contact side-situation'
|
||||
'side-bio side-bio';
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.sidebar {
|
||||
grid-template-areas:
|
||||
'side-picture'
|
||||
'side-contact'
|
||||
'side-situation'
|
||||
'side-bio'
|
||||
'side-links';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue