diff --git a/biomed-frontend/bower.json b/biomed-frontend/bower.json index d44897f..93847ca 100644 --- a/biomed-frontend/bower.json +++ b/biomed-frontend/bower.json @@ -13,6 +13,7 @@ "angular-masonry": "~0.9.1", "imagesloaded": "~3.1.8", "jquery-colorbox": "~1.5.14", - "angular-foundation": "~0.4.0" + "angular-foundation": "~0.4.0", + "font-awesome": "~4.3.0" } } diff --git a/biomed-frontend/gulpfile.js b/biomed-frontend/gulpfile.js index 9083293..c0311db 100644 --- a/biomed-frontend/gulpfile.js +++ b/biomed-frontend/gulpfile.js @@ -79,6 +79,7 @@ gulp.task('styles', function() { .pipe(sass({ includePaths: [ 'vendor/foundation/scss', + 'vendor/font-awesome/scss' ], // sourceComments: 'map' })) diff --git a/biomed-frontend/src/app/layout.html b/biomed-frontend/src/app/layout.html index bb7e54c..0c3a13a 100644 --- a/biomed-frontend/src/app/layout.html +++ b/biomed-frontend/src/app/layout.html @@ -90,10 +90,26 @@
\ No newline at end of file + + diff --git a/biomed-frontend/src/styles/_biomed.scss b/biomed-frontend/src/styles/_biomed.scss index 2ac9238..d530c9b 100644 --- a/biomed-frontend/src/styles/_biomed.scss +++ b/biomed-frontend/src/styles/_biomed.scss @@ -1,6 +1,9 @@ // Put biomed styles in here @import "components/loading-bar"; +@import "components/footer"; +@import "components/return-to-top"; + .logo { display: block; text-indent: -9999px; @@ -485,12 +488,11 @@ table { } #main-content { - margin-top: 9px; min-height: 82%; } .content-wrapper { background: #f1f2f6; - margin-top: 50px; + margin-bottom: 70px; } .row { max-width: 80rem; @@ -981,132 +983,6 @@ input[type=submit].btn-block { background-color: #ed5565; } -.page-footer-bottom { - background: #333333; - padding: 24px 0 10px; } - -.page-footer-bottom .design-border { - border-bottom: 1px solid #484848; - padding-bottom: 5px; - margin-bottom: 25px; } - -.page-footer-bottom a.site-logo { - color: #858585; - font-weight: normal; - background: url("/img/footer-icons.png") no-repeat 0 3px; - padding: 23px 0 0 0; - font-size: 1rem; - display: inline-block; - width: 90px; } - -.page-footer-bottom a.site-logo:hover { - opacity: 0.8; - /* filter: opacity(80%);*/ } - -.page-footer-bottom ul.site-links { - margin: 0; - display: inline-block; - padding-bottom: 0px; } - -.page-footer-bottom ul.site-links li { - display: block; - float: left; - margin-right: 6px; - text-transform: uppercase; - font-weight: 700; - font-size: 0.75rem; } - -.page-footer-bottom ul.site-links { - font-family: 'Orbitron', sans-serif; - font-weight: 700; } - -.page-footer-bottom ul.site-links li a { - color: #666666; - padding: 3px 6px 3px 0; } - -.page-footer-bottom ul.site-links li a:hover { - color: #777777; } - -.page-footer-bottom ul.site-links li.name { - font-weight: bold; - font-size: 0.8rem; - margin-top: -1px; } - -.page-footer-bottom ul.site-links li.name a { - padding-top: 0; - margin-top: 0; } - -.page-footer-bottom p.copyright { - margin: 6px 0 0; - font-size: 0.75rem; - color: #666666; } - -.page-footer-bottom ul.home-social { - display: block; - float: right; - margin-bottom: 8px; } - -.page-footer-bottom ul.home-social li { - list-style: none; - display: block; - float: left; - margin-left: 10px; } - -.page-footer-bottom ul.home-social li:first-child { - margin-left: 0; } - -.page-footer-bottom ul.home-social li a { - display: block; - height: 50px; - width: 50px; - background: url("/img/social.png") no-repeat center 0; } - -.page-footer-bottom ul.home-social li a:hover { - opacity: 0.8; - /* filter: opacity(80%); */ } - -.page-footer-bottom ul.home-social li a.twitter { - background-position: center 0; } - -.page-footer-bottom ul.home-social li a.facebook { - background-position: center -200px; } - -.page-footer-bottom ul.home-social li a.mail { - background-position: center -400px; } - -@media only screen and (max-width: 40em) { - .page-footer-bottom { - text-align: center; } - .page-footer-bottom .columns { - padding: 0; } - .page-footer-bottom a.site-logo { - display: block; - margin: 0 auto; } - .page-footer-bottom ul.site-links { - margin: 16px 0 10px; } - .page-footer-bottom ul.home-social { - float: none; - margin: 0 0 20px 0; - text-align: center; - height: 44px; - display: inline-block; } } - -/* Retina Images */ -@media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { - .page-footer-bottom ul.home-social li a { - background-image: url("/img/social-retina.png"); - background-size: 50px 600px; } - .page-footer-bottom a.site-logo { - background-image: url("/img/footer-icons-retina.png"); - background-size: 100px 1400px; } } - -@media only screen and (max-width: 320px), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { - .page-footer-bottom ul.home-social li a { - background-image: url("/img/social-retina.png"); - background-size: 50px 600px; } - .page-footer-bottom a.site-logo { - background-image: url("/img/footer-icons-retina.png"); - background-size: 100px 1400px; } } .row { max-width: 4000px; @@ -1328,44 +1204,3 @@ h2 { margin: 0 auto; } -#return-to-top { - position: fixed; - bottom: 20px; - right: 20px; - background: rgb(0, 0, 0); - background: rgba(0, 0, 0, 0.7); - width: 50px; - height: 50px; - display: block; - text-decoration: none; - -webkit-border-radius: 35px; - -moz-border-radius: 35px; - border-radius: 35px; - display: none; - -webkit-transition: all 0.3s linear; - -moz-transition: all 0.3s ease; - -ms-transition: all 0.3s ease; - -o-transition: all 0.3s ease; - transition: all 0.3s ease; - z-index: 1000; -} -#return-to-top i { - color: #fff; - margin: 0; - position: relative; - left: 16px; - top: 13px; - font-size: 19px; - -webkit-transition: all 0.3s ease; - -moz-transition: all 0.3s ease; - -ms-transition: all 0.3s ease; - -o-transition: all 0.3s ease; - transition: all 0.3s ease; -} -#return-to-top:hover { - background: rgba(0, 0, 0, 0.9); -} -#return-to-top:hover i { - color: #fff; - top: 5px; -} \ No newline at end of file diff --git a/biomed-frontend/src/styles/components/_footer.scss b/biomed-frontend/src/styles/components/_footer.scss new file mode 100644 index 0000000..d4d97a6 --- /dev/null +++ b/biomed-frontend/src/styles/components/_footer.scss @@ -0,0 +1,73 @@ +.page-footer-bottom { + background: #333333; + padding: 14px 0; + position: fixed; + bottom: 0; + width: 100%; + + a { + color: #666666; + + &:hover { + color: #777777; + } + } + + + ul.site-links { + margin: 0; + display: inline-block; + padding-bottom: 0px; + + li { + display: block; + float: left; + margin-right: 6px; + text-transform: uppercase; + font-weight: 700; + font-size: 0.75rem; + + &.name { + font-weight: bold; + font-size: 0.8rem; + margin-top: -1px; + } + } + } + + p.copyright { + margin: 0; + font-size: 0.75rem; + color: #666666; + } + + ul.social { + display: block; + float: right; + margin: 0; + + li { + list-style: none; + display: block; + float: left; + margin-left: 2px; + } + } +} + +@media #{$small-only} { + .page-footer-bottom { + position: initial; + text-align: center; + + ul.site-links { + margin: 16px 0 10px; + } + + ul.social { + float: none; + text-align: center; + display: inline-block; + } + } +} diff --git a/biomed-frontend/src/styles/components/_return-to-top.scss b/biomed-frontend/src/styles/components/_return-to-top.scss new file mode 100644 index 0000000..92d36a1 --- /dev/null +++ b/biomed-frontend/src/styles/components/_return-to-top.scss @@ -0,0 +1,47 @@ +#return-to-top { + position: fixed; + bottom: 90px; + right: 20px; + background: rgb(0, 0, 0); + background: rgba(0, 0, 0, 0.7); + width: 50px; + height: 50px; + display: block; + text-decoration: none; + -webkit-border-radius: 35px; + -moz-border-radius: 35px; + border-radius: 35px; + display: none; + -webkit-transition: all 0.3s linear; + -moz-transition: all 0.3s ease; + -ms-transition: all 0.3s ease; + -o-transition: all 0.3s ease; + transition: all 0.3s ease; + z-index: 1000; +} +#return-to-top i { + color: #fff; + margin: 0; + position: relative; + left: 16px; + top: 13px; + font-size: 19px; + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; + -ms-transition: all 0.3s ease; + -o-transition: all 0.3s ease; + transition: all 0.3s ease; +} +#return-to-top:hover { + background: rgba(0, 0, 0, 0.9); +} +#return-to-top:hover i { + color: #fff; + top: 5px; +} + +@media #{$small-only} { + #return-to-top { + bottom: 20px; + } +} \ No newline at end of file diff --git a/biomed-frontend/src/styles/styles.scss b/biomed-frontend/src/styles/styles.scss index 3bfc7a1..9eb5c2e 100644 --- a/biomed-frontend/src/styles/styles.scss +++ b/biomed-frontend/src/styles/styles.scss @@ -2,4 +2,5 @@ @import "settings"; @import "normalize"; @import "foundation"; +@import "font-awesome"; @import "biomed"; \ No newline at end of file