Addon page styling tweaks

Automattic · Jan 25, 2015 · b2b5e80 · b2b5e80
1 parent 2c2bc97
commit b2b5e80
Show file tree

Hide file tree

Showing 10 changed files with 102 additions and 14 deletions.
diff --git a/assets/css/admin.css b/assets/css/admin.css
diff --git a/assets/css/admin.less b/assets/css/admin.less
@@ -258,14 +258,67 @@
 
 /* Addons */
 .wp_job_manager_addons_wrap {
+	#job-manager-addons-banner {
+		position: relative;
+		background: #d85677;
+		padding: 0 2em 0 5em;
+		color: #fff;
+		margin: 10px .25% 20px 0;
+		border-color: rgba(0,0,0,.1);
+		overflow: hidden;
+		strong {
+			font-size: 1.25em;
+			line-height: 1/1.25em;
+			text-shadow: 0 2px 0 rgba(0,0,0,.1);
+			font-weight: normal;
+			float: left;
+			padding: 1/1.25*2em 0;
+		}
+		a.button {
+			color: #fff;
+			text-decoration: none;
+			font-weight: bold;
+			float: right;
+			background: #d85677;
+			border: 1px solid #fff;
+			line-height: 1em;
+			padding: 1em;
+			margin: 1em 0;
+			text-shadow: 0 2px 0 rgba(0,0,0,.1);
+			box-shadow: 0 2px 0 rgba(0,0,0,.1);
+			height: auto;
+			position: relative;
+		}
+		&:before {
+			display: inline-block;
+			-webkit-font-smoothing: antialiased;
+			vertical-align: top;
+			font-family: 'jm-logo';
+			content: "\e600";
+			top: .02em;
+			left: 0;
+			position: absolute;
+			text-shadow: 0 2px 0 rgba(0,0,0,0.1);
+			font-size: 5em;
+			font-weight: normal;
+			text-align: center;
+			width: 1em;
+			height: 1em;
+			line-height: 1em;
+		}
+	}
 	.products {
 		overflow: hidden;
 		li {
 			display: inline-block;
-			margin: 0 10px 10px 0 !important;
+			margin: 0 1% 10px 0 !important;
 			padding: 0;
 			vertical-align: top;
-			width: 250px;
+			width: 24%;
+			min-width: 250px;
+			-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+			-moz-box-sizing: border-box;    /* Firefox, other Gecko */
+			box-sizing: border-box;         /* Opera/IE 8+ */
 			border: 1px solid #ddd;
 			-webkit-box-shadow:
 				inset 0 1px 0 rgba(255,255,255,0.2),
@@ -275,32 +328,44 @@
 				inset 0 -1px 0 rgba(0,0,0,0.1);
 			overflow: hidden;
 			position: relative;
+			opacity: 0.8;
+			&:nth-child(4n+0) {
+				margin-right: 0 !important;
+			}
 			a {
 				color: inherit;
 				text-decoration: none;
 			}
 			img {
-				max-width: 100%;
+				width: 100%;
 				height: auto;
 				display: block;
+				padding: 0;
 				margin: 0;
 				background: #fff;
 				border-bottom: 1px solid rgba(0,0,0,0.1);
 			}
 			h2 {
 				margin: 0 !important;
-				padding: 10px 10px !important;
+				padding: 10px 0 !important;
 				line-height: 1;
 				background: rgba(255,255,255,0.6);
 				border-bottom: 1px solid rgba(0,0,0,0.1);
 				color: #000;
 				text-align: center;
 				position: absolute;
-				width: 230px;
+				width: 100%;
 				top: 0;
 				left: 0;
 				font-size: 16px;
 				text-shadow: none;
+				display: none;
+			}
+			&:hover, &:focus {
+				opacity: 1;
+				h2 {
+					display: block;
+				}
 			}
 			.third_party {
 				display: none;

diff --git a/assets/css/frontend.css b/assets/css/frontend.css
diff --git a/assets/css/icons.less b/assets/css/icons.less
@@ -8,22 +8,33 @@
   font-weight: normal;
   font-style: normal;
 }
-
+
+@font-face {
+  font-family: 'jm-logo';
+  src:url('../font/jm-logo/jm.eot?ycsbky');
+  src:url('../font/jm-logo/jm.eot?#iefixycsbky') format('embedded-opentype'),
+    url('../font/jm-logo/jm.woff?ycsbky') format('woff'),
+    url('../font/jm-logo/jm.ttf?ycsbky') format('truetype'),
+    url('../font/jm-logo/jm.svg?ycsbky#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
 .jm-icon {
   font-family: "job-manager" !important;
   font-style: normal;
   font-weight: normal;
   speak: none;
- 
+
   display: inline-block;
   text-decoration: inherit;
   width: 1em;
   text-align: center;
- 
+
   /* For safety - reset parent styles, that can break glyph codes*/
   font-variant: normal;
   text-transform: none;
-     
+
   /* fix buttons height, for twitter bootstrap */
   line-height: 1em;
 }