diff --git a/static/css/quay.css b/static/css/quay.css index 7cf6ed02a..4da887da9 100644 --- a/static/css/quay.css +++ b/static/css/quay.css @@ -9,33 +9,120 @@ } } +#quay-logo { + width: 80px; + margin-right: 30px; +} + +#padding-container { + padding: 20px; + padding-top: 20px; + padding-bottom: 6px; +} + +.d3-tip { + position: absolute; + left: -100000px; +} + +#co-l-footer-wrapper { + clear: both; + min-height: 100%; + height: auto !important; + height: 100%; + margin-bottom: -64px; +} + +#co-l-footer-wrapper #co-l-footer-push { + height: 64px; +} + +#co-l-footer img { + height: 50px; + margin-top: 8px; +} + +#co-l-footer .col-md-4 { + text-align: right; +} + +#co-l-footer { + clear: both; + position: relative; + background-color: white; + height: 64px; + min-height: 64px; + overflow: hidden; + margin: 0; +} + +.co-img-bg-network { + background: url('/static/img/network-tile.png') left top repeat, linear-gradient(30deg, #2277ad, #144768) no-repeat left top fixed; + background-color: #2277ad; + background-size: auto, 100% 100%; +} + +.co-m-navbar { + background-color: white; + margin: 0; + padding-left: 10px; +} + +.co-fx-box-shadow { + -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); + -ms-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); + -o-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); +} + +.co-fx-box-shadow-heavy { + -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4); + -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4); + -ms-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4); + -o-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4); + box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4); +} + +.main-panel { + margin-bottom: 20px; + background-color: #fff; + border: 1px solid transparent; + padding: 30px; + + -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4); + -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4); + -ms-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4); + -o-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4); + box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4); +} + +.container { + max-width: none !important; +} + nav.navbar { border: 0px; border-radius: 0px; - background-image: linear-gradient(to top, #535C66 0%,#6E8194 100%); -} - -nav.navbar-default .navbar-brand { - padding-left: 14px; - border-right: 1px solid rgb(134, 140, 163); - padding-right: 14px; - padding-top: 5px; - height: 50px; } nav.navbar-default .navbar-nav>li>a { - color: white; letter-spacing: 0.5px; + color: #428bca; + font-size: 16px; +} + +nav.navbar-default .navbar-nav>li>a.active { + color: #f04c5c; } .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { - color: #BEE1FF; + background: #eee; } .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus { cursor: pointer; background: rgba(255, 255, 255, 0.4) !important; - color: white; } .notification-view-element { @@ -399,17 +486,6 @@ i.toggle-icon:hover { margin: 0 auto -176px; } -.footer-container, .push { - height: 100px; -} - -.footer-container.fixed { - position: fixed; - bottom: 16px; - left: 0px; - right: 0px; -} - .button-hidden { visibility: hidden; } @@ -671,12 +747,12 @@ i.toggle-icon:hover { .user-tools .user-tool { font-size: 24px; margin-top: 14px; - color: white; + color: #428bca; } .user-tools i.user-tool:hover { cursor: pointer; - color: #BEE1FF; + color: #333; } .status-box a { @@ -1040,6 +1116,10 @@ i.toggle-icon:hover { display: inline; } +.hidden-xs-inline { + display: inline; +} + @media (min-width: 991px) { .visible-md-inline { display: inline; @@ -1056,6 +1136,13 @@ i.toggle-icon:hover { } } +@media (max-width: 700px) { + .hidden-xs-inline { + display: none; + } +} + + .visible-xl { display: none; } @@ -1255,25 +1342,14 @@ i.toggle-icon:hover { color: #555; } -.landing-page .wrapper > nav { - display: none; +.landing-page #padding-container { + padding: 0px; } -.landing-page .nav > li > a { - border-radius: 4px; -} - -.landing-page .nav > li > a:hover, .landing-page .nav > li > a:focus { - background: rgba(255, 255, 255, 0.4); -} - -.landing-page .nav .user-view { - color: white !important; - font-weight: bold; -} - -.landing-page .user-tool { - color: white; +.landing-page .main-panel { + padding: 0px; + border: 0px; + padding-bottom: 10px; } .landing { @@ -1284,10 +1360,6 @@ i.toggle-icon:hover { font-size: 14px; } -.landing-content { - -} - .landing-background { z-index: 0; @@ -1297,10 +1369,9 @@ i.toggle-icon:hover { left: 0px; right: 0px; - background-color: #1d1d1d; - background-image: url(../img/landing-back-opt.jpg); - background-repeat: no-repeat; - background-size: cover; + background: url('/static/img/network-tile.png') left top repeat, linear-gradient(30deg, #2277ad, #144768) no-repeat left top fixed; + background-color: #2277ad; + background-size: auto, 100% 100%; } .landing-filter { @@ -1320,6 +1391,55 @@ i.toggle-icon:hover { z-index: 2; } +.landing .call-to-action i.fa { + margin-left: 10px; +} + +.landing .call-to-action { + height: 40px; + font-size: 18px; + padding-left: 14px; + padding-right: 14px; + padding-top: 2px; + padding-bottom: 2px; + + background: rgba(15, 131, 203, 0.6); + display: inline-block; + margin-top: 20px; +} + +.landing .announcement { + position: absolute; + z-index: 9; + top: 0px; + left: 0px; + right: 0px; + + display: block; + background: rgba(8, 61, 95, 0.6); + min-height: 45px; + text-align: center; + font-size: 14px; + line-height: 45px; +} + +.landing .announcement .spacer { + display: inline-block; + width: 45px; +} + +.landing .announcement img { + height: 45px; + padding-top: 6px; + padding-bottom: 6px; +} + +.landing .announcement .plus { + display: inline-block; + margin-left: 10px; + margin-right: 10px; +} + .landing { color: white; @@ -1346,104 +1466,6 @@ i.toggle-icon:hover { font-size: 40px; } -.landing .header-bar .navbar-brand { - display: none; -} - -.landing .header-bar form { - display: none; -} - -.landing .header-bar { - font-size: 16px; - position: absolute; - right: 20px; - top: 20px; - color: white; - z-index: 100; -} - -.landing .header-bar .user-tools a { - padding-left: 10px; - padding-right: 10px; - background: transparent !important; -} - -.landing .header-bar .user-tools i { - margin-top: 0px; - padding: 12px; - border-radius: 4px; - color: white !important; -} - -.landing .header-bar .user-tools i:hover { - background: rgba(255, 255, 255, 0.2) !important; -} - -.landing .navbar-links a { - font-weight: 600; - color: white; - border-radius: 6px; - letter-spacing: 0.5px; -} - -.landing .navbar-links li a:hover { - background: rgba(255, 255, 255, 0.2); -} - -.landing .nav .dropdown-menu a { - color: black; - font-weight: normal; -} - -@media (max-width: 971px) { - .landing .navbar-collapse { - background: rgba(0, 0, 0, 0.8); - border-radius: 2px; - } - - .navbar-header { - float: none; - } - - .navbar-toggle { - display: block; - color: white; - font-size: 48px; - line-height: 28px; - padding: 4px; - } - - .navbar-collapse { - border-top: 1px solid transparent; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); - } - - .navbar-collapse.collapse { - display: none!important; - } - - .navbar-nav { - float: none!important; - margin: 7.5px -15px; - } - - .navbar-nav>li { - float: none; - } - - .navbar-nav>li>a { - padding-top: 10px; - padding-bottom: 10px; - } - - .navbar-collapse.collapse.in { display: block!important; } -} - -.landing .messages b { - color: #59B2FF; -} - .landing .messages h1 { font-size: 48px; } @@ -1651,10 +1673,15 @@ form input.ng-valid.ng-dirty, font-size: 26px; } -.page-footer { - padding: 10px; - padding-bottom: 0px; - border-top: 1px solid #eee; +.footer-container, .push { + height: 100px; +} + +.footer-container.fixed { + position: fixed; + bottom: 16px; + left: 0px; + right: 0px; } .page-footer-padder { diff --git a/static/directives/header-bar.html b/static/directives/header-bar.html index d36ba7c05..d440e3a86 100644 --- a/static/directives/header-bar.html +++ b/static/directives/header-bar.html @@ -4,19 +4,19 @@ ≡ - +
diff --git a/static/img/black-horizontal.svg b/static/img/black-horizontal.svg new file mode 100644 index 000000000..b299889ce --- /dev/null +++ b/static/img/black-horizontal.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/img/coreos-wordmark-horiz-white.svg b/static/img/coreos-wordmark-horiz-white.svg new file mode 100644 index 000000000..8e01fcc82 --- /dev/null +++ b/static/img/coreos-wordmark-horiz-white.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/static/img/coreos.svg b/static/img/coreos.svg new file mode 100644 index 000000000..117352ab2 --- /dev/null +++ b/static/img/coreos.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/static/img/network-tile.png b/static/img/network-tile.png new file mode 100644 index 000000000..afa4947d9 Binary files /dev/null and b/static/img/network-tile.png differ diff --git a/static/js/app.js b/static/js/app.js index 8daec75d4..2908580e3 100644 --- a/static/js/app.js +++ b/static/js/app.js @@ -1788,6 +1788,26 @@ quayApp.directive('quayShow', function($animate, Features, Config) { }); +quayApp.directive('quaySection', function($animate, $location, $rootScope) { + return { + priority: 590, + restrict: 'A', + link: function($scope, $element, $attr, ctrl, $transclude) { + var update = function() { + var result = $location.path().indexOf('/' + $attr.quaySection) == 0; + $animate[!result ? 'removeClass' : 'addClass']($element, 'active'); + }; + + $scope.$watch(function(){ + return $location.path(); + }, update); + + $scope.$watch($attr.quaySection, update); + } + }; +}); + + quayApp.directive('quayClasses', function(Features, Config) { return { priority: 580, diff --git a/static/partials/landing-normal.html b/static/partials/landing-normal.html index 783b60786..087fe3be0 100644 --- a/static/partials/landing-normal.html +++ b/static/partials/landing-normal.html @@ -1,18 +1,25 @@
+
+ + + + + + + + + Quay.io is now part of CoreOS! Read the blog post. +
+
-
- - -
- +

Secure hosting for private Docker* repositories

Use the Docker images your team needs with the safety of private repositories

-
Private repository plans starting at $12/mo
+
Get 20 free private repos for 6 months
diff --git a/static/partials/new-repo.html b/static/partials/new-repo.html index 92d2c3ca6..0d9417288 100644 --- a/static/partials/new-repo.html +++ b/static/partials/new-repo.html @@ -17,8 +17,8 @@
-
-
+ +
@@ -45,8 +45,8 @@
-
-
+ +
Repository Visibility
@@ -98,8 +98,8 @@
-
-
+ +
Initialize repository
@@ -137,8 +137,8 @@
-
-
+ +
Upload DockerfileArchive
@@ -153,8 +153,8 @@
-
-
+ +
You will be redirected to authorize via GitHub once the repository has been created
@@ -162,8 +162,8 @@
-
-
+ +
-
-
-

Enterprise

-
I work in an enterprise and we need to run Quay.io on our servers. Can I do so?
-
Please contact us at our support email address to discuss enterprise plans.
-
-
diff --git a/templates/base.html b/templates/base.html index 0a4a04461..09c263466 100644 --- a/templates/base.html +++ b/templates/base.html @@ -91,42 +91,40 @@ mixpanel.init("{{ mixpanel_key }}", { track_pageview : false, debug: {{ is_debug {% endif %} - -
- + +