diff --git a/bower.json b/bower.json index 75bd974..a852fd9 100644 --- a/bower.json +++ b/bower.json @@ -15,6 +15,7 @@ "dependencies": { "jquery": "~2.1.4", "bootstrap": "~3.3.4", - "plato": "~1.4.0" + "plato": "~1.4.0", + "slicknav": "~1.0.3" } } diff --git a/src/index.html b/src/index.html index 834a286..427701c 100644 --- a/src/index.html +++ b/src/index.html @@ -4,10 +4,11 @@ - Cyb + Cybernetisk Selskap + @@ -17,19 +18,28 @@
-
+

Cybernetisk Selskap

-
-
- - - - - - -
+ + +
@@ -79,13 +89,51 @@

Cybernetisk Selskap

-
-
-
-
-

Bli Frivilig

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

-
+
+
+
+
+
+

Bli Frivilig

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

+
+
+
+

Om oss

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

+
+
+
+
+
+
+
+
+
+

Medlemsinfo

+
+
+
+
+

Events

+
+
+
+
+
+
+
+
+
+

Utlån

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

+
+
+
+

Kontakt Oss

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

+
+
@@ -103,6 +151,7 @@

Bli Frivilig

+ diff --git a/src/scripts/site.js b/src/scripts/site.js index b211666..32178ab 100644 --- a/src/scripts/site.js +++ b/src/scripts/site.js @@ -1,13 +1,20 @@ (function() { - $(document).ready(activate); - - function activate() { + $(document).ready(function() { carousel(); - } + menu(); + }); function carousel() { $('.carousel').carousel({ interval: 2000 }); } + + function menu() { + $('#menu').slicknav({ + label: '', + duplicate: false, + prependTo: '#menu-anchor' + }); + } })(); diff --git a/src/styles/sass/menu.scss b/src/styles/sass/menu.scss new file mode 100644 index 0000000..d9e6463 --- /dev/null +++ b/src/styles/sass/menu.scss @@ -0,0 +1,23 @@ +.slicknav_menu { + display:none; +} + +@media screen and (max-width: 40em) { + #menu { + display: none; + } + + #menu-large { + display: none; + } + + .slicknav_menu { + display: block; + } +} + +#menu-anchor { + .slicknav_menu { + background-color: $base-color; + } +} diff --git a/src/styles/sass/scaffolding.scss b/src/styles/sass/scaffolding.scss index f0a775b..993cd11 100644 --- a/src/styles/sass/scaffolding.scss +++ b/src/styles/sass/scaffolding.scss @@ -1,25 +1,50 @@ +$line-width: 2px; + +body { + background-color: $base-color; +} + .header { background-color: $base-color; color: $background-color; + border-bottom-color: $accent-color; + border-bottom-width: $line-width; + border-bottom-style: solid; .btn-group { margin-top: 25px; - - .btn { - background-color: $accent-color; - } - - .btn:hover { - background-color: $accent2-color; - } } } +.content { + padding-bottom: 60px; +} + .carousel-container { padding-top: 10px; background-color: $base-color; } -.marketing { - background-color: $shadow2-color; +.content-rows { + .content-row { + padding-bottom: 20px; + padding-top: 10px; + } + + .content-row:nth-child(odd) { + background-color: $shadow2-color; + } + + .content-row:nth-child(even) { + background-color: $shadow-color; + } +} + +.footer { + z-index: -1; + background-color: $base-color; + height: 60px; + border-top-color: $accent-color; + border-top-width: $line-width; + border-top-style: solid; } diff --git a/src/styles/sass/styles.scss b/src/styles/sass/styles.scss index fd02435..0a8b807 100644 --- a/src/styles/sass/styles.scss +++ b/src/styles/sass/styles.scss @@ -2,4 +2,23 @@ @import "colors"; @import "carousel"; +@import "menu"; @import "scaffolding"; + +.float-left { + float: left; +} + +.float-right { + float: right; +} + +.btn.btn-cyb { + background-color: $accent2-color; + color: $background-color; +} + +.btn.btn-cyb:hover { + background-color: $accent-color; + color: $base-color; +} diff --git a/src/styles/styles.css b/src/styles/styles.css index 29bb2cb..d0c9309 100644 --- a/src/styles/styles.css +++ b/src/styles/styles.css @@ -3,21 +3,67 @@ .carousel img { height: 300px !important; } +.slicknav_menu { + display: none; } + +@media screen and (max-width: 40em) { + #menu { + display: none; } + #menu-large { + display: none; } + .slicknav_menu { + display: block; } } + +#menu-anchor .slicknav_menu { + background-color: #000000; } + +body { + background-color: #000000; } + .header { background-color: #000000; - color: #FFFFFF; } + color: #FFFFFF; + border-bottom-color: #FFB619; + border-bottom-width: 2px; + border-bottom-style: solid; } .header .btn-group { margin-top: 25px; } - .header .btn-group .btn { - background-color: #FFB619; } - .header .btn-group .btn:hover { - background-color: #FFAE00; } + +.content { + padding-bottom: 60px; } .carousel-container { padding-top: 10px; background-color: #000000; } -.marketing { +.content-rows .content-row { + padding-bottom: 20px; + padding-top: 10px; } +.content-rows .content-row:nth-child(odd) { background-color: #D3E3FF; } +.content-rows .content-row:nth-child(even) { + background-color: #9FA6B2; } + +.footer { + z-index: -1; + background-color: #000000; + height: 60px; + border-top-color: #FFB619; + border-top-width: 2px; + border-top-style: solid; } + +.float-left { + float: left; } + +.float-right { + float: right; } + +.btn.btn-cyb { + background-color: #FFAE00; + color: #FFFFFF; } + +.btn.btn-cyb:hover { + background-color: #FFB619; + color: #000000; } -/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAic3R5bGVzLmNzcyIsCgkic291cmNlcyI6IFsKCQkic2Fzcy9zdHlsZXMuc2NzcyIsCgkJInNhc3MvY29sb3JzLnNjc3MiLAoJCSJzYXNzL2Nhcm91c2VsLnNjc3MiLAoJCSJzYXNzL3NjYWZmb2xkaW5nLnNjc3MiCgldLAoJInNvdXJjZXNDb250ZW50IjogW10sCgkibWFwcGluZ3MiOiAiQUVFQTtFQUNJLEFBQWU7RUFFbkIsQUFBVTtJQUNGLEFBTlU7O0FDQWxCO0VBQ0ksQUZEUztFRUVULEFGRGU7RUVHbkIsQUFBUTtJQUNBLEFBQVk7SUFFcEIsQUFBUSxBQUFXO01BQ1AsQUZORztJRVNmLEFBQVEsQUFBVyxBQUFJO01BQ1gsQUZUSTs7QUVjaEI7RUFDSSxBQUFhO0VBQ2IsQUZuQlM7O0FFc0JiO0VBQ0ksQUZsQlkiLAoJIm5hbWVzIjogW10KfQ== */ \ No newline at end of file +/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAic3R5bGVzLmNzcyIsCgkic291cmNlcyI6IFsKCQkic2Fzcy9zdHlsZXMuc2NzcyIsCgkJInNhc3MvY29sb3JzLnNjc3MiLAoJCSJzYXNzL2Nhcm91c2VsLnNjc3MiLAoJCSJzYXNzL21lbnUuc2NzcyIsCgkJInNhc3Mvc2NhZmZvbGRpbmcuc2NzcyIKCV0sCgkic291cmNlc0NvbnRlbnQiOiBbXSwKCSJtYXBwaW5ncyI6ICJBRUVBO0VBQ0ksQUFBZTtFQUVuQixBQUFVO0lBQ0YsQUFOVTs7QUNBbEI7RUFDQyxBQUFROztBQUdUO0VBQ0E7SUFDRSxBQUFTO0VBR1g7SUFDRSxBQUFTO0VBR1g7SUFDRSxBQUFTOztBQUtYLEFBQWE7RUFDWCxBRnBCVzs7QUdFYjtFQUNJLEFISFM7O0FHTWI7RUFDSSxBSFBTO0VHUVQsQUhQZTtFR1FmLEFIUFc7RUdRWCxBQVZTO0VBV1QsQUFBcUI7RUFFekIsQUFBUTtJQUNBLEFBQVk7O0FBSXBCO0VBQ0ksQUFBZ0I7O0FBR3BCO0VBQ0ksQUFBYTtFQUNiLEFIeEJTOztBRzRCYixBQUFjO0VBQ04sQUFBZ0I7RUFDaEIsQUFBYTtBQUdyQixBQUFjLEFBQVk7RUFDbEIsQUg3QlE7QUdnQ2hCLEFBQWMsQUFBWTtFQUNsQixBSGxDTzs7QUdzQ2Y7RUFDSSxBQUFTO0VBQ1QsQUg1Q1M7RUc2Q1QsQUFBUTtFQUNSLEFINUNXO0VHNkNYLEFBL0NTO0VBZ0RULEFBQWtCOztBSnpDdEI7RUFDQyxBQUFPOztBQUdSO0VBQ0MsQUFBTzs7QUFHUixBQUFJO0VBQ0EsQUNiWTtFRGNaLEFDaEJlOztBRG1CbkIsQUFBSSxBQUFRO0VBQ1IsQUNuQlc7RURvQlgsQUN0QlMiLAoJIm5hbWVzIjogW10KfQ== */ \ No newline at end of file