Skip to content

Commit

Permalink
Use SCSS and minified versions for JS/CSS. Fix Twitter button width i…
Browse files Browse the repository at this point in the history 
…ssue (thank you Twitter :P)
  • Loading branch information
@p2
p2 committed Feb 15, 2013
1 parent 3b0f0f2 commit 433dfa7
Show file tree
Hide file tree
Showing 4 changed files with 131 additions and 93 deletions.
6 changes: 3 additions & 3 deletions index.html
View file
Expand Up @@ -12,7 +12,7 @@

<!-- header -->
<div id="header">
<div style="float:right;">
<div id="twitter_follow">
<a href="https://twitter.com/medcalc" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @medcalc</a>
</div>
<span id="tagline">The latest news</span>
Expand Down Expand Up @@ -44,7 +44,7 @@

<!-- scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script src="news.js"></script>
<script src="news.min.js"></script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</body>
</html>
</html>
7 changes: 7 additions & 0 deletions news.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

106 changes: 16 additions & 90 deletions style.css
View file
@@ -1,98 +1,24 @@
/*************************************************
* MedCalc Newsfeed Styles *
* Created by Pascal Pfiffner, 2012-11-09 *
* Copyright 2012 MedCalc, all rights reserved *
* "debut_light.png" by Luke McDonald *
*************************************************/
/************************************************* MedCalc Newsfeed Styles * Created by Pascal Pfiffner, 2012-11-09 * Copyright 2012 MedCalc, all rights reserved * "debut_light.png" by Luke McDonald * ************************************************/
html, body { margin: 0; padding: 0; font-family: "Helvetica Neue", Helvetica, "Lucida Grande", sans-serif; font-size: 17px; line-height: 1.4; background: url("debut_light.png") top left repeat #f1f1f1; }

a { color: #0075cb; text-decoration: none; }
a:visited { color: #757575; text-decoration: none; }

html, body {
margin: 0; padding: 0;
font-family: "Helvetica Neue", Helvetica, "Lucida Grande", sans-serif; font-size: 17px;
line-height: 1.4;
background: url('debut_light.png') top left repeat rgb(241,241,241);
}
#header { min-height: 50px; padding: 20px; clear: right; }
#header img { width: 50px; height: 50px; border: 1px solid #a1a7ad; -webkit-border-radius: 5px; border-radius: 5px; background-color: white; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 0 8px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 0 8px rgba(0, 0, 0, 0.1); }

a {
color: rgb(0,117,203);
text-decoration: none;
}
#tagline { clear: right; float: right; margin: 4px 1px 0 0; font-size: 0.85em; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); color: rgba(0, 0, 0, 0.75); }

a:visited {
color: rgb(117,117,117);
text-decoration: none;
}
#loader { padding: 30px 20px; text-align: center; color: rgba(0, 0, 0, 0.75); }

#twitter_follow { float: right; width: 144px; }

/* header */
#header {
min-height: 50px;
padding: 20px;
clear: right;
}
#news { padding: 0 20px 20px; }

#header img {
width: 50px; height: 50px;
border: 1px solid rgb(161,167,173);
-webkit-border-radius: 5px; border-radius: 5px;
background-color: white;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.8), inset 0 0 8px rgba(0,0,0,0.1); box-shadow: 0 1px 0 rgba(255,255,255,0.8), inset 0 0 8px rgba(0,0,0,0.1);
}

#tagline {
clear: right; float: right;
margin: 4px 1px 0 0;
font-size: 0.85em; text-shadow: 0 1px 0 rgba(255,255,255,0.8);
color: rgba(0,0,0,0.75);
}


/* loader */
#loader {
padding: 30px 20px;
text-align: center;
color: rgba(0,0,0,0.75);
}


/* news */
#news {
padding: 0 20px 20px;
}

.parent {
border: 1px solid rgb(161,167,173);
-webkit-border-radius: 5px; border-radius: 5px;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.8); box-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

