aboutsummaryrefslogtreecommitdiff
path: root/configs/conferences/35c3/main.less
diff options
context:
space:
mode:
authordedeibel2018-12-10 23:37:48 +0100
committerdedeibel2018-12-19 22:06:25 +0100
commit0201dd5a0cc8fbb6ec64697f7eb5732f765337b8 (patch)
treefd55d7c6f522b385824eb78aea474c990621fe9a /configs/conferences/35c3/main.less
parent359198cfc829e21c005d5b2c18f7d0453fd9ac4c (diff)
35c3: Implement styling
Diffstat (limited to '')
-rw-r--r--configs/conferences/35c3/main.less311
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;
+ }
+}
+
+