diff --git a/drupalcat/drupalcat.info.yml b/drupalcat/drupalcat.info.yml index bdec9ba..b36bbea 100644 --- a/drupalcat/drupalcat.info.yml +++ b/drupalcat/drupalcat.info.yml @@ -11,5 +11,5 @@ dependencies: - dblog - toolbar themes: - - stark + - drupalcat - seven diff --git a/drupalcat/themes/drupalcat/Gemfile b/drupalcat/themes/drupalcat/Gemfile new file mode 100644 index 0000000..b7b1ed4 --- /dev/null +++ b/drupalcat/themes/drupalcat/Gemfile @@ -0,0 +1,3 @@ +source 'https://rubygems.org' +gem "sass", "3.2.9" +gem "bourbon" diff --git a/drupalcat/themes/drupalcat/Gemfile.lock b/drupalcat/themes/drupalcat/Gemfile.lock new file mode 100644 index 0000000..61913c2 --- /dev/null +++ b/drupalcat/themes/drupalcat/Gemfile.lock @@ -0,0 +1,15 @@ +GEM + remote: https://rubygems.org/ + specs: + bourbon (3.2.3) + sass (~> 3.2) + thor + sass (3.2.9) + thor (0.19.1) + +PLATFORMS + ruby + +DEPENDENCIES + bourbon + sass (= 3.2.9) diff --git a/drupalcat/themes/drupalcat/README.md b/drupalcat/themes/drupalcat/README.md new file mode 100644 index 0000000..a40ad30 --- /dev/null +++ b/drupalcat/themes/drupalcat/README.md @@ -0,0 +1,21 @@ +Drupal.cat theme instruccions d'ús: + +Primer s'ha de tenir instal·lada la gema Bundle. +«gem install bundle» + +Després ens hem de assegurar de tenir totes les gemes necessàries definides a l'arxiu Gemfile +«bundle install» + +Finalment per generar els arxius CSS s'ha de fer servir la instrucció: +«sass --watch sass:css» + +Documentació: + + - Com fer servir breakpoints: + http://robots.thoughtbot.com/version-1-0-of-bourbon-neat-a-sass-based-responsive + + - Bourbon: + bourbon.io/docs/ + + - Neat + http://thoughtbot.github.io/neat-docs/latest/ diff --git a/drupalcat/themes/drupalcat/color/color.inc b/drupalcat/themes/drupalcat/color/color.inc new file mode 100644 index 0000000..251c0fc --- /dev/null +++ b/drupalcat/themes/drupalcat/color/color.inc @@ -0,0 +1,126 @@ + array('logo' => theme_get_setting('logo.url', 'bartik'))); +$js_attached['#attached']['js'][] = array('data' => $js, 'type' => 'setting'); +drupal_render($js_attached); + +$info = array( + // Available colors and color labels used in theme. + 'fields' => array( + 'top' => t('Header background top'), + 'bottom' => t('Header background bottom'), + 'bg' => t('Main background'), + 'sidebar' => t('Sidebar background'), + 'sidebarborders' => t('Sidebar borders'), + 'footer' => t('Footer background'), + 'titleslogan' => t('Title and slogan'), + 'text' => t('Text color'), + 'link' => t('Link color'), + ), + // Pre-defined color schemes. + 'schemes' => array( + 'default' => array( + 'title' => t('Blue Lagoon (default)'), + 'colors' => array( + 'top' => '#055a8e', + 'bottom' => '#1d84c3', + 'bg' => '#ffffff', + 'sidebar' => '#f6f6f2', + 'sidebarborders' => '#f9f9f9', + 'footer' => '#292929', + 'titleslogan' => '#fffeff', + 'text' => '#3b3b3b', + 'link' => '#0071B3', + ), + ), + 'firehouse' => array( + 'title' => t('Firehouse'), + 'colors' => array( + 'top' => '#cd2d2d', + 'bottom' => '#d64e4e', + 'bg' => '#ffffff', + 'sidebar' => '#f1f4f0', + 'sidebarborders' => '#ededed', + 'footer' => '#1f1d1c', + 'titleslogan' => '#fffeff', + 'text' => '#888888', + 'link' => '#d6121f', + ), + ), + 'ice' => array( + 'title' => t('Ice'), + 'colors' => array( + 'top' => '#d0d0d0', + 'bottom' => '#c2c4c5', + 'bg' => '#ffffff', + 'sidebar' => '#ffffff', + 'sidebarborders' => '#cccccc', + 'footer' => '#016b83', + 'titleslogan' => '#000000', + 'text' => '#4a4a4a', + 'link' => '#019dbf', + ), + ), + 'plum' => array( + 'title' => t('Plum'), + 'colors' => array( + 'top' => '#4c1c58', + 'bottom' => '#593662', + 'bg' => '#fffdf7', + 'sidebar' => '#edede7', + 'sidebarborders' => '#e7e7e7', + 'footer' => '#2c2c28', + 'titleslogan' => '#ffffff', + 'text' => '#301313', + 'link' => '#9d408d', + ), + ), + 'slate' => array( + 'title' => t('Slate'), + 'colors' => array( + 'top' => '#4a4a4a', + 'bottom' => '#4e4e4e', + 'bg' => '#ffffff', + 'sidebar' => '#ffffff', + 'sidebarborders' => '#d0d0d0', + 'footer' => '#161617', + 'titleslogan' => '#ffffff', + 'text' => '#3b3b3b', + 'link' => '#0073b6', + ), + ), + ), + + // CSS files (excluding @import) to rewrite with new color scheme. + 'css' => array( + 'css/colors.css', + ), + + // Files to copy. + 'copy' => array( + 'logo.png', + ), + + // Gradient definitions. + 'gradients' => array( + array( + // (x, y, width, height). + 'dimension' => array(0, 0, 0, 0), + // Direction of gradient ('vertical' or 'horizontal'). + 'direction' => 'vertical', + // Keys of colors to use for the gradient. + 'colors' => array('top', 'bottom'), + ), + ), + + // Preview files. + 'preview_css' => 'color/preview.css', + 'preview_js' => 'color/preview.js', + 'preview_html' => 'color/preview.html', +); diff --git a/drupalcat/themes/drupalcat/color/preview.css b/drupalcat/themes/drupalcat/color/preview.css new file mode 100644 index 0000000..38c694e --- /dev/null +++ b/drupalcat/themes/drupalcat/color/preview.css @@ -0,0 +1,183 @@ +/* ---------- Preview Styles ----------- */ +.js #preview { + clear: both; + float: none !important; +} +#preview { + background-color: #fff; + font-family: Georgia, "Times New Roman", Times, serif; + font-size: 14px; + line-height: 1.5; + overflow: hidden; + word-wrap: break-word; + margin-bottom: 10px; +} +#preview-header { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + position: relative; +} +#preview-logo { + float: left; + padding: 15px 15px 15px 10px; +} +#preview-site-name { + color: #686868; + font-weight: normal; + font-size: 1.821em; + line-height: 1; + margin-bottom: 30px; + margin-left: 15px; + padding-top: 34px; +} +#preview-main-menu { + clear: both; + padding: 0 15px 3px; +} +#preview-main-menu-links a { + color: #d9d9d9; + padding: 0.6em 1em 0.4em; +} +#preview-main-menu-links { + font-size: 0.929em; + margin: 0; + padding: 0; +} +#preview-main-menu-links a { + color: #333; + background: #ccc; + background: rgba(255, 255, 255, 0.7); + text-shadow: 0 1px #eee; + border-top-left-radius: 8px; + border-top-right-radius: 8px; +} +#preview-main-menu-links a:hover, +#preview-main-menu-links a:focus { + background: #eee; + background: rgba(255, 255, 255, 0.95); + text-decoration: none; + cursor: pointer; +} +#preview-main-menu-links li a.active { + background: #fff; + border-bottom: none; +} +#preview-main-menu-links li { + display: inline; + list-style-type: none; + padding: 0.6em 0 0.4em; +} +#preview-sidebar, +#preview-content { + display: inline; + float: left; + position: relative; +} +#preview-sidebar { + margin-left: 15px; + width: 210px; +} +#preview-content { + margin-left: 30px; + width: 26.5em; +} +#preview-sidebar .preview-block { + border: 1px solid; + margin: 20px 0; + padding: 15px 20px; +} +#preview-sidebar h2 { + border-bottom: 1px solid #d6d6d6; + font-size: 1.071em; + font-weight: normal; + line-height: 1.2; + margin: 0 0 0.5em; + padding-bottom: 5px; + text-shadow: 0 1px 0 #fff; +} +#preview .preview-block .preview-content { + margin-top: 1em; +} +#preview .preview-block-menu .preview-content, +#preview .preview-block-menu .preview-content ul { + margin-top: 0; +} +#preview-main { + margin-bottom: 40px; + margin-top: 20px; +} +#preview-page-title { + font-size: 2em; + font-weight: normal; + line-height: 1; + margin: 1em 0 0.5em; +} +#preview-footer-wrapper { + color: #c0c0c0; + color: rgba(255, 255, 255, 0.65); + display: block !important; + font-size: 0.857em; + padding: 20px 20px 25px; +} +#preview-footer-wrapper a { + color: #fcfcfc; + color: rgba(255, 255, 255, 0.8); +} +#preview-footer-wrapper a:hover, +#preview-footer-wrapper a:focus { + color: #fefefe; + color: rgba(255, 255, 255, 0.95); + text-decoration: underline; +} +#preview-footer-wrapper .preview-footer-column { + display: inline; + float: left; + padding: 0 10px; + position: relative; + width: 220px; +} +#preview-footer-wrapper .preview-block { + border: 1px solid #444; + border-color: rgba(255, 255, 255, 0.1); + margin: 20px 0; + padding: 10px; +} +#preview-footer-columns .preview-block-menu { + border: none; + margin: 0; + padding: 0; +} +#preview-footer-columns h2 { + border-bottom: 1px solid #555; + border-color: rgba(255, 255, 255, 0.15); + font-size: 1em; + margin-bottom: 0; + padding-bottom: 3px; + text-transform: uppercase; +} +#preview-footer-columns .preview-content { + margin-top: 0; +} +#preview-footer-columns .preview-content ul { + margin-left: 0; + padding-left: 0; +} +#preview-footer-columns .preview-content li { + list-style: none; + list-style-image: none; + margin: 0; + padding: 0; +} +#preview-footer-columns .preview-content li a { + border-bottom: 1px solid #555; + border-color: rgba(255, 255, 255, 0.15); + display: block; + line-height: 1.2; + padding: 0.8em 2px 0.8em 20px; + text-indent: -15px; +} +#preview-footer-columns .preview-content li a:hover, +#preview-footer-columns .preview-content li a:focus { + background-color: #1f1f21; + background-color: rgba(255, 255, 255, 0.05); + text-decoration: none; +} diff --git a/drupalcat/themes/drupalcat/color/preview.html b/drupalcat/themes/drupalcat/color/preview.html new file mode 100644 index 0000000..ae9aa14 --- /dev/null +++ b/drupalcat/themes/drupalcat/color/preview.html @@ -0,0 +1,65 @@ +
+ +
+ +
Bartik
+ +
+ +
+
+
+

Etiam est risus

+
+ Maecenas id porttitor Ut enim ad minim veniam, quis nostrudfelis. + Laboris nisi ut aliquip ex ea. +
+
+
+
+

Lorem ipsum dolor