.newsitem {
padding: 0.75em 20px;
word-wrap: break-word;
border-bottom: 1px solid rgb(202,202,202); border-top: 1px solid rgba(255,255,255,0.8);
background-color: white;
}
.newsitem:first-child {
border-top-color: rgba(0,0,0,0.1);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.newsitem:last-child {
border-bottom: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}

.newsitem.unread-true {
padding-left: 18px;
border-left: 2px solid rgb(78,163,223);
-webkit-box-shadow: inset 5px 0 5px -5px rgba(78,163,223,0.75);
}

.newsitem .date {
float: right;
margin: 0 0 0.5em 0.75em;
font-size: 0.85em;
color: rgba(0,0,0,0.6);
}
.parent { border: 1px solid #a1a7ad; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); }

.newsitem { padding: 0.75em 20px; word-wrap: break-word; border-bottom: 1px solid #cacaca; border-top: 1px solid rgba(255, 255, 255, 0.8); background-color: white; }
.newsitem:first-child { border-top-color: rgba(0, 0, 0, 0.1); border-top-left-radius: 5px; border-top-right-radius: 5px; }
.newsitem:last-child { border-bottom: none; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
.newsitem.unread-true { padding-left: 18px; border-left: 2px solid #4ea3df; -webkit-box-shadow: inset 5px 0 5px -5px rgba(78, 163, 223, 0.75); }
.newsitem .date { float: right; margin: 0 0 0.5em 0.75em; font-size: 0.85em; color: rgba(0, 0, 0, 0.6); }
105 changes: 105 additions & 0 deletions style.scss
View file
@@ -0,0 +1,105 @@
/*************************************************
* MedCalc Newsfeed Styles *
* Created by Pascal Pfiffner, 2012-11-09 *
* Copyright 2012 MedCalc, all rights reserved *
* "debut_light.png" by Luke McDonald *
*************************************************/


html, body {
margin: 0; padding: 0;
font-family: "Helvetica Neue", Helvetica, "Lucida Grande", sans-serif; font-size: 17px;
line-height: 1.4;
background: url('debut_light.png') top left repeat rgb(241,241,241);
}

a {
color: rgb(0,117,203);
text-decoration: none;

&:visited {
color: rgb(117,117,117);
text-decoration: none;
}
}


// header
#header {
min-height: 50px;
padding: 20px;
clear: right;

img {
width: 50px; height: 50px;
border: 1px solid rgb(161,167,173);
-webkit-border-radius: 5px; border-radius: 5px;
background-color: white;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.8), inset 0 0 8px rgba(0,0,0,0.1); box-shadow: 0 1px 0 rgba(255,255,255,0.8), inset 0 0 8px rgba(0,0,0,0.1);
}
}

#tagline {
clear: right; float: right;
margin: 4px 1px 0 0;
font-size: 0.85em; text-shadow: 0 1px 0 rgba(255,255,255,0.8);
color: rgba(0,0,0,0.75);
}


// loader
#loader {
padding: 30px 20px;
text-align: center;
color: rgba(0,0,0,0.75);
}


// Services
#twitter_follow {
float: right;
width: 144px;
}


// news
#news {
padding: 0 20px 20px;
}

.parent {
border: 1px solid rgb(161,167,173);
-webkit-border-radius: 5px; border-radius: 5px;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.8); box-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

.newsitem {
padding: 0.75em 20px;
word-wrap: break-word;
border-bottom: 1px solid rgb(202,202,202); border-top: 1px solid rgba(255,255,255,0.8);
background-color: white;

&:first-child {
border-top-color: rgba(0,0,0,0.1);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
&:last-child {
border-bottom: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}

&.unread-true {
padding-left: 18px;
border-left: 2px solid rgb(78,163,223);
-webkit-box-shadow: inset 5px 0 5px -5px rgba(78,163,223,0.75);
}

.date {
float: right;
margin: 0 0 0.5em 0.75em;
font-size: 0.85em;
color: rgba(0,0,0,0.6);
}
}

0 comments on commit 433dfa7

Please sign in to comment.