From 8a3bd58be1fce62bb6f222683d9e796869537377 Mon Sep 17 00:00:00 2001 From: keplyx <keplyx@gmail.com> Date: Thu, 13 Jun 2019 11:26:30 +0200 Subject: [PATCH] Various style improvements --- assets/css/style.css | 133 +++++++++++++++++++++++++++++-------------- downloads.php | 2 +- index.php | 2 +- info.php | 2 +- stats.php | 14 ++--- 5 files changed, 100 insertions(+), 53 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index f9b7128..d51718f 100755 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -29,7 +29,10 @@ table { Theme Styles *******************************************************************************/ -@font-face { font-family: Harry-P; src: url('../fonts/HARRYP__.TTF'); } +@font-face { + font-family: Harry-P; + src: url('../fonts/HARRYP__.TTF'); +} body { box-sizing: border-box; @@ -98,7 +101,7 @@ a:hover, a:focus { color: #f2f2f2; } -#hidea:hover{ +#hidea:hover { text-shadow: 0 0 4px #7ffd78; } @@ -154,10 +157,10 @@ td { border: 1px solid #212121; } -.copyright{ - color: #ccc; - font-size: 14px; - text-shadow: #000 0 0 1px; +.copyright { + color: #fff; + font-size: 0.9rem; + text-shadow: #000 0 0 4px; } .video { @@ -300,17 +303,17 @@ Full-Width Styles } #bg_ver { - background: url("../images/bg_ver.jpg") ; + background: url("../images/bg_ver.jpg"); background-size: cover; } #bg_boo { - background: url("../images/bg_boo.jpg") ; + background: url("../images/bg_boo.jpg"); background-size: cover; } #bg_pek { - background: url("../images/bg_pek.jpg") ; + background: url("../images/bg_pek.jpg"); background-size: cover; } @@ -318,10 +321,12 @@ Full-Width Styles height: 200px; background: linear-gradient(to top, #1c1c1c, transparent 90%); } + #main-fading-bottom-edge { height: 200px; background: linear-gradient(to bottom, #1c1c1c, transparent 90%); } + #main-content-wrap { background: #1c1c1c; } @@ -335,7 +340,7 @@ Full-Width Styles } -#table-coms{ +#table-coms { width: 100%; table-layout: auto; text-align: center; @@ -344,27 +349,27 @@ Full-Width Styles margin-bottom: 0px; } -#table-coms .spacer{ +#table-coms .spacer { width: 20%; } -#table-coms td{ +#table-coms td { vertical-align: middle; border: none; padding: 0; width: 30%; } -#table-coms img{ +#table-coms img { height: 100px; } -.com-description{ +.com-description { width: 100%; font-weight: bold; } -#back-button{ +#back-button { top: 0; left: 0; position: fixed; @@ -405,7 +410,7 @@ Full-Width Styles padding: 5px; height: 50px; width: 50px; - margin:auto; + margin: auto; } #credits-list svg { @@ -413,18 +418,22 @@ Full-Width Styles width: 50px; } -#credits-list a:hover{ +#credits-list a:hover { color: #a3a7b3; } -#main-pages{ +#main-pages { width: 100%; display: inline-grid; padding: 0; vertical-align: middle; } -.main-link{ +#home-subtitle { + text-shadow: 0 0 10px #000; +} + +.main-link { width: 85px; height: 85px; margin: 2px; @@ -432,20 +441,22 @@ Full-Width Styles vertical-align: middle; padding: 0; color: #e0e0e0; + text-shadow: 0 0 10px #000; } -.main-link:hover{ +.main-link:hover { color: rgba(233, 184, 47, 0.8); } -#main-link-container{ +#main-link-container { display: block; } .main-logo { font-size: 70px; - margin:auto; + margin: auto; display: inline-flex; + text-shadow: 0 0 10px #000; } .main-logo svg { @@ -459,12 +470,12 @@ Full-Width Styles } -#list-blouse{ +#list-blouse { text-align: left; list-style: square; } -#map svg path{ +#map svg path { transition: 0.3s; } @@ -474,30 +485,38 @@ Full-Width Styles } -.team-button{ +#teamButtonContainer { + display: block; +} - border-radius: 10px 10px 0 0; +.team-button { + border-radius: 10px; font-size: 20px; cursor: pointer; + padding: 10px; + margin: 10px; } -.team-button#buttonGli{ - color: #ff000f; -background-color: rgb(255, 135, 142); -border-color: #1a5dad; --webkit-transition: 0.3s; --moz-transition: 0.3s; --ms-transition: 0.3s; --o-transition: 0.3s; -transition: 0.3s; + +.team-button#buttonGli { + color: #9c000a; + background-color: rgb(255, 135, 142); + border-color: #1a5dad; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -ms-transition: 0.3s; + -o-transition: 0.3s; + transition: 0.3s; } + .team-button#buttonGli:hover { color: #b30006; background-color: #ff7d7f; border-color: #1f6fce; box-shadow: 0 0 10px #ff506d; } -.team-button#buttonBoo{ - color: #c29d00; + +.team-button#buttonBoo { + color: #917100; background-color: #fafd78; border-color: #1a5dad; -webkit-transition: 0.3s; @@ -506,13 +525,15 @@ transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } + .team-button#buttonBoo:hover { color: #a28100; background-color: #f7fd51; border-color: #fdf71e; box-shadow: 0 0 10px #fdf71e; } -.team-button#buttonPek{ + +.team-button#buttonPek { color: #0d7b00; background-color: #7ffd78; border-color: #1a5dad; @@ -522,14 +543,16 @@ transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } + .team-button#buttonPek:hover { color: #0c5700; background-color: #6bfd5f; border-color: #8afd6b; box-shadow: 0 0 10px #7efd34; } -.team-button#buttonVer{ - color: #1b3aff; + +.team-button#buttonVer { + color: #1226a7; background-color: #60bdff; border-color: #9be7ff; -webkit-transition: 0.3s; @@ -538,6 +561,7 @@ transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } + .team-button#buttonVer:hover { color: #0008a5; background-color: #48a7ff; @@ -582,52 +606,67 @@ Small Device Styles body { font-size: 14px; } + .video { width: 240px; height: 135px; } + .inner { min-width: 320px; max-width: 480px; } + #title { font-size: 32px; } + h1 { font-size: 28px; } + h2 { font-size: 24px; } + h3 { font-size: 21px; } + h4 { font-size: 18px; } + h5 { font-size: 14px; } + h6 { font-size: 12px; } + code, pre { font-size: 11px; } + #table-wrapper { width: 100%; overflow: scroll; } - #table-coms .spacer{ + + #table-coms .spacer { width: 0; } - #table-coms td{ + + #table-coms td { width: 50%; } + .main-link { width: 40px; height: 40px; } + .main-logo { font-size: 32px; } @@ -637,36 +676,46 @@ Small Device Styles body { font-size: 14px; } + .inner { min-width: 240px; max-width: 320px; } + #title { font-size: 28px; } + h1 { font-size: 24px; } + h2 { font-size: 21px; } + h3 { font-size: 18px; } + h4 { font-size: 16px; } + h5 { font-size: 14px; } + h6 { font-size: 12px; } + code, pre { min-width: 240px; max-width: 320px; font-size: 11px; } + #table-wrapper { width: 100%; overflow: scroll; diff --git a/downloads.php b/downloads.php index 606e0fe..697b4ba 100755 --- a/downloads.php +++ b/downloads.php @@ -2,7 +2,7 @@ ob_start(); // Start reading html ?> <div class="inner"> - <h1>Les Téléchargements</h1> + <h1>Les Telechargements</h1> </div> <?php diff --git a/index.php b/index.php index e312519..d390b66 100755 --- a/index.php +++ b/index.php @@ -50,7 +50,7 @@ require_once 'includes/score_functions.php'; $platformID = 'main-score'; include("includes/score_counter.php"); ?> - <h4>Semaine d'Accueil INSA Toulouse 2019</h4> + <h4 id="home-subtitle">Semaine d'Accueil INSA Toulouse 2019</h4> <div id="main-link-container"> <?php $is_image = false; diff --git a/info.php b/info.php index c95269a..a4533dd 100644 --- a/info.php +++ b/info.php @@ -32,7 +32,7 @@ ob_start(); // Start reading html </li> <br id="arnaud"> <li> - Sinon y'a Arnaud, le créateur du site, mais là il est au Canada donc il pourra pas trop te répondre (vergnet + Sinon y'a Arnaud, le créateur du site, mais là il est en Suède donc il pourra pas trop te répondre (vergnet @etud.insa-toulouse.fr ou Arnaud Vergnet sur Facebook) </li> </ul> diff --git a/stats.php b/stats.php index 83893bc..a0aa805 100755 --- a/stats.php +++ b/stats.php @@ -34,14 +34,12 @@ function get_stats($team) <br><br> <strong>Clique sur une équipe pour voir le détail de son score</strong> </p> - <br> - <div class="team-button" id="buttonGli" onclick="showScores('gli')">Glissefondor</div> - <br> - <div class="team-button" id="buttonPek" onclick="showScores('pek')">Peksentard</div> - <br> - <div class="team-button" id="buttonBoo" onclick="showScores('boo')">Boomsouffle</div> - <br> - <div class="team-button" id="buttonVer" onclick="showScores('ver')">Verredaigle</div> + <div id="teamButtonContainer"> + <div class="team-button" id="buttonGli" onclick="showScores('gli')">Glissefondor</div> + <div class="team-button" id="buttonPek" onclick="showScores('pek')">Peksentard</div> + <div class="team-button" id="buttonBoo" onclick="showScores('boo')">Boomsouffle</div> + <div class="team-button" id="buttonVer" onclick="showScores('ver')">Verredaigle</div> + </div> </div>