Skip to content
Snippets Groups Projects
Verified Commit 049ec2b2 authored by Tom Teichler's avatar Tom Teichler :beers:
Browse files

Use stylesheet with variables

parent 54cd665a
No related branches found
No related tags found
No related merge requests found
...@@ -3,11 +3,11 @@ html, body { ...@@ -3,11 +3,11 @@ html, body {
} }
a { a {
color: #5e42ed; color: var(--teckids-blue-dark);
} }
.navbar { .navbar {
border-bottom: #2855e6 3px solid; border-bottom: var(--teckids-orange-dark) 3px solid;
} }
.navbar-brand { .navbar-brand {
...@@ -15,37 +15,31 @@ a { ...@@ -15,37 +15,31 @@ a {
} }
img#logo { img#logo {
height: 50px; height: 100%;
} }
.navbar { .navbar {
margin-bottom: 0; margin-bottom: 0;
background-color: #f8f8f8;
color: #777777;
} }
.navbar-nav > ul > li > a { .navbar-nav li:hover .dropdown-menu {
color: #777777;
}
div .navbar-nav li:hover .dropdown-menu {
display: block; display: block;
margin-top: 0px; margin-top: 0px;
} }
#navbar-main > ul.nav > li > a, #navbar-main > ul.nav > li.ancestor > a { #navbar-main > ul.nav > li.active > a, #navbar-main > ul.nav > li.ancestor > a {
background: #7b97f3; background: var(--teckids-orange-light);
background: linear-gradient(#2855e6, #7b97f3, #2855e6); background: linear-gradient(var(--teckids-orange-dark), var(--teckids-orange-light), var(--teckids-orange-dark));
color: #f8f8f8; color: #f8f8f8;
} }
#navbar-main ul > li.active > a { #navbar-main ul.dropdown-menu > li.active > a {
background: #2855e6; background: var(--teckids-orange-dark);
color: #f8f8f8; color: #f8f8f8;
} }
footer#main-footer { footer#main-footer {
background: #005EBE; background: var(--teckids-blue-light);
color: #ffffff; color: #ffffff;
margin-top: 20px; margin-top: 20px;
padding-top: 30px; padding-top: 30px;
...@@ -54,7 +48,7 @@ footer#main-footer { ...@@ -54,7 +48,7 @@ footer#main-footer {
footer#sponsoren-footer { footer#sponsoren-footer {
background: #ffffff; background: #ffffff;
border-top: #005EBE 3px solid; border-top: var(--teckids-blue-light) 3px solid;
margin-top: 50px; margin-top: 50px;
padding-top: 3px; padding-top: 3px;
padding-bottom: 20px; padding-bottom: 20px;
...@@ -82,12 +76,12 @@ img.filer_image { ...@@ -82,12 +76,12 @@ img.filer_image {
img.left { img.left {
float: left; float: left;
margin-right: 10px; margin-right: 20px;
} }
img.right { img.right {
float: right; float: right;
margin-left: 10px; margin-left: 20px;
} }
img.center { img.center {
...@@ -151,20 +145,20 @@ time.icon strong { ...@@ -151,20 +145,20 @@ time.icon strong {
top: 0; top: 0;
padding: 0.4em 0; padding: 0.4em 0;
color: #fff; color: #fff;
background-color: #2855e6; background-color: var(--teckids-orange-dark);
border-bottom: 1px dashed #7b97f3; border-bottom: 1px dashed var(--teckids-orange-light);
box-shadow: 0 2px 0 #7b97f3; box-shadow: 0 2px 0 var(--teckids-orange-light);
} }
time.icon em { time.icon em {
position: absolute; position: absolute;
bottom: 0.3em; bottom: 0.3em;
color: #005EBE; color: var(--teckids-blue-light);
} }
time.icon span { time.icon span {
font-size: 2.8em; font-size: 2.8em;
letter-spacing: -0.05em; letter-spacing: -0.05em;
padding-top: 0.8em; padding-top: 0.8em;
color: #5e42ed; color: var(--teckids-blue-dark);
} }
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);
}
...@@ -24,6 +24,14 @@ ...@@ -24,6 +24,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="{{ DESCRIPTION }}" /> <meta name="description" content="{{ DESCRIPTION }}" />
<meta name="author" content="Teckids e.V." /> <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/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="{{ THEME_STATIC_DIR }}/css/style.css" /> <link rel="stylesheet" type="text/css" href="{{ THEME_STATIC_DIR }}/css/style.css" />
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment