made website responsive

This commit is contained in:
Phuntsok Drak-pa 2019-02-10 20:34:32 +01:00
parent 6c5a7de071
commit d02e08bfbf
No known key found for this signature in database
GPG Key ID: 9CB34B6827C66D22
2 changed files with 77 additions and 22 deletions

View File

@ -7,13 +7,14 @@
<meta name="author" content="Lucien Cartier-Tilet" /> <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" /> <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:image" content="https://cdn.phundrak.fr/img/rich_preview.png" />
<meta property="og:title" content="Langues construites de Pundrak" /> <meta property="og:title" content="Lucien Cartier-Tilet" />
<meta property="og:description" content="Collection de documents et pages webs de linguistique et de langues construites de Pundrak" /> <meta property="og:description" content="Site web personnel de Lucien Cartier-Tilet" />
<meta name="twitter:card" content="summary" /> <meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@phundrak" /> <meta name="twitter:site" content="@phundrak" />
<meta name="twitter:creator" content="@phundrak" /> <meta name="twitter:creator" content="@phundrak" />
<meta name="description" content="Site web personnel de Lucien Cartier-Tilet" /> <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="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" /> <link rel="stylesheet" href="style/main.css" type="text/css" media="screen" />
</head> </head>
@ -41,7 +42,7 @@
</div> </div>
<div class="sidebar"> <div class="sidebar">
<img class="side-picture center" src="https://cdn.phundrak.fr/img/photo.jpg" /> <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>
<div class="header-container"> <div class="header-container">
<h4>Contact</h4> <h4>Contact</h4>
@ -53,7 +54,7 @@
<p>+33.(0)6.83.90.56.89</p> <p>+33.(0)6.83.90.56.89</p>
</div> </div>
</div> </div>
<div class="side-card"> <div class="side-card side-situation">
<div> <div>
<div class="header-container"> <div class="header-container">
<h4>Situation Pro</h4> <h4>Situation Pro</h4>
@ -66,7 +67,7 @@
</div> </div>
</div> </div>
<div class="side-card"> <div class="side-card side-bio">
<div> <div>
<div class="header-container"> <div class="header-container">
<h4>Présentation</h4> <h4>Présentation</h4>
@ -79,7 +80,7 @@
</div> </div>
</div> </div>
<div class="side-card"> <div class="side-card side-liens">
<div> <div>
<div class="header-container"> <div class="header-container">
<h4>Mes liens</h4> <h4>Mes liens</h4>

View File

@ -6,6 +6,7 @@ body {
grid-template-areas: grid-template-areas:
'ribbon ribbon' 'ribbon ribbon'
'sidebar content'; 'sidebar content';
grid-template-columns: 300px auto;
background-color: #3498db; background-color: #3498db;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -92,33 +93,42 @@ h2 {
transition: background-color 0.3s; 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 *******************************************************************/
.sidebar { .sidebar {
display: grid;
grid-template-areas:
'side-picture'
'side-contact'
'side-situation'
'side-bio'
'side-links';
grid-area: sidebar; grid-area: sidebar;
margin: 10px 5px 10px 10px; margin: 10px 5px 10px 10px;
width: 300px; grid-auto-rows: min-content;
} }
.side-picture { .side-picture {
grid-area: side-picture;
margin: 10px auto; 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 { .side-card {
margin: 10px; margin: 10px;
background-color: #ecf0f1; background-color: #ecf0f1;
@ -225,6 +235,7 @@ h5 {
width: 120%; width: 120%;
max-width: 90vw; max-width: 90vw;
z-index: 10; z-index: 10;
width: auto !important;
} }
.highlight-h1 { .highlight-h1 {
@ -271,3 +282,46 @@ h5 {
.list-no-style { .list-no-style {
list-style: none; 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';
}
}