marco/cccs-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Empty setup with bootstrap and font awesome

Browse source
This commit is contained in:
Stefan Schlott 2013-08-21 22:04:17 +02:00
commit 09aba964a9
35 changed files with 747 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

36
content/index.md Normal file
View file

@ -0,0 +1,36 @@
-----
title: Titel
kind: page
-----
# Willkommen!
<i class="icon-flag icon-4x pull-left icon-border"></i> Font Awesome is
working!
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. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet. 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. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.

0
content/styles/_customstyles.scss Normal file
View file

3
content/styles/_customvars.scss Normal file
View file

@ -0,0 +1,3 @@
// Font Awesome
$FontAwesomePath: "/fonts";

300
content/styles/_variables.scss Normal file
View file

@ -0,0 +1,300 @@
//
// Variables
// --------------------------------------------------
// Global values
// --------------------------------------------------
// Grays
// -------------------------
$black: #000 !default;
$grayDarker: #222 !default;
$grayDark: #333 !default;
$gray: #555 !default;
$grayLight: #999 !default;
$grayLighter: #eee !default;
$white: #fff !default;
// Accent colors
// -------------------------
$blue: #049cdb !default;
$blueDark: #0064cd !default;
$green: #46a546 !default;
$red: #9d261d !default;
$yellow: #ffc40d !default;
$orange: #f89406 !default;
$pink: #c3325f !default;
$purple: #7a43b6 !default;
// Scaffolding
// -------------------------
$bodyBackground: $white !default;
$textColor: $grayDark !default;
// Links
// -------------------------
$linkColor: #08c !default;
$linkColorHover: darken($linkColor, 15%) !default;
// Typography
// -------------------------
$sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$serifFontFamily: Georgia, "Times New Roman", Times, serif !default;
$monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace !default;
$baseFontSize: 14px !default;
$baseFontFamily: $sansFontFamily !default;
$baseLineHeight: 20px !default;
$altFontFamily: $serifFontFamily !default;
$headingsFontFamily: inherit !default; // empty to use BS default, $baseFontFamily
$headingsFontWeight: bold !default; // instead of browser default, bold
$headingsColor: inherit !default; // empty to use BS default, $textColor
// Component sizing
// -------------------------
// Based on 14px font-size and 20px line-height
$fontSizeLarge: $baseFontSize * 1.25 !default; // ~18px
$fontSizeSmall: $baseFontSize * 0.85 !default; // ~12px
$fontSizeMini: $baseFontSize * 0.75 !default; // ~11px
$paddingLarge: 11px 19px !default; // 44px
$paddingSmall: 2px 10px !default; // 26px
$paddingMini: 0px 6px !default; // 22px
$baseBorderRadius: 4px !default;
$borderRadiusLarge: 6px !default;
$borderRadiusSmall: 3px !default;
// Tables
// -------------------------
$tableBackground: transparent !default; // overall background-color
$tableBackgroundAccent: #f9f9f9 !default; // for striping
$tableBackgroundHover: #f5f5f5 !default; // for hover
$tableBorder: #ddd !default; // table and cell border
// Buttons
// -------------------------
$btnBackground: $white !default;
$btnBackgroundHighlight: darken($white, 10%) !default;
$btnBorder: #ccc !default;
$btnPrimaryBackground: $linkColor !default;
$btnPrimaryBackgroundHighlight: adjust-hue($btnPrimaryBackground, 20%) !default;
$btnInfoBackground: #5bc0de !default;
$btnInfoBackgroundHighlight: #2f96b4 !default;
$btnSuccessBackground: #62c462 !default;
$btnSuccessBackgroundHighlight: #51a351 !default;
$btnWarningBackground: lighten($orange, 15%) !default;
$btnWarningBackgroundHighlight: $orange !default;
$btnDangerBackground: #ee5f5b !default;
$btnDangerBackgroundHighlight: #bd362f !default;
$btnInverseBackground: #444 !default;
$btnInverseBackgroundHighlight: $grayDarker !default;
// Forms
// -------------------------
$inputBackground: $white !default;
$inputBorder: #ccc !default;
$inputBorderRadius: $baseBorderRadius !default;
$inputDisabledBackground: $grayLighter !default;
$formActionsBackground: #f5f5f5 !default;
$inputHeight: $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
// Dropdowns
// -------------------------
$dropdownBackground: $white !default;
$dropdownBorder: rgba(0,0,0,.2) !default;
$dropdownDividerTop: #e5e5e5 !default;
$dropdownDividerBottom: $white !default;
$dropdownLinkColor: $grayDark !default;
$dropdownLinkColorHover: $white !default;
$dropdownLinkColorActive: $white !default;
$dropdownLinkBackgroundActive: $linkColor !default;
$dropdownLinkBackgroundHover: $dropdownLinkBackgroundActive !default;
// COMPONENT VARIABLES
// --------------------------------------------------
// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
$zindexDropdown: 1000 !default;
$zindexPopover: 1010 !default;
$zindexTooltip: 1030 !default;
$zindexFixedNavbar: 1030 !default;
$zindexModalBackdrop: 1040 !default;
$zindexModal: 1050 !default;
// Sprite icons path
// -------------------------
$iconSpritePath: image-path("glyphicons-halflings.png") !default;
$iconWhiteSpritePath: image-path("glyphicons-halflings-white.png") !default;
// Input placeholder text color
// -------------------------
$placeholderText: $grayLight !default;
// Hr border color
// -------------------------
$hrBorder: $grayLighter !default;
// Horizontal forms & lists
// -------------------------
$horizontalComponentOffset: 180px !default;
// Wells
// -------------------------
$wellBackground: #f5f5f5 !default;
// Navbar
// -------------------------
$navbarCollapseWidth: 979px !default;
$navbarCollapseDesktopWidth: $navbarCollapseWidth + 1;
$navbarHeight: 40px !default;
$navbarBackgroundHighlight: #ffffff !default;
$navbarBackground: darken($navbarBackgroundHighlight, 5%) !default;
$navbarBorder: darken($navbarBackground, 12%) !default;
$navbarText: #777 !default;
$navbarLinkColor: #777 !default;
$navbarLinkColorHover: $grayDark !default;
$navbarLinkColorActive: $gray !default;
$navbarLinkBackgroundHover: transparent !default;
$navbarLinkBackgroundActive: darken($navbarBackground, 5%) !default;
$navbarBrandColor: $navbarLinkColor !default;
// Inverted navbar
$navbarInverseBackground: #111111 !default;
$navbarInverseBackgroundHighlight: #222222 !default;
$navbarInverseBorder: #252525 !default;
$navbarInverseText: $grayLight !default;
$navbarInverseLinkColor: $grayLight !default;
$navbarInverseLinkColorHover: $white !default;
$navbarInverseLinkColorActive: $navbarInverseLinkColorHover !default;
$navbarInverseLinkBackgroundHover: transparent !default;
$navbarInverseLinkBackgroundActive: $navbarInverseBackground !default;
$navbarInverseSearchBackground: lighten($navbarInverseBackground, 25%) !default;
$navbarInverseSearchBackgroundFocus: $white !default;
$navbarInverseSearchBorder: $navbarInverseBackground !default;
$navbarInverseSearchPlaceholderColor: #ccc !default;
$navbarInverseBrandColor: $navbarInverseLinkColor !default;
// Pagination
// -------------------------
$paginationBackground: #fff !default;
$paginationBorder: #ddd !default;
$paginationActiveBackground: #f5f5f5 !default;
// Hero unit
// -------------------------
$heroUnitBackground: $grayLighter !default;
$heroUnitHeadingColor: inherit !default;
$heroUnitLeadColor: inherit !default;
// Form states and alerts
// -------------------------
$warningText: #c09853 !default;
$warningBackground: #fcf8e3 !default;
$warningBorder: darken(adjust-hue($warningBackground, -10), 3%) !default;
$errorText: #b94a48 !default;
$errorBackground: #f2dede !default;
$errorBorder: darken(adjust-hue($errorBackground, -10), 3%) !default;
$successText: #468847 !default;
$successBackground: #dff0d8 !default;
$successBorder: darken(adjust-hue($successBackground, -10), 5%) !default;
$infoText: #3a87ad !default;
$infoBackground: #d9edf7 !default;
$infoBorder: darken(adjust-hue($infoBackground, -10), 7%) !default;
// Tooltips and popovers
// -------------------------
$tooltipColor: #fff !default;
$tooltipBackground: #000 !default;
$tooltipArrowWidth: 5px !default;
$tooltipArrowColor: $tooltipBackground !default;
$popoverBackground: #fff !default;
$popoverArrowWidth: 10px !default;
$popoverArrowColor: #fff !default;
$popoverTitleBackground: darken($popoverBackground, 3%) !default;
// Special enhancement for popovers
$popoverArrowOuterWidth: $popoverArrowWidth + 1 !default;
$popoverArrowOuterColor: rgba(0,0,0,.25) !default;
// GRID
// --------------------------------------------------
// Default 940px grid
// -------------------------
$gridColumns: 12 !default;
$gridColumnWidth: 60px !default;
$gridGutterWidth: 20px !default;
$gridRowWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)) !default;
// 1200px min
$gridColumnWidth1200: 70px !default;
$gridGutterWidth1200: 30px !default;
$gridRowWidth1200: ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1)) !default;
// 768px-979px
$gridColumnWidth768: 42px !default;
$gridGutterWidth768: 20px !default;
$gridRowWidth768: ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1)) !default;
// Fluid grid
// -------------------------
$fluidGridColumnWidth: percentage($gridColumnWidth/$gridRowWidth) !default;
$fluidGridGutterWidth: percentage($gridGutterWidth/$gridRowWidth) !default;
// 1200px min
$fluidGridColumnWidth1200: percentage($gridColumnWidth1200/$gridRowWidth1200) !default;
$fluidGridGutterWidth1200: percentage($gridGutterWidth1200/$gridRowWidth1200) !default;
// 768px-979px
$fluidGridColumnWidth768: percentage($gridColumnWidth768/$gridRowWidth768) !default;
$fluidGridGutterWidth768: percentage($gridGutterWidth768/$gridRowWidth768) !default;

