Site
/
initfest
11
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #22 from initLab/color-blind-safe-schedule-color-schema 

New schedule colors
This commit is contained in:
Vasil Kolev 2015-10-18 13:55:24 +03:00
parent 1bfc80a8fe 98af9b74b7
commit 907b4d6cd7
1 changed files with 307 additions and 291 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

598
css/styles.css
View File

@ -168,134 +168,134 @@
} }
body { body {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 16px; font-size: 16px;
font-family: 'Arimo', sans-serif; font-family: 'Arimo', sans-serif;
} }
@media all and (max-width: 400px) { @media all and (max-width: 400px) {
body { body {
font-size: 14px; font-size: 14px;
} }
} }
.content { .content {
max-width: 960px; max-width: 960px;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
} }
p { p {
margin: 0 0 1em 0; margin: 0 0 1em 0;
padding: 0; padding: 0;
line-height: 1.5em; line-height: 1.5em;
font-weight: 300; font-weight: 300;
} }
h1.big { h1.big {
font-size: 2.4em; font-size: 2.4em;
margin-top: 0; margin-top: 0;
margin-bottom: 0.6em; margin-bottom: 0.6em;
padding-top: 0; padding-top: 0;
} }
a { a {
color: #000; color: #000;
} }
a:hover { a:hover {
color: #7789b5; color: #7789b5;
} }
a img { a img {
border: none; border: none;
} }
h3 small { h3 small {
font-size: 0.65em; font-size: 0.65em;
} }
.tac { .tac {
text-align: center; text-align: center;
} }
@media all and (max-width: 960px) { @media all and (max-width: 960px) {
.content { .content {
padding: 0 1em; padding: 0 1em;
} }
} }
.left { float: left; } .left { float: left; }
.right { float: right; } .right { float: right; }
.cf::after, .cf::before { .cf::after, .cf::before {
content: " "; content: " ";
clear: both; clear: both;
display: block; display: block;
} }
/* Navigation */ /* Navigation */
nav { nav {
position: relative; position: relative;
height: 84px; height: 84px;
background: url("../img/navbg.jpg") repeat-x; background: url("../img/navbg.jpg") repeat-x;
} }
nav ul { nav ul {
float: right; float: right;
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
nav ul li { nav ul li {
position: relative; position: relative;
} }
nav .menu > li { nav .menu > li {
float: left; float: left;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
nav .menu > li { nav .menu > li {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
transition: border-top 200ms; transition: border-top 200ms;
-webkit-transition: border-top 200ms; -webkit-transition: border-top 200ms;
border-top: 0 solid #FFF; border-top: 0 solid #FFF;
} }
nav .menu > li:hover { nav .menu > li:hover {
border-top: 0.4em solid #A8D6FF; border-top: 0.4em solid #A8D6FF;
} }
.menu li.fa::before { .menu li.fa::before {
display: block; display: block;
padding: 30px 4px 0 4px; padding: 30px 4px 0 4px;
} }
.menu li.fa a { .menu li.fa a {
position: absolute; position: absolute;
display: block; display: block;
top: 0; top: 0;
left: 0; left: 0;
height: 52px; height: 52px;
width: 10px; width: 10px;
text-indent: -9999px; text-indent: -9999px;
} }
nav ul a { nav ul a {
color: #000; color: #000;
text-decoration: none; text-decoration: none;
display: block; display: block;
padding: 1.9em 0.4em 1.5em 0.4em; padding: 1.9em 0.4em 1.5em 0.4em;
} }
nav ul .sub-menu { nav ul .sub-menu {
display: none; display: none;
position: absolute; position: absolute;
background: #fff; background: #fff;
width: 200px; width: 200px;
left: 50%; left: 50%;
margin-left: -100px; margin-left: -100px;
box-shadow: 0 3px 5px -3px #000 box-shadow: 0 3px 5px -3px #000
} }
nav ul li:hover .sub-menu { nav ul li:hover .sub-menu {
display: block; display: block;
position: absolute; position: absolute;
} }
nav ul .sub-menu li, nav ul .sub-menu li,
@ -306,51 +306,51 @@ nav ul .sub-menu li a { padding: 1em 0; text-align: center; }
nav ul .sub-menu li { border-bottom: 1px solid #ccc; } nav ul .sub-menu li { border-bottom: 1px solid #ccc; }
nav ul .separator { nav ul .separator {
display: block; display: block;
width: 0.05em; width: 0.05em;
background: #B7B7B7; background: #B7B7B7;
height: 2em; height: 2em;
margin: 1.1em 0.4em 0 0.4em; margin: 1.1em 0.4em 0 0.4em;
} }
nav .logo { nav .logo {
display: block; display: block;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
} }
nav .selected { nav .selected {
font-weight: bold; font-weight: bold;
} }
@media all and (max-width: 840px) { @media all and (max-width: 840px) {
nav .logo { nav .logo {
display: none; display: none;
} }
nav .logo img { nav .logo img {
display: block; display: block;
max-height: 100%; max-height: 100%;
} }
nav { nav {
height: auto; height: auto;
background: none; background: none;
padding: 0.4em 0; padding: 0.4em 0;
border-bottom: 0.2em solid #d7ecff; border-bottom: 0.2em solid #d7ecff;
} }
nav ul { nav ul {
float: none; float: none;
} }
nav ul a { nav ul a {
padding: 0.2em; padding: 0.2em;
} }
nav ul .separator { nav ul .separator {
display: block; display: block;
width: 0.05em; width: 0.05em;
background: #B7B7B7; background: #B7B7B7;
height: 1em; height: 1em;
margin: 0.2em 0.2em 0 0.2em; margin: 0.2em 0.2em 0 0.2em;
} }
nav ul a:hover { nav ul a:hover {
border-top: 0 solid #A8D6FF; border-top: 0 solid #A8D6FF;
} }
nav .fa-twitter, nav .fa-facebook, nav .fa-rss { nav .fa-twitter, nav .fa-facebook, nav .fa-rss {
display: none; display: none;
} }
@ -359,145 +359,145 @@ nav .selected {
/* Banner */ /* Banner */
.banner { .banner {
height: 258px; height: 258px;
background: url("../img/banner.jpg") no-repeat; background: url("../img/banner.jpg") no-repeat;
background-size: cover; background-size: cover;
padding: 0.2em 0 0 0; padding: 0.2em 0 0 0;
} }
.banner img { .banner img {
display: block; display: block;
max-width: 100%; max-width: 100%;
height: 247px; height: 247px;
margin: 0 auto; margin: 0 auto;
} }
@media all and (max-width: 840px) { @media all and (max-width: 840px) {
.banner { display: none; } .banner { display: none; }
} }
/* Grid */ /* Grid */
.grid { .grid {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
} }
.grid::after { .grid::after {
content: " "; content: " ";
clear: both; clear: both;
display: block; display: block;
} }
.grid .col2 { .grid .col2 {
width: 50%; width: 50%;
float: left; float: left;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
.grid .col2+.col2, .grid .col3+.col3, .grid .col4+.col4 { .grid .col2+.col2, .grid .col3+.col3, .grid .col4+.col4 {
padding: 0 0 0 1em; padding: 0 0 0 1em;
} }
.grid .col3 { .grid .col3 {
width: 33%; width: 33%;
float: left; float: left;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
.grid .col3:nth-child(3n + 1) { .grid .col3:nth-child(3n + 1) {
clear: both; clear: both;
padding: 0; padding: 0;
} }
.grid .col4 { .grid .col4 {
width: 25%; width: 25%;
float: left; float: left;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
.grid .col4:nth-child(4n + 1) { .grid .col4:nth-child(4n + 1) {
clear: both; clear: both;
padding: 0; padding: 0;
} }
.grid .col-left { .grid .col-left {
width: 70%; width: 70%;
float: left; float: left;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
padding: 0 1.6em 0 0; padding: 0 1.6em 0 0;
} }
.grid .col-right { .grid .col-right {
width: 30%; width: 30%;
float: left; float: left;
margin-bottom: 2em; margin-bottom: 2em;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
.grid .col-right .content { .grid .col-right .content {
width: 100%; width: 100%;
} }
@media all and (max-width: 600px) { @media all and (max-width: 600px) {
.grid .col2, .grid .col3, .grid .col4, .grid .col-left, .grid .col-right { .grid .col2, .grid .col3, .grid .col4, .grid .col-left, .grid .col-right {
width: 100%; width: 100%;
float: none; float: none;
padding: 0 0 1em 0; padding: 0 0 1em 0;
} }
.grid .col2+.col2, .grid .col3+.col3, .grid .col4+.col4 { .grid .col2+.col2, .grid .col3+.col3, .grid .col4+.col4 {
padding: 0; padding: 0;
} }
} }
/* Separator */ /* Separator */
.separator { .separator {
width: 100%; width: 100%;
margin: 1.8em 0; margin: 1.8em 0;
height: 0.1em; height: 0.1em;
background: #7789b5; background: #7789b5;
} }
/* News */ /* News */
h4 { h4 {
margin: 1em 0 0 0; margin: 1em 0 0 0;
padding: 0; padding: 0;
height: 70px; height: 70px;
} }
p.info + p { p.info + p {
height: 240px; height: 240px;
overflow: hidden; overflow: hidden;
} }
.entry-content { .entry-content {
padding: 0 0 2em 0; padding: 0 0 2em 0;
} }
.info { .info {
color: #8F8F8F; color: #8F8F8F;
font-size: 0.6em; font-size: 0.6em;
margin: 0 0 1em 0; margin: 0 0 1em 0;
} }
.button { .button {
display: inline-block; display: inline-block;
padding: 0.4em 0.6em; padding: 0.4em 0.6em;
border-radius: 0.4em; border-radius: 0.4em;
background: #DEDEDE; background: #DEDEDE;
font-size: 0.8em; font-size: 0.8em;
margin: 1em 0 1em 0; margin: 1em 0 1em 0;
text-decoration: none; text-decoration: none;
border-bottom: 0.15em solid #999; border-bottom: 0.15em solid #999;
} }
/* Footer */ /* Footer */
footer { footer {
margin: -0.3em 0 0; margin: -0.3em 0 0;
padding-top: 1em; padding-top: 1em;
padding-bottom: 1em; padding-bottom: 1em;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
background: #ddd; background: #ddd;
} }
footer h3 { footer h3 {
@ -528,82 +528,82 @@ footer .content li a {
/* Sub navigation */ /* Sub navigation */
.subnav { .subnav {
margin-top: 1.6em; margin-top: 1.6em;
list-style: none; list-style: none;
padding-left: 0; padding-left: 0;
} }
.subnav .menu { .subnav .menu {
margin-left: -2.2em; margin-left: -2.2em;
} }
.subnav li { .subnav li {
float: left; float: left;
padding: 0; padding: 0;
margin: 0 1em 0 0; margin: 0 1em 0 0;
list-style: none outside; list-style: none outside;
} }
.subnav li.selected { .subnav li.selected {
font-weight: bold; font-weight: bold;
} }
.subnav a { .subnav a {
text-decoration: none; text-decoration: none;
} }
@media all and (max-width: 960px) { @media all and (max-width: 960px) {
.subnav { .subnav {
padding: 0 1em; padding: 0 1em;
} }
} }
/* Speaker */ /* Speaker */
.speaker { .speaker {
position: relative; position: relative;
margin: 0 0 2em 0; margin: 0 0 2em 0;
} }
.speaker::after { .speaker::after {
content: " "; content: " ";
clear: both; clear: both;
display: block; display: block;
} }
.speaker > img { .speaker > img {
/* width: 100px; */ /* width: 100px; */
float: left; float: left;
padding: 0.3em; padding: 0.3em;
background: #FFF; background: #FFF;
-moz-box-shadow: 0px 0px 1px 1px #999; -moz-box-shadow: 0px 0px 1px 1px #999;
-webkit-box-shadow: 0px 0px 1px 1px #999; -webkit-box-shadow: 0px 0px 1px 1px #999;
box-shadow: 0px 0px 1px 1px #999; box-shadow: 0px 0px 1px 1px #999;
margin: 0 1em 2em 0; margin: 0 1em 2em 0;
} }
.speaker .icons { .speaker .icons {
text-align: center; text-align: center;
display: inline-block; display: inline-block;
margin: 0 0 0 0.1em; margin: 0 0 0 0.1em;
} }
.speaker .icons a { .speaker .icons a {
display: inline-block; display: inline-block;
margin: 0 0.3em 0 0; margin: 0 0.3em 0 0;
} }
.speaker h3 { .speaker h3 {
margin: 0 0 0.4em 0; margin: 0 0 0.4em 0;
padding: 0; padding: 0;
} }
/* Sponsors */ /* Sponsors */
.sponsors-item { .sponsors-item {
padding: 0 0 2em 0; padding: 0 0 2em 0;
} }
.sponsors-item .col2 > img { .sponsors-item .col2 > img {
display: inline-block; display: inline-block;
margin: 0 0 2em 0; margin: 0 0 2em 0;
} }
.sponsors-frontpage a { .sponsors-frontpage a {
display: inline-block; display: inline-block;
padding: 0 2.2em 1em 0; padding: 0 2.2em 1em 0;
} }
/* Plugins */ /* Plugins */
.gmp_map_opts { .gmp_map_opts {
float: none !important; float: none !important;
margin-top: 2em !important; margin-top: 2em !important;
} }
@ -657,30 +657,30 @@ a.button:hover { opacity: 0.8; }
*********************************************/ *********************************************/
.members { .members {
margin: 0 0 2em 0; margin: 0 0 2em 0;
} }
.member { .member {
margin: 0 0 1em 0; margin: 0 0 1em 0;
} }
.member a { .member a {
display: block; display: block;
} }
.member a > img { .member a > img {
width: 100px; width: 100px;
max-width: 100%; max-width: 100%;
padding: 0.3em; padding: 0.3em;
background: #FFF; background: #FFF;
-moz-box-shadow: 0px 0px 1px 1px #999; -moz-box-shadow: 0px 0px 1px 1px #999;
-webkit-box-shadow: 0px 0px 1px 1px #999; -webkit-box-shadow: 0px 0px 1px 1px #999;
box-shadow: 0px 0px 1px 1px #999; box-shadow: 0px 0px 1px 1px #999;
} }
.member span { .member span {
display: block; display: block;
} }
.member .icons a { .member .icons a {
display: inline-block; display: inline-block;
margin: 0 0.3em 0 0; margin: 0 0.3em 0 0;
} }
/* from the old site */ /* from the old site */
@ -700,7 +700,7 @@ a.button:hover { opacity: 0.8; }
} }
.program table td.time { .program table td.time {
width: 130px; width: 130px;
vertical-align: baseline; vertical-align: baseline;
} }
.program table caption { .program table caption {
font-size: 120%; font-size: 120%;
@ -713,103 +713,119 @@ a.button:hover { opacity: 0.8; }
* Team members * Team members
*********************************************/ *********************************************/
.schedule { .schedule {
width: 100%; width: 100%;
font-size: 0.8em; font-size: 0.8em;
margin: 0 0 3em 0; margin: 0 0 3em 0;
clear: both; clear: both;
} }
.schedule-legend { .schedule-legend {
width: 300px; width: 300px;
} }
.schedule th, .schedule td { .schedule th, .schedule td {
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
border-right: 1px dotted #999; border-right: 1px dotted #999;
padding: 0.6em 0.4em; padding: 0.6em 0.4em;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
} }
.schedule-legend td { .schedule-legend td {
padding: 0.4em; padding: 0.4em;
} }
.schedule a { .schedule a {
border-bottom: dotted 1px #000; border-bottom: dotted 1px #000;
color: #000; color: #000;
} }
.schedule a:hover { .schedule a:hover {
border-bottom: none; border-bottom: none;
} }
.schedule tr td:first-child { .schedule tr td:first-child {
min-width: 82px; min-width: 82px;
} }
.schedule-day { .schedule-day {
font-weight: bold; font-weight: bold;
} }
.schedule-empty { .schedule-empty {
background: #FFF; background: #FFF;
} }
.schedule-social { .schedule-social {
background: #EDD7A7; background: #decf72;
} }
.schedule-technical { .schedule-technical {
background: #A4D183; background: #953c4f;
color: #FFF;
}
.schedule-technical a {
color: #FFF;
} }
.schedule-workshop { .schedule-workshop {
background: #E2E0E9; background: #E2E0E9;
}
.schedule-en::after {
content: " ";
background: url('../img/en_US.png');
width: 16px;
height: 11px;
display: block;
margin: 0.3em auto 0.3em auto;
}
.schedule-bg::after {
content: " ";
background: url('../img/bg_BG.png');
width: 16px;
height: 11px;
display: block;
margin: 0.3em auto 0.3em auto;
} }
.schedule-civic { .schedule-civic {
background: #E8AAAB; background: #6548a3;
color: #FFF;
}
.schedule-civic a {
color: #FFF;
} }
.schedule-advanced-technical { .schedule-advanced-technical {
background: #91C4DF; background: #750023;
color: #FFF;
}
.schedule-advanced-technical a {
color: #FFF;
} }
.schedule-open-biz { .schedule-open-biz {
background: #DECDCB; background: #9a9d29;
color: #FFF;
}
.schedule-open-biz a {
color: #FFF;
} }
.schedule-misc { .schedule-misc {
background: #B0E9EC; background: #ede6b6;
} }
.schedule-open-art { .schedule-open-art {
background: #ED9134; background: #88cbf0;
}
.schedule-en::after {
content: " ";
background: url('../img/en_US.png');
width: 16px;
height: 11px;
display: block;
margin: 0.3em auto 0.3em auto;
}
.schedule-bg::after {
content: " ";
background: url('../img/bg_BG.png');
width: 16px;
height: 11px;
display: block;
margin: 0.3em auto 0.3em auto;
} }
.schedule-avatar { .schedule-avatar {
float: left; float: left;
padding: 0.3em; padding: 0.3em;
background: #FFF; background: #FFF;
-moz-box-shadow: 0px 0px 1px 1px #999; -moz-box-shadow: 0px 0px 1px 1px #999;
-webkit-box-shadow: 0px 0px 1px 1px #999; -webkit-box-shadow: 0px 0px 1px 1px #999;
box-shadow: 0px 0px 1px 1px #999; box-shadow: 0px 0px 1px 1px #999;
margin: 0 1em 2em 0; margin: 0 1em 2em 0;
} }
p img { p img {
max-width: 100%; max-width: 100%;
} }
.front-page-sponsors { .front-page-sponsors {
text-align: center; text-align: center;
} }
.front-page-big-title h1 { .front-page-big-title h1 {
font-size: 1.4em; font-size: 1.4em;
text-align: center; text-align: center;
} }
.content.front-page-big-title { .content.front-page-big-title {
padding: 1em 0 0 0; padding: 1em 0 0 0;
} }
section.entry-meta { section.entry-meta {