diff --git a/homepage/theme/static/images/offen-logo-circle-only.svg b/homepage/theme/static/images/offen-logo-circle-only.svg new file mode 100644 index 0000000..add91c3 --- /dev/null +++ b/homepage/theme/static/images/offen-logo-circle-only.svg @@ -0,0 +1,66 @@ + + + + + + image/svg+xml + + + + + + + + + + diff --git a/homepage/theme/static/scripts/functions.js b/homepage/theme/static/scripts/functions.js new file mode 100644 index 0000000..f1341ca --- /dev/null +++ b/homepage/theme/static/scripts/functions.js @@ -0,0 +1,19 @@ +/** code by webdevtrick ( https://webdevtrick.com ) **/ +(function($) { + $(function() { + $('nav ul li a:not(:only-child)').click(function(e) { + $(this).siblings('.nav-dropdown').toggle(); + $('.dropdown').not($(this).siblings()).hide(); + e.stopPropagation(); + }); + $('html').click(function() { + $('.nav-dropdown').hide(); + }); + $('#nav-toggle').click(function() { + $('nav ul').slideToggle(); + }); + $('#nav-toggle').on('click', function() { + this.classList.toggle('active'); + }); + }); +})(jQuery); diff --git a/homepage/theme/templates/temp.html b/homepage/theme/templates/temp.html index cff2361..0b3e85b 100644 --- a/homepage/theme/templates/temp.html +++ b/homepage/theme/templates/temp.html @@ -9,8 +9,52 @@
+ +
- MENU +
+
+
+ +
+ +
+
+ +
@@ -43,5 +87,8 @@
+ + + diff --git a/styles/index.css b/styles/index.css index 9ce02e0..20a6b63 100644 --- a/styles/index.css +++ b/styles/index.css @@ -1,3 +1,196 @@ + +body { +margin: 0; +padding: 0; +background-color: #fff; +color: #898989; +font: 18px/1.5 "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; +font-size: 18px; +line-height: 1.5; +font-weight: 400; +} + + + +/* --------------------------------------------------- +MENU +----------------------------------------------------*/ + +.nav-bar { + height: 70px; +} + +.brand { + position: absolute; + padding: 12px 0 0 20px; + float: left; + line-height: 70px; +} +/* +.brand a img { + max-height: 70px; +} +*/ +.brand a, +.brand a:visited { + color: #39352A; + text-decoration: none; +} + +.nav-container { + max-width: 1000px; + margin: 0 auto; +} + +nav { + float: right; +} +nav ul { + list-style: none; + margin: 0; + padding: 0; +} +nav ul li { + float: left; + position: relative; +} +nav ul li a, +nav ul li a:visited { + display: block; + padding: 0 20px; + line-height: 70px; + background: #F7BF08; + color: #39352A; + text-decoration: none; +} +nav ul li a:hover, +nav ul li a:visited:hover { + /* + background: #FDE28C; + */ + color: #39352A; +} +nav ul li a:not(:only-child):after, +nav ul li a:visited:not(:only-child):after { + padding-left: 4px; + content: ' ▾'; +} +nav ul li ul li { + min-width: 140px; +} +nav ul li ul li a { + padding: 15px; + line-height: 20px; +} + +.nav-dropdown { + position: absolute; + display: none; + z-index: 1; +} +.nav-mobile { + display: none; + position: absolute; + top: 0; + right: 0; + background: #F7BF08; + height: 70px; + width: 70px; +} + +@media only screen and (max-width: 960px) { + .nav-mobile { + display: block; + } + + nav { + width: 100%; + padding: 70px 0 15px; + } + nav ul { + display: none; + } + nav ul li { + float: none; + } + nav ul li a { + padding: 15px; + line-height: 20px; + padding-left: 25%; + + } + nav ul li ul li a { + padding-left: 30%; + } + + .nav-dropdown { + position: static; + } + .brand a img { + /* + max-height: 60px; + margin-top: 5px; + */ + } +} +@media screen and (min-width: 961px) { + .nav-list { + display: block !important; + } +} +#nav-toggle { + position: absolute; + left: 18px; + top: 22px; + cursor: pointer; + padding: 10px 35px 16px 0px; +} +#nav-toggle span, +#nav-toggle span:before, +#nav-toggle span:after { + cursor: pointer; + border-radius: 1px; + height: 3px; + width: 35px; + background: #39352A; + position: absolute; + display: block; + content: ''; + transition: all 300ms ease-in-out; +} +#nav-toggle span:before { + top: -10px; +} +#nav-toggle span:after { + bottom: -10px; +} +#nav-toggle.active span { + background-color: transparent; +} +#nav-toggle.active span:before, #nav-toggle.active span:after { + top: 0; +} +#nav-toggle.active span:before { + transform: rotate(45deg); +} +#nav-toggle.active span:after { + transform: rotate(-45deg); +} + +article { + max-width: 1000px; + margin: 0 auto; + padding: 10px; +} + + + + + +/* --------------------------------------------------- +LAYOUT +----------------------------------------------------*/ + * { margin: 0; padding: 0; @@ -11,20 +204,18 @@ .menu { width: 100%; - height: 80px; + height: 70px; position: fixed; top: 0; right: 0; background-color: #F7BF08; - border: 1px solid #000; } .intro { width: 100%; height: 300px; - margin-top: 80px; + margin-top: 70px; background-color: #F7BF08; - border: 1px solid #000; } .content { @@ -52,8 +243,7 @@ .footer { width: 100%; height: 400px; - background-color: #ccc; - border: 1px solid #000; + background-color: #39352A; }