93
content/styles/main.scss Normal file
View file

@ -0,0 +1,93 @@
/*!
* Bootstrap v2.3.2
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
*/
// Core variables and mixins
// @import "bootstrap/variables"; // Modify this for custom colors, font-sizes, etc
@import "variables";
@import "customvars";
@import "bootstrap/mixins";
// CSS Reset
@import "bootstrap/reset";
// Grid system and page structure
@import "bootstrap/scaffolding";
@import "bootstrap/grid";
@import "bootstrap/layouts";
// Base CSS
@import "bootstrap/type";
@import "bootstrap/code";
@import "bootstrap/forms";
@import "bootstrap/tables";
// Components: common
// @import "bootstrap/sprites"; // Replaced with Font Awesome
@import "font-awesome"; // Replacement for bootstrap/sprites
@import "bootstrap/dropdowns";
@import "bootstrap/wells";
@import "bootstrap/component-animations";
@import "bootstrap/close";
// Components: Buttons & Alerts
@import "bootstrap/buttons";
@import "bootstrap/button-groups";
@import "bootstrap/alerts"; // Note: alerts share common CSS with buttons and thus have styles in buttons
// Components: Nav
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
// Components: Popovers
@import "bootstrap/modals";
@import "bootstrap/tooltip";
@import "bootstrap/popovers";
// Components: Misc
@import "bootstrap/thumbnails";
@import "bootstrap/media";
@import "bootstrap/labels-badges";
@import "bootstrap/progress-bars";
@import "bootstrap/accordion";
@import "bootstrap/carousel";
@import "bootstrap/hero-unit";
// Utility classes
@import "bootstrap/utilities"; // Has to be last to override when necessary
// RESPONSIVE CLASSES
@import "bootstrap/responsive-utilities";
// MEDIA QUERIES
// Large desktops
@import "bootstrap/responsive-1200px-min";
// Tablets to regular desktops
@import "bootstrap/responsive-768px-979px";
// Phones to portrait tablets and narrow desktops
@import "bootstrap/responsive-767px-max";
// RESPONSIVE NAVBAR
// From 979px and below, show a button to toggle navbar contents
@import "bootstrap/responsive-navbar";
// Font Awesome
@import "font-awesome";
@import "customstyles";