diff --git a/static/css/style.css b/static/css/style.css
index 01e3f081dee19f7db33850c54e4d56591abb5410..fef55f6cb431d43f1f40d33dce36e747c4395ea0 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -3,11 +3,11 @@ html, body {
}
a {
- color: #5e42ed;
+ color: var(--teckids-blue-dark);
}
.navbar {
- border-bottom: #2855e6 3px solid;
+ border-bottom: var(--teckids-orange-dark) 3px solid;
}
.navbar-brand {
@@ -15,37 +15,31 @@ a {
}
img#logo {
- height: 50px;
+ height: 100%;
}
.navbar {
margin-bottom: 0;
- background-color: #f8f8f8;
- color: #777777;
}
-.navbar-nav > ul > li > a {
- color: #777777;
-}
-
-div .navbar-nav li:hover .dropdown-menu {
+.navbar-nav li:hover .dropdown-menu {
display: block;
margin-top: 0px;
}
-#navbar-main > ul.nav > li > a, #navbar-main > ul.nav > li.ancestor > a {
- background: #7b97f3;
- background: linear-gradient(#2855e6, #7b97f3, #2855e6);
+#navbar-main > ul.nav > li.active > a, #navbar-main > ul.nav > li.ancestor > a {
+ background: var(--teckids-orange-light);
+ background: linear-gradient(var(--teckids-orange-dark), var(--teckids-orange-light), var(--teckids-orange-dark));
color: #f8f8f8;
}
-#navbar-main ul > li.active > a {
- background: #2855e6;
+#navbar-main ul.dropdown-menu > li.active > a {
+ background: var(--teckids-orange-dark);
color: #f8f8f8;
}
footer#main-footer {
- background: #005EBE;
+ background: var(--teckids-blue-light);
color: #ffffff;
margin-top: 20px;
padding-top: 30px;
@@ -54,7 +48,7 @@ footer#main-footer {
footer#sponsoren-footer {
background: #ffffff;
- border-top: #005EBE 3px solid;
+ border-top: var(--teckids-blue-light) 3px solid;
margin-top: 50px;
padding-top: 3px;
padding-bottom: 20px;
@@ -82,12 +76,12 @@ img.filer_image {
img.left {
float: left;
- margin-right: 10px;
+ margin-right: 20px;
}
img.right {
float: right;
- margin-left: 10px;
+ margin-left: 20px;
}
img.center {
@@ -151,20 +145,20 @@ time.icon strong {
top: 0;
padding: 0.4em 0;
color: #fff;
- background-color: #2855e6;
- border-bottom: 1px dashed #7b97f3;
- box-shadow: 0 2px 0 #7b97f3;
+ background-color: var(--teckids-orange-dark);
+ border-bottom: 1px dashed var(--teckids-orange-light);
+ box-shadow: 0 2px 0 var(--teckids-orange-light);
}
time.icon em {
position: absolute;
bottom: 0.3em;
- color: #005EBE;
+ color: var(--teckids-blue-light);
}
time.icon span {
font-size: 2.8em;
letter-spacing: -0.05em;
padding-top: 0.8em;
- color: #5e42ed;
+ color: var(--teckids-blue-dark);
}
diff --git a/static/css/style.foo b/static/css/style.foo
deleted file mode 100644
index fef55f6cb431d43f1f40d33dce36e747c4395ea0..0000000000000000000000000000000000000000
--- a/static/css/style.foo
+++ /dev/null
@@ -1,164 +0,0 @@
-html, body {
- overflow-x: hidden;
-}
-
-a {
- color: var(--teckids-blue-dark);
-}
-
-.navbar {
- border-bottom: var(--teckids-orange-dark) 3px solid;
-}
-
-.navbar-brand {
- padding: 0;
-}
-
-img#logo {
- height: 100%;
-}
-
-.navbar {
- margin-bottom: 0;
-}
-
-.navbar-nav li:hover .dropdown-menu {
- display: block;
- margin-top: 0px;
-}
-
-#navbar-main > ul.nav > li.active > a, #navbar-main > ul.nav > li.ancestor > a {
- background: var(--teckids-orange-light);
- background: linear-gradient(var(--teckids-orange-dark), var(--teckids-orange-light), var(--teckids-orange-dark));
- color: #f8f8f8;
-}
-
-#navbar-main ul.dropdown-menu > li.active > a {
- background: var(--teckids-orange-dark);
- color: #f8f8f8;
-}
-
-footer#main-footer {
- background: var(--teckids-blue-light);
- color: #ffffff;
- margin-top: 20px;
- padding-top: 30px;
- padding-bottom: 20px;
-}
-
-footer#sponsoren-footer {
- background: #ffffff;
- border-top: var(--teckids-blue-light) 3px solid;
- margin-top: 50px;
- padding-top: 3px;
- padding-bottom: 20px;
-}
-
-ul.footer-link-list {
- list-style-type: none;
- margin: 0;
- padding: 0;
-}
-
-ul.footer-link-list li:first-child {
- font-weight: bold;
- margin-bottom: 5px;
-}
-
-footer#main-footer a {
- color: #ffffff;
- text-decoration: none;
-}
-
-img.filer_image {
- max-width: 100%;
-}
-
-img.left {
- float: left;
- margin-right: 20px;
-}
-
-img.right {
- float: right;
- margin-left: 20px;
-}
-
-img.center {
- display: block;
- margin-left: auto;
- margin-right: auto;
-}
-
-h2, h3, h4 {
- clear: both;
-}
-
-h3#sponsorheading {
- text-align: center;
- font-weight: bold;
-}
-
-#ldaplist-aktive img.media-object {
- width: 150px;
-}
-
-div.row video {
- max-width: 100%;
-}
-
-img.sponsorslogo {
- width: 300px;
- padding-left: 20px;
- float: left;
-}
-
-p#sponsortext {
- padding-top: 10px;
- padding-bottom: 10px;
- text-align: center;
-}
-
-time.icon {
- font-size: 1em; /* change icon size */
- display: block;
- position: relative;
- width: 7em;
- height: 7em;
- background-color: #fff;
- border-radius: 0.6em;
- box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd, 0 4px 0 #fff, 0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd;
- overflow: hidden;
-}
-
-time.icon * {
- display: block;
- width: 100%;
- font-size: 1em;
- font-weight: bold;
- font-style: normal;
- text-align: center;
-}
-
-time.icon strong {
- position: absolute;
- top: 0;
- padding: 0.4em 0;
- color: #fff;
- background-color: var(--teckids-orange-dark);
- border-bottom: 1px dashed var(--teckids-orange-light);
- box-shadow: 0 2px 0 var(--teckids-orange-light);
-}
-
-time.icon em {
- position: absolute;
- bottom: 0.3em;
- color: var(--teckids-blue-light);
-}
-
-time.icon span {
- font-size: 2.8em;
- letter-spacing: -0.05em;
- padding-top: 0.8em;
- color: var(--teckids-blue-dark);
-}
diff --git a/templates/base.html b/templates/base.html
index 1d185fa1c6803fb6ccace572e80b7a1bf860c75b..d7493cb4a7be43ed97b888d20c3dab6e5581daf9 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -24,6 +24,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="{{ DESCRIPTION }}" />
<meta name="author" content="Teckids e.V." />
+ <style>
+ :root {
+ --teckids-orange-light: {{ PRIMARY_LIGHT }};
+ --teckids-orange-dark: {{ PRIMARY_DARK }};
+ --teckids-blue-light: {{ SECONDARY_LIGHT }};
+ --teckids-blue-dark: {{ SECONDARY_DARK }};
+ }
+ </style>
<link rel="stylesheet" type="text/css" href="{{ THEME_STATIC_DIR }}/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="{{ THEME_STATIC_DIR }}/css/style.css" />