commit 7bee6f08726a9192043f2fbadbb7086fcc20c9c1 Author: cedric@yterium.com <> Date: Thu Nov 29 09:52:57 2012 +0000 Rangement : spipr (pour spip reboot) est une famille de squelettes qui repose sur Z+BootStrap(+less)+html5 3 variantes de squelettes : spipr-dist : un squelette generique par defaut spipr-blog : un squelette de blog spipr-doc : un squelette de doc (pour un minisite de doc de quelques pages comme celui de bootstrap par exemple) + un 4e squelette complet multifonction configurable qui est la version 4.0 de SarkaSpip Des themes de base dans spipr/v1 (on versionne preventivement), adaptes de bootswatch Tout ca est encore en DEVELOPPEMENT, des choses sont suceptibles de bouger avec casse de la compatibilite (notamment revision de la typo car SPIP a mieux a proposer que BootStrap, et squelettes/conventions des listes d'objet) Documentation a venir. Merci de ne pas utiliser en production pour le moment. diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..dc7b5a5 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,5 @@ +* text=auto !eol +css/bootswatch.less -text +css/variables.less -text +/plugin.xml -text +/vignette.png -text diff --git a/css/bootswatch.less b/css/bootswatch.less new file mode 100644 index 0000000..cb828cf --- /dev/null +++ b/css/bootswatch.less @@ -0,0 +1,332 @@ +// Bootswatch.less +// Swatch: Journal +// Version: 2.1.1 +// ----------------------------------------------------- + +// TYPOGRAPHY +// ----------------------------------------------------- + +@import url('https://fonts.googleapis.com/css?family=News+Cycle:400,700'); + +h1, h2, h3, h4, h5, h6 { +/* + margin: 0 0 10px; + line-height: 1.2; +*/ + a { + color: @headingsColor; + } +} + +/* +h1 { font-size: 48px; } + +h2 { font-size: 36px; } + +h3 { font-size: 28px; } + +h4 { font-size: 20px; } + +h5 { font-size: 13px; } + +p > a, +address > a, +.breadcrumb a, +abbr[title] { + text-decoration: none; + border-bottom: 1px dotted; + + &:hover { + text-decoration: none; + border-bottom: 1px solid; + } +} +*/ + +code, pre { + .border-radius(0); + background-color: @grayLighter; + .box-shadow(none); +} + +// SCAFFOLDING +// ----------------------------------------------------- + +.page-header { + border-bottom: 2px solid @grayLighter; +} + +hr { + border-bottom: 1px solid @grayLighter; +} + +// NAVBAR +// ----------------------------------------------------- + +.navbar { + + font-family: @sansFontFamily; + font-weight: bold; + + .navbar-inner { + border-bottom: 2px solid @grayLighter; + .border-radius(0); + .box-shadow(none); + } + + .brand { + padding: 19px 20px 21px; + font-size: 24px; + font-weight: bold; + text-shadow: none; + text-transform: uppercase; + } + + .nav > li > a { + padding: 20px 10px 20px; + font-size: 18px; + text-shadow: none; + text-transform: uppercase; + } + + .nav > .active > a { + background-color: transparent; + } + + .navbar-text { + margin-top: 20px; + padding-left: 10px; + padding-right: 10px; + font-size: 18px; + line-height: 20px; + } + + .nav > .active > a, + .nav > .active > a:hover, + .nav > .active > a:focus { + .box-shadow(none); + } + + .divider-vertical { + border-left-color: @grayLighter; + border-right-color: @grayLighter; + } + + .dropdown-menu { + + top: 85%; + .border-radius(0); + + a { + font-size: 15px; + font-weight: bold; + } + } + + .navbar-search .search-query, + .navbar-search .search-query:hover { + border: 2px solid @grayLighter; + color: @textColor; + .placeholder(@gray); + } +} + +@media (max-width: @navbarCollapseWidth) { + + .nav-collapse .navbar-form, + .nav-collapse .navbar-search { + margin-bottom: 0; + border-top: 2px solid @grayLighter; + border-bottom: 2px solid @grayLighter; + } + + + + .navbar .nav-collapse { + + .nav li > a { + color: @navbarLinkColor; + + &:hover { + background-color: @dropdownLinkBackgroundHover; + } + } + + .navbar-text { + margin-top: 0; + } + } + + .navbar-inverse .nav-collapse { + + .nav li > a { + color: @navbarInverseLinkColor; + + &:hover { + background-color: #111; + background-image: none; + } + } + + } +} + +div.subnav { + + height: 54px; + background-color: @bodyBackground; + background-image: none; + .box-shadow(none); + border: 2px solid @grayLighter; + border-left: none; + border-right: none; + .border-radius(0); + + &.subnav-fixed { + top: @navbarHeight; + } + + .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; + } + } + + 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; + } +} + +// NAV +// ----------------------------------------------------- + +// BUTTONS +// ----------------------------------------------------- + +[class^="icon-"], [class*=" icon-"] { + vertical-align: baseline; +} + +.btn-inverse { + .buttonBackground(@grayDarker, @black); +} + +// TABLES +// ----------------------------------------------------- + +.table-bordered { + .border-radius(0); + .box-shadow(none); +} + +// FORMS +// ----------------------------------------------------- + +legend { + border-bottom: 2px solid @grayLighter; + font-family: @headingsFontFamily; + font-weight: @headingsFontWeight; + color: @headingsColor; +} + +// DROPDOWNS +// ----------------------------------------------------- + +// MISC +// ----------------------------------------------------- + +.well { + .border-radius(0); + .box-shadow(none); +} + +.hero-unit { + padding: 30px 60px; + border: 1px solid rgba(0,0,0,.05); + .border-radius(0); + .box-shadow(none); + + h1 { + margin: 0 0 10px; + line-height: 1.2; + } +} + +// a.thumbnail:hover { +// .box-shadow(0 1px 3px 1px rgba(0, 0, 0, 0.3)); +// border-color: #ddd; +// } + +.modal { + .border-radius(0px); + background: @bodyBackground; +} + +.modal-header { + border-bottom: none; +} + +.modal-footer { + border-top: none; + background: transparent; + .box-shadow(none); +} + +.close, +.close:hover { + border-bottom: none; +} + +// MEDIA QUERIES +// ----------------------------------------------------- + +@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 diff --git a/css/variables.less b/css/variables.less new file mode 100644 index 0000000..a03a339 --- /dev/null +++ b/css/variables.less @@ -0,0 +1,302 @@ +// Variables +// Swatch: Journal +// Version: 2.1.1 +// -------------------------------------------------- + + +// Global values +// -------------------------------------------------- + + +// Grays +// ------------------------- +@black: #000; +@grayDarker: #333; +@grayDark: #777; +@gray: #999; +@grayLight: #bbb; +@grayLighter: #ebebeb; +@white: #fff; + + +// Accent colors +// ------------------------- +@blue: #369; +@blueDark: darken(@blue, 15%); +@green: #22B24C; +@red: #C00; +@yellow: #FCFADB; +@orange: #FF7F00; +@pink: #CC99CC; +@purple: #7a43b6; + + +// Scaffolding +// ------------------------- +@bodyBackground: @white; +@textColor: @grayDark; + + +// Links +// ------------------------- +@linkColor: @grayDarker; +@linkColorHover: @linkColor; + + +// Typography +// ------------------------- +@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: @serifFontFamily; +@baseLineHeight: 20px; +@altFontFamily: @sansFontFamily; + +@headingsFontFamily: @sansFontFamily; // empty to use BS default, @baseFontFamily +@headingsFontWeight: bold; // instead of browser default, bold +@headingsColor: @black; // empty to use BS default, @textColor + + +// Component sizing +// ------------------------- +// Based on 14px font-size and 20px line-height + +@fontSizeLarge: @baseFontSize * 1.25; // ~18px +@fontSizeSmall: @baseFontSize * 0.85; // ~12px +@fontSizeMini: @baseFontSize * 0.75; // ~11px + +@paddingLarge: 11px 19px; // 44px +@paddingSmall: 2px 10px; // 26px +@paddingMini: 1px 6px; // 24px + +@baseBorderRadius: 4px; +@borderRadiusLarge: 5px; +@borderRadiusSmall: 3px; + + +// Tables +// ------------------------- +@tableBackground: transparent; // overall background-color +@tableBackgroundAccent: #f5f5f5; // for striping +@tableBackgroundHover: @grayLighter; // for hover +@tableBorder: #ddd; // table and cell border + +// Buttons +// ------------------------- +@btnBackground: @white; +@btnBackgroundHighlight: darken(@white, 10%); +@btnBorder: darken(@white, 15%); + +@btnPrimaryBackground: lighten(@linkColor, 5%); +@btnPrimaryBackgroundHighlight: @linkColor; + +@btnInfoBackground: lighten(@blue, 5%); +@btnInfoBackgroundHighlight: @blue; + +@btnSuccessBackground: lighten(@green, 5%); +@btnSuccessBackgroundHighlight: @green; + +@btnWarningBackground: lighten(@orange, 10%); +@btnWarningBackgroundHighlight: @orange; + +@btnDangerBackground: lighten(@red, 10%); +@btnDangerBackgroundHighlight: @red; + +@btnInverseBackground: lighten(@grayDark, 5%); +@btnInverseBackgroundHighlight: @grayDark; + + +// Forms +// ------------------------- +@inputBackground: @white; +@inputBorder: #ccc; +@inputBorderRadius: 3px; +@inputDisabledBackground: @grayLighter; +@formActionsBackground: @grayLighter; +@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border + + +// Dropdowns +// ------------------------- +@dropdownBackground: @bodyBackground; +@dropdownBorder: rgba(0,0,0,.2); +@dropdownDividerTop: @grayLighter; +@dropdownDividerBottom: @grayLighter; + +@dropdownLinkColor: @headingsColor; +@dropdownLinkColorHover: @headingsColor; +@dropdownLinkColorActive: @dropdownLinkColor; + +@dropdownLinkBackgroundActive: @dropdownLinkBackgroundHover; +@dropdownLinkBackgroundHover: @grayLighter; + + + +// 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; +@zindexPopover: 1010; +@zindexTooltip: 1020; +@zindexFixedNavbar: 1030; +@zindexModalBackdrop: 1040; +@zindexModal: 1050; + + +// Sprite icons path +// ------------------------- +@iconSpritePath: "../img/glyphicons-halflings.png"; +@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png"; + + +// Input placeholder text color +// ------------------------- +@placeholderText: @grayLight; + + +// Hr border color +// ------------------------- +@hrBorder: @grayLighter; + + +// Horizontal forms & lists +// ------------------------- +@horizontalComponentOffset: 180px; + + +// Wells +// ------------------------- +@wellBackground: lighten(@grayLighter,4%); + + +// Navbar +// ------------------------- +@navbarCollapseWidth: 979px; +@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1; + +@navbarHeight: 60px; +@navbarBackgroundHighlight: @bodyBackground; +@navbarBackground: @bodyBackground; +@navbarBorder: darken(@navbarBackground, 12%); + +@navbarText: @textColor; +@navbarLinkColor: @headingsColor; +@navbarLinkColorHover: @headingsColor; +@navbarLinkColorActive: @headingsColor; +@navbarLinkBackgroundHover: transparent; +@navbarLinkBackgroundActive: transparent; + +@navbarBrandColor: @navbarLinkColor; + +// Inverted navbar +@navbarInverseBackground: #111111; +@navbarInverseBackgroundHighlight: #222222; +@navbarInverseBorder: #252525; + +@navbarInverseText: @grayLight; +@navbarInverseLinkColor: @grayLight; +@navbarInverseLinkColorHover: @white; +@navbarInverseLinkColorActive: @navbarInverseLinkColorHover; +@navbarInverseLinkBackgroundHover: transparent; +@navbarInverseLinkBackgroundActive: @navbarInverseBackground; + +@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%); +@navbarInverseSearchBackgroundFocus: @white; +@navbarInverseSearchBorder: @navbarInverseBackground; +@navbarInverseSearchPlaceholderColor: #ccc; + +@navbarInverseBrandColor: @navbarInverseLinkColor; + + +// Pagination +// ------------------------- +@paginationBackground: @bodyBackground; +@paginationBorder: #ddd; +@paginationActiveBackground: @grayLighter; + + +// Hero unit +// ------------------------- +@heroUnitBackground: @grayLighter; +@heroUnitHeadingColor: @headingsColor; +@heroUnitLeadColor: inherit; + + +// Form states and alerts +// ------------------------- +@warningText: #c09853; +@warningBackground: #fcf8e3; +@warningBorder: darken(spin(@warningBackground, -10), 3%); + +@errorText: #b94a48; +@errorBackground: #f2dede; +@errorBorder: darken(spin(@errorBackground, -10), 3%); + +@successText: #468847; +@successBackground: #dff0d8; +@successBorder: darken(spin(@successBackground, -10), 5%); + +@infoText: #3a87ad; +@infoBackground: #d9edf7; +@infoBorder: darken(spin(@infoBackground, -10), 7%); + + +// Tooltips and popovers +// ------------------------- +@tooltipColor: #fff; +@tooltipBackground: #000; +@tooltipArrowWidth: 5px; +@tooltipArrowColor: @tooltipBackground; + +@popoverBackground: #fff; +@popoverArrowWidth: 10px; +@popoverArrowColor: #fff; +@popoverTitleBackground: darken(@popoverBackground, 3%); + +// Special enhancement for popovers +@popoverArrowOuterWidth: @popoverArrowWidth + 1; +@popoverArrowOuterColor: rgba(0,0,0,.25); + + + +// GRID +// -------------------------------------------------- + + +// Default 940px grid +// ------------------------- +@gridColumns: 12; +@gridColumnWidth: 60px; +@gridGutterWidth: 20px; +@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); + +// 1200px min +@gridColumnWidth1200: 70px; +@gridGutterWidth1200: 30px; +@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1)); + +// 768px-979px +@gridColumnWidth768: 42px; +@gridGutterWidth768: 20px; +@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1)); + + +// Fluid grid +// ------------------------- +@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth); +@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth); + +// 1200px min +@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200); +@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200); + +// 768px-979px +@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768); +@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768); diff --git a/plugin.xml b/plugin.xml new file mode 100644 index 0000000..6c74e3b --- /dev/null +++ b/plugin.xml @@ -0,0 +1,12 @@ + + Journal + 2.1.1 + stable + Cedric + GPL + theme_bsjournal + Crisp like a new sheet of paper + vignette.png + + theme + diff --git a/vignette.png b/vignette.png new file mode 100644 index 0000000..448e903 Binary files /dev/null and b/vignette.png differ