diff options
Diffstat (limited to 'configs/conferences/35c3/main.less')
| -rw-r--r-- | configs/conferences/35c3/main.less | 311 |
1 files changed, 296 insertions, 15 deletions
diff --git a/configs/conferences/35c3/main.less b/configs/conferences/35c3/main.less index fc48412..9f591ac 100644 --- a/configs/conferences/35c3/main.less +++ b/configs/conferences/35c3/main.less @@ -1,36 +1,317 @@ @import "../../../assets/css/_structure.less"; -// conference specific styles here -@color-blue: #0084B0; // fresh -@color-green: #00A356; // hope -@color-grey: #4D4D4C; // reboot +/* + * color + */ +@color-blue: rgb(0, 132, 176); // fresh +@color-green: rgb(0, 163, 86); // hope +@color-grey: rgb(77, 77, 76); // reboot -@color-dark-grey: darken(@color-grey, 20%); -@color-light-grey: lighten(@color-grey, 30%); -@color-lighter-grey: lighten(@color-grey, 40%); +@color-grey-darkest: darken(@color-grey, 20%); +@color-grey-darker: darken(@color-grey, 10%); +@color-grey-lighter: lighten(@color-grey, 30%); +@color-grey-lightest: lighten(@color-grey, 40%); // highlight +@color-grey-readable: lighten(@color-grey, 50%); +@color-grey-readable-focused: lighten(@color-grey, 75%); // often configured values (and their defaults): @brand-primary: @color-blue; -@text-color: @color-grey; +@text-color: @color-grey-readable; @link-color: @color-blue; @link-hover-color: @color-green; -@navbar-height: 70px; +@color-nav-icons: mix(@color-green, @color-blue, 75%); -// TODO darf nicht angegeben sein sonst wird style ignoriert, wtf -//@navbar-default-bg: transparent; -//@navbar-default-border: transparent; +/* + * navbar + * + * reminder, do not mess so much with the navbar because boostrap nav + * is hard and will kick your butt on mobile + */ +@navbar-height: 70px; +@navbar-default-bg: black; +@navbar-default-border: black; @navbar-default-link-color: white; @navbar-default-link-hover-color: @link-hover-color; +/* + * buttons + */ +@btn-font-weight: 600; +a.btn, input.btn { + text-transform: uppercase; + color: @color-grey; +} +a.btn:hover, input.btn:hover { + color: @color-grey-readable-focused; +} + +@btn-default-color: @color-grey; +@btn-default-bg: @color-blue; +@btn-default-border: @color-grey-darker; + +@btn-primary-color: @color-grey; +@btn-primary-bg: @color-green; +@btn-primary-border: @color-grey-darker; + +/* + * font + */ +@import url("/configs/conferences/35c3/assets/montserrat/Montserrat.css"); + +.font-headline { + color: @color-grey; + font-family: 'Montserrat', sans-serif; + font-weight: 900; /* black*/ + text-transform: uppercase; +} + +.font-sub-line { + color: @color-grey; + font-family: 'Montserrat', sans-serif; + font-weight: 400; /* black*/ + text-transform: uppercase; +} + +.font-running-text { + color: @color-grey-readable; + font-family: 'Montserrat', sans-serif; + font-weight: 400; /* black*/ +} + +/* + * style + */ + body { background-color: black; - padding: @navbar-height 0 + padding: @navbar-height 0; + + .font-running-text(); + font-size: 13pt; } -h1, h2, body.overview .room a.title, body.overview .panel-primary a, .navbar-brand { - font-family: sans-serif; +nav.navbar { + .navbar-brand { + font-size: 16pt; + letter-spacing: 0.2px; + color: white; + } + + a.feedback, a.releases, a.about { + color: @color-nav-icons; + background-color: transparent; + border-color: @color-nav-icons; + + &:hover { + color: black; + background-color: @color-nav-icons; + border-color: @color-nav-icons; + } + } + + &:after { + display: block; + height: 2px; + padding-bottom: 2px; + background-image: linear-gradient(@color-blue 10%, @color-green 90%); + } +} + +h1, +h2, +h3, +body.overview .room a.title, +body.overview .panel-primary a, +.navbar-brand, +.panel-heading, +.panel-default > .panel-heading, +.nav.nav-tabs { + .font-headline() +} + +h4 { + .font-sub-line() +} + +.banner { + h1 { + display: none; + } + + img { /* TODO make responsive */ + width: 15%; + margin: 20px; + position: fixed; + } + + &:after { + content: ''; + display: block; + height: 30px; + } +} + +.well { + h1, h2, h3, h4 { + color: @color-grey-lighter; + } + + background-color: @color-grey-darker; +} + +/* + * Panel gradient configuration + * + */ +.panel { + border: none; + background-color: black; + background-image: linear-gradient(120deg, @color-blue, @color-green); + padding: 2px; + + .panel-heading { + border: none; + background-color: black; + // to test gradient use: + //background-color: transparent; + } + + .panel-body { + background-color: black; + // test gradient: + //background-color: transparent; + } } +/* let the gratient go over two panels horizontally, child 1 and 2, 3 and 4, and so on */ +.room-group .room:nth-child(1) .panel { + background-image: linear-gradient(80deg, @color-blue, @color-green 200%); +} + +.room-group .room:nth-child(2) .panel { + background-image: linear-gradient(80deg, @color-blue -60%, @color-green); +} + +.room-group .room:nth-child(3) .panel { + background-image: linear-gradient(80deg, @color-blue, @color-green 200%); +} + +.room-group .room:nth-child(4) .panel { + background-image: linear-gradient(80deg, @color-blue -60%, @color-green); +} + +.room-group .room:nth-child(5) .panel { + background-image: linear-gradient(80deg, @color-blue, @color-green); +} + +div.row.recordings div:nth-child(2) .panel { + background-image: linear-gradient(80deg, @color-blue, @color-green 200%); +} + +/* + * NO RELIVE THEN: + *div.row.recordings div:nth-child(2) .panel { + * background-image: linear-gradient(80deg, @color-blue, @color-green); + *} + */ + +div.row.recordings div:nth-child(3) .panel { + background-image: linear-gradient(80deg, @color-blue -60%, @color-green); +} + +/* + * main page + */ + +.overview { + a { + color: @color-grey-readable; + } + + .room { + .panel-body { + height: 190px; + } + + &:hover { + .panel-title { + color: @color-grey-readable-focused; + } + + .panel-body { + .program-schedule .current-talk { + &, span.t { + color: @color-grey-readable-focused; + } + } + .program-schedule .next-talk { + &, span.t { + color: @color-grey-darker; + } + } + } + } + } + + .recordings { + h2 { + span { + display: none; + } + + &:after { + content: 'Recorded memories'; + } + } + + .panel { + &:hover { + .panel-body a { + color: @color-grey-lightest; + } + } + } + } +} + +nav { + .nav-tabs { + border: none; + background-color: black; + background-image: linear-gradient(120deg, @color-blue, @color-green); + padding: 2px; + + & > { + background-color: black; + } + + a { + color: @color-grey; + } + } +} + +body .schedule { + .block h3 { + font-size: 16px; + } + + .now span { + right: -33px; + top: -2px; + font-weight: bold; + } +} + +.feedback-form, .embed-form { + label { + .font-sub-line(); + font-size: 16px; + color: @color-grey-readable; + } +} + + |