+
+
+ Sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis + nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Maecenas id porttitor Ut enim ad minim veniam, quis nostr udfelis. +
+
+
+
+ + + +
diff --git a/drupalcat/themes/drupalcat/color/preview.js b/drupalcat/themes/drupalcat/color/preview.js new file mode 100644 index 0000000..b9fb4d1 --- /dev/null +++ b/drupalcat/themes/drupalcat/color/preview.js @@ -0,0 +1,45 @@ +/** + * @file + * Preview for the Bartik theme. + */ +(function ($, Drupal, drupalSettings) { + + "use strict"; + + Drupal.color = { + logoChanged: false, + callback: function (context, settings, form, farb, height, width) { + // Change the logo to be the real one. + if (!this.logoChanged) { + $('#preview #preview-logo img').attr('src', drupalSettings.color.logo); + this.logoChanged = true; + } + // Remove the logo if the setting is toggled off. + if (drupalSettings.color.logo === null) { + $('div').remove('#preview-logo'); + } + + // Solid background. + form.find('#preview').css('backgroundColor', $('#palette input[name="palette[bg]"]').val()); + + // Text preview. + form.find('#preview #preview-main h2, #preview .preview-content').css('color', form.find('#palette input[name="palette[text]"]').val()); + form.find('#preview #preview-content a').css('color', form.find('#palette input[name="palette[link]"]').val()); + + // Sidebar block. + form.find('#preview #preview-sidebar #preview-block').css('background-color', form.find('#palette input[name="palette[sidebar]"]').val()); + form.find('#preview #preview-sidebar #preview-block').css('border-color', form.find('#palette input[name="palette[sidebarborders]"]').val()); + + // Footer wrapper background. + form.find('#preview #preview-footer-wrapper', form).css('background-color', form.find('#palette input[name="palette[footer]"]').val()); + + // CSS3 Gradients. + var gradient_start = form.find('#palette input[name="palette[top]"]').val(); + var gradient_end = form.find('#palette input[name="palette[bottom]"]').val(); + + form.find('#preview #preview-header').attr('style', "background-color: " + gradient_start + "; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(" + gradient_start + "), to(" + gradient_end + ")); background-image: -moz-linear-gradient(-90deg, " + gradient_start + ", " + gradient_end + ");"); + + form.find('#preview #preview-site-name').css('color', form.find('#palette input[name="palette[titleslogan]"]').val()); + } + }; +})(jQuery, Drupal, drupalSettings); diff --git a/drupalcat/themes/drupalcat/config/install/drupalcat.settings.yml b/drupalcat/themes/drupalcat/config/install/drupalcat.settings.yml new file mode 100644 index 0000000..48877a3 --- /dev/null +++ b/drupalcat/themes/drupalcat/config/install/drupalcat.settings.yml @@ -0,0 +1,4 @@ +# @todo There is no UI yet for configuring this, but the setting is included +# here, because ConfigImportUITest requires a non-empty bartik.settings.yml +# file: https://drupal.org/node/2235901. +shortcut_module_link: false diff --git a/drupalcat/themes/drupalcat/config/schema/drupalcat.schema.yml b/drupalcat/themes/drupalcat/config/schema/drupalcat.schema.yml new file mode 100644 index 0000000..ea22629 --- /dev/null +++ b/drupalcat/themes/drupalcat/config/schema/drupalcat.schema.yml @@ -0,0 +1,11 @@ +# Schema for the configuration files of the drupalcat theme. + +bartik.settings: + type: theme_settings + label: 'drupalcat settings' + mapping: + # @todo Module-specific settings should be defined by the module: + # https://drupal.org/node/2235901. + shortcut_module_link: + type: boolean + label: 'Shortcut module link' diff --git a/drupalcat/themes/drupalcat/css/ckeditor-iframe.css b/drupalcat/themes/drupalcat/css/ckeditor-iframe.css new file mode 100644 index 0000000..892515b --- /dev/null +++ b/drupalcat/themes/drupalcat/css/ckeditor-iframe.css @@ -0,0 +1,35 @@ +/** + * @file + * Approximate Bartik's style in CKEditor instances on the Drupal back-end. + */ + +/* -------------- Captions -------------- */ + +.caption > * { + background: #F3F3F3; + padding: 0.5ex; + border: 1px solid #CCC; +} + +.caption > figcaption { + border: 1px solid #CCC; + border-top: none; + padding-top: 0.5ex; + font-size: small; + text-align: center; +} + +/* Override Bartik's default blockquote and pre styles when captioned. */ +.caption-pre > pre, +.caption-blockquote > blockquote { + margin: 0; +} +.caption-blockquote > figcaption::before { + content: "— "; +} +.caption-blockquote > figcaption { + text-align: left; +} +[dir="rtl"] .caption-blockquote > figcaption { + text-align: right; +} diff --git a/drupalcat/themes/drupalcat/css/colors.css b/drupalcat/themes/drupalcat/css/colors.css new file mode 100644 index 0000000..f2ef534 --- /dev/null +++ b/drupalcat/themes/drupalcat/css/colors.css @@ -0,0 +1,58 @@ +/* ---------- Color Module Styles ----------- */ + +body { + color: #3b3b3b; +} +.comment .comment-arrow { + border-color: #ffffff; +} +#page, +#main-wrapper, +.region-primary-menu .menu li a.active, +.region-primary-menu .menu li .active-trail a { + background: #ffffff; +} +.tabs ul.primary li a.active { + background-color: #ffffff; +} +.tabs ul.primary li.active a { + background-color: #ffffff; + border-bottom-color: #ffffff; +} +#header { + background-color: #1d84c3; + background-image: -webkit-linear-gradient(top, #055a8e 0%, #1d84c3 100%); + background-image: linear-gradient(to bottom, #055a8e 0%, #1d84c3 100%); +} +a, +.link { + color: #0071b3; +} +a:hover, +a:focus, +.link:hover, +.link:focus { + color: #018fe2; +} +a:active, +.link:active { + color: #23aeff; +} +.sidebar .block { + background-color: #f6f6f2; + border-color: #f9f9f9; +} +#page-wrapper, +#footer-wrapper { + background: #292929; +} +.region-header, +.region-header a, +.region-header li a.active, +#name-and-slogan, +.site-branding-block, +#name-and-slogan a, +.site-branding-block a, +.region-secondary-menu .menu li a { + color: #fffeff; +} diff --git a/drupalcat/themes/drupalcat/css/layout.css b/drupalcat/themes/drupalcat/css/layout.css new file mode 100644 index 0000000..91576dc --- /dev/null +++ b/drupalcat/themes/drupalcat/css/layout.css @@ -0,0 +1,232 @@ + +/* ---------- Basic Layout Styles ----------- */ + +html, +body, +#page { + height: 100%; +} +#page-wrapper { + min-height: 100%; +} +#header div.section, +#featured div.section, +#messages div.section, +#main, +#triptych, +#footer-columns, +#footer { + width: 100%; + max-width: 860px; + margin-left: auto; + margin-right: auto; +} +#header div.section { + position: relative; +} +.region-header { + float: right; /* LTR */ + margin: .5em 5px .75em; +} +[dir="rtl"] .region-header { + float: left; +} +.region-secondary-menu .block-menu { + width: 100%; + margin: 0 auto; +} +#main-wrapper { + min-height: 300px; +} +#content .section, +.sidebar .section { + padding: 0 15px; +} +.breadcrumb { + margin: 0 15px; +} +#footer-wrapper { + padding: 35px 0 30px; +} +#footer-wrapper .section { + box-sizing: border-box; + padding: 0 15px; +} +.region-triptych-first, +.region-triptych-middle, +.region-triptych-last { + box-sizing: border-box; + padding: 0 20px 0; +} +.region-footer-firstcolumn, +.region-footer-secondcolumn, +.region-footer-thirdcolumn, +.region-footer-fourthcolumn { + box-sizing: border-box; + padding: 0 10px; +} + +@media all and (min-width: 560px) and (max-width: 850px) { + + #sidebar-first, + .region-triptych-first, + .region-triptych-middle, + .region-triptych-last, + .region-footer-firstcolumn, + .region-footer-secondcolumn, + .region-footer-thirdcolumn, + .region-footer-fourthcolumn { + display: inline; + float: left; /* LTR */ + position: relative; + } + [dir="rtl"] #sidebar-first, + [dir="rtl"] .region-triptych-first, + [dir="rtl"] .region-triptych-middle, + [dir="rtl"] .region-triptych-last, + [dir="rtl"] .region-footer-firstcolumn, + [dir="rtl"] .region-footer-secondcolumn, + [dir="rtl"] .region-footer-thirdcolumn, + [dir="rtl"] .region-footer-fourthcolumn { + float: right; + } + #sidebar-first, + #sidebar-second { + width: 50%; + } + #sidebar-second { + margin-left: 50%; /* LTR */ + } + [dir="rtl"] #sidebar-second { + margin-right: 50%; + } + .one-sidebar #sidebar-first, + .one-sidebar #sidebar-second { + width: 100%; + } + .one-sidebar #sidebar-second { + margin-left: 0; /* LTR */ + } + [dir="rtl"] .one-sidebar #sidebar-second { + margin-right: 0; + } + .region-triptych-first, + .region-triptych-middle, + .region-triptych-last { + box-sizing: border-box; + padding: 20px 15px 30px; + width: 33%; + } + .region-triptych-middle { + padding: 20px 5px 30px; + } + .region-footer-firstcolumn, + .region-footer-secondcolumn { + box-sizing: border-box; + padding: 0 10px; + width: 50%; + } + .region-footer-thirdcolumn, + .region-footer-fourthcolumn { + box-sizing: border-box; + padding: 0 10px; + width: 50%; + } + .region-footer-thirdcolumn { + clear: both; + } +} + +@media all and (min-width: 851px) { + + #header div.section, + #featured div.section, + #messages div.section, + #main, + #triptych, + #footer-columns, + #footer { + max-width: 1290px; + } + #content, + #sidebar-first, + #sidebar-second, + .region-triptych-first, + .region-triptych-middle, + .region-triptych-last, + .region-footer-firstcolumn, + .region-footer-secondcolumn, + .region-footer-thirdcolumn, + .region-footer-fourthcolumn { + display: inline; + float: left; /* LTR */ + position: relative; + } + [dir="rtl"] #content, + [dir="rtl"] #sidebar-first, + [dir="rtl"] #sidebar-second, + [dir="rtl"] .region-triptych-first, + [dir="rtl"] .region-triptych-middle, + [dir="rtl"] .region-triptych-last, + [dir="rtl"] .region-footer-firstcolumn, + [dir="rtl"] .region-footer-secondcolumn, + [dir="rtl"] .region-footer-thirdcolumn, + [dir="rtl"] .region-footer-fourthcolumn { + float: right; + } + .layout-two-sidebars #content { + margin-left: 25%; + margin-right: 25%; + width: 50%; + } + .layout-one-sidebar #content { + width: 75%; + } + .layout-no-sidebars #content { + width: 100%; + } + .layout-sidebar-first #content { + margin-left: 25%; /* LTR */ + margin-right: 0; /* LTR */ + } + [dir="rtl"] .layout-sidebar-first #content { + margin-left: 0; + margin-right: 25%; + } + .layout-sidebar-second #content { + margin-right: 25%; /* LTR */ + margin-left: 0; /* LTR */ + } + [dir="rtl"] .layout-sidebar-second #content { + margin-right: 0; + margin-left: 25%; + } + #sidebar-first { + width: 25%; + margin-left: -100%; /* LTR */ + } + [dir="rtl"] #sidebar-first { + margin-right: -100%; + } + #sidebar-second { + width: 25%; + margin-left: -25%; /* LTR */ + clear: none; + } + [dir="rtl"] #sidebar-second { + margin-right: -25%; + } + .region-triptych-first, + .region-triptych-middle, + .region-triptych-last { + width: 33%; + } + .region-footer-firstcolumn, + .region-footer-secondcolumn, + .region-footer-thirdcolumn, + .region-footer-fourthcolumn { + box-sizing: border-box; + padding: 0 10px; + width: 25%; + } +} diff --git a/drupalcat/themes/drupalcat/css/maintenance-page.css b/drupalcat/themes/drupalcat/css/maintenance-page.css new file mode 100644 index 0000000..ce5c9f5 --- /dev/null +++ b/drupalcat/themes/drupalcat/css/maintenance-page.css @@ -0,0 +1,74 @@ +body.maintenance-page { + background-color: #fff; + color: #000; +} +.maintenance-page #page-wrapper { + background: #fff; + margin-left: auto; + margin-right: auto; + min-width: 0; + min-height: 0; + border: 1px solid #ddd; + margin-top: 40px; +} +.maintenance-page #page { + margin: 10px; +} +.maintenance-page #main-wrapper { + min-height: inherit; +} +.maintenance-page #header, +.maintenance-page #messages { + width: auto; +} +.maintenance-page #main { + margin: 0; +} +.maintenance-page #content .section { + padding: 0 0 0 10px; +} +.maintenance-page #header { + background-color: #fff; + background-image: none; +} +.maintenance-page #name-and-slogan { + margin-bottom: 50px; + margin-left: 0; + padding-top: 20px; + font-size: 90%; +} +.maintenance-page #name-and-slogan, +.maintenance-page #name-and-slogan a, +.maintenance-page #name-and-slogan a:hover, +.maintenance-page #name-and-slogan a:focus { + color: #777; +} +.maintenance-page h1#page-title { + line-height: 1em; + margin-top: 0; +} +.maintenance-page #messages { + padding: 0; + margin-top: 30px; +} +.maintenance-page #messages div.messages { + margin: 0; +} +@media all and (min-width: 800px) { + .maintenance-page #page-wrapper { + width: 800px; + } + .maintenance-page #header div.section, + .maintenance-page #main { + width: 700px; + } + .maintenance-page #messages div.section { + padding: 0; + width: auto; + } +} +@media all and (min-width: 600px) { /* @TODO find the proper breakpoint */ + .maintenance-page #page { + margin: 20px 40px 40px; + } +} diff --git a/drupalcat/themes/drupalcat/css/print.css b/drupalcat/themes/drupalcat/css/print.css new file mode 100644 index 0000000..fbe386a --- /dev/null +++ b/drupalcat/themes/drupalcat/css/print.css @@ -0,0 +1,46 @@ + +/* ---------- General Layout ---------- */ + +body, +input, +textarea, +select { + color: #000; + background: none; +} +body.two-sidebars, +body.sidebar-first, +body.sidebar-second, +body { + width: 640px; +} +#sidebar-first, +#sidebar-second, +.navigation, +#toolbar, +#footer-wrapper, +.tabs, +.add-or-remove-shortcuts { + display: none; +} +.one-sidebar #content, +.two-sidebars #content { + width: 100%; +} +#triptych-wrapper { + width: 960px; + margin: 0; + padding: 0; + border: none; +} +#triptych-first, #triptych-middle, #triptych-last { + width: 250px; +} + +/* ---------- Node Pages ---------- */ + +#comments .title, +#comments form, +.comment-forbidden { + display: none; +} diff --git a/drupalcat/themes/drupalcat/css/style.css b/drupalcat/themes/drupalcat/css/style.css new file mode 100644 index 0000000..c55134d --- /dev/null +++ b/drupalcat/themes/drupalcat/css/style.css @@ -0,0 +1,2186 @@ +/* ---------- Overall Specifications ---------- */ + +body { + line-height: 1.5; + font-size: 87.5%; + word-wrap: break-word; + margin: 0; + padding: 0; + border: 0; +} +a { + text-decoration: none; + border-bottom: 1px dotted; +} +a:hover, +a:active, +a:focus, +.link:hover, +.link:active, +.link:focus { + text-decoration: none; + border-bottom-style: solid; +} +.field-type-image a, +h1 a, +h2 a, +[role*=banner] a, +.feed-icon, +.contextual-links a, +.toolbar a { + border-bottom: none !important; +} +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 1.0em 0 0.5em; + font-weight: inherit; +} +h1 { + font-size: 1.357em; + color: #000; +} +h2 { + font-size: 1.143em; +} +h3 { + font-size: 1.092em; +} +h4 { + font-size: 1.05em; +} +h5 { + font-size: 0.889em; + text-transform: uppercase; + letter-spacing: 0.1em; +} +h6 { + font-size: 0.67em; + text-transform: uppercase; + letter-spacing: 0.1em; +} +p { + margin: 0 0 1.2em; +} +del { + text-decoration: line-through; +} + +/** + * The generic monospace font family is listed before Courier new to avoid a + * a bug in font-size rendering: + * http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing + */ +code, +pre, +kbd, +samp, +var { + padding: 0 0.4em; + font-size: 0.857em; + font-family: Menlo, Consolas, "Andale Mono", "Lucida Console", "Nimbus Mono L", "DejaVu Sans Mono", monospace, "Courier New"; +} +code { + background-color: #f2f2f2; + background-color: rgba(40, 40, 0, 0.06); +} +pre code, +pre kbd, +pre samp, +pre var, +kbd kbd, +kbd samp, +code var { + font-size: 100%; + background-color: transparent; +} +pre code, +pre samp, +pre var { + padding: 0; +} +.description code { + font-size: 1em; +} +kbd { + background-color: #f2f2f2; + border: 1px outset #575757; + margin: 0 3px; + color: #666; + display: inline-block; + padding: 0 6px; + border-radius: 5px; +} +pre { + background-color: #f2f2f2; + background-color: rgba(40, 40, 0, 0.06); + margin: 10px 0; + overflow: hidden; + padding: 15px; + white-space: pre-wrap; +} + + +/* ------------------ Fonts ------------------ */ + +body, +#site-slogan, +.site-slogan, +#page .ui-widget, +.comment-form label, +.node-form label, +.node-form .description { + font-family: Georgia, "Times New Roman", Times, serif; +} +#header, +#footer-wrapper, +.skip-link, +ul.contextual-links, +ul.links, +ul.primary, +.pager__items, +div.field-type-taxonomy-term-reference, +div.messages, +.node__meta, +p.comment-time, +table, +.breadcrumb, +.link { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +} +input, +textarea, +select, +.form-button, +a.button, +button { + font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; +} + +/* ------------------ Reset Styles ------------------ */ + +blockquote { + background: #f7f7f7; + border-left: 1px solid #bbb; + font-style: italic; + margin: 1.5em 10px; + padding: 0.5em 10px; +} +[dir="rtl"] blockquote { + border-left: none; + border-right: 4px solid #afafaf; +} +blockquote:before { + color: #bbb; + content: "\201C"; + font-size: 3em; + line-height: 0.1em; + margin-right: 0.2em; + vertical-align: -.4em; +} +[dir="rtl"] blockquote:before { + content: "\201D"; +} +blockquote:after { + color: #bbb; + content: "\201D"; + font-size: 3em; + line-height: 0.1em; + vertical-align: -.45em; +} +[dir="rtl"] blockquote:after { + content: "\201C"; +} +blockquote > p:first-child { + display: inline; +} +a.feed-icon { + display: inline-block; + padding: 15px 0 0 0; +} +img { + max-width: 100%; + height: auto; + border: 0; +} + +/* ------------------ Table Styles ------------------ */ + +table { + border: 0; + border-spacing: 0; + font-size: 0.857em; + margin: 10px 0; + width: 100%; +} +table table { + font-size: 1em; +} +#footer-wrapper table { + font-size: 1em; +} +tr { + border-bottom: 1px solid #ccc; + padding: 0.1em 0.6em; + background: #efefef; + background: rgba(0, 0, 0, 0.063); +} +thead > tr { + border-bottom: 1px solid #000; +} +tr.odd { + background: #e4e4e4; + background: rgba(0, 0, 0, 0.105); +} +table tr th { + background: #757575; + background: rgba(0, 0, 0, 0.51); + border-bottom-style: none; +} +table tr th, +table tr th a, +table tr th a:hover, +table tr th a:focus { + color: #fff; + font-weight: bold; +} +table tbody tr th { + vertical-align: top; +} +tr td, +tr th { + padding: 4px 9px; + border: 1px solid #fff; + text-align: left; /* LTR */ +} +[dir="rtl"] tr td, +[dir="rtl"] tr th { + text-align: right; +} +#footer-wrapper tr td, +#footer-wrapper tr th { + border-color: #555; + border-color: rgba(255, 255, 255, 0.18); +} +table ul.links { + margin: 0; + padding: 0; + font-size: 1em; +} +table ul.links li { + padding: 0 1em 0 0; +} + +/* ------------------ List Styles ------------------ */ + +.block ol, +.block ul { + margin: 0; + padding: 0 0 0.25em 1em; /* LTR */ +} +[dir="rtl"] .block ol, +[dir="rtl"] .block ul { + padding: 0 1em 0.25em 0; +} +.contextual-region .contextual .contextual-links a { + font-size: 0.923em; + text-shadow: 0 0 0 !important; +} +.pager .pager__items { + padding: 0; +} +.pager__item { + font-size: 0.929em; + padding: 10px 15px; +} +.pager__item a { + display: inline-block; +} +.pager__item.is-active a { + color: #3B3B3B; + border-bottom: 0; +} +.pager__item--first, +.pager__item--previous { + padding: 10px 10px 10px 0; +} +.pager__item--ellipsis { + padding: 10px 0; +} +.pager__item--last, +.pager__item--next { + padding: 10px 0 10px 10px; +} +ul.menu li { + margin: 0; +} +.region-content ul, +.region-content ol { + margin: 1em 0; + padding: 0 0 0.25em 15px; /* LTR */ +} +[dir="rtl"] .region-content ul, +[dir="rtl"] .region-content ol { + padding: 0 15px 0.25em 0; +} +.item-list ul li { + margin: 0; + padding: 0.2em 0.5em 0 0; /* LTR */ +} +[dir="rtl"] .item-list ul li { + padding: 0.2em 0 0 0.5em; +} +ul.tips { + padding: 0 0 0 1.25em; /* LTR */ +} +[dir="rtl"] ul.tips { + padding: 0 1.25em 0 0; +} + +/* ------------------ Header ------------------ */ +.skip-link, +.skip-link.visually-hidden.focusable { + left: 50%; + margin-left: -5.25em; + margin-top: 0; + position: absolute !important; + width: auto; + z-index: 50; +} +.skip-link, +.skip-link:link, +.skip-link:visited { + background: #444; + background: rgba(0, 0, 0, 0.6); + color: #fff; + display: inline-block; + font-size: 0.94em; + line-height: 1.7; + padding: 1px 10px 2px 10px; + text-decoration: none; + border-radius: 0 0 10px 10px; +} +.skip-link:hover, +.skip-link:active, +.skip-link:focus { + outline: 0; +} +#logo, +.site-logo { + float: left; /* LTR */ + padding-left: 5px; /* LTR */ +} +[dir="rtl"] #logo, +[dir="rtl"] .site-logo { + padding: 15px 10px 15px 15px; +} + +#name-and-slogan, +.site-branding-text { + float: left; /* LTR */ + margin: 0; + padding: 5px 10px 8px; +} +[dir="rtl"] #name-and-slogan, +[dir="rtl"] .site-branding-text { + margin: 0 15px 30px 0; +} + +#site-name, +.site-name { + font-size: 1.6em; + color: #686868; + line-height: 1; +} +h1#site-name, +h1.site-name { + margin: 0; +} +#site-name a, +.site-name a { + font-weight: normal; +} +#site-slogan, +.site-slogan { + font-size: 0.929em; + margin-top: 7px; + word-spacing: 0.1em; + font-style: italic; +} +/* Region header blocks. */ +.region-header .block { + font-size: 0.857em; + float: left; /* LTR */ + margin: 0 10px; + padding: 0; +} +.region-header .block > h2 { + /* @extend .visually-hidden */ + position: absolute !important; + clip: rect(1px, 1px, 1px, 1px); + overflow: hidden; + height: 1px; +} +.region-header .block .content { + margin: 0; + padding: 0; +} +.region-header .block ul { + margin: 0; + padding: 0; +} +.region-header .block li { + list-style: none; + list-style-image: none; + padding: 0; +} +.region-header .form-text { + background: #fefefe; + background: rgba(255, 255, 255, 0.7); + border-color: #ccc; + border-color: rgba(255, 255, 255, 0.3); + margin-right: 2px; /* LTR */ + width: 120px; +} +[dir="rtl"] .region-header .form-text { + margin-left: 2px; + margin-right: 0; +} +.region-header .form-text:hover, +.region-header .form-text:active, +.region-header .form-text:focus { + background: #fff; + background: rgba(255, 255, 255, 0.8); +} +.region-header .form-required:after { + background-image: url(../images/required.svg); +} +/* Region header block menus. */ +.region-header .block-menu { + border: 1px solid; + border-color: #eee; + border-color: rgba(255, 255, 255, 0.2); + padding: 0; + width: 208px; +} +.region-header .block-menu li a { + display: block; + border-bottom: 1px solid; + border-bottom-color: #eee; + border-bottom-color: rgba(255, 255, 255, 0.2); + padding: 3px 7px; +} +.region-header .block-menu li a:hover, +.region-header .block-menu li a:active, +.region-header .block-menu li a:focus { + text-decoration: none; + background: rgba(255, 255, 255, 0.15); +} +.region-header .block-menu li:last-child a { + border-bottom: 0; +} +/* User Login block in the header region */ +.region-header #block-user-login { + width: auto; +} +.region-header #block-user-login .content { + margin-top: 2px; +} +.region-header #block-user-login .form-item { + float: left; /* LTR */ + margin: 0; + padding: 0; +} +.region-header #block-user-login div.item-list, +.region-header #block-user-login div.description { + font-size: 0.916em; + margin: 0; +} +.region-header #block-user-login div.item-list { + clear: both; +} +.region-header #block-user-login div.description { + display: inline; +} +.region-header #block-user-login .item-list ul { + padding: 0; + line-height: 1; +} +.region-header #block-user-login .item-list li { + list-style: none; + float: left; /* LTR */ + padding: 3px 0 1px; +} +.region-header #block-user-login .item-list li:last-child { + padding-left: 0.5em; /* LTR */ +} +[dir="rtl"] .region-header #block-user-login .item-list li:last-child { + padding-left: 0; + padding-right: 0.5em; +} +.region-header #block-user-login .form-actions { + margin: 4px 0 0; + padding: 0; + clear: both; +} +.region-header #block-user-login input.form-submit { + border: 1px solid; + border-color: #ccc; + border-color: rgba(255, 255, 255, 0.5); + background: #eee; + background: rgba(255, 255, 255, 0.7); + margin: 4px 0; + padding: 3px 8px; +} +.region-header #block-user-login input.form-submit:hover, +.region-header #block-user-login input.form-submit:focus { + background: #fff; + background: rgba(255, 255, 255, 0.9); +} +/* Search block in region header. */ +.region-header #block-search-form { + width: 208px; +} +.region-header #block-search-form .form-text { + width: 154px; +} +/* Language switcher block in region header. */ +.region-header .block-locale ul li { + display: inline; + padding: 0 0.5em; +} + +[dir="rtl"] #logo, +[dir="rtl"] .site-logo, +[dir="rtl"] #name-and-slogan, +[dir="rtl"] .site-branding-text, +[dir="rtl"] .region-header .block, +[dir="rtl"] .region-header #block-user-login .form-item, +[dir="rtl"] .region-header #block-user-login .item-list li { + float: right; +} + +/* --------------- Primary Menu ------------ */ +.region-primary-menu { + clear: both; +} +.region-primary-menu .menu { + font-size: 0.929em; + margin: 0 5px; + padding: 0; + text-align: left; /* LTR */ +} +[dir="rtl"] .region-primary-menu .menu { + text-align: right; +} +.region-primary-menu .menu li { + float: none; + list-style: none; + margin: 0; + padding: 0; + height: auto; + width: 100%; +} +.region-primary-menu .menu a { + color: #333; + background: #ccc; + background: rgba(255, 255, 255, 0.7); + float: none; + display: block; + text-decoration: none; + text-shadow: 0 1px #eee; + border-radius: 8px; + margin: 4px 0; + padding: 0.9em 0 0.9em 10px; /* LTR */ +} +[dir="rtl"] .region-primary-menu .menu a { + padding: 0.9em 10px 0.9em 0; +} +.region-primary-menu .menu a:hover, +.region-primary-menu .menu a:focus { + background: #f6f6f2; + background: rgba(255, 255, 255, 0.95); +} +.region-primary-menu .menu a:active { + background: #b3b3b3; + background: rgba(255, 255, 255, 1); +} +.region-primary-menu .menu li a.active { + border-bottom: none; +} + +/* ---------- Primary Menu Toggle ----------- */ +/* Hide the toggle by default. */ +.menu-toggle, +.menu-toggle-target { + display: none; +} +/* Unhide it for the primary menu. */ +.region-primary-menu .menu-toggle-target { + display: inherit; + position: fixed; + top: 0; +} +.region-primary-menu .menu-toggle { + display: none; +} +body:not(:target) .region-primary-menu .menu-toggle { + color: #333; + background: #ccc; + background: rgba(255, 255, 255, 0.7); + float: none; + font-size: 0.929em; + display: block; + text-decoration: none; + text-shadow: 0 1px #eee; + padding: 0.9em 10px 0.9em 10px; + z-index: 1000; +} +body:not(:target) .region-primary-menu .menu-toggle:after { + content:""; + background: url(../../../misc/icons/ffffff/hamburger.svg) no-repeat; + background-size: contain; + width: 22px; + height: 22px; + display: inline-block; + position: absolute; + right: 10px; /* LTR */ +} +body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu-toggle, +body:not(:target) .region-primary-menu .menu-toggle--hide { + display: none; +} +body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu-toggle--hide { + display: block; +} + +body:not(:target) .region-primary-menu .menu li { + height: 0; + overflow: hidden; +} +body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu li { + height: auto; + overflow: visible; +} + +/* --------------- Secondary Menu ------------ */ + +.region-secondary-menu .menu { + text-align: right; /* LTR */ + font-size: 0.929em; + margin: 0 10px; + padding: 0; +} +[dir="rtl"] .region-secondary-menu .menu { + text-align: left; +} +.region-secondary-menu .menu li { + margin: 0; + padding: 0; + display: inline; +} +.region-secondary-menu .menu a { + display: inline-block; + padding: 0.8em; +} +.region-secondary-menu .menu a:hover, +.region-secondary-menu .menu a:focus { + text-decoration: underline; +} + +/* ------------------- Main ------------------- */ + +#main { + margin-top: 20px; + margin-bottom: 40px; +} + +/* ----------------- Featured ----------------- */ + +#featured { + text-align: center; + font-size: 1.2em; + font-weight: normal; + line-height: 1.4; + padding: 20px 10px 45px; + margin: 0; + background: #f0f0f0; + background: rgba(30, 50, 10, 0.08); + border-bottom: 1px solid #e7e7e7; + text-shadow: 1px 1px #fff; +} +#featured h2 { + font-size: 1.2em; + line-height: 1; +} +#featured p { + margin: 0; + padding: 0; +} + +/* --------------- Highlighted ---------------- */ + +#highlighted { + border-bottom: 1px solid #d3d7d9; + font-size: 120%; +} + +/* ------------------- Help ------------------- */ + +.region-help { + border: 1px solid #d3d7d9; + padding: 0 1.5em; + margin-bottom: 30px; +} + +/* ----------------- Content ------------------ */ + +.content, +.node__content { + margin-top: 10px; +} +h1#page-title { + font-size: 2em; + line-height: 1; +} +#content h2 { + margin-bottom: 2px; + font-size: 1.429em; + line-height: 1.4; +} +.node__content { + font-size: 1.071em; +} +.node--view-mode-teaser .node__content { + font-size: 1em; +} +.node--view-mode-teaser h2 { + margin-top: 0; + padding-top: 0.5em; +} +.node--view-mode-teaser h2 a { + color: #181818; +} +.node--view-mode-teaser { + border-bottom: 1px solid #d3d7d9; + margin-bottom: 30px; + padding-bottom: 15px; +} +.node--view-mode-teaser.node--sticky { + background: #f9f9f9; + background: rgba(0, 0, 0, 0.024); + border: 1px solid #d3d7d9; + padding: 0 15px 15px; +} +.node--view-mode-teaser .node__content { + clear: none; + line-height: 1.6; +} +.node__meta { + font-size: 0.857em; + color: #68696b; + margin-bottom: -5px; +} +.node__meta .field-name-field-user-picture img { + float: left; /* LTR */ + margin: 1px 20px 0 0; /* LTR */ +} +[dir="rtl"] .node__meta .field-name-field-user-picture img { + float: right; + margin-left: 20px; + margin-right: 0; +} +.field-type-taxonomy-term-reference { + margin: 0 0 1.2em; +} +.field-type-taxonomy-term-reference .field-label { + font-weight: normal; + margin: 0; + padding-right: 5px; /* LTR */ +} +[dir="rtl"] .field-type-taxonomy-term-reference .field-label { + padding-left: 5px; + padding-right: 0; +} +.field-type-taxonomy-term-reference .field-label, +.field-type-taxonomy-term-reference ul.links { + font-size: 0.8em; +} +.node--view-mode-teaser .field-type-taxonomy-term-reference .field-label, +.node--view-mode-teaser .field-type-taxonomy-term-reference ul.links { + font-size: 0.821em; +} +.field-type-taxonomy-term-reference ul.links { + padding: 0; + margin: 0; + list-style: none; +} +.field-type-taxonomy-term-reference ul.links li { + float: left; /* LTR */ + padding: 0 1em 0 0; /* LTR */ + white-space: nowrap; +} +[dir="rtl"] .field-type-taxonomy-term-reference ul.links li { + padding: 0 0 0 1em; + float: right; +} +.node__links { + text-align: right; +} +[dir="rtl"] .node__links { + text-align: left; + margin-right: 236px; + margin-left: 0; +} +.field-type-image img, +.field-name-field-user-picture img { + margin: 0 0 1em; +} +ul.links { + color: #68696b; + font-size: 0.821em; +} +.node--unpublished, +.unpublished { + padding: 20px 15px 0; +} +.node--unpublished .comment-text .comment-arrow, +.unpublished .comment-text .comment-arrow { + border-left: 1px solid #fff4f4; + border-right: 1px solid #fff4f4; +} +.node-preview-container { + background: #d1e8f5; + background-image: -webkit-linear-gradient(top, #d1e8f5, #d3e8f4); + background-image: linear-gradient(to bottom, #d1e8f5, #d3e8f4); + font-family: Arial, sans-serif; + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.3333); + position: fixed; + z-index: 499; + width: 100%; + padding: 10px; +} +.node-preview-backlink { + background-color: #419ff1; + background: url(../../../misc/icons/000000/chevron-left.svg) left no-repeat, -webkit-linear-gradient(top, #419ff1, #1076d5); + background: url(../../../misc/icons/000000/chevron-left.svg) left no-repeat, linear-gradient(to bottom, #419ff1, #1076d5); /* LTR */ + border: 1px solid #0048c8; + border-radius: .4em; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); + color: #fff; + font-size: 0.9em; + line-height: normal; + margin: 0; + padding: 4px 1em 4px 0.6em; /* LTR */ + text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); +} +[dir="rtl"] .node-preview-backlink { + background: url(../../../misc/icons/000000/chevron-right.svg) right no-repeat, -webkit-linear-gradient(top, #419ff1, #1076d5); + background: url(../../../misc/icons/000000/chevron-right.svg) right no-repeat, linear-gradient(to bottom, #419ff1, #1076d5); + padding: 4px 0.6em 4px 1em; + float: right; +} +.node-preview-backlink:focus, +.node-preview-backlink:hover { + background-color: #419cf1; + background: url(../../../misc/icons/000000/chevron-left.svg) left no-repeat, -webkit-linear-gradient(top, #59abf3, #2a90ef); + background: url(../../../misc/icons/000000/chevron-left.svg) left no-repeat, linear-gradient(to bottom, #59abf3, #2a90ef); /* LTR */ + border: 1px solid #0048c8; + text-decoration: none; + color: #fff; +} +[dir="rtl"] .node-preview-backlink:focus, +[dir="rtl"] .node-preview-backlink:hover { + background: url(../../../misc/icons/000000/chevron-right.svg) right no-repeat, -webkit-linear-gradient(top, #59abf3, #2a90ef); + background: url(../../../misc/icons/000000/chevron-right.svg) right no-repeat, linear-gradient(to bottom, #59abf3, #2a90ef); +} +.node-preview-backlink:active { + background-color: #0e69be; + background: url(../../../misc/icons/000000/chevron-left.svg) left no-repeat, -webkit-linear-gradient(top, #0e69be, #2a93ef); + background: url(../../../misc/icons/000000/chevron-left.svg) left no-repeat, linear-gradient(to bottom, #0e69be, #2a93ef); /* LTR */ + border: 1px solid #0048c8; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); +} +.node-preview-backlink:active { + background: url(../../../misc/icons/000000/chevron-right.svg) right no-repeat, -webkit-linear-gradient(top, #0e69be, #2a93ef); + background: url(../../../misc/icons/000000/chevron-right.svg) right no-repeat, linear-gradient(to bottom, #0e69be, #2a93ef); +} +.node-preview-backlink::before { + content: ''; + width: 10px; + display: inline-block; +} + +/* ----------------- Comments ----------------- */ + +.comment h2.title { + margin-bottom: 1em; +} +.comment .field-name-field-user-picture img { + margin-left: 0; /* LTR */ +} +[dir="rtl"] .comment .field-name-field-user-picture img { + margin-right: 0; +} +.comment { + margin-bottom: 20px; + display: table; + vertical-align: top; +} +.comment .attribution { + display: table-cell; + padding: 0 30px 0 0; /* LTR */ + vertical-align: top; + overflow: hidden; +} +[dir="rtl"] .comment .attribution { + float: right; + padding: 0 0 0 30px; +} +.comment .attribution img { + margin: 0; + border: 1px solid #d3d7d9; +} +.comment .attribution .username { + white-space: nowrap; +} +.comment .submitted p { + margin: 4px 0; + font-size: 1.071em; + line-height: 1.2; +} +.comment .submitted .comment-time { + font-size: 0.786em; + color: #68696b; +} +.comment .submitted .comment-permalink { + font-size: 0.786em; +} +.comment .content { + font-size: 0.929em; + line-height: 1.6; +} +.comment .comment-arrow { + background: url(../images/comment-arrow.gif) no-repeat 0 center transparent; /* LTR */ + border-left: 1px solid; + border-right: 1px solid; + height: 40px; + margin-left: -47px; /* LTR */ + margin-top: 10px; + position: absolute; + width: 20px; +} +[dir="rtl"] .comment .comment-arrow { + background-image: url(../images/comment-arrow-rtl.gif); + margin-left: 0; + margin-right: -47px; +} +.comment .comment-text { + padding: 10px 25px; + border: 1px solid #d3d7d9; + display: table-cell; + vertical-align: top; + position: relative; + width: 100%; +} +.comment .indented { + margin-left: 40px; /* LTR */ +} +[dir="rtl"] .comment .indented { + margin-right: 40px; + margin-left: 0; +} +.comment ul.links { + padding: 0 0 0.25em 0; +} +.comment ul.links li { + padding: 0 0.5em 0 0; /* LTR */ +} +[dir="rtl"] .comment ul.links li { + padding: 0 0 0.5em; +} +.comment.unpublished { + margin-right: 5px; /* LTR */ + padding: 5px 2px 5px 5px; /* LTR */ +} +[dir="rtl"] .comment.unpublished { + margin-left: 5px; + margin-right: 0; + padding: 5px 5px 5px 2px; +} +.comment.unpublished .comment-text .comment-arrow { + border-left: 1px solid #fff4f4; + border-right: 1px solid #fff4f4; +} + +.comment-footer { + display: table-row; +} + +/* ------------------ Sidebar ----------------- */ +.sidebar .section { + padding-top: 10px; +} +.sidebar .block { + border: 1px solid; + padding: 15px 20px; + margin: 0 0 20px; +} +.sidebar h2 { + margin: 0 0 0.5em; + border-bottom: 1px solid #d6d6d6; + padding-bottom: 5px; + text-shadow: 0 1px 0 #fff; + font-size: 1.071em; + line-height: 1.2; +} +.sidebar .block .content { + font-size: 0.914em; + line-height: 1.4; +} +.sidebar tbody { + border: none; +} +.sidebar tr.even, +.sidebar tr.odd { + background: none; + border-bottom: 1px solid #d6d6d6; +} + +/* ----------------- Triptych ----------------- */ + +#triptych-wrapper { + background-color: #f0f0f0; + background: rgba(30, 50, 10, 0.08); + border-top: 1px solid #e7e7e7; +} +#triptych h2 { + color: #000; + font-size: 1.4em; + margin-bottom: 0.6em; + text-shadow: 0 1px 0 #fff; + text-align: center; + line-height: 1; +} +#triptych .block { + margin-bottom: 1em; + padding-bottom: 1em; + border-bottom: 1px solid #dfdfdf; + line-height: 1.3; +} +#triptych .block:last-child { + border-bottom: none; +} +#triptych .block ul li, +#triptych .block ol li { + list-style: none; +} +#triptych .block ul, +#triptych .block ol { + padding-left: 0; +} +#triptych #block-user-login .form-text { + width: 185px; +} +#triptych #block-user-online p { + margin-bottom: 0; +} +#triptych #block-node-syndicate h2 { + overflow: hidden; + width: 0; + height: 0; +} +#triptych-last #block-node-syndicate { + text-align: right; +} +#triptych #block-search-form .form-type-search input { + width: 185px; +} +#triptych-middle #block-system-powered-by { + text-align: center; +} +#triptych-last #block-system-powered-by { + text-align: right; +} + +/* ------------------ Footer ------------------ */ + +#footer-wrapper .block .content { + color: #c0c0c0; + color: rgba(255, 255, 255, 0.65); + font-size: 0.857em; +} +#footer-wrapper .block .content a { + color: #fcfcfc; + color: rgba(255, 255, 255, 0.8); +} +#footer-wrapper .block .content a:hover, +#footer-wrapper .block .content a:focus { + color: #fefefe; + color: rgba(255, 255, 255, 0.95); +} +#footer-wrapper .block { + margin: 20px 0; + border: 1px solid #444; + border-color: rgba(255, 255, 255, 0.1); + padding: 10px; +} +#footer-columns .block-menu, +#footer .block { + margin: 0; + padding: 0; + border: none; +} +#footer .block { + margin: 0.5em 0; +} +#footer .block .content { + padding: 0.5em 0; + margin-top: 0; +} +#footer .block > h2 { + /* @extend .visually-hidden */ + position: absolute !important; + clip: rect(1px, 1px, 1px, 1px); + overflow: hidden; + height: 1px; +} +#footer .block h2 { + margin: 0; +} +#footer-columns h2 { + border-bottom: 1px solid #555; + border-color: rgba(255, 255, 255, 0.15); + font-size: 1em; + margin-bottom: 0; + padding-bottom: 3px; + text-transform: uppercase; +} +#footer-columns .content { + margin-top: 0; +} +#footer-columns p { + margin-top: 1em; +} +#footer-columns .content ul { + list-style: none; + padding-left: 0; /* LTR */ + margin-left: 0; +} +[dir="rtl"] #footer-columns .content ul { + padding-right: 0; +} +#footer-columns .content li { + list-style: none; + margin: 0; + padding: 0; +} +#footer-columns .content li a { + display: block; + border-bottom: 1px solid #555; + border-color: rgba(255, 255, 255, 0.15); + line-height: 1.2; + padding: 0.8em 2px 0.8em 20px; /* LTR */ + text-indent: -15px; +} +[dir="rtl"] #footer-columns .content li a { + padding: 0.8em 20px 0.8em 2px; +} +#footer-columns .content li a:hover, +#footer-columns .content li a:focus { + background-color: #1f1f21; + background-color: rgba(255, 255, 255, 0.05); + text-decoration: none; +} +#footer { + letter-spacing: 0.2px; + margin-top: 30px; + border-top: 1px solid #555; + border-color: rgba(255, 255, 255, 0.15); +} +#footer .region { + margin-top: 20px; +} +#footer .block { + clear: both; +} +#footer .menu , +#footer .menu li { + list-style: none; + margin: 0; + padding: 0; +} +#footer .menu li a { + float: left; /* LTR */ + padding: 0 12px; + display: block; + border-right: 1px solid #555; /* LTR */ + border-color: rgba(255, 255, 255, 0.15); +} +[dir="rtl"] #footer .menu li a { + float: right; + border-left: 1px solid #555; + border-color: rgba(255, 255, 255, 0.15); + border-right: none; +} +#footer .menu li:first-child a { + padding-left: 0; /* LTR */ +} +[dir="rtl"] #footer .menu li:first-child a { + padding-right: 0; + padding-left: 12px; +} +#footer .menu li:last-child a { + padding-right: 0; /* LTR */ + border-right: none; /* LTR */ +} +[dir="rtl"] #footer .menu li:last-child a { + padding-left: 0; + padding-right: 12px; + border-left: none; +} +#footer-wrapper tr.odd { + background-color: transparent; +} +#footer-wrapper tr.even { + background-color: #2c2c2c; + background-color: rgba(0, 0, 0, 0.15); +} + +/* --------------- System Tabs --------------- */ + +div.tabs { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + margin-bottom: 20px; +} +.tabs ul.primary li a { + color: #000; + background-color: #ededed; + border-color: #bbb; + border-style: solid solid none solid; + border-width: 1px; + height: 1.8em; + line-height: 1.9; + display: block; + font-size: 0.929em; + padding: 0 10px 3px; + margin: 0; + text-shadow: 0 1px 0 #fff; +} +.tabs ul.primary li.active a { + background-color: #ffffff; + border: 1px solid #bbb; +} +@media screen and (max-width: 37.5em) { /* 600px */ + .tabs ul.primary { + border-bottom: 1px solid #bbb; + } + .tabs ul.primary li { + display: block; + margin: 0; + } + .tabs ul.primary li a { + padding: 5px 10px; + } + .tabs ul.primary li.active a { + border-bottom: none; + } +} +@media screen and (min-width: 37.5em) { /* 600px */ + .tabs ul.primary { + border-collapse: collapse; + height: auto; + line-height: normal; + padding: 0 3px; + margin: 0; + overflow: hidden; + border: none; + background: transparent url(../images/tabs-border.png) repeat-x left bottom; + white-space: nowrap; + } + .tabs ul.primary li { + display: block; + float: left; /* LTR */ + vertical-align: bottom; + margin: 0 5px 0 0; /* LTR */ + } + [dir="rtl"] .tabs ul.primary li { + margin: 0 0 0 5px; + float: right; + zoom: 1; + } + .tabs ul.primary li a { + float: left; /* not LTR */ + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .tabs ul.primary li.active a { + border-bottom: 1px solid #fff; + } +} +.tabs ul.secondary { + border-bottom: none; + margin: 5px; + padding: 0.5em 0; +} +.tabs ul.secondary li { + border-right: 1px solid #ccc; /* LTR */ + display: block; + float: left; /* LTR */ + margin: 0; + padding: 0 1em; +} +[dir="rtl"] .tabs ul.secondary li { + border-left: 1px solid #ccc; + border-right: none; + float: right; +} +.tabs ul.secondary li:last-child { + border-right: none; /* LTR */ +} +[dir="rtl"] .tabs ul.secondary li:last-child { + border-left: none; +} +.tabs ul.secondary li:first-child { + padding-left: 0; /* LTR */ +} +[dir="rtl"] .tabs ul.secondary li:first-child { + padding-right: 0; +} +.tabs ul.secondary li a { + display: inline; + padding: 0.25em 0.5em; + text-decoration: none; +} +.tabs ul.secondary li a.active { + background: #f2f2f2; + border-bottom: none; + border-radius: 5px; +} + +/* ---------------- Messages ----------------- */ + +#messages { + padding: 20px 0 5px; + margin: 0 auto; +} +.featured #messages { + background: #f0f0f0; + background: rgba(30, 50, 10, 0.08); +} +div.messages, +[dir="rtl"] div.messages { + margin: 8px 15px; +} + +/* -------------- Breadcrumbs -------------- */ + +.breadcrumb { + font-size: 0.929em; +} + +/* -------------- User Profile -------------- */ + +.profile .field-name-field-user-picture { + float: none; +} + +/* -------------- Password Field ------------- */ + +.password-field { + margin: 0; +} + +/* ---------------- Buttons ---------------- */ + +.button { + background: #fff url(../images/buttons.png) 0 0 repeat-x; + border: 1px solid #e4e4e4; + border-bottom: 1px solid #b4b4b4; + border-left-color: #d2d2d2; + border-right-color: #d2d2d2; + color: #3a3a3a; + cursor: pointer; + font-size: 0.929em; + font-weight: normal; + text-align: center; + padding: 4px 17px; + border-radius: 15px; +} +.button:hover, +.button:active, +.button:focus { + text-decoration: none; + color: #5a5a5a; + background: #dedede; +} + +/* -------------- Form Elements ------------- */ + +form { + margin: 0; + padding: 0; +} +fieldset { + margin: 1em 0; +} +details, +fieldset, +.filter-wrapper { + border-radius: 4px; +} +.filter-wrapper { + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.filter-help a { + font-size: 0.857em; +} +.filter-wrapper .form-item label { + margin-right: 10px; +} +summary { + background: #dbdbdb; + color: #3b3b3b; + text-shadow: 0 1px 0 #fff; +} +details summary a { + color: #3b3b3b; +} +details summary a:hover, +details summary a:active, +details summary a:focus { + color: #000; +} +details .details-description { + font-style: italic; +} +label { + display: table; + font-weight: bold; +} +label[for] { + cursor: pointer; +} +input { + margin: 2px 0; + padding: 4px; + /* Keep form elements from overflowing their containers. */ + max-width: 100%; + box-sizing: border-box; +} +input, +textarea { + font-size: 0.929em; +} +textarea { + line-height: 1.5; +} +textarea.form-textarea, +select.form-select { + padding: 4px; +} +input.form-text, +input.form-tel, +input.form-email, +input.form-url, +input.form-search, +input.form-number, +input.form-color, +textarea.form-textarea, +select.form-select { + border: 1px solid #ccc; + color: #3b3b3b; +} +input.form-submit:hover, +input.form-submit:focus { + background: #dedede; +} +.password-suggestions ul li { + margin-left: 1.2em; /* LTR */ +} +[dir="rtl"] .password-suggestions ul li { + margin-right: 1.2em; + margin-left: 0; +} +.form-item label { + font-size: 0.929em; +} +.form-type-radio label, +.form-type-checkbox label { + margin-left: 4px; +} +.form-type-radio .description, +.form-type-checkbox .description { + margin-left: 2px; +} +.form-actions { + padding-top: 10px; +} + +/* Node Form */ +#edit-body { + margin-bottom: 2em; +} + +.node-form .form-wrapper { + margin-bottom: 2em; +} + +/* Vertical Tabs Reset */ +ul.vertical-tabs-list { + margin: -1px 0 -1px -15em; + padding: 0; +} + +/* Contact Form */ +.contact-form #edit-name { + width: 75%; + border-radius: 4px; +} +.contact-form #edit-mail { + width: 75%; + border-radius: 4px; +} +.contact-form #edit-subject { + width: 75%; + border-radius: 4px; +} +.contact-form #edit-message { + width: 76.3%; + border-top-left-radius: 4px; + border-top-right-radius: 4px; +} + +/* Disabled form elements */ +.form-disabled input, +.form-disabled select, +.form-disabled textarea, +.form-button-disabled, +.form-button-disabled:hover, +.form-button-disabled:active, +.form-button-disabled:focus + { + background: #ededed; + border-color: #bbb; + color: #717171; +} +.image-button-disabled, +.image-button-disabled:hover, +.image-button-disabled:active, +.image-button-disabled:focus { + -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; + filter: alpha(opacity=50); + opacity: .5; +} +.form-disabled label { + color: #717171; +} + +/* Comment form */ +.comment-form label { + float: left; /* LTR */ + font-size: 0.929em; + width: 120px; +} +[dir="rtl"] .comment-form label { + float: right; +} +.comment-form input, +.comment-form .form-select { + margin: 0; + border-radius: 4px; +} +.comment-form .form-type-textarea label { + float: none; +} +.comment-form .form-item, +.comment-form .form-radios, +.comment-form .form-type-checkbox, +.comment-form .form-select { + margin-bottom: 10px; + overflow: hidden; +} +.comment-form .form-type-checkbox, +.comment-form .form-radios { + margin-left: 120px; /* LTR */ +} +[dir="rtl"] .comment-form .form-type-checkbox, +[dir="rtl"] .comment-form .form-radios, +[dir="rtl"] .comment-form .form-item .description { + margin-left: 0; + margin-right: 120px; +} +.comment-form .form-type-checkbox label, +.comment-form .form-radios label { + float: none; + margin-top: 0; +} +.comment-form input.form-file { + width: auto; +} +.layout-no-sidebars .comment-form .form-text { + width: 800px; +} +.layout-one-sidebar .comment-form .form-text { + width: 500px; +} +.layout-two-sidebars .comment-form .form-text { + width: 320px; +} +.comment-form .form-item .description { + font-size: 0.786em; + line-height: 1.2; + margin-left: 120px; /* LTR */ +} +#content h2.comment-form { + margin-bottom: 0.5em; +} +.comment-form .form-textarea { + border-top-left-radius: 4px; + border-top-right-radius: 4px; +} +.comment-form details.filter-wrapper .details-wrapper, +.comment-form .text-format-wrapper .form-item { + margin-top: 0; + margin-bottom: 0; +} +.filter-wrapper label { + width: auto; + float: none; +} +.filter-wrapper .form-select { + min-width: 120px; +} +.comment-form details.filter-wrapper .tips { + font-size: 0.786em; +} +#comment-body-add-more-wrapper .form-type-textarea label { + margin-bottom: 0.4em; +} +#edit-actions input { + margin-right: 0.6em; /* LTR */ +} +[dir="rtl"] #edit-actions input { + margin-left: 0.6em; + margin-right: 0; +} + +/* -------------- Other Overrides ------------- */ + +div.password-suggestions { + border: 0; +} +#forum .name { + font-size: 1.083em; +} +#forum .description { + font-size: 1em; +} +#header .contextual .trigger, +#footer-wrapper .contextual .trigger { + border: none; +} + +/* ---------- Color Form ----------- */ + +[dir="rtl"] .color-form #palette { + margin-left: 0; + margin-right: 20px; +} +[dir="rtl"] .color-form .form-item label { + float: right; +} +[dir="rtl"] .color-form #palette .lock { + right: -20px; + left: 0; +} + +/* --------------- Search Form ---------------- */ + +#block-search-form { + padding-bottom: 7px; +} +#block-search-form .content { + margin-top: 0; +} +#search-form input[type="search"], +#block-search-form input[type="search"] { + box-sizing: border-box; + padding: 4px; + -webkit-appearance: textfield; +} +#search-form input[type="search"]::-webkit-search-decoration, +#block-search-form input[type="search"]::-webkit-search-decoration { + display: none; +} +#search-form input#edit-keys, +#block-search-form .form-item-search-block-form input { + float: left; /* LTR */ + font-size: 1em; + margin-right: 5px; +} +[dir="rtl"] #search-form input#edit-keys, +[dir="rtl"] #block-search-form .form-item-search-block-form input { + float: right; + margin-left: 5px; + margin-right: 0; +} +#search-block-form input.form-submit, +#search-form input.form-submit { + margin-left: 0; + margin-right: 0; + height: 25px; + width: 34px; + padding: 0; + cursor: pointer; + text-indent: -9999px; + border-color: #e4e4e4 #d2d2d2 #b4b4b4; + background: #f0f0f0 url(../../../misc/icons/505050/loupe.svg) no-repeat center; + overflow: hidden; +} +#search-block-form input.form-submit:hover, +#search-block-form input.form-submit:focus, +#search-form input.form-submit:hover, +#search-form input.form-submit:focus { + background: #dedede url(../../../misc/icons/424242/loupe.svg) no-repeat center; +} +#search-form .form-item-keys label { + display: block; +} + +/* --------------- Search Results ---------------- */ +ol.search-results { + padding-left: 0; + list-style-position: inside; +} +.search-results li { + border-bottom: 1px solid #d3d7d9; + padding-bottom: 0.4285em; + margin-bottom: 0.5em; +} +.search-results li:last-child { + border-bottom: none; + padding-bottom: 0; + margin-bottom: 1em; +} +.search-results .search-snippet-info { + padding-left: 0; +} + +/* -------------- Captions -------------- */ +.caption { + margin-bottom: 1.2em; +} +.caption > * { + background: #F3F3F3; + padding: 0.5ex; + border: 1px solid #CCC; +} +.caption > figcaption { + border: 1px solid #CCC; + border-top: none; + padding-top: 0.5ex; + font-size: small; + text-align: center; +} + +/* Override Bartik's default blockquote and pre styles when captioned. */ +.caption-pre > pre, +.caption-blockquote > blockquote { + margin: 0; +} +.caption-blockquote > figcaption::before { + content: "— "; +} +.caption-blockquote > figcaption { + text-align: left; +} +[dir="rtl"] .caption-blockquote > figcaption { + text-align: right; +} + +/* -------------- Shortcut Links -------------- */ + +.shortcut-wrapper { + margin: 2.2em 0 1.1em 0; /* Same as usual h1#page-title margin. */ +} +.shortcut-wrapper h1#page-title { + float: left; /* LTR */ + margin: 0; +} +[dir="rtl"] .shortcut-wrapper h1#page-title { + float: right; +} +div.add-or-remove-shortcuts { + padding-top: 0.9em; +} + +/* ---------- Admin-specific Theming ---------- */ +.path-admin #content img { + margin-right: 15px; /* LTR */ +} +.path-admin #content .simpletest-image img { + margin: 0; +} +.path-admin #admin-dblog img { + margin: 0 5px; +} + +/* Block demo mode */ +.demo-block { + background: #ffff66; + border: 1px dotted #9f9e00; + color: #000; + font: 90% "Lucida Grande", "Lucida Sans Unicode", sans-serif; + margin: 5px; + padding: 5px; + text-align: center; + text-shadow: none; +} +#featured .demo-block { + font-size: 0.55em; +} +#header .demo-block { + width: 500px; +} + +/* Configuration. */ +div.admin .right, +div.admin .left { + width: 49%; + margin: 0; +} +div.admin-panel { + background: #fbfbfb; + border: 1px solid #ccc; + margin: 10px 0; + padding: 0 5px 5px; +} +div.admin-panel h3 { + margin: 16px 7px; +} +div.admin-panel dt { + border-top: 1px solid #ccc; + padding: 7px 0 0; +} +div.admin-panel dd { + margin: 0 0 10px; +} +div.admin-panel .description { + margin: 0 0 14px 7px; +} + +/* ---------- book ----------- */ +.book-navigation .menu { + border-top: 1px solid #d6d6d6; +} +.book-navigation .book-pager { + border-bottom: 1px solid #d6d6d6; + border-top: 1px solid #d6d6d6; + margin: 0; +} + +/* ---------- Dropbutton ----------- */ +.js .dropbutton-widget { + background-color: white; + border-radius: 5px; +} +.js .dropbutton-widget:hover, +.js .dropbutton-widget:focus { + background-color: #f8f8f8; + border-color: #b8b8b8; +} +.js .dropbutton-multiple.open .dropbutton-widget:hover, +.js .dropbutton-multiple.open .dropbutton-widget:focus { + background-color: white; +} + +/* ----------- media queries ------------------------------- */ + +@media all and (min-width: 461px) and (max-width: 900px) { + /* ------------ Header and Menus -------------------------- */ + + .region-header { + margin: .5em 5px .75em; + } + #logo, + .site-logo { + padding: 5px 0 0 5px; /* LTR */ + } + [dir="rtl"] #logo, + [dir="rtl"] .site-logo { + padding: 5px 5px 0 0; + } + #name-and-slogan, + .site-branding-text { + padding: 10px 10px 8px; + } + .region-primary-menu .menu { + margin: 0 5px; + padding: 0; + text-align: center; + } + .region-primary-menu .menu li, + body:not(:target) .region-primary-menu .menu li { + float: left; /* LTR */ + margin-right: 5px; /* LTR */ + padding: 0; + display: inline-block; + width: 32.75%; + height: auto; + overflow: visible; + } + [dir="rtl"] .region-primary-menu .menu li { + float: right; + margin-left: 5px; + margin-right: 0; + } + .region-primary-menu .menu li:nth-child(3n) { + margin-right: -5px; /* LTR */ + } + [dir="rtl"] .region-primary-menu .menu li:nth-child(3n) { + margin-left: -5px; + margin-right: 0; + } + .region-primary-menu .menu a { + float: none; + display: block; + border-radius: 8px; + margin-bottom: 5px; + padding: 0.9em 5px; + } + body:not(:target) .region-primary-menu .menu-toggle { + display: none; + } +} + +@media all and (min-width: 901px) { + + .region-header { + margin: 1em 5px 1.5em; + } + #logo, + .site-logo { + padding: 15px 15px 15px 10px; /* LTR */ + } + [dir="rtl"] #logo, + [dir="rtl"] .site-logo { + padding: 15px 10px 15px 15px; + } + #name-and-slogan, + .site-branding-text { + padding: 26px 0 0; + margin: 0 0 30px 15px; /* LTR */ + } + [dir="rtl"] #name-and-slogan, + [dir="rtl"] .site-branding-text { + margin: 0 15px 30px 0; + } + #site-name, + .site-name { + font-size: 1.821em; + } + .region-primary-menu .block-menu .menu { + font-size: 0.929em; + margin: 0; + padding: 0 15px; + } + .region-primary-menu .menu li, + body:not(:target) .region-primary-menu .menu li { + float: left; /* LTR */ + list-style: none; + padding: 0 1px; + margin: 0 1px; + width: auto; + height: auto; + overflow: visible; + } + [dir="rtl"] .region-primary-menu .menu li, + [dir="rtl"] body:not(:target) .region-primary-menu .menu li { + float: right; + } + .region-primary-menu .menu a { + float: left; /* LTR */ + padding: 0.7em 0.8em; + margin-bottom: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + [dir="rtl"] .region-primary-menu .menu a { + float: right; + padding: 0.7em 0.8em; + } + .featured .region-primary-menu .menu li a:active, + .featured .region-primary-menu .menu li a.active { + background: #f0f0f0; + background: rgba(240, 240, 240, 1.0); + } + body:not(:target) .region-primary-menu .menu-toggle { + display: none; + } +} + +@media all and (min-width: 520px) { + + /* ----------------- Featured ----------------- */ + #featured { + font-size: 1.643em; + } + #featured h2 { + font-size: 1.174em; + } + + /* ------------------ Triptych ----------------- */ + #triptych h2 { + font-size: 1.714em; + margin-bottom: 0.9em; + } + #triptych .block { + margin-bottom: 2em; + padding-bottom: 2em; + } +} + +/** + * Responsive tables. + */ +@media screen and (max-width: 37.5em) { /* 600px */ + th.priority-low, + td.priority-low, + th.priority-medium, + td.priority-medium { + display: none; + } +} +@media screen and (max-width: 60em) { /* 920px */ + th.priority-low, + td.priority-low { + display: none; + } +} + +/* ---------- Input fields ---------- */ +@media screen and (max-width: 60em) { /* 920px */ + input, + textarea { + font-size: 1.142857143em; + } +} + +/* ---------- Views styling ---------- */ + +/* @group Lists */ + +.views-display-top .secondary .action-list { + padding-left: 0; /* LTR */ +} + +[dir="rtl"] .views-display-top .secondary .action-list { + padding-left: inherit; + padding-right: 0; +} + +/* @end */ + +/* @group Attachment details tabs + * + * The tabs that switch between sections + */ + +.views-displays .region-content .secondary, +.views-displays .region-content .secondary { + padding-bottom: 0; + padding-left: 0; +} + +.views-displays .secondary a { + font-size: smaller; +} + +.views-displays .secondary > li a { + border-radius: 5px; +} + +.views-displays .secondary > li.open a { + border-radius: 5px 5px 0 0; +} + +.views-displays .secondary .open > a:hover, +.views-displays .secondary .open > a:focus { + color: #0071B3; +} + +.views-displays .secondary input.form-submit { + font-size: smaller; +} + +/* @end */ + +/* @group Modal dialog box + * + * The contents of the popup dialog on the views edit form. + */ + +.views-filterable-options .filterable-option:nth-of-type(even) .form-type-checkbox { + background-color: #F9F9F9; +} + +/* @end */ + +.views-display-column .details-wrapper { + margin-top: 0; +} + +.views-display-column details summary { + background: none; + border: none; + font-family: inherit; + font-size: 13px; + line-height: inherit; + position: relative; + text-indent: 0; + text-shadow: none; + top: 3px; +} + +.views-display-columns details { + position: inherit; +} + +.views-display-columns details summary { + padding: 0 0 4px 2px; /* LTR */ +} +[dir="rtl"] .views-display-columns details summary { + padding: 0 2px 4px 0; +} + +.views-display-columns a.fieldset-title { + color: #0071B3; +} + +.views-display-columns a.fieldset-title:hover, +.views-display-columns a.fieldset-title:focus { + color: #018FE2; +} + +/* @group Dropbutton */ + +.views-ui-display-tab-actions .dropbutton input { + color: #0071B3; +} + +.views-ui-display-tab-actions .dropbutton input:hover, +.views-ui-display-tab-actions .dropbutton input:focus { + color: #018FE2; +} + +.views-ui-display-tab-actions .dropbutton input.form-submit { + margin-right: 0; + margin-top: 0; +} + +/* @end */ diff --git a/drupalcat/themes/drupalcat/drupalcat.breakpoints.yml b/drupalcat/themes/drupalcat/drupalcat.breakpoints.yml new file mode 100644 index 0000000..17b9fc8 --- /dev/null +++ b/drupalcat/themes/drupalcat/drupalcat.breakpoints.yml @@ -0,0 +1,18 @@ +bartik.mobile: + label: mobile + mediaQuery: '(min-width: 0px)' + weight: 0 + multipliers: + - 1x +bartik.narrow: + label: narrow + mediaQuery: 'all and (min-width: 560px) and (max-width: 850px)' + weight: 1 + multipliers: + - 1x +bartik.wide: + label: wide + mediaQuery: 'all and (min-width: 851px)' + weight: 2 + multipliers: + - 1x diff --git a/drupalcat/themes/drupalcat/drupalcat.info.yml b/drupalcat/themes/drupalcat/drupalcat.info.yml new file mode 100644 index 0000000..fb2ba47 --- /dev/null +++ b/drupalcat/themes/drupalcat/drupalcat.info.yml @@ -0,0 +1,34 @@ +name: Drupal.cat theme +type: theme +base theme: classy +description: 'Theme of Drupal.cat based on Bartik theme' +package: Core +version: VERSION +core: 8.x +libraries: + - drupalcat/base +ckeditor_stylesheets: + - css/ckeditor-iframe.css +regions: + header: Header + primary_menu: 'Primary menu' + secondary_menu: 'Secondary menu' + help: Help + page_top: 'Page top' + page_bottom: 'Page bottom' + highlighted: Highlighted + featured: Featured + content: Content + sidebar_first: 'Sidebar first' + sidebar_second: 'Sidebar second' + triptych_first: 'Triptych first' + triptych_middle: 'Triptych middle' + triptych_last: 'Triptych last' + footer_firstcolumn: 'Footer first column' + footer_secondcolumn: 'Footer second column' + footer_thirdcolumn: 'Footer third column' + footer_fourthcolumn: 'Footer fourth column' + footer: Footer + +settings: + shortcut_module_link: false diff --git a/drupalcat/themes/drupalcat/drupalcat.libraries.yml b/drupalcat/themes/drupalcat/drupalcat.libraries.yml new file mode 100644 index 0000000..410c21c --- /dev/null +++ b/drupalcat/themes/drupalcat/drupalcat.libraries.yml @@ -0,0 +1,16 @@ +base: + version: VERSION + css: + theme: + css/layout.css: {} + css/style.css: {} + css/colors.css: {} + css/print.css: { media: print } + +maintenance_page: + version: VERSION + css: + theme: + css/maintenance-page.css: {} + dependencies: + - system/maintenance diff --git a/drupalcat/themes/drupalcat/drupalcat.theme b/drupalcat/themes/drupalcat/drupalcat.theme new file mode 100644 index 0000000..2ef5c1e --- /dev/null +++ b/drupalcat/themes/drupalcat/drupalcat.theme @@ -0,0 +1,163 @@ +getBodyAttributes(); + $classes = $attributes['class']; + if (!empty($variables['page']['sidebar_first']) && !empty($variables['page']['sidebar_second'])) { + $classes[] = 'layout-two-sidebars'; + } + elseif (!empty($variables['page']['sidebar_first'])) { + $classes[] = 'layout-one-sidebar'; + $classes[] = 'layout-sidebar-first'; + } + elseif (!empty($variables['page']['sidebar_second'])) { + $classes[] = 'layout-one-sidebar'; + $classes[] = 'layout-sidebar-second'; + } + else { + $classes[] = 'layout-no-sidebars'; + } + + if (!empty($variables['page']['featured'])) { + $classes[] = 'featured'; + } + + if (!empty($variables['page']['triptych_first']) + || !empty($variables['page']['triptych_middle']) + || !empty($variables['page']['triptych_last'])) { + $classes[] = 'triptych'; + } + + if (!empty($variables['page']['footer_firstcolumn']) + || !empty($variables['page']['footer_secondcolumn']) + || !empty($variables['page']['footer_thirdcolumn']) + || !empty($variables['page']['footer_fourthcolumn'])) { + $classes[] = 'footer-columns'; + } + + // Store back the classes to the htmlpage object. + $attributes['class'] = $classes; + + // Set the options that apply to both page and maintenance page. + _drupalcat_process_page($variables); + + // Since the title and the shortcut link are both block level elements, + // positioning them next to each other is much simpler with a wrapper div. + if (!empty($variables['title_suffix']['add_or_remove_shortcut']) && $variables['title']) { + // Add a wrapper div using the title_prefix and title_suffix render + // elements. + $variables['title_prefix']['shortcut_wrapper'] = array( + '#markup' => '
', + '#weight' => 100, + ); + $variables['title_suffix']['shortcut_wrapper'] = array( + '#markup' => '
', + '#weight' => -99, + ); + // Make sure the shortcut link is the first item in title_suffix. + $variables['title_suffix']['add_or_remove_shortcut']['#weight'] = -100; + } +} + +/** + * Implements hook_preprocess_HOOK() for maintenance-page.html.twig. + */ +function drupalcat_preprocess_maintenance_page(&$variables) { + // By default, site_name is set to Drupal if no db connection is available + // or during site installation. Setting site_name to an empty string makes + // the site and update pages look cleaner. + // @see template_preprocess_maintenance_page + if (!$variables['db_is_active']) { + $variables['site_name'] = ''; + } + + // Bartik has custom styling for the maintenance page. + $variables['#attached']['library'][] = 'bartik/maintenance_page'; + + // Set the options that apply to both page and maintenance page. + _drupalcat_process_page($variables); +} + +/** + * Implements hook_preprocess_HOOK() for node.html.twig. + */ +function drupalcat_preprocess_node(&$variables) { + // Remove the "Add new comment" link on teasers or when the comment form is + // displayed on the page. + if ($variables['teaser'] || !empty($variables['content']['comments']['comment_form'])) { + unset($variables['content']['links']['comment']['#links']['comment-add']); + } +} + +/** + * Implements hook_preprocess_HOOK() for block.html.twig. + */ +function drupalcat_preprocess_block(&$variables) { + // Add a clearfix class to system branding blocks. + if ($variables['plugin_id'] == 'system_branding_block') { + $variables['attributes']['class'][] = 'clearfix'; + } + // Add a container-inline class to keep consistent visual styles + if ($variables['plugin_id'] == 'search_form_block') { + $variables['content_attributes']['class'][] = 'container-inline'; + } +} + +/** + * Implements hook_preprocess_HOOK() for menu.html.twig. + */ +function drupalcat_preprocess_menu(&$variables) { + $variables['attributes']['class'][] = 'clearfix'; +} + +/** + * Implements hook_preprocess_HOOK() for field.html.twig. + * + * @see template_preprocess_field() + */ +function drupalcat_preprocess_field(&$variables) { + $element = $variables['element']; + if ($element['#field_type'] == 'taxonomy_term_reference') { + $variables['title_attributes']['class'][] = 'field-label'; + if ($variables['element']['#label_display'] == 'inline') { + $variables['title_attributes']['class'][] = 'inline'; + } + } +} + +/** + * Helper function for handling the site name and slogan. + */ +function _drupalcat_process_page(&$variables) { + $site_config = \Drupal::config('system.site'); + // Always print the site name and slogan, but if they are toggled off, we'll + // just hide them visually. + $variables['hide_site_name'] = theme_get_setting('features.name') ? FALSE : TRUE; + $variables['hide_site_slogan'] = theme_get_setting('features.slogan') ? FALSE : TRUE; + if ($variables['hide_site_name']) { + // If toggle_name is FALSE, the site_name will be empty, so we rebuild it. + $variables['site_name'] = String::checkPlain($site_config->get('name')); + } + if ($variables['hide_site_slogan']) { + // If toggle_site_slogan is FALSE, the site_slogan will be empty, so we + // rebuild it. + $variables['site_slogan'] = Xss::filterAdmin($site_config->get('slogan')); + } +} diff --git a/drupalcat/themes/drupalcat/images/add.png b/drupalcat/themes/drupalcat/images/add.png new file mode 100644 index 0000000..3e167eb Binary files /dev/null and b/drupalcat/themes/drupalcat/images/add.png differ diff --git a/drupalcat/themes/drupalcat/images/buttons.png b/drupalcat/themes/drupalcat/images/buttons.png new file mode 100644 index 0000000..c4b6df5 Binary files /dev/null and b/drupalcat/themes/drupalcat/images/buttons.png differ diff --git a/drupalcat/themes/drupalcat/images/comment-arrow-rtl.gif b/drupalcat/themes/drupalcat/images/comment-arrow-rtl.gif new file mode 100644 index 0000000..b597e65 Binary files /dev/null and b/drupalcat/themes/drupalcat/images/comment-arrow-rtl.gif differ diff --git a/drupalcat/themes/drupalcat/images/comment-arrow.gif b/drupalcat/themes/drupalcat/images/comment-arrow.gif new file mode 100644 index 0000000..ce48d0c Binary files /dev/null and b/drupalcat/themes/drupalcat/images/comment-arrow.gif differ diff --git a/drupalcat/themes/drupalcat/images/required.svg b/drupalcat/themes/drupalcat/images/required.svg new file mode 100644 index 0000000..04e1865 --- /dev/null +++ b/drupalcat/themes/drupalcat/images/required.svg @@ -0,0 +1 @@ + diff --git a/drupalcat/themes/drupalcat/images/tabs-border.png b/drupalcat/themes/drupalcat/images/tabs-border.png new file mode 100644 index 0000000..25f9535 Binary files /dev/null and b/drupalcat/themes/drupalcat/images/tabs-border.png differ diff --git a/drupalcat/themes/drupalcat/logo.png b/drupalcat/themes/drupalcat/logo.png new file mode 100644 index 0000000..18d0ff2 Binary files /dev/null and b/drupalcat/themes/drupalcat/logo.png differ diff --git a/drupalcat/themes/drupalcat/sass/_config.scss b/drupalcat/themes/drupalcat/sass/_config.scss new file mode 100644 index 0000000..6f675d1 --- /dev/null +++ b/drupalcat/themes/drupalcat/sass/_config.scss @@ -0,0 +1,47 @@ +// Config +// --------- +// Use the same color all over the place? Need to do +// some math with height and width and text size? +// Sass supports variables as well as basic math +// operations and many useful functions. +// +// For complete documentation: +// http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#variables_ +// +// Available functions: +// http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html + +// Available functions: +// SASS: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html +// Bourbon: http://bourbon.io/docs/ +// Boubon Neat (grid): https://github.com/thoughtbot/neat#using-the-grid + +// Import variables and mixins to be used (Bourbon) +@import "components/bourbon/bourbon" +@import "components/neat/neat-helpers" + +// Bourbon grid display. Comment out to remove display. +$visual-grid: true +$visual-grid-color: #EEEEEE + +// Set to false if you'd like to remove the responsiveness. +$responsive: true + +// Setup the column, grid, and gutter amounts. +$column: 90px +$gutter: 30px +$grid-columns: 12 +// We set the max width of the page using the px to em function in Bourbon. +// the first value is the pixel value of the width and the second is the base font size of your theme. +// In this instance we want the max width to be 1088px and on Line 6 of style.sass we have reset the base +// font size to 13px so the first value would be 1088 and the second 13 +// ex. em(1088, 13) +$max-width: em(1088, 13) + +// Define your breakpoints. +$mobile: new-breakpoint(max-width 480px 4) +$tablet: new-breakpoint(max-width 768px 8) + +// Import grid to be used (Bourbon Neat). +// We load this after we provide our overrides: https://github.com/thoughtbot/neat#changing-the-defaults +@import "components/neat/neat" diff --git a/drupalcat/themes/drupalcat/sass/_init.scss b/drupalcat/themes/drupalcat/sass/_init.scss new file mode 100644 index 0000000..d1f67c9 --- /dev/null +++ b/drupalcat/themes/drupalcat/sass/_init.scss @@ -0,0 +1,6 @@ +/** + * Inital variables: + */ + +$font_base: "Raleway", sans-serif; +$blue: #016796; diff --git a/drupalcat/themes/drupalcat/screenshot.png b/drupalcat/themes/drupalcat/screenshot.png new file mode 100644 index 0000000..be1fe1d Binary files /dev/null and b/drupalcat/themes/drupalcat/screenshot.png differ diff --git a/drupalcat/themes/drupalcat/templates/block--system-branding-block.html.twig b/drupalcat/themes/drupalcat/templates/block--system-branding-block.html.twig new file mode 100644 index 0000000..f6147a6 --- /dev/null +++ b/drupalcat/themes/drupalcat/templates/block--system-branding-block.html.twig @@ -0,0 +1,34 @@ +{% extends "@block/block.html.twig" %} +{# +/** + * @file + * Bartik's theme implementation for a branding block. + * + * Each branding element variable (logo, name, slogan) is only available if + * enabled in the block configuration. + * + * Available variables: + * - site_logo: Logo for site as defined in Appearance or theme settings. + * - site_name: Name for site as defined in Site information settings. + * - site_slogan: Slogan for site as defined in Site information settings. + */ +#} +{% block content %} + {% if site_logo %} + + {% endif %} + {% if site_name or site_slogan %} +
+ {% if site_name %} + + {{ site_name }} + + {% endif %} + {% if site_slogan %} +
{{ site_slogan }}
+ {% endif %} +
+ {% endif %} +{% endblock %} diff --git a/drupalcat/themes/drupalcat/templates/block--system-menu-block.html.twig b/drupalcat/themes/drupalcat/templates/block--system-menu-block.html.twig new file mode 100644 index 0000000..4bbab76 --- /dev/null +++ b/drupalcat/themes/drupalcat/templates/block--system-menu-block.html.twig @@ -0,0 +1,27 @@ +{% extends "@system/block--system-menu-block.html.twig" %} +{# +/** + * @file + * Bartik's theme implementation for a menu block. + * + * @ingroup themeable + */ +#} +{% set show_anchor = "show-" ~ attributes.id|clean_id %} +{% set hide_anchor = "hide-" ~ attributes.id|clean_id %} +{% block content %} + {# If a label is displayed, wrap it in
. #} + {% if configuration.label_display %} + + {% else %} + {# When rendering a menu without label, render a menu toggle. #} + + + {{ 'Menu'|t }} + {{ 'Menu'|t }} + {% endif %} + {{ content }} + {% if configuration.label_display %} +
+ {% endif %} +{% endblock %} diff --git a/drupalcat/themes/drupalcat/templates/block.html.twig b/drupalcat/themes/drupalcat/templates/block.html.twig new file mode 100644 index 0000000..31a95c0 --- /dev/null +++ b/drupalcat/themes/drupalcat/templates/block.html.twig @@ -0,0 +1,56 @@ +{# +/** + * @file + * Default theme implementation to display a block. + * + * Available variables: + * - plugin_id: The ID of the block implementation. + * - label: The configured label of the block if visible. + * - configuration: A list of the block's configuration values. + * - label: The configured label for the block. + * - label_display: The display settings for the label. + * - module: The module that provided this block plugin. + * - cache: The cache settings. + * - Block plugin specific settings will also be stored here. + * - block - The full block entity. + * - label_hidden: The hidden block title value if the block was + * configured to hide the title ('label' is empty in this case). + * - module: The module that generated the block. + * - delta: An ID for the block, unique within each module. + * - region: The block region embedding the current block. + * - content: The content of this block. + * - attributes: array of HTML attributes populated by modules, intended to + * be added to the main container tag of this template. + * - id: A valid HTML ID and guaranteed unique. + * - title_attributes: Same as attributes, except applied to the main title + * tag that appears in the template. + * - content_attributes: Same as attributes, except applied to the main content + * tag that appears in the template. + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the main title tag that appears in the template. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the main title tag that appears in the template. + * + * @see template_preprocess_block() + * + * @ingroup themeable + */ +#} +{% + set classes = [ + 'block', + 'block-' ~ configuration.provider|clean_class, + ] +%} + + {{ title_prefix }} + {% if label %} + {{ label }} + {% endif %} + {{ title_suffix }} + {% block content %} + + {{ content }} + + {% endblock %} + diff --git a/drupalcat/themes/drupalcat/templates/comment.html.twig b/drupalcat/themes/drupalcat/templates/comment.html.twig new file mode 100644 index 0000000..c5c0a7a --- /dev/null +++ b/drupalcat/themes/drupalcat/templates/comment.html.twig @@ -0,0 +1,132 @@ +{# +/** + * @file + * Bartik's theme implementation for comments. + * + * Available variables: + * - author: Comment author. Can be a link or plain text. + * - content: The content-related items for the comment display. Use + * {{ content }} to print them all, or print a subset such as + * {{ content.field_example }}. Use the following code to temporarily suppress + * the printing of a given child element: + * @code + * {{ content|without('field_example') }} + * @endcode + * - created: Formatted date and time for when the comment was created. + * Preprocess functions can reformat it by calling format_date() with the + * desired parameters on the 'comment.created' variable. + * - changed: Formatted date and time for when the comment was last changed. + * Preprocess functions can reformat it by calling format_date() with the + * desired parameters on the 'comment.changed' variable. + * - permalink: Comment permalink. + * - submitted: Submission information created from author and created + * during template_preprocess_comment(). + * - user_picture: The comment author's profile picture. + * - signature: The comment author's signature. + * - status: Comment status. Possible values are: + * unpublished, published, or preview. + * - title: Comment title, linked to the comment. + * - attributes: HTML attributes for the containing element. + * The attributes.class may contain one or more of the following classes: + * - comment: The current template type; e.g., 'theming hook'. + * - by-anonymous: Comment by an unregistered user. + * - by-{entity-type}-author: Comment by the author of the parent entity, + * eg. by-node-author. + * - preview: When previewing a new or edited comment. + * The following applies only to viewers who are registered users: + * - unpublished: An unpublished comment visible only to administrators. + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the main title tag that appears in the template. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the main title tag that appears in the template. + * - title_attributes: Same as attributes, except applied to the main title + * tag that appears in the template. + * - content_attributes: List of classes for the styling of the comment content. + * + * These variables are provided to give context about the parent comment (if + * any): + * - comment_parent: Full parent comment entity (if any). + * - parent_author: Equivalent to author for the parent comment. + * - parent_created: Equivalent to created for the parent comment. + * - parent_changed: Equivalent to changed for the parent comment. + * - parent_title: Equivalent to title for the parent comment. + * - parent_permalink: Equivalent to permalink for the parent comment. + * - parent: A text string of parent comment submission information created from + * 'parent_author' and 'parent_created' during template_preprocess_comment(). + * This information is presented to help screen readers follow lengthy + * discussion threads. You can hide this from sighted users using the class + * visually-hidden. + * + * These two variables are provided for context: + * - comment: Full comment object. + * - entity: Entity the comments are attached to. + * + * @see template_preprocess_comment() + */ +#} +
+ +
+
+ {{ user_picture }} + +
+

+ {{ author }} +

+

+ {{ created }} +

+

+ {{ permalink }} +

+ {# + // Indicate the semantic relationship between parent and child comments + // for accessibility. The list is difficult to navigate in a screen + // reader without this information. + #} + {% if parent %} + + {% endif %} +
+
+
+ +
+
+ + {# + Hide the "new" indicator by default, let a piece of JavaScript ask + the server which comments are new for the user. Rendering the final + "new" indicator here would break the render cache. + #} + + + {% if title %} + {{ title_prefix }} + {{ title }} + {{ title_suffix }} + {% endif %} + + + {{ content|without('links') }} +
+ +
+ {% if signature %} +
+ {{ signature }} +
+ {% endif %} + + {% if content.links %} + + {% endif %} +
+ + +
diff --git a/drupalcat/themes/drupalcat/templates/field--taxonomy-term-reference.html.twig b/drupalcat/themes/drupalcat/templates/field--taxonomy-term-reference.html.twig new file mode 100644 index 0000000..f1289ee --- /dev/null +++ b/drupalcat/themes/drupalcat/templates/field--taxonomy-term-reference.html.twig @@ -0,0 +1,29 @@ +{# +/** + * @file + * Bartik theme override for taxonomy term fields. + * + * Available variables: + * - attributes: HTML attributes for the containing element. + * - label_hidden: Whether to show the field label or not. + * - title_attributes: HTML attributes for the label. + * - label: The label for the field. + * - content_attributes: HTML attributes for the content. + * - items: List of all the field items. Each item contains: + * - attributes: List of HTML attributes for each item. + * - content: The field item's content. + * + * @see template_preprocess_field() + * @see bartik_preprocess_field() + */ +#} + + {% if not label_hidden %} + {{ label }}: + {% endif %} + + {% for item in items %} + {{ item.content }} + {% endfor %} + + diff --git a/drupalcat/themes/drupalcat/templates/maintenance-page.html.twig b/drupalcat/themes/drupalcat/templates/maintenance-page.html.twig new file mode 100644 index 0000000..5de50cc --- /dev/null +++ b/drupalcat/themes/drupalcat/templates/maintenance-page.html.twig @@ -0,0 +1,45 @@ +{# +/** + * @file + * Bartik's theme implementation to display a single Drupal page while offline. + * + * All available variables are mirrored in page.html.twig. + * + * @see template_preprocess_maintenance_page() + */ + #} +
+ + + +
+
+ + {% if title %}

{{ title }}

{% endif %} + {{ page.content }} + {% if messages %} +
+ {{ messages }} +
+ {% endif %} +
+
+ +
diff --git a/drupalcat/themes/drupalcat/templates/node.html.twig b/drupalcat/themes/drupalcat/templates/node.html.twig new file mode 100644 index 0000000..3150206 --- /dev/null +++ b/drupalcat/themes/drupalcat/templates/node.html.twig @@ -0,0 +1,111 @@ +{# +/** + * @file + * Bartik's theme implementation to display a node. + * + * Available variables: + * - node: Full node entity. + * - id: The node ID. + * - bundle: The type of the node, for example, "page" or "article". + * - authorid: The user ID of the node author. + * - createdtime: Formatted creation date. Preprocess functions can + * reformat it by calling format_date() with the desired parameters on + * $variables['node']->getCreatedTime(). + * - label: The title of the node. + * - content: All node items. Use {{ content }} to print them all, + * or print a subset such as {{ content.field_example }}. Use + * {{ content|without('field_example') }} to temporarily suppress the printing + * of a given child element. + * - author_picture: The node author user entity, rendered using the "compact" + * view mode. + * - metadata: Metadata for this node. + * - date: Themed creation date field. + * - author_name: Themed author name field. + * - url: Direct URL of the current node. + * - display_submitted: Whether submission information should be displayed. + * - attributes: HTML attributes for the containing element. + * The attributes.class element may contain one or more of the following + * classes: + * - node: The current template type (also known as a "theming hook"). + * - node--type-[type]: The current node type. For example, if the node is an + * "Article" it would result in "node--type-article". Note that the machine + * name will often be in a short form of the human readable label. + * - node--view-mode-[view_mode]: The View Mode of the node; for example, a + * teaser would result in: "node--view-mode-teaser", and + * full: "node--view-mode-full". + * The following are controlled through the node publishing options. + * - node--promoted: Appears on nodes promoted to the front page. + * - node--sticky: Appears on nodes ordered above other non-sticky nodes in + * teaser listings. + * - node--unpublished: Appears on unpublished nodes visible only to site + * admins. + * - title_attributes: Same as attributes, except applied to the main title + * tag that appears in the template. + * - content_attributes: Same as attributes, except applied to the main + * content tag that appears in the template. + * - author_attributes: Same as attributes, except applied to the author of + * the node tag that appears in the template. + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the main title tag that appears in the template. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the main title tag that appears in the template. + * - view_mode: View mode; for example, "teaser" or "full". + * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'. + * - page: Flag for the full page state. Will be true if view_mode is 'full'. + * - readmore: Flag for more state. Will be true if the teaser content of the + * node cannot hold the main body content. + * - is_front: Flag for front. Will be true when presented on the front page. + * - logged_in: Flag for authenticated user status. Will be true when the + * current user is a logged-in member. + * - is_admin: Flag for admin user status. Will be true when the current user + * is an administrator. + * + * @see template_preprocess_node() + */ +#} +{% + set classes = [ + 'node', + 'node--type-' ~ node.bundle|clean_class, + node.isPromoted() ? 'node--promoted', + node.isSticky() ? 'node--sticky', + not node.isPublished() ? 'node--unpublished', + view_mode ? 'node--view-mode-' ~ view_mode|clean_class, + 'clearfix', + ] +%} + + +
+ {{ title_prefix }} + {% if not page %} + + {{ label }} + + {% endif %} + {{ title_suffix }} + + {% if display_submitted %} +
+ {{ author_picture }} + + {% trans %}Submitted by {{ author_name|passthrough }} on {{ date|passthrough }}{% endtrans %} + + {{ metadata }} +
+ {% endif %} +
+ + + {{ content|without('comment', 'links') }} + + + {% if content.links %} +
+ {{ content.links }} +
+ {% endif %} + + {{ content.comment }} + + diff --git a/drupalcat/themes/drupalcat/templates/page.html.twig b/drupalcat/themes/drupalcat/templates/page.html.twig new file mode 100644 index 0000000..d52d3db --- /dev/null +++ b/drupalcat/themes/drupalcat/templates/page.html.twig @@ -0,0 +1,202 @@ +{# +/** + * @file + * Bartik's theme implementation to display a single page. + * + * The doctype, html, head and body tags are not in this template. Instead they + * can be found in the html.html.twig template normally located in the + * core/modules/system directory. + * + * Available variables: + * + * General utility variables: + * - base_path: The base URL path of the Drupal installation. Will usually be + * "/" unless you have installed Drupal in a sub-directory. + * - is_front: A flag indicating if the current page is the front page. + * - logged_in: A flag indicating if the user is registered and signed in. + * - is_admin: A flag indicating if the user has permission to access + * administration pages. + * + * Site identity: + * - front_page: The URL of the front page. Use this instead of base_path when + * linking to the front page. This includes the language domain or prefix. + * - logo: The url of the logo image, as defined in theme settings. + * - site_name: The name of the site. This is empty when displaying the site + * name has been disabled in the theme settings. + * - site_slogan: The slogan of the site. This is empty when displaying the site + * slogan has been disabled in theme settings. + * - hide_site_name: A flag indicating if the site name has been toggled off on + * the theme settings page. If hidden, the "visually-hidden" class is added + * to make the site name visually hidden, but still accessible. + * - hide_site_slogan: A flag indicating if the site slogan has been toggled off + * on the theme settings page. If hidden, the "visually-hidden" class is + * added to make the site slogan visually hidden, but still accessible. + * + * Navigation: + * - breadcrumb: The breadcrumb trail for the current page. + * + * Page content (in order of occurrence in the default page.html.twig): + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the main title tag that appears in the template. + * - title: The page title, for use in the actual content. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the main title tag that appears in the template. + * - messages: Status and error messages. Should be displayed prominently. + * - tabs: Tabs linking to any sub-pages beneath the current page (e.g., the + * view and edit tabs when displaying a node). + * - action_links: Actions local to the page, such as "Add menu" on the menu + * administration interface. + * - feed_icons: All feed icons for the current page. + * - node: Fully loaded node, if there is an automatically-loaded node + * associated with the page and the node ID is the second argument in the + * page's path (e.g. node/12345 and node/12345/revisions, but not + * comment/reply/12345). + * + * Regions: + * - page.header: Items for the header region. + * - page.primary_menu: Items for the primary menu region. + * - page.secondary_menu: Items for the secondary menu region. + * - page.featured: Items for the featured region. + * - page.highlighted: Items for the highlighted content region. + * - page.help: Dynamic help text, mostly for admin pages. + * - page.content: The main content of the current page. + * - page.sidebar_first: Items for the first sidebar. + * - page.sidebar_second: Items for the second sidebar. + * - page.triptych_first: Items for the first triptych. + * - page.triptych_middle: Items for the middle triptych. + * - page.triptych_last: Items for the last triptych. + * - page.footer_firstcolumn: Items for the first footer column. + * - page.footer_secondcolumn: Items for the second footer column. + * - page.footer_thirdcolumn: Items for the third footer column. + * - page.footer_fourthcolumn: Items for the fourth footer column. + * - page.footer: Items for the footer region. + * + * @see template_preprocess_page() + * @see bartik_preprocess_page() + * @see html.html.twig + */ +#} +
+ + + + {% if messages %} +
+ {{ messages }} +
+ {% endif %} + + {% if page.featured %} + + {% endif %} + +
+ {{ breadcrumb }} + +
+ {% if page.highlighted %}
{{ page.highlighted }}
{% endif %} + + {{ title_prefix }} + {% if title %} +

+ {{ title }} +

+ {% endif %} + {{ title_suffix }} + {% if tabs %} + + {% endif %} + {{ page.help }} + {% if action_links %} +
    + {{ action_links }} +
+ {% endif %} + {{ page.content }} + {{ feed_icons }} +
+ + {% if page.sidebar_first %} + + {% endif %} + + {% if page.sidebar_second %} + + {% endif %} + +
+ + {% if page.triptych_first or page.triptych_middle or page.triptych_last %} +
+ {% endif %} + + + +