Permalink
Browse files

Additional style updates based on feedback and post-rebase fixup

  • Loading branch information...
1 parent 5853c9a commit 713c190e2bd98704d8502bb5f277e436538cf0b6 @daveaglick daveaglick committed Dec 1, 2015
@@ -1,8 +1,4 @@
-<div class="non-semantic-protector">
- <h1 class="container-ribbon">
- <strong class="ribbon-content">I maintain a project!</strong>
- </h1>
-</div>
+<h1><span class="header-inside">I maintain a project!</span></h1>
<p>
We're looking for projects who can take the time out to
@@ -1,8 +1,4 @@
-<div class="non-semantic-protector">
- <h1 class="container-ribbon">
- <strong class="ribbon-content">I want to get involved!</strong>
- </h1>
-</div>
+<h1><span class="header-inside">I want to get involved!</span></h1>
<p>
This is a list of projects which have curated tasks
View
@@ -20,6 +20,7 @@
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700' rel='stylesheet' type='text/css'>
+ <link href='https://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
View
@@ -1,7 +1,9 @@
<header>
<a id="forkme_banner" href="https://github.com/dahlbyk/up-for-grabs.net">View on GitHub</a>
- <a id="go-back-home" href="/"><img src="/images/logo.png" alt="Up For Grabs"></a>
- <h1 class="ribbon">
- <strong class="ribbon-content">Explore open source projects and <a href="http://nikcodes.com/2013/05/10/new-contributor-jump-in">jump in!</a></strong>
- </h1>
+ <div class="container">
+ <a id="go-back-home" href="/"><img src="/images/logo.png" alt="Up For Grabs"></a>
+ <h1 class="ribbon">
+ <strong class="ribbon-content">Explore open source projects and <a href="http://nikcodes.com/2013/05/10/new-contributor-jump-in">jump in!</a></strong>
+ </h1>
+ </div>
</header>
@@ -6,7 +6,7 @@
{% include head.html %}
<body>
{% include header.html %}
- <div id='container'>
+ <div id="main-container" class='container'>
{{ content }}
</div>
{% include footer.html %}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Oops, something went wrong.
View
@@ -6,7 +6,7 @@
<square150x150logo src="/mstile-150x150.png"/>
<square310x310logo src="/mstile-310x310.png"/>
<wide310x150logo src="/mstile-310x150.png"/>
- <TileColor>#2b5797</TileColor>
+ <TileColor>#ffffff</TileColor>
</tile>
</msapplication>
</browserconfig>
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -6,11 +6,7 @@
{% include before.html %}
</div>
<div class="block">
- <div class="non-semantic-protector">
- <h1 class="container-ribbon">
- <strong class="ribbon-content">Projects</strong>
- </h1>
- </div>
+ <h1><span class="header-inside">Projects</span></h1>
<div id="projects-panel">
</div>
</div>
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -63,26 +63,41 @@ body {
h1, h2, h3, h4, h5, h6 {
margin: 10px 0;
- font-weight: 700;
- color:#222222;
- letter-spacing: -1px;
+}
+
+h1, h2, h3 {
+ font-family: 'Cookie', cursive;
+ margin-bottom: 20px;
+ color: #2E7BA9;
}
h1 {
- font-size: 36px;
- font-weight: 700;
+ font-size: 56px;
+}
+
+.block h1 {
+ background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1JyBoZWlnaHQ9JzUnPgogIDxyZWN0IHdpZHRoPSc1JyBoZWlnaHQ9JzUnIGZpbGw9J3doaXRlJy8+CiAgPHBhdGggZD0nTTAgNUw1IDBaTTYgNEw0IDZaTS0xIDFMMSAtMVonIHN0cm9rZT0nIzg4OCcgc3Ryb2tlLXdpZHRoPScxJy8+Cjwvc3ZnPg==");
+ text-align: center;
+ text-shadow:
+ 1px 1px 0 #225B7D;
+}
+.block h1 .header-inside {
+ padding: 2px 16px;
+ background: white;
}
h2 {
- font-size: 24px;
+ font-size: 28px;
}
h3 {
- font-size: 18px;
+ font-size: 22px;
}
h4, h5, h6 {
+ font-family: 'Open Sans Condensed', sans-serif;
font-size: 16px;
+ color: #225B7D;
}
p {
@@ -198,9 +213,6 @@ blockquote {
margin: 0;
font-style: normal !important; }
-header {
- text-align: center; }
-
footer {
width: 100%;
max-width: 600px;
@@ -211,32 +223,36 @@ footer {
footer * {
color: #797979; }
-#container {
+.container {
*zoom: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
max-width: 750px;
- background: #fff;
- margin: 40px auto 20px;
- border-radius: 7px;
- border: 1px solid #eee;
+ margin: 0 auto 0;
position: relative; }
-#container:before, #container:after {
+.container:before, .container:after {
content: " ";
display: table; }
-#container:after {
+.container:after {
clear: both; }
-#container .block {
+
+#main-container {
+ background: #fff;
+ border-radius: 7px;
+ margin: 0 auto 20px;
+ border: 1px solid #eee;
+}
+#main-container .block {
border-top: 1px solid #efefef;
border-bottom: 1px solid #efefef;
padding: 30px 40px 24px; }
-#container .block:first-child, #container .block + .block {
+#main-container .block:first-child, #main-container .block + .block {
border-top: 0; }
-#container .block:last-child {
+#main-container .block:last-child {
border-bottom: 0; }
-#container .block a.main {
+#main-container .block a.main {
display: inline-block;
vertical-align: baseline;
zoom: 1;
@@ -245,9 +261,9 @@ footer {
padding: 2px 2px;
margin-right: 12px;
margin-bottom: 6px; }
-#container .block a.main:last-of-type {
+#main-container .block a.main:last-of-type {
margin-right: 0; }
-#container .block .button {
+#main-container .block .button {
display: inline-block;
vertical-align: baseline;
zoom: 1;
@@ -412,22 +428,24 @@ form {
/* https://css-tricks.com/snippets/css/ribbon/ */
.ribbon {
font-size: 28px !important;
- width: 50%;
- position: relative;
+ width: 40%;
+ position: absolute;
background: #2E7BA9;
color: #E4F0F8;
text-align: center;
padding: .5em 1em;
margin: 0 auto 0;
+ right: 2em;
+ top: 25%;
}
.ribbon-content {
font-family: 'Open Sans Condensed', sans-serif;
text-transform: uppercase;
}
-.ribbon a, .container-ribbon a {
+.ribbon a {
color: #fff;
}
-.ribbon:before, .ribbon:after, .container-ribbon:after {
+.ribbon:before, .ribbon:after {
content: "";
position: absolute;
display: block;
@@ -440,49 +458,27 @@ form {
border-right-width: 1.5em;
border-left-color: transparent;
}
-.ribbon:after, .container-ribbon:after {
+.ribbon:after {
right: -2em;
border-left-width: 1.5em;
border-right-color: transparent;
}
-.ribbon .ribbon-content:before, .ribbon .ribbon-content:after,
-.container-ribbon .ribbon-content:before, .container-ribbon .ribbon-content:after {
+.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
content: "";
position: absolute;
display: block;
border-style: solid;
border-color: #163A50 transparent transparent transparent;
bottom: -1em;
}
-.ribbon .ribbon-content:before, .container-ribbon .ribbon-content:before {
+.ribbon .ribbon-content:before {
left: 0;
border-width: 1em 0 0 1em;
}
-.ribbon .ribbon-content:after, .container-ribbon .ribbon-content:after {
+.ribbon .ribbon-content:after {
right: 0;
border-width: 1em 1em 0 0;
}
-
-.container-ribbon {
- font-size: 16px !important;
- width: 30%;
- position: relative;
- left: -258px;
- background: #4499CC;
- color: #fff;
- text-align: left;
- padding: 1em 2em;
- margin: 0 auto 2em;
-}
-.container-ribbon:after {
- border: 1.5em solid #2E7BA9;
- border-right-color: transparent;
-}
-.container-ribbon .ribbon-content:before, .container-ribbon .ribbon-content:after {
- border-color: #225B7D transparent transparent transparent;
-}
-
-.non-semantic-protector { position: relative; z-index: 1; }
#downloads {
position: absolute;
@@ -574,18 +570,42 @@ form {
width: 16px;
}
+.popular-tags li {
+ display: inline-block;
+ font-size: 18px;
+ padding-left: 0;
+}
+.popular-tags li::before {
+ content: ' ';
+ margin-right: 12px;
+}
+
@media (max-width: 768px) {
body {
padding: 0 0; }
#forkme_banner {
display: none;
}
- #container {
+ header {
+ text-align: center; }
+ h1 {
+ font-size: 42px;
+ }
+ .block h1 {
+ line-height: 42px;
+ background: none;
+ text-align: left;
+ text-shadow: none;
+ }
+ .block h1 .header-inside {
+ padding: 0;
+ }
+ #main-container {
border-right: none;
- border-left: none;
+ border-left: none;
border-radius: 0;
}
- #container .block {
+ #main-container .block {
padding: 20px;
}
table.projects td {
@@ -594,15 +614,11 @@ form {
}
.ribbon {
font-size: 16px !important;
- padding: 1em 2em;
- }
- .container-ribbon {
- left: -20px;
- width: 60%;
- margin: 0 0 2em;
- }
- .container-ribbon .ribbon-content:before {
- border: none;
- display: none;
+ position: relative;
+ margin-bottom: 2em;
+ width: 50%;
+ right: 0;
+ top: 0;
}
-}
+}
+

0 comments on commit 713c190

Please sign in to comment.