' . __( 'Side: ', 'gf2013' ), 'after' => '
' ) ); ?>
+
-
-
-
- ; ?>/images/leaf_left.png)
+
diff --git a/wp-content/themes/gf2013/javascripts/main.js b/wp-content/themes/gf2013/javascripts/main.js
index 1a2bed1..e377222 100644
--- a/wp-content/themes/gf2013/javascripts/main.js
+++ b/wp-content/themes/gf2013/javascripts/main.js
@@ -1,3 +1,3 @@
$(document).ready(function () {
- $(".nav-wrapper").stick();
+ $("#nav-wrapper").stick();
});
diff --git a/wp-content/themes/gf2013/sass/_settings.scss b/wp-content/themes/gf2013/sass/_settings.scss
index 7d044d7..3b463dc 100644
--- a/wp-content/themes/gf2013/sass/_settings.scss
+++ b/wp-content/themes/gf2013/sass/_settings.scss
@@ -66,7 +66,7 @@ $secondary-color: #e9e9e9;
//
$row-width: 80em;
- $column-gutter: 3.125em;
+$column-gutter: 3.125em;
// $total-columns: 12;
//
diff --git a/wp-content/themes/gf2013/sass/app.scss b/wp-content/themes/gf2013/sass/app.scss
index 9561f85..92505b2 100644
--- a/wp-content/themes/gf2013/sass/app.scss
+++ b/wp-content/themes/gf2013/sass/app.scss
@@ -45,6 +45,11 @@
// @import "foundation/components/tooltips";
// @import "foundation/components/dropdown";
+/* TODO
+ * - design up
+ * - foundation fixed menu
+ *
+ * */
// My variables
$grey: #2d2b29;
$white: #f2efe5;
@@ -54,14 +59,14 @@ $headerfont: "Julius Sans One";
$bodyfont: "Josefin Sans";
$prettyfont: "Cinzel Decorative";
-// Styling
+/* Global styles */
body,html {
height: 100%;
h1,h2,h3 {
letter-spacing: 0.1em;
- font-weight: normal;
color: #f4d3b4;
+ font-family: "Cinzel Decorative";
a {
color: #f4d3b4;
}
@@ -69,50 +74,89 @@ body,html {
h1 {
font-size: 1.5em;
}
+ h2 {
+ font-family: inherit;
+ }
}
.page-wrapper {
height: 100%;
}
-#masthead {
- background-color: $grey;
- @include border-radius(2px);
-}
#page {
- margin-top: 2.7em;
-
.site-title {
color: $grey;
- background-color: $body-bg;
font-family: $headerfont;
- font-size: 2em;
+ font-size: 3.5em;
font-weight: normal;
text-decoration: none;
- margin-bottom: 0;
+ text-align: center;
+ margin-bottom: 0.4em;
margin-left: 0;
margin-right: 0;
- margin-top: 0.15em;
+ margin-top: 0.5em;
line-height: 1.1;
- padding-left: 6px;
a {
color: $grey;
}
}
- @media only screen and (min-width: 48em) {
- .site-title {
- font-size: 3.5em;
+ #content {
+ &.background-0 {
+ background-image: url("../images/bg-0.jpg");
+ }
+ &.background-1 {
+ background-image: url("../images/bg-1.jpg");
+ }
+ &.background-2 {
+ background-image: url("../images/bg-2.jpg");
+ }
+ &.background-3 {
+ background-image: url("../images/bg-3.jpg");
+ }
+ &.background-4 {
+ background-image: url("../images/bg-4.jpg");
+ }
+ &.background-5 {
+ background-image: url("../images/bg-5.jpg");
+ }
+ background-image: url("../images/bg-0.jpg");
+ background-repeat: no-repeat;
+ min-height: 694px;
+ padding-right: 24px;
+ .page {
+ height: 100%;
+ .entry-wrap {
+ min-height: 694px;
+ background-color: $grey;
+ border-right: 20px solid $primary-color;
+
+ .entry-title {
+ background-color: $grey;
+ padding-top: 1em;
+ padding-bottom: 0.8em;
+ margin-bottom: 0;
+ margin-top: 0;
+ }
+ .entry-content {
+ ul {
+ padding-left: 20px;
+ }
+ }
+ .page-links {
+ padding-bottom: 20px;
+ }
+ }
}
}
}
-.nav-wrapper {
- max-width: 320px;
+/* Navigation sidebar */
+#nav-wrapper {
+ width: 300px;
height: 100%;
background-color: $grey;
@include border-radius(2px);
text-align: center;
.date-mark {
- max-width: 270px;
margin-top: 2em;
img {
@@ -128,16 +172,15 @@ body,html {
.name {
border-top: 1px solid $white;
border-bottom: 1px solid $white;
- width: 85%;
+ width: 75%;
margin: 0 auto;
h3 {
- font-size: 1.7em;
+ font-size: 1.4em;
font-family: $prettyfont;
- font-weight: normal;
margin-top: 0.5em;
margin-bottom: 0.2em;
- letter-spacing: 0.05em;
+ letter-spacing: 0.1em;
}
}
.time {
@@ -150,7 +193,6 @@ body,html {
}
#site-navigation {
- max-width: 270px;
margin: 2em auto;
.nav-menu {
@@ -178,68 +220,68 @@ body,html {
}
}
li.current_page_item {
+ a {
+ // todo arrow
+ text-decoration: underline;
+ position: relative;
+ &:before {
+ display: inline-block;
+ content: '';
+ width: 0;
+ height: 0;
+ border-top: 25px solid transparent;
+ border-bottom: 25px solid transparent;
+ border-left: 35px solid $primary-color;
+ position: absolute;
+ right: 204px;
+ }
+ }
}
}
}
-#content {
- .page {
- background-color: $grey;
- padding: 1em;
- @include border-radius(2px);
-
- .entry-content ul{
- padding-left: 20px;
- }
-
- }
-}
+/* Footer */
#colophon {
- position: relative;
- .site-info {
- position: absolute;
- top: -3em;
- height: 3em;
- line-height: 3em;
- background-color: $grey;
+ img {
+ margin-right: 20px;
}
}
-.front-page-caption {
- position: absolute;
- bottom: 0;
- background-color: rgba($grey, 0.92);
- width: 33.3332%;
- padding-top: 1em;
- padding-left: 1.5625em;
- padding-right: 1.5625em;
- min-height: 100px;
- @include text-shadow(darken($grey, 5%) 1px 1px 0);
-}
-#masthead {
- padding-top: 0.01em;
-}
+/* Front page */
.home {
- #masthead {
- padding-top: 0;
+ #content {
+ .page {
+ visibility: hidden;
+ }
}
- #page {
- background-image: url("../images/landingbilde.jpg");
- #background-position: 1.5625em;
- background-repeat: no-repeat;
- min-height: 619px;
- padding-left: 0;
- padding-right: 0;
+ .front-page-caption {
+ visibility: visible;
+ position: absolute;
+ bottom: 0;
+ margin-left: 0;
+ width: 33.332%;
+ @include text-shadow(darken($grey, 5%) 1px 1px 0);
+
+ min-height: 100px;
+ padding: 1em;
+ background-color: rgba($grey, 0.92);
+ margin-left: 0;
}
}
+/* IE fixes */
.lt-ie9 {
- .front-page-caption {
+ .home .entry-content {
background-color: $grey;
}
.nav-wrapper {
- max-width: 240px;
+ width: 240px;
}
#page {
- max-width: 910px;
+ width: 910px;
}
}
+/* Static row width */
+.row {
+ width: 1200px;
+ max-width: 1200px;
+}
diff --git a/wp-content/themes/gf2013/stylesheets/app.css b/wp-content/themes/gf2013/stylesheets/app.css
index 13d2a25..4bc3531 100644
--- a/wp-content/themes/gf2013/stylesheets/app.css
+++ b/wp-content/themes/gf2013/stylesheets/app.css
@@ -4690,13 +4690,19 @@ table tfoot tr td {
max-width: 800px;
}
+/* TODO
+ * - design up
+ * - foundation fixed menu
+ *
+ * */
+/* Global styles */
body, html {
height: 100%;
}
body h1, body h2, body h3, html h1, html h2, html h3 {
letter-spacing: 0.1em;
- font-weight: normal;
color: #f4d3b4;
+ font-family: "Cinzel Decorative";
}
body h1 a, body h2 a, body h3 a, html h1 a, html h2 a, html h3 a {
color: #f4d3b4;
@@ -4704,48 +4710,79 @@ body h1 a, body h2 a, body h3 a, html h1 a, html h2 a, html h3 a {
body h1, html h1 {
font-size: 1.5em;
}
+body h2, html h2 {
+ font-family: inherit;
+}
.page-wrapper {
height: 100%;
}
-#masthead {
- background-color: #2d2b29;
- -webkit-border-radius: 2px;
- -moz-border-radius: 2px;
- -ms-border-radius: 2px;
- -o-border-radius: 2px;
- border-radius: 2px;
-}
-
-#page {
- margin-top: 2.7em;
-}
#page .site-title {
color: #2d2b29;
- background-color: #e7e8ea;
font-family: "Julius Sans One";
- font-size: 2em;
+ font-size: 3.5em;
font-weight: normal;
text-decoration: none;
- margin-bottom: 0;
+ text-align: center;
+ margin-bottom: 0.4em;
margin-left: 0;
margin-right: 0;
- margin-top: 0.15em;
+ margin-top: 0.5em;
line-height: 1.1;
- padding-left: 6px;
}
#page .site-title a {
color: #2d2b29;
}
-@media only screen and (min-width: 48em) {
- #page .site-title {
- font-size: 3.5em;
- }
+#page #content {
+ background-image: url("../images/bg-0.jpg");
+ background-repeat: no-repeat;
+ min-height: 694px;
+ padding-right: 24px;
+}
+#page #content.background-0 {
+ background-image: url("../images/bg-0.jpg");
+}
+#page #content.background-1 {
+ background-image: url("../images/bg-1.jpg");
+}
+#page #content.background-2 {
+ background-image: url("../images/bg-2.jpg");
+}
+#page #content.background-3 {
+ background-image: url("../images/bg-3.jpg");
+}
+#page #content.background-4 {
+ background-image: url("../images/bg-4.jpg");
+}
+#page #content.background-5 {
+ background-image: url("../images/bg-5.jpg");
+}
+#page #content .page {
+ height: 100%;
+}
+#page #content .page .entry-wrap {
+ min-height: 694px;
+ background-color: #2d2b29;
+ border-right: 20px solid #e1842e;
+}
+#page #content .page .entry-wrap .entry-title {
+ background-color: #2d2b29;
+ padding-top: 1em;
+ padding-bottom: 0.8em;
+ margin-bottom: 0;
+ margin-top: 0;
+}
+#page #content .page .entry-wrap .entry-content ul {
+ padding-left: 20px;
+}
+#page #content .page .entry-wrap .page-links {
+ padding-bottom: 20px;
}
-.nav-wrapper {
- max-width: 320px;
+/* Navigation sidebar */
+#nav-wrapper {
+ width: 300px;
height: 100%;
background-color: #2d2b29;
-webkit-border-radius: 2px;
@@ -4755,52 +4792,49 @@ body h1, html h1 {
border-radius: 2px;
text-align: center;
}
-.nav-wrapper .date-mark {
- max-width: 270px;
+#nav-wrapper .date-mark {
margin-top: 2em;
}
-.nav-wrapper .date-mark img {
+#nav-wrapper .date-mark img {
margin: 0.7em auto;
}
-.nav-wrapper .date-mark h3, .nav-wrapper .date-mark h2 {
+#nav-wrapper .date-mark h3, #nav-wrapper .date-mark h2 {
color: #f2efe5;
letter-spacing: 0.1em;
}
-.nav-wrapper .date-mark .date {
+#nav-wrapper .date-mark .date {
padding-top: 1em;
}
-.nav-wrapper .date-mark .name {
+#nav-wrapper .date-mark .name {
border-top: 1px solid #f2efe5;
border-bottom: 1px solid #f2efe5;
- width: 85%;
+ width: 75%;
margin: 0 auto;
}
-.nav-wrapper .date-mark .name h3 {
- font-size: 1.7em;
+#nav-wrapper .date-mark .name h3 {
+ font-size: 1.4em;
font-family: "Cinzel Decorative";
- font-weight: normal;
margin-top: 0.5em;
margin-bottom: 0.2em;
- letter-spacing: 0.05em;
+ letter-spacing: 0.1em;
}
-.nav-wrapper .date-mark .time {
+#nav-wrapper .date-mark .time {
padding-bottom: 1em;
}
-.nav-wrapper .date-mark .time h2 {
+#nav-wrapper .date-mark .time h2 {
margin-bottom: 0;
}
-.nav-wrapper #site-navigation {
- max-width: 270px;
+#nav-wrapper #site-navigation {
margin: 2em auto;
}
-.nav-wrapper #site-navigation .nav-menu {
+#nav-wrapper #site-navigation .nav-menu {
list-style: none;
}
-.nav-wrapper #site-navigation .nav-menu li {
+#nav-wrapper #site-navigation .nav-menu li {
width: 100%;
display: inline-block;
}
-.nav-wrapper #site-navigation .nav-menu li a {
+#nav-wrapper #site-navigation .nav-menu li a {
display: block;
height: 50px;
margin: 8px auto;
@@ -4816,65 +4850,57 @@ body h1, html h1 {
box-shadow: #2a2827 1px 1px 1px;
text-shadow: #d7771f 1px 1px 0;
}
-
-#content .page {
- background-color: #2d2b29;
- padding: 1em;
- -webkit-border-radius: 2px;
- -moz-border-radius: 2px;
- -ms-border-radius: 2px;
- -o-border-radius: 2px;
- border-radius: 2px;
-}
-#content .page .entry-content ul {
- padding-left: 20px;
-}
-
-#colophon {
+#nav-wrapper #site-navigation li.current_page_item a {
+ text-decoration: underline;
position: relative;
}
-#colophon .site-info {
+#nav-wrapper #site-navigation li.current_page_item a:before {
+ display: inline-block;
+ content: '';
+ width: 0;
+ height: 0;
+ border-top: 25px solid transparent;
+ border-bottom: 25px solid transparent;
+ border-left: 35px solid #e1842e;
position: absolute;
- top: -3em;
- height: 3em;
- line-height: 3em;
- background-color: #2d2b29;
+ right: 204px;
}
-.front-page-caption {
+/* Footer */
+#colophon img {
+ margin-right: 20px;
+}
+
+/* Front page */
+.home #content .page {
+ visibility: hidden;
+}
+.home .front-page-caption {
+ visibility: visible;
position: absolute;
bottom: 0;
- background-color: rgba(45, 43, 41, 0.92);
- width: 33.3332%;
- padding-top: 1em;
- padding-left: 1.5625em;
- padding-right: 1.5625em;
- min-height: 100px;
+ margin-left: 0;
+ width: 33.332%;
text-shadow: #201e1d 1px 1px 0;
+ min-height: 100px;
+ padding: 1em;
+ background-color: rgba(45, 43, 41, 0.92);
+ margin-left: 0;
}
-#masthead {
- padding-top: 0.01em;
-}
-
-.home #masthead {
- padding-top: 0;
-}
-.home #page {
- background-image: url("../images/landingbilde.jpg");
- #background-position: 1.5625em;
- background-repeat: no-repeat;
- min-height: 619px;
- padding-left: 0;
- padding-right: 0;
-}
-
-.lt-ie9 .front-page-caption {
+/* IE fixes */
+.lt-ie9 .home .entry-content {
background-color: #2d2b29;
}
.lt-ie9 .nav-wrapper {
- max-width: 240px;
+ width: 240px;
}
.lt-ie9 #page {
- max-width: 910px;
+ width: 910px;
+}
+
+/* Static row width */
+.row {
+ width: 1200px;
+ max-width: 1200px;
}