Browse files

Initial commit

  • Loading branch information...
0 parents commit 34ea438c31b03f66408d77951bbd605172d170fd @Zauberfisch committed Feb 4, 2012
1 .gitignore
@@ -0,0 +1 @@
+.sass-cache
41 README.md
@@ -0,0 +1,41 @@
+## Silverstripe Default Theme ##
+
+### Maintainers ###
+
+ * [Hannes Wizany](http://www.hanneswizany.com) <hwizany (a) gmx (.) at>
+ * [zauberfisch](http://zauberfisch.at) <admin (a) zauberfisch (.) at>
+
+### Help / Tutorials ###
+
+You will find a lot of comments inside the theme explaining the code as good as possible
+Should you still have any questions feel free to poke us in IRC or per email
+
+Tutorials - coming soon ...
+
+### Modules / Subthemes ###
+
+NOTE: module support is currently not avaliable, due to compatibility issues between modules and the new silverstripe version
+
+### Widgets ###
+
+NOTE: widgets are not working in the new silverstripe version yet
+
+To add widgets to your site, simply add the code below to your mysite/code/Page.php
+This widgest will then be displayed in the Right Sidebar (WidgetsRight) and below the content (WidgetsBottom)
+More Information on widgets can be found [here](http://doc.silverstripe.org/sapphire/en/topics/widgets)
+
+ class Page extends SiteTree {
+ ...
+ static $has_one = array(
+ "WidgetsRight" => "WidgetArea",
+ "WidgetsBottom" => "WidgetArea"
+ );
+
+ function getCMSFields() {
+ $fields = parent::getCMSFields();
+ $fields->addFieldToTab("Root.Content.WidgetsRight", new WidgetAreaEditor("WidgetsRight"));
+ $fields->addFieldToTab("Root.Content.WidgetsBottom", new WidgetAreaEditor("WidgetsBottom"));
+ return $fields;
+ }
+ ....
+ }
19 config.rb
@@ -0,0 +1,19 @@
+# Require any additional compass plugins here.
+require "compass-colors"
+
+project_type = :stand_alone
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "css"
+sass_dir = "scss"
+images_dir = "images"
+javascripts_dir = "javascript"
+output_style = :verbose
+
+sass_options = {
+ :cache_location => "/tmp/silverstripe-cache-var-www-vhosts-theme/.sass-cache"
+}
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+relative_assets = true
74 css/editor.css
@@ -0,0 +1,74 @@
+.typography {
+ /* WYSIWYG EDITOR ALIGNMENT CLASSES
+ -------------------------------------------- */
+ /* IMAGES
+ -------------------------------------------- */ }
+.typography p {
+ line-height: 18px;
+ margin: 0 0 18px 0; }
+.typography address {
+ margin: 0 10px 18px 10px; }
+.typography blockquote {
+ margin: 10px;
+ font-size: 11px;
+ font-style: italic;
+ margin: 0 10px 18px 10px; }
+.typography pre {
+ font-family: "Courier New", Courier;
+ display: block;
+ margin: 2px 5px;
+ padding: 5px;
+ border: 1px #989898 solid;
+ background: #e9e9e9;
+ margin: 0 0 18px 0; }
+.typography table {
+ margin: 0 0 18px 0;
+ border-collapse: collapse;
+ border-color: #989898; }
+.typography table td {
+ border-color: #989898;
+ padding: 5px; }
+.typography ul, .typography ol {
+ margin: 0 0 18px 18px; }
+.typography ul li, .typography ol li {
+ margin: 5px 10px; }
+.typography h1, .typography h2, .typography h3, .typography h4, .typography h5, .typography h6 {
+ color: #4c4c4c;
+ margin: 0 0 18px 0; }
+.typography h1 {
+ font-size: 24px; }
+.typography h2 {
+ font-size: 20px; }
+.typography h3 {
+ font-size: 18px; }
+.typography h4 {
+ font-size: 16px;
+ margin: 0 0 16px 0; }
+.typography h5 {
+ font-size: 14px;
+ margin: 0 0 12px 0; }
+.typography h6 {
+ font-size: 13px;
+ margin: 0 0 12px 0; }
+.typography .left {
+ text-align: left; }
+.typography .center {
+ text-align: center; }
+.typography .right {
+ text-align: right; }
+.typography img {
+ border: none; }
+.typography img.right {
+ float: right;
+ margin-left: 5px; }
+.typography img.left {
+ float: left;
+ margin-right: 5px; }
+.typography img.leftAlone {
+ float: left;
+ margin-right: 100%; }
+.typography img.center {
+ float: none;
+ margin-left: auto;
+ margin-right: auto;
+ display: block; }
98 css/form.css
@@ -0,0 +1,98 @@
+/* FIELDSETS
+---------------------------------------- */
+fieldset {
+ border: 0; }
+
+/* ACTION BUTTONS
+---------------------------------------- */
+input.action {
+ padding: 4px;
+ margin: 4px 0;
+ background: #e9e9e9;
+ border: 1px solid #989898;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ -o-border-radius: 3px;
+ -ms-border-radius: 3px;
+ -khtml-border-radius: 3px;
+ border-radius: 3px; }
+input.action:hover {
+ /* fade in effect */
+ cursor: pointer;
+ background: #e1e1e1;
+ -moz-transition: background 0.5s ease-out 0s;
+ -webkit-transition: background 0.5s ease-out 0s;
+ -o-transition: background 0.5s ease-out 0s;
+ transition: background 0.5s ease-out 0s; }
+input.action:focus {
+ background: #dadada;
+ border: 1px solid #727272; }
+
+/* FIELD FORMATING
+---------------------------------------- */
+form ul {
+ list-style: none; }
+
+.middleColumn {
+ display: block;
+ margin: 15px 10px 10px 0;
+ width: 292px;
+ padding: 4px;
+ clear: left;
+ border: 1px solid #989898;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ -o-border-radius: 3px;
+ -ms-border-radius: 3px;
+ -khtml-border-radius: 3px;
+ border-radius: 3px; }
+.middleColumn .middleColumn {
+ margin-left: 0;
+ margin-right: 0;
+ padding: 0; }
+
+/* INPUT BOXS
+---------------------------------------- */
+input.text, textarea, select {
+ padding: 0;
+ font-size: 12px;
+ font-weight: bold;
+ width: 292px;
+ border: 0;
+ background: transparent; }
+
+textarea {
+ font-size: 12px;
+ border: 0; }
+
+/* SELECT DROPDOWN
+---------------------------------------- */
+select {
+ width: auto; }
+
+/* LABELS
+---------------------------------------- */
+.typography label {
+ display: block;
+ margin: 10px 0 -10px 0;
+ font-size: 12px; }
+
+label.right {
+ display: inline; }
+
+/* CHECKBOXES
+---------------------------------------- */
+ul.optionset {
+ margin: 0;
+ overflow: hidden; }
+
+ul.optionset li {
+ margin: 6px 0;
+ clear: both; }
+
+ul.optionset li input {
+ float: left;
+ margin: 0 6px; }
+
+ul.optionset li label {
+ margin: 0; }
5 css/ie.css
@@ -0,0 +1,5 @@
+.header-wrapper .header {
+ width: 900px; }
+
+.layout-wrapper .layout {
+ width: 900px; }
201 css/layout.css
@@ -0,0 +1,201 @@
+/* get a sprite image from the social icons */
+.socialmediaicons-sprite, .layout-wrapper .socialmedia-wrapper .socialmediaicons-facebook, .layout-wrapper .socialmedia-wrapper .socialmediaicons-flickr, .layout-wrapper .socialmedia-wrapper .socialmediaicons-twitter, .layout-wrapper .socialmedia-wrapper .socialmediaicons-youtube {
+ background: url('../images/socialmediaicons-s19e97c8559.png') no-repeat; }
+
+* {
+ margin: 0;
+ padding: 0; }
+
+html {
+ background: #e9e9e9 url('../images/bg.png?1328375397');
+ /* disables iphone font size increase */
+ -webkit-text-size-adjust: none; }
+
+body {
+ color: #727272;
+ font-size: 12px;
+ font-family: Verdana, Arial;
+ padding: 0 0 10px; }
+
+a {
+ color: #262626;
+ font-weight: bold;
+ text-decoration: none; }
+a:hover {
+ text-decoration: underline; }
+
+.clear {
+ clear: both; }
+
+.header-wrapper {
+ background: white;
+ border-bottom: 1px solid #dcdcdc;
+ -moz-box-shadow: 0px 0px 1px 0px #d0d0d0;
+ -webkit-box-shadow: 0px 0px 1px 0px #d0d0d0;
+ -o-box-shadow: 0px 0px 1px 0px #d0d0d0;
+ box-shadow: 0px 0px 1px 0px #d0d0d0;
+ padding: 10px 10px 0 10px; }
+.header-wrapper .header {
+ max-width: 900px;
+ width: 90%;
+ margin: 0 auto; }
+.header-wrapper .header .logo {
+ padding: 10px 10px 10px 70px;
+ background: url('../images/logo.png?1329648822') no-repeat left center;
+ float: left; }
+.header-wrapper .header .logo h1 {
+ text-transform: uppercase;
+ font-size: 16px;
+ color: #4c4c4c; }
+.header-wrapper .header .logo p {
+ font-weight: bold;
+ font-size: 12px;
+ color: #4c4c4c; }
+.header-wrapper .header .navigation {
+ float: right;
+ list-style: none;
+ padding: 20px 0 0; }
+.header-wrapper .header .navigation li {
+ float: left;
+ margin: 0 0 -2px 10px;
+ display: block; }
+.header-wrapper .header .navigation li a {
+ color: #727272;
+ font-weight: normal;
+ font-size: 13px;
+ display: block;
+ padding: 15px; }
+.header-wrapper .header .navigation li a:hover {
+ color: #262626;
+ /* fade in effect */
+ -moz-transition: color 0.5s ease-out 0s;
+ -webkit-transition: color 0.5s ease-out 0s;
+ -o-transition: color 0.5s ease-out 0s;
+ transition: color 0.5s ease-out 0s;
+ text-decoration: none; }
+.header-wrapper .header .navigation li.current, .header-wrapper .header .navigation li.section {
+ background: url('../images/current.png?1328442147') no-repeat center bottom; }
+.header-wrapper .header .navigation li.current a, .header-wrapper .header .navigation li.section a {
+ color: #4c4c4c;
+ font-weight: bold; }
+
+.footer {
+ margin: 10px 0;
+ text-align: center;
+ line-height: 18px; }
+.footer .break {
+ /* don't remove the line break on default, we only use breaks in the footer on smaller screens */
+ display: none; }
+
+/* Layout
+---------------------------------------- */
+.layout-wrapper {
+ padding: 10px 10px 0; }
+.layout-wrapper .layout {
+ width: 90%;
+ max-width: 900px;
+ margin: 0 auto;
+ padding: 0 0 10px 0;
+ background: white;
+ border: 1px solid #dcdcdc;
+ -moz-box-shadow: 0px 0px 1px 0px #d0d0d0;
+ -webkit-box-shadow: 0px 0px 1px 0px #d0d0d0;
+ -o-box-shadow: 0px 0px 1px 0px #d0d0d0;
+ box-shadow: 0px 0px 1px 0px #d0d0d0;
+ overflow: hidden;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ -o-border-radius: 5px;
+ -ms-border-radius: 5px;
+ -khtml-border-radius: 5px;
+ border-radius: 5px; }
+.layout-wrapper .layout .column {
+ width: 29%;
+ padding: 2.167%;
+ float: left; }
+.layout-wrapper .layout .column.subnavigation {
+ /* subnavigation on the right, only displayed if children are avaliable */
+ float: right; }
+.layout-wrapper .layout .column.subnavigation h3 {
+ margin: 0 0 5px; }
+.layout-wrapper .layout .column.subnavigation ul {
+ list-style: none; }
+.layout-wrapper .layout .column.subnavigation ul li {
+ margin: 0;
+ border-top: 1px dashed #989898;
+ display: block; }
+.layout-wrapper .layout .column.subnavigation ul li.last {
+ border-bottom: 1px dashed #989898; }
+.layout-wrapper .layout .column.subnavigation ul li a {
+ display: block;
+ padding: 7px 0;
+ font-size: 12px; }
+.layout-wrapper .layout .column.subnavigation ul li a.current {
+ text-decoration: underline; }
+.layout-wrapper .layout .column.subnavigation ul li li {
+ padding-left: 15px; }
+.layout-wrapper .layout .column.big {
+ /* big content, size of 2 columns */
+ width: 62.333%; }
+.layout-wrapper .layout .column.full {
+ /* full size conteint, no sidebar */
+ width: auto;
+ float: none;
+ clear: both; }
+.layout-wrapper .layout .column * {
+ /* scale down elements if they are bigger than the content box */
+ /* make sure that you don't set a height on images that you expect to scale down, */
+ /* because if you do, this means only width scales, but height stays the same and ration gets lost */
+ max-width: 100%; }
+.layout-wrapper .layout .widgets-bottom .columns-3perrow-newrow {
+ /* we have 3 widgets in a row, after the 3rd element, create a new line */
+ clear: both; }
+.layout-wrapper .socialmedia-wrapper {
+ overflow: hidden;
+ text-align: center;
+ margin: -16px 0 0;
+ /* include all icons as css classes (eg: .socialmediaicons-facebook) */
+ /* see ../images/socialmediaicons for all avaliable icons */ }
+.layout-wrapper .socialmedia-wrapper .socialmedia {
+ padding: 5px;
+ margin: 2px 0;
+ display: inline-block;
+ /* use rgba background instead of opacity to avoid nested opacity */
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80FFFFFF', endColorstr='#80FFFFFF', GradientType=0 );
+ background: rgba(255, 255, 255, 0.5);
+ border: 1px solid #dcdcdc;
+ -moz-box-shadow: 0px 0px 1px 0px #d0d0d0;
+ -webkit-box-shadow: 0px 0px 1px 0px #d0d0d0;
+ -o-box-shadow: 0px 0px 1px 0px #d0d0d0;
+ box-shadow: 0px 0px 1px 0px #d0d0d0;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ -o-border-radius: 3px;
+ -ms-border-radius: 3px;
+ -khtml-border-radius: 3px;
+ border-radius: 3px; }
+.layout-wrapper .socialmedia-wrapper .socialmedia a {
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
+ opacity: 0.7;
+ height: 18px;
+ width: 18px;
+ margin: 0 2px;
+ display: inline-block;
+ text-indent: -9999px; }
+.layout-wrapper .socialmedia-wrapper .socialmedia a:hover {
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
+ opacity: 0.9;
+ /* fade in effect */
+ -moz-transition: opacity 0.5s ease-out 0s;
+ -webkit-transition: opacity 0.5s ease-out 0s;
+ -o-transition: opacity 0.5s ease-out 0s;
+ transition: opacity 0.5s ease-out 0s;
+ text-decoration: none; }
+.layout-wrapper .socialmedia-wrapper .socialmediaicons-facebook {
+ background-position: 0 0; }
+.layout-wrapper .socialmedia-wrapper .socialmediaicons-flickr {
+ background-position: 0 -18px; }
+.layout-wrapper .socialmedia-wrapper .socialmediaicons-twitter {
+ background-position: 0 -36px; }
+.layout-wrapper .socialmedia-wrapper .socialmediaicons-youtube {
+ background-position: 0 -54px; }
35 css/responsive.css
@@ -0,0 +1,35 @@
+/* handhelds, this applies to all handheld devices */
+@media only screen and (max-width: 759px) {
+ .header-wrapper .header .navigation li.current, .header-wrapper .header .navigation li.section {
+ /* don't display the current icon, it wouldn't look good if the navigation has 2 rows */
+ background: none; }
+
+ .footer .seperator {
+ /* in the desktop version we use a seperator for footer entrys, but disable it here */
+ display: none; }
+ .footer .break {
+ /* but for handhelds display the .break element, so we get a new line */
+ display: inline; } }
+/* this applies to handhelds in landscape orientation / tablests */
+@media only screen and (min-width: 480px) and (max-width: 759px) {
+ .layout-wrapper .layout .column {
+ /* set the width so we can palce 2 columns next to each other */
+ width: 45.667%; }
+ .layout-wrapper .layout .column.subnavigation, .layout-wrapper .layout .column.big {
+ /* big column should stay alone now */
+ width: auto;
+ float: none;
+ clear: both; }
+ .layout-wrapper .layout .column.columns-3perrow-newrow {
+ /* in the desktop layout we have 3 per row, so disable it here */
+ clear: none; }
+ .layout-wrapper .layout .column.columns-2perrow-newrow {
+ /* in this layout we have 2 per row, so enable it */
+ clear: both; } }
+/* this applies to handhelds in portrait orientation */
+@media only screen and (max-width: 479px) {
+ .layout-wrapper .layout .column, .layout-wrapper .layout .column.subnavigation, .layout-wrapper .layout .column.big {
+ /* screen is to small to have 2 columns next to each other */
+ width: auto;
+ float: none;
+ clear: both; } }
74 css/typography.css
@@ -0,0 +1,74 @@
+.typography {
+ /* WYSIWYG EDITOR ALIGNMENT CLASSES
+ -------------------------------------------- */
+ /* IMAGES
+ -------------------------------------------- */ }
+.typography p {
+ line-height: 18px;
+ margin: 0 0 18px 0; }
+.typography address {
+ margin: 0 10px 18px 10px; }
+.typography blockquote {
+ margin: 10px;
+ font-size: 11px;
+ font-style: italic;
+ margin: 0 10px 18px 10px; }
+.typography pre {
+ font-family: "Courier New", Courier;
+ display: block;
+ margin: 2px 5px;
+ padding: 5px;
+ border: 1px #989898 solid;
+ background: #e9e9e9;
+ margin: 0 0 18px 0; }
+.typography table {
+ margin: 0 0 18px 0;
+ border-collapse: collapse;
+ border-color: #989898; }
+.typography table td {
+ border-color: #989898;
+ padding: 5px; }
+.typography ul, .typography ol {
+ margin: 0 0 18px 18px; }
+.typography ul li, .typography ol li {
+ margin: 5px 10px; }
+.typography h1, .typography h2, .typography h3, .typography h4, .typography h5, .typography h6 {
+ color: #4c4c4c;
+ margin: 0 0 18px 0; }
+.typography h1 {
+ font-size: 24px; }
+.typography h2 {
+ font-size: 20px; }
+.typography h3 {
+ font-size: 18px; }
+.typography h4 {
+ font-size: 16px;
+ margin: 0 0 16px 0; }
+.typography h5 {
+ font-size: 14px;
+ margin: 0 0 12px 0; }
+.typography h6 {
+ font-size: 13px;
+ margin: 0 0 12px 0; }
+.typography .left {
+ text-align: left; }
+.typography .center {
+ text-align: center; }
+.typography .right {
+ text-align: right; }
+.typography img {
+ border: none; }
+.typography img.right {
+ float: right;
+ margin-left: 5px; }
+.typography img.left {
+ float: left;
+ margin-right: 5px; }
+.typography img.leftAlone {
+ float: left;
+ margin-right: 100%; }
+.typography img.center {
+ float: none;
+ margin-left: auto;
+ margin-right: auto;
+ display: block; }
BIN images/bg.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/current.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/logo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/socialmediaicons-s19e97c8559.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/socialmediaicons/facebook.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/socialmediaicons/flickr.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/socialmediaicons/twitter.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/socialmediaicons/youtube.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/test/Slider001.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
42 scss/_config.scss
@@ -0,0 +1,42 @@
+// some configs, on colors and sizes of the website
+// here you can easily change the whole look of the website.
+// almost all colors used in the theme get calculated from the colors defined here
+// so you can only need to change a few lines to change everything
+// if you are a fan of fancy colors, try to set the following:
+// $base-color to #FF00DC
+// $wrapper-color #6A009F
+// text-color to #FFDFF8
+// and see your self how easy it is
+
+
+// used for the html background
+$base-color: #E9E9E9;
+$background: $base-color image-url("bg.png");
+
+// used for the header background, content background, ...
+$wrapper-color: #FFF;
+$wrapper-background: $wrapper-color;
+
+
+$text-color: #727272;
+$text-color-light: lighten($text-color, 15%);
+$text-color-dark: darken($text-color, 15%);
+$link-color: darken($text-color, 30%);
+
+$layout-max-width: 900px; // max width, becuase we use % for width
+$layout-width: 90%; // using % for width to keep the website scaleable, but px will work well too
+$column-width: 29%;
+// calculate padding for columns, 3 columns with padding right and left, makes it 6 times padding
+$column-padding: (100% - $column-width * 3) / 6;
+// calculate width for big column (size of 2 columns + the padding between the 2 columns)
+$column-big-width: ($column-width * 2 + $column-padding * 2);
+// calculate with for a column on tablet, which will be something about 45% since we only have 2 columns in each row
+$tablet-column-width: (100% - $column-padding * 4) / 2;
+
+// Cross Browser alpha background colour mixin
+@mixin rgba-background($color, $opacity) {
+ $rgba: rgba($color, $opacity);
+ $IEcolor: ie_hex_str($rgba);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$IEcolor}', endColorstr='#{$IEcolor}', GradientType=0 );
+ background: $rgba;
+}
9 scss/_footer.scss
@@ -0,0 +1,9 @@
+.footer {
+ margin: 10px 0;
+ text-align: center;
+ line-height: 18px;
+ .break {
+ /* don't remove the line break on default, we only use breaks in the footer on smaller screens */
+ display: none;
+ }
+}
63 scss/_header.scss
@@ -0,0 +1,63 @@
+.header-wrapper {
+ background: $wrapper-background;
+ border-bottom: 1px solid darken($base-color, 5%);
+ @include box-shadow(0px 0px 1px 0px darken($base-color, 10%));
+ padding: 10px 10px 0 10px;
+
+ .header {
+ max-width: $layout-max-width;
+ width: $layout-width;
+ margin: 0 auto;
+
+ .logo {
+ padding: 10px 10px 10px 70px;
+ background: image-url("logo.png") no-repeat left center;
+ float: left;
+
+ h1 {
+ text-transform: uppercase;
+ font-size: 16px;
+ color: $text-color-dark;
+ }
+ p {
+ font-weight: bold;
+ font-size: 12px;
+ color: $text-color-dark;
+ }
+ }
+ .navigation {
+ float: right;
+ list-style: none;
+ padding: 20px 0 0;
+
+ li {
+ float: left;
+ margin: 0 0 -2px 10px;
+ display: block;
+
+ a {
+ color: $text-color;
+ font-weight: normal;
+ font-size: 13px;
+ display: block;
+ padding: 15px;
+
+ &:hover {
+ color: $link-color;
+ /* fade in effect */
+ @include transition(color 0.5s ease-out 0s);
+ text-decoration: none;
+ }
+ }
+ &.current, &.section {
+ background: image-url("current.png") no-repeat center bottom;
+
+ a {
+ color: $text-color-dark;
+ font-weight: bold;
+ }
+ }
+ }
+ }
+ }
+}
1 scss/editor.scss
@@ -0,0 +1 @@
+@import "typography";
104 scss/form.scss
@@ -0,0 +1,104 @@
+@import "compass/css3";
+@import "config.scss";
+
+/* FIELDSETS
+---------------------------------------- */
+fieldset {
+ border: 0;
+}
+
+/* ACTION BUTTONS
+---------------------------------------- */
+input.action {
+ padding: 4px;
+ margin: 4px 0;
+ background: $base-color;
+ border: 1px solid $text-color-light;
+ @include border-radius(3px);
+
+ &:hover {
+ /* fade in effect */
+ cursor: pointer;
+ background: darken($base-color, 3%);
+ @include transition(background 0.5s ease-out 0s);
+ }
+ &:focus {
+ background: darken($base-color, 6%);
+ border: 1px solid $text-color;
+ }
+}
+
+/* FIELD FORMATING
+---------------------------------------- */
+form ul {
+ list-style: none;
+}
+.middleColumn {
+ display: block;
+ margin: 15px 10px 10px 0;
+ width: 292px;
+ padding: 4px;
+ clear: left;
+ border: 1px solid $text-color-light;
+ @include border-radius(3px);
+
+ .middleColumn {
+ margin-left: 0;
+ margin-right: 0;
+ padding: 0;
+ }
+}
+
+/* INPUT BOXS
+---------------------------------------- */
+
+input.text, textarea, select {
+ padding: 0;
+ font-size: 12px;
+ font-weight: bold;
+ width: 292px;
+ border: 0;
+ background: transparent;
+}
+
+textarea {
+ font-size: 12px;
+ border: 0;
+}
+
+/* SELECT DROPDOWN
+---------------------------------------- */
+
+select {
+ width: auto;
+}
+
+/* LABELS
+---------------------------------------- */
+.typography label {
+ display: block;
+ margin: 10px 0 -10px 0;
+ font-size: 12px;
+}
+
+label.right {
+ display: inline;
+}
+
+/* CHECKBOXES
+---------------------------------------- */
+ul.optionset {
+ margin: 0;
+ overflow: hidden;
+}
+ ul.optionset li {
+ margin: 6px 0;
+ clear: both;
+ }
+ ul.optionset li input {
+ float: left;
+ margin: 0 6px;
+ }
+ ul.optionset li label {
+ margin: 0;
+ }
157 scss/layout.scss
@@ -0,0 +1,157 @@
+@import "compass/css3";
+@import "compass/utilities";
+
+@import "config.scss";
+
+/* get a sprite image from the social icons */
+@import "socialmediaicons/*.png";
+
+
+* {
+ margin: 0;
+ padding: 0;
+}
+
+html {
+ background: $background;
+ /* disables iphone font size increase */
+ -webkit-text-size-adjust: none;
+}
+
+body {
+ color: $text-color;
+ font-size: 12px;
+ font-family: Verdana, Arial;
+ padding: 0 0 10px;
+}
+
+a {
+ color: $link-color;
+ font-weight: bold;
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+}
+
+.clear {
+ clear: both;
+}
+
+@import "header";
+
+@import "footer";
+
+/* Layout
+---------------------------------------- */
+.layout-wrapper {
+ padding: 10px 10px 0;
+
+ .layout {
+ width: $layout-width;
+ max-width: $layout-max-width;
+ margin: 0 auto;
+ padding: 0 0 10px 0;
+ background: $wrapper-background;
+ border: 1px solid darken($base-color, 5%);
+ @include box-shadow(0px 0px 1px 0px darken($base-color, 10%));
+ overflow: hidden;
+ @include border-radius(5px);
+
+ .column {
+ width: $column-width;
+ padding: $column-padding;
+ float: left;
+
+ &.subnavigation {
+ /* subnavigation on the right, only displayed if children are avaliable */
+ float: right;
+
+ h3 {
+ margin: 0 0 5px;
+ }
+ ul {
+ list-style: none;
+
+ li {
+ margin: 0;
+ border-top: 1px dashed $text-color-light;
+ display: block;
+
+ &.last {
+ border-bottom: 1px dashed $text-color-light;
+ }
+ a {
+ display: block;
+ padding: 7px 0;
+ font-size: 12px;
+
+ &.current {
+ text-decoration: underline;
+ }
+ }
+ li {
+ padding-left: 15px;
+ }
+ }
+ }
+ }
+ &.big {
+ /* big content, size of 2 columns */
+ width: $column-big-width;
+ }
+ &.full {
+ /* full size conteint, no sidebar */
+ width: auto;
+ float: none;
+ clear: both;
+ }
+ * {
+ /* scale down elements if they are bigger than the content box */
+ /* make sure that you don't set a height on images that you expect to scale down, */
+ /* because if you do, this means only width scales, but height stays the same and ration gets lost */
+ max-width: 100%;
+ }
+ }
+ .widgets-bottom .columns-3perrow-newrow {
+ /* we have 3 widgets in a row, after the 3rd element, create a new line */
+ clear: both;
+ }
+ }
+ .socialmedia-wrapper {
+ overflow: hidden;
+ text-align: center;
+ margin: -16px 0 0;
+
+ .socialmedia {
+ padding: 5px;
+ margin: 2px 0;
+ display: inline-block;
+ /* use rgba background instead of opacity to avoid nested opacity */
+ @include rgba-background($wrapper-background, 0.5);
+ border: 1px solid darken($base-color, 5%);
+ @include box-shadow(0px 0px 1px 0px darken($base-color, 10%));
+ @include border-radius(3px);
+
+ a {
+ @include opacity(0.7);
+ height: 18px;
+ width: 18px;
+ margin: 0 2px;
+ display: inline-block;
+ text-indent: -9999px;
+
+ &:hover {
+ @include opacity(0.9);
+ /* fade in effect */
+ @include transition(opacity 0.5s ease-out 0s);
+ text-decoration: none;
+ }
+ }
+ }
+ /* include all icons as css classes (eg: .socialmediaicons-facebook) */
+ /* see ../images/socialmediaicons for all avaliable icons */
+ @include all-socialmediaicons-sprites;
+ }
+}
59 scss/responsive.scss
@@ -0,0 +1,59 @@
+@import "config.scss";
+
+/* handhelds, this applies to all handheld devices */
+@media only screen and (max-width: 759px) {
+ .header-wrapper .header .navigation {
+ li {
+ &.current, &.section {
+ /* don't display the current icon, it wouldn't look good if the navigation has 2 rows */
+ background: none;
+ }
+ }
+ }
+ .footer {
+ .seperator {
+ /* in the desktop version we use a seperator for footer entrys, but disable it here */
+ display: none;
+ }
+ .break {
+ /* but for handhelds display the .break element, so we get a new line */
+ display: inline;
+ }
+ }
+}
+
+/* this applies to handhelds in landscape orientation / tablests */
+@media only screen and (min-width: 480px) and (max-width: 759px) {
+ .layout-wrapper .layout .column {
+ /* set the width so we can palce 2 columns next to each other */
+ width: $tablet-column-width;
+
+ &.subnavigation,
+ &.big {
+ /* big column should stay alone now */
+ width: auto;
+ float: none;
+ clear: both;
+ }
+ &.columns-3perrow-newrow {
+ /* in the desktop layout we have 3 per row, so disable it here */
+ clear: none;
+ }
+ &.columns-2perrow-newrow {
+ /* in this layout we have 2 per row, so enable it */
+ clear: both;
+ }
+ }
+}
+
+/* this applies to handhelds in portrait orientation */
+@media only screen and (max-width: 479px) {
+ .layout-wrapper .layout {
+ .column, .column.subnavigation, .column.big {
+ /* screen is to small to have 2 columns next to each other */
+ width: auto;
+ float: none;
+ clear: both;
+ }
+ }
+}
105 scss/typography.scss
@@ -0,0 +1,105 @@
+@import "config.scss";
+
+.typography {
+ p {
+ line-height: 18px;
+ margin: 0 0 18px 0;
+ }
+ address {
+ margin: 0 10px 18px 10px;
+ }
+ blockquote {
+ margin: 10px;
+ font-size: 11px;
+ font-style: italic;
+ margin: 0 10px 18px 10px;
+ }
+ pre {
+ font-family: "Courier New", Courier;
+ display: block;
+ margin: 2px 5px;
+ padding: 5px;
+ border: 1px $text-color-light solid;
+ background: $base-color;
+ margin: 0 0 18px 0;
+ }
+ table {
+ margin: 0 0 18px 0;
+ border-collapse:collapse;
+ border-color: $text-color-light;
+
+ tr {}
+ td {
+ border-color: $text-color-light;
+ padding:5px;
+ }
+ }
+ ul, ol {
+ margin: 0 0 18px 18px;
+ li {
+ margin: 5px 10px;
+ }
+ }
+
+ h1, h2, h3, h4, h5, h6 {
+ color: $text-color-dark;
+ margin: 0 0 18px 0;
+ }
+ h1 {
+ font-size: 24px;
+ }
+ h2 {
+ font-size: 20px;
+ }
+ h3 {
+ font-size: 18px;
+ }
+ h4 {
+ font-size: 16px;
+ margin: 0 0 16px 0;
+ }
+ h5 {
+ font-size: 14px;
+ margin: 0 0 12px 0;
+ }
+ h6 {
+ font-size: 13px;
+ margin: 0 0 12px 0;
+ }
+
+ /* WYSIWYG EDITOR ALIGNMENT CLASSES
+ -------------------------------------------- */
+ .left {
+ text-align: left;
+ }
+ .center {
+ text-align: center;
+ }
+ .right {
+ text-align: right;
+ }
+ /* IMAGES
+ -------------------------------------------- */
+ img {
+ border: none;
+
+ &.right {
+ float: right;
+ margin-left: 5px;
+ }
+ &.left {
+ float: left;
+ margin-right: 5px;
+ }
+ &.leftAlone {
+ float: left;
+ margin-right: 100%;
+ }
+ &.center {
+ float: none;
+ margin-left: auto;
+ margin-right: auto;
+ display: block;
+ }
+ }
+}
5 templates/Includes/Navigation.ss
@@ -0,0 +1,5 @@
+<ul class="navigation">
+ <% loop Menu(1) %>
+ <li class="$LinkingMode"><a href="$Link" title="$Title.XML">$MenuTitle.XML</a></li>
+ <% end_loop %>
+</ul>
0 templates/Includes/Slider.ss
No changes.
9 templates/Includes/SocialMedia.ss
@@ -0,0 +1,9 @@
+<div class="socialmedia-wrapper">
+ <span class="socialmedia">
+ <%-- the &nbsp; are required to get width in IE7 --%>
+ <a target="_blank" href="http://facebook.com" class="socialmediaicons-facebook" title="facebook">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
+ <a target="_blank" href="http://twitter.com" class="socialmediaicons-twitter" title="twitter">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
+ <a target="_blank" href="http://youtube.com" class="socialmediaicons-youtube" title="youtube">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
+ <a target="_blank" href="http://www.flickr.com" class="socialmediaicons-flickr" title="flickr">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
+ </span>
+</div>
21 templates/Includes/SubNavigation.ss
@@ -0,0 +1,21 @@
+<% if Menu(2) %>
+ <div class="column subnavigation">
+ <h3><% loop Level(1) %>$MenuTitle<% end_loop %></h3>
+ <ul class="level2">
+ <% loop Menu(2) %>
+ <li class="$FirstLast">
+ <a class="$LinkingMode" href="$Link" title="$Title.XML">$MenuTitle.XML</a>
+ <% if LinkOrSection = section && Children %>
+ <ul class="level3">
+ <% loop Children %>
+ <li class="$FirstLast">
+ <a class="$LinkingMode" href="$Link" title="$Title.XML">$MenuTitle.XML</a>
+ </li>
+ <% end_loop %>
+ </ul>
+ <% end_if %>
+ </li>
+ <% end_loop %>
+ </ul>
+ </div>
+<% end_if %>
10 templates/Includes/WidgetHolder.ss
@@ -0,0 +1,10 @@
+<div class="$Title $ClassName $FirstLast typography column widget
+ <%-- add new row classes, so we can set clear: both; --%>
+ <%-- to create new lines in the widget list depending on the browser window size --%>
+ <%-- 2 in each row or 3 in each row --%>
+ <% if not Modulus(2) %>columns-2perrow-newrow<% end_if %>
+ <% if not Modulus(3) %>columns-3perrow-newrow<% end_if %>
+">
+ <% if Title %><h3>$Title</h3><% end_if %>
+ $Content
+</div>
22 templates/Includes/Widgets.ss
@@ -0,0 +1,22 @@
+<%-- 2 widget areas are expected, named "WidgetsRight" and "WidgetsBottm" --%>
+<%-- see the readme on how to add widgets to your site --%>
+<div class="widgets-right">
+ $WidgetsRight
+
+ <%-- temporary some example content for widgets, tuntil widgets work in ss3 --%>
+ <div class="typography column widget columns-2perrow-newrow"><h2>headline</h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </div>
+ <div class="typography column widget "><h2>headline</h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </div>
+ <div class="typography column widget columns-2perrow-newrow"><h2>headline</h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </div>
+
+</div>
+<div class="widgets-bottom">
+ $WidgetsBottom
+
+ <%-- temporary some example content for widgets, tuntil widgets work in ss3 --%>
+ <div class="typography column widget widget-bottom columns-3perrow-newrow"><h2>headline</h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </div>
+ <div class="typography column widget widget-bottom columns-2perrow-newrow"><h2>headline</h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </div>
+ <div class="typography column widget widget-bottom"><h2>headline</h2>Erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </div>
+ <div class="typography column widget widget-bottom columns-2perrow-newrow columns-3perrow-newrow"><h2>headline</h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </div>
+ <div class="typography column widget widget-bottom"><h2>headline</h2>Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </div>
+
+</div>
5 templates/Layout/Page.ss
@@ -0,0 +1,5 @@
+<div class="typography column big content">
+ <h1>$Title</h1>
+ $Content
+ $Form
+</div>
58 templates/Page.ss
@@ -0,0 +1,58 @@
+<!doctype html>
+<html>
+ <head>
+ <% base_tag %>
+ <meta charset="utf-8">
+ $MetaTags
+ <% require themedCSS(layout) %>
+ <%-- if you don't want responsive stuff, just remove the line below line --%>
+ <% require themedCSS(responsive) %>
+ <% require themedCSS(typography) %>
+ <% require themedCSS(form) %>
+ <!--[if lte IE 7]>
+ <%-- IE 7 fails to display the social icons if the text is hidden --%>
+ <style>
+ .socialmedia a {
+ text-indent: 0px !important;
+ width: auto !important;
+ }
+ </style>
+ <![endif]-->
+ </head>
+ <body>
+ <div class="container">
+
+ <div class="header-wrapper">
+ <div class="header">
+ <div class="logo">
+ <h1>$SiteConfig.Title</h1>
+ <p>$SiteConfig.Tagline</p>
+ </div>
+ <% include Navigation %>
+ <div class="clear"></div>
+ </div>
+ </div>
+
+ <div class="layout-wrapper">
+ <div class="layout">
+ <% include SubNavigation %>
+ $Layout
+ <% include Widgets %>
+ <div class="clear"></div>
+ </div>
+ <% include SocialMedia %>
+ </div>
+
+ <div class="footer">
+ <p>
+ <% _t('COPYRIGHT', 'Copyright') %> &copy; $Now.Year
+ <span class="seperator"> | </span><span class="break"><br /></span><%-- use seperator on desktop, and line break on handhelds --%>
+ <% _t('THEMEBY', 'Theme by') %> <a href="http://www.jungbrunnen.xxx" title="Hannes Wizany (Design) and Zauberfisch (Code)" target="_blank">jungbrunnen</a>
+ <span class="seperator"> | </span><span class="break"><br /></span><%-- use seperator on desktop, and line break on handhelds --%>
+ <% _t('POWEREDBY', 'Powered by') %> <a href="http://silverstripe.org" title="This site runs on the SilverStripe CMS" target="_blank">SilverStripe Open Source CMS</a>
+ </p>
+ </div>
+
+ </div>
+ </body>
+</html>

0 comments on commit 34ea438

Please sign in to comment.