Commit 7b8d1765 authored by Thomas Park's avatar Thomas Park
Browse files

journal: big revamp to newspaper look

parent 0b22fae9
This diff is collapsed.
This diff is collapsed.
......@@ -6,21 +6,55 @@
// TYPOGRAPHY
// -----------------------------------------------------
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('http://fonts.googleapis.com/css?family=News+Cycle:400,700');
h1, h2, h3, h4, h5, h6, .navbar .brand {
font-weight: 700;
h1, h2, h3, h4, h5, h6 {
line-height: 1.5em;
}
h1 {
font-size: 48px;
}
h2 {
font-size: 36px;
}
h3 {
font-size: 28px;
}
h4 {
font-size: 20px;
}
h5 {
font-size: 13px;
}
h6 {
color: @black;
font-weight: bold;
}
// SCAFFOLDING
// -----------------------------------------------------
a {
text-decoration: underline;
p > a,
address > a,
.breadcrumb a,
abbr[title] {
text-decoration: none;
border-bottom: 1px dotted;
&:hover {
text-decoration: none;
border-bottom: 1px solid;
}
}
.nav a, .navbar .brand, .subnav a, a.btn, .dropdown-menu a {
text-decoration: none;
.page-header {
border-bottom: 2px solid @grayLighter;
}
// NAVBAR
......@@ -28,106 +62,143 @@ a {
.navbar {
font-family: @sansFontFamily;
font-weight: bold;
.navbar-inner {
@shadow: 0 2px 4px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
.box-shadow(@shadow);
border-top: 1px solid #E5E5E5;
border-top: 2px solid @grayLighter;
border-bottom: 2px solid @grayLighter;
.border-radius(0);
.box-shadow(none);
}
.brand {
padding: 16px 20px 20px;
font-size: 24px;
font-weight: bold;
text-shadow: none;
&:hover {
background-color: #EEEEEE;
}
}
.navbar-text {
line-height: 68px;
text-transform: uppercase;
}
.nav > li > a {
padding: 20px 10px 21px;
font-size: 18px;
text-shadow: none;
text-transform: uppercase;
}
.dropdown-menu {
.border-radius(0);
.nav > li.active > a {
background-color: transparent;
color: @headingsColor;
}
.nav li.dropdown.active > .dropdown-toggle,
.nav li.dropdown.active > .dropdown-toggle:hover,
.nav li.dropdown.open > .dropdown-toggle,
.nav li.dropdown.active.open > .dropdown-toggle,
.nav li.dropdown.active.open > .dropdown-toggle:hover {
background-color: @grayLighter;
color: @linkColor;
.navbar-text {
margin-top: 21px;
padding-left: 10px;
padding-right: 10px;
font-size: 18px;
line-height: 18px;
}
.nav li.dropdown .dropdown-toggle .caret,
.nav .open .caret,
.nav .open .dropdown-toggle:hover .caret {
border-top-color: @black;
opacity: 1;
.nav li.dropdown > .dropdown-toggle:hover,
.nav li.dropdown.active > .dropdown-toggle:hover {
color: @black;
}
.nav-collapse.in .nav li > a:hover {
background-color: @grayLighter;
.nav li.dropdown > .dropdown-toggle .caret,
.nav li.dropdown.open > .dropdown-toggle:hover .caret {
border-top-color: @headingsColor;
border-bottom-color: @headingsColor;
}
.nav-collapse .nav li > a {
color: @textColor;
text-decoration: none;
font-weight: normal;
.dropdown-menu {
.border-radius(0);
a {
font-size: 15px;
font-weight: bold;
}
}
.nav-collapse .navbar-form,
.nav-collapse .navbar-search {
border-color: transparent;
.nav-collapse.collapse {
.nav li > a {
color: @headingsColor;
&:hover {
background-color: @dropdownLinkBackgroundHover;
}
}
.navbar-text {
margin-top: 0;
}
}
.navbar-search .search-query,
.navbar-search .search-query:hover {
border: 1px solid @grayLighter;
border: 2px solid @grayLighter;
color: @textColor;
.placeholder(@gray);
}
}
div.subnav {
height: 54px;
background-color: @bodyBackground;
background-image: none;
@shadow: 0 1px 2px rgba(0,0,0,.25);
.box-shadow(@shadow);
.box-shadow(none);
border: 2px solid @grayLighter;
border-left: none;
border-right: none;
.border-radius(0);
&.subnav-fixed {
top: @navbarHeight;
}
.nav > li > a:hover,
.nav > .active > a,
.nav > .active > a:hover {
color: @textColor;
text-decoration: none;
font-weight: normal;
.nav > li > a,
.nav > li:first-child > a,
.nav > li.active > a {
padding: 20px 15px;
border-left: none;
border-right: none;
background-color: transparent;
.box-shadow(none);
font-family: @sansFontFamily;
color: @headingsColor;
font-size: 15px;
font-weight: bold;
&:hover {
padding: 20px 15px;
background-color: transparent;
.box-shadow(none);
color: @headingsColor;
}
}
.nav > li:first-child > a,
.nav > li:first-child > a:hover {
.border-radius(0);
li.dropdown > .dropdown-toggle .caret ,
li.dropdown > .dropdown-toggle:hover .caret,
li.dropdown.open > .dropdown-toggle .caret {
border-top-color: @headingsColor;
border-bottom-color: @headingsColor;
opacity: 1;
}
li.dropdown.open .dropdown-toggle,
li.dropdown.open .dropdown-toggle:hover {
background-color: @bodyBackground;
color: @headingsColor;
}
}
// BUTTONS
// -----------------------------------------------------
.btn-primary {
.buttonBackground(lighten(@linkColor, 5%), @linkColor);
}
[class^="icon-"], [class*=" icon-"] {
vertical-align: -2px;
vertical-align: baseline;
}
// MODALS
......@@ -142,30 +213,74 @@ div.subnav {
border-bottom: none;
}
.modal-header .close {
text-decoration: none;
}
.modal-footer {
background: transparent;
.box-shadow(none);
border-top: none;
}
.close,
.close:hover {
border-bottom: none;
}
// MISC
// -----------------------------------------------------
code, pre, pre.prettyprint, .well {
.hero-unit {
.box-shadow(none);
border: 1px solid rgba(0,0,0,.05);
.border-radius(0);
h1 {
line-height: 1.5em;
}
}
.well {
.border-radius(0);
background-color: @grayLighter;
.box-shadow(none);
}
.hero-unit {
.box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
border: 1px solid rgba(0,0,0,.05);
.table-bordered {
.border-radius(0);
.box-shadow(none);
}
.table-bordered, .well, .prettyprint {
a.thumbnail:hover {
.box-shadow(0 1px 3px 1px rgba(0, 0, 0, 0.3));
border-color: #ddd;
}
code, pre, pre.prettyprint {
.border-radius(0);
background-color: @grayLighter;
.box-shadow(none);
}
@media (max-width: 768px) {
div.subnav {
height: auto;
.nav > li.active > a {
border-top: none;
}
.nav > li:hover > a,
.nav > li:first-child:hover > a,
.nav > li.active:hover > a,
.nav > li.dropdown.open .dropdown-toggle,
.nav > li.dropdown.open .dropdown-toggle:hover {
background-color: @dropdownLinkBackgroundHover;
}
}
.nav-tabs .open .dropdown-toggle,
.nav-pills .open .dropdown-toggle,
.nav > li.dropdown.open.active > a:hover {
border-color: #e5e5e5;
}
}
\ No newline at end of file
......@@ -12,9 +12,9 @@
// -------------------------
@black: #000;
@grayDarker: #222;
@grayDark: #333;
@gray: #888;
@grayLight: #999;
@grayDark: #888;
@gray: #999;
@grayLight: #bbb;
@grayLighter: #eee;
@white: #fff;
......@@ -33,37 +33,37 @@
// Scaffolding
// -------------------------
@bodyBackground: #FCFBFD;
@textColor: @grayDarker;
@bodyBackground: @white;
@textColor: @grayDark;
// Links
// -------------------------
@linkColor: @textColor;
@linkColorHover: @gray;
@linkColorHover: @linkColor;
// Typography
// -------------------------
@sansFontFamily: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
@sansFontFamily: "News Cycle", "Arial Narrow Bold", sans-serif;
@serifFontFamily: Georgia, "Times New Roman", Times, serif;
@monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace;
@baseFontSize: 14px;
@baseFontFamily: @sansFontFamily;
@baseFontSize: 13px;
@baseFontFamily: @serifFontFamily;
@baseLineHeight: 18px;
@altFontFamily: @serifFontFamily;
@altFontFamily: @sansFontFamily;
@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
@headingsFontFamily: @sansFontFamily; // empty to use BS default, @baseFontFamily
@headingsFontWeight: bold; // instead of browser default, bold
@headingsColor: inherit; // empty to use BS default, @textColor
@headingsColor: @black; // empty to use BS default, @textColor
// Tables
// -------------------------
@tableBackground: transparent; // overall background-color
@tableBackgroundAccent: @grayLighter; // for striping
@tableBackgroundHover: #f5f5f5; // for hover
@tableBackgroundAccent: #f5f5f5; // for striping
@tableBackgroundHover: @grayLighter; // for hover
@tableBorder: #ddd; // table and cell border
......@@ -71,25 +71,25 @@
// -------------------------
@btnBackground: @white;
@btnBackgroundHighlight: darken(@white, 10%);
@btnBorder: darken(@white, 20%);
@btnBorder: darken(@white, 15%);
@btnPrimaryBackground: @linkColor;
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 15%);
@btnPrimaryBackground: lighten(@linkColor, 5%);
@btnPrimaryBackgroundHighlight: @linkColor;
@btnInfoBackground: #5bc0de;
@btnInfoBackgroundHighlight: #2f96b4;
@btnInfoBackground: lighten(@blue, 5%);
@btnInfoBackgroundHighlight: @blue;
@btnSuccessBackground: #62c462;
@btnSuccessBackgroundHighlight: #51a351;
@btnSuccessBackground: lighten(@green, 5%);
@btnSuccessBackgroundHighlight: @green;
@btnWarningBackground: lighten(@orange, 10%);
@btnWarningBackgroundHighlight: @orange;
@btnDangerBackground: #ee5f5b;
@btnDangerBackgroundHighlight: #bd362f;
@btnDangerBackground: lighten(@red, 10%);
@btnDangerBackgroundHighlight: @red;
@btnInverseBackground: @linkColor;
@btnInverseBackgroundHighlight: darken(@linkColor, 5%);
@btnInverseBackground: lighten(@grayDark, 5%);
@btnInverseBackgroundHighlight: @grayDark;
// Forms
......@@ -104,11 +104,11 @@
// -------------------------
@dropdownBackground: @bodyBackground;
@dropdownBorder: rgba(0,0,0,.2);
@dropdownLinkColor: @textColor;
@dropdownLinkColorHover: @textColor;
@dropdownLinkBackgroundHover: #eee;
@dropdownDividerTop: #e5e5e5;
@dropdownDividerBottom: @white;
@dropdownLinkColor: @headingsColor;
@dropdownLinkColorHover: @headingsColor;
@dropdownLinkBackgroundHover: @grayLighter;
@dropdownDividerTop: @grayLighter;
@dropdownDividerBottom: @grayLighter;
......@@ -145,16 +145,16 @@
// Navbar
// -------------------------
@navbarHeight: 70px;
@navbarHeight: 60px;
@navbarBackground: @bodyBackground;
@navbarBackgroundHighlight: @bodyBackground;
@navbarText: @textColor;
@navbarLinkColor: @linkColor;
@navbarLinkColorHover: @linkColor;
@navbarLinkColorActive: @navbarLinkColorHover;
@navbarLinkBackgroundHover: @grayLighter;
@navbarLinkBackgroundActive: @grayLighter;
@navbarLinkColor: @headingsColor;
@navbarLinkColorHover: @headingsColor;
@navbarLinkColorActive: @headingsColor;
@navbarLinkBackgroundHover: transparent;
@navbarLinkBackgroundActive: transparent;
@navbarSearchBackground: lighten(@navbarBackground, 25%);
@navbarSearchBackgroundFocus: @white;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment