Skip to content
Snippets Groups Projects
Commit 2b3ce979 authored by Cassandra Gould van Praag's avatar Cassandra Gould van Praag
Browse files

Merge branch 'master' of git.fmrib.ox.ac.uk:open-science/community/Open-WIN-Community

parents 662a0422 ae2dc03e
No related branches found
No related tags found
No related merge requests found
Pipeline #17142 passed
Showing
with 350 additions and 135 deletions
// Moved from _sass/code.scss
.highlight .c {
color: #586e75;
} // comment //
.highlight .err {
color: #93a1a1;
} // error //
.highlight .g {
color: #93a1a1;
} // generic //
.highlight .k {
color: #859900;
} // keyword //
.highlight .l {
color: #93a1a1;
} // literal //
.highlight .n {
color: #93a1a1;
} // name //
.highlight .o {
color: #859900;
} // operator //
.highlight .x {
color: #cb4b16;
} // other //
.highlight .p {
color: #93a1a1;
} // punctuation //
.highlight .cm {
color: #586e75;
} // comment.multiline //
.highlight .cp {
color: #859900;
} // comment.preproc //
.highlight .c1 {
color: #586e75;
} // comment.single //
.highlight .cs {
color: #859900;
} // comment.special //
.highlight .gd {
color: #2aa198;
} // generic.deleted //
.highlight .ge {
font-style: italic;
color: #93a1a1;
} // generic.emph //
.highlight .gr {
color: #dc322f;
} // generic.error //
.highlight .gh {
color: #cb4b16;
} // generic.heading //
.highlight .gi {
color: #859900;
} // generic.inserted //
.highlight .go {
color: #93a1a1;
} // generic.output //
.highlight .gp {
color: #93a1a1;
} // generic.prompt //
.highlight .gs {
font-weight: bold;
color: #93a1a1;
} // generic.strong //
.highlight .gu {
color: #cb4b16;
} // generic.subheading //
.highlight .gt {
color: #93a1a1;
} // generic.traceback //
.highlight .kc {
color: #cb4b16;
} // keyword.constant //
.highlight .kd {
color: #268bd2;
} // keyword.declaration //
.highlight .kn {
color: #859900;
} // keyword.namespace //
.highlight .kp {
color: #859900;
} // keyword.pseudo //
.highlight .kr {
color: #268bd2;
} // keyword.reserved //
.highlight .kt {
color: #dc322f;
} // keyword.type //
.highlight .ld {
color: #93a1a1;
} // literal.date //
.highlight .m {
color: #2aa198;
} // literal.number //
.highlight .s {
color: #2aa198;
} // literal.string //
.highlight .na {
color: #555;
} // name.attribute //
.highlight .nb {
color: #b58900;
} // name.builtin //
.highlight .nc {
color: #268bd2;
} // name.class //
.highlight .no {
color: #cb4b16;
} // name.constant //
.highlight .nd {
color: #268bd2;
} // name.decorator //
.highlight .ni {
color: #cb4b16;
} // name.entity //
.highlight .ne {
color: #cb4b16;
} // name.exception //
.highlight .nf {
color: #268bd2;
} // name.function //
.highlight .nl {
color: #555;
} // name.label //
.highlight .nn {
color: #93a1a1;
} // name.namespace //
.highlight .nx {
color: #555;
} // name.other //
.highlight .py {
color: #93a1a1;
} // name.property //
.highlight .nt {
color: #268bd2;
} // name.tag //
.highlight .nv {
color: #268bd2;
} // name.variable //
.highlight .ow {
color: #859900;
} // operator.word //
.highlight .w {
color: #93a1a1;
} // text.whitespace //
.highlight .mf {
color: #2aa198;
} // literal.number.float //
.highlight .mh {
color: #2aa198;
} // literal.number.hex //
.highlight .mi {
color: #2aa198;
} // literal.number.integer //
.highlight .mo {
color: #2aa198;
} // literal.number.oct //
.highlight .sb {
color: #586e75;
} // literal.string.backtick //
.highlight .sc {
color: #2aa198;
} // literal.string.char //
.highlight .sd {
color: #93a1a1;
} // literal.string.doc //
.highlight .s2 {
color: #2aa198;
} // literal.string.double //
.highlight .se {
color: #cb4b16;
} // literal.string.escape //
.highlight .sh {
color: #93a1a1;
} // literal.string.heredoc //
.highlight .si {
color: #2aa198;
} // literal.string.interpol //
.highlight .sx {
color: #2aa198;
} // literal.string.other //
.highlight .sr {
color: #dc322f;
} // literal.string.regex //
.highlight .s1 {
color: #2aa198;
} // literal.string.single //
.highlight .ss {
color: #2aa198;
} // literal.string.symbol //
.highlight .bp {
color: #268bd2;
} // name.builtin.pseudo //
.highlight .vc {
color: #268bd2;
} // name.variable.class //
.highlight .vg {
color: #268bd2;
} // name.variable.global //
.highlight .vi {
color: #268bd2;
} // name.variable.instance //
.highlight .il {
color: #2aa198;
} // literal.number.integer.long //
@charset "UTF-8";
//
// Styles for rendered markdown in the .main-content container
//
// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type
// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type, selector-max-specificity, selector-max-id
.main-content {
line-height: $content-line-height;
......@@ -21,7 +19,6 @@
a {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
ul,
......@@ -59,7 +56,7 @@
ol {
counter-reset: sub-counter;
li {
> li {
&::before {
content: counter(sub-counter, lower-alpha);
counter-increment: sub-counter;
......@@ -82,14 +79,7 @@
}
}
.task-list {
padding-left: 0;
}
.task-list-item {
display: flex;
align-items: center;
&::before {
content: "";
}
......@@ -97,6 +87,9 @@
.task-list-item-checkbox {
margin-right: 0.6em;
margin-left: -1.4em;
// The same margin-left is used above for ul > li::before
}
hr + * {
......@@ -121,6 +114,7 @@
grid-column: 1;
font-weight: 500;
text-align: right;
&::after {
content: ":";
}
......@@ -130,6 +124,7 @@
grid-column: 2;
margin-bottom: 0;
margin-left: 1em;
blockquote,
div,
dl,
......@@ -188,6 +183,7 @@
}
.anchor-heading:hover,
.anchor-heading:focus,
h1:hover > .anchor-heading,
h2:hover > .anchor-heading,
h3:hover > .anchor-heading,
......@@ -208,24 +204,36 @@
h3,
h4,
h5,
h6 {
h6,
#toctitle {
position: relative;
margin-top: 1.5em;
margin-bottom: 0.25em;
&:first-child {
margin-top: $sp-2;
}
+ table,
+ .table-wrapper,
+ .code-example,
+ .highlighter-rouge {
+ .highlighter-rouge,
+ .sectionbody .listingblock {
margin-top: 1em;
}
+ p {
+ p:not(.label) {
margin-top: 0;
}
}
> h1:first-child,
> h2:first-child,
> h3:first-child,
> h4:first-child,
> h5:first-child,
> h6:first-child,
> .sect1:first-child > h2,
> .sect2:first-child > h3,
> .sect3:first-child > h4,
> .sect4:first-child > h5,
> .sect5:first-child > h6 {
margin-top: $sp-2;
}
}
// custom SCSS (or CSS) goes here
// custom setup code goes here
//
// Labels (not the form kind)
//
.label,
.label-blue {
display: inline-block;
padding-top: 0.16em;
padding-right: 0.56em;
padding-bottom: 0.16em;
padding-left: 0.56em;
padding: 0.16em 0.56em;
margin-right: $sp-2;
margin-left: $sp-2;
color: $white;
......@@ -16,6 +11,7 @@
vertical-align: middle;
background-color: $blue-100;
@include fs-2;
border-radius: 12px;
}
......
//
// The basic two column layout
//
.side-bar {
z-index: 0;
......@@ -9,11 +7,10 @@
background-color: $sidebar-color;
@include mq(md) {
flex-wrap: nowrap;
flex-flow: column nowrap;
position: fixed;
width: $nav-width-md;
height: 100%;
flex-direction: column;
border-right: $border $border-color;
align-items: flex-end;
}
......@@ -40,6 +37,7 @@
.main-content-wrap {
@include container;
padding-top: $gutter-spacing-sm;
padding-bottom: $gutter-spacing-sm;
......@@ -111,6 +109,7 @@
.site-title {
@include container;
flex-grow: 1;
display: flex;
height: 100%;
......@@ -184,6 +183,7 @@ body {
.site-footer {
@include container;
position: absolute;
bottom: 0;
left: 0;
......
//
// Import external dependencies
//
@import "./vendor/normalize.scss/normalize.scss";
@import "./vendor/normalize.scss/normalize";
//
// Modules
//
@import "./base";
@import "./layout";
@import "./content";
......@@ -18,3 +14,4 @@
@import "./code";
@import "./utilities/utilities";
@import "./print";
@import "./skiptomain";
//
// Main nav, breadcrumb, etc...
//
// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type, selector-max-specificity
.nav-list {
......@@ -11,6 +9,7 @@
.nav-list-item {
@include fs-4;
position: relative;
margin: 0;
......@@ -44,6 +43,12 @@
}
}
&.external > svg {
width: $sp-4;
height: $sp-4;
vertical-align: text-bottom;
}
&.active {
font-weight: 600;
text-decoration: none;
......@@ -65,21 +70,16 @@
@if $nav-list-expander-right {
right: 0;
}
width: $nav-list-item-height-sm;
height: $nav-list-item-height-sm;
padding-top: #{$nav-list-item-height-sm / 4};
padding-right: #{$nav-list-item-height-sm / 4};
padding-bottom: #{$nav-list-item-height-sm / 4};
padding-left: #{$nav-list-item-height-sm / 4};
padding: #{$nav-list-item-height-sm * 0.25};
color: $link-color;
@include mq(md) {
width: $nav-list-item-height;
height: $nav-list-item-height;
padding-top: #{$nav-list-item-height / 4};
padding-right: #{$nav-list-item-height / 4};
padding-bottom: #{$nav-list-item-height / 4};
padding-left: #{$nav-list-item-height / 4};
padding: #{$nav-list-item-height * 0.25};
}
&:hover {
......@@ -132,19 +132,15 @@
}
.nav-category {
padding-top: $sp-2;
padding-right: $gutter-spacing-sm;
padding-bottom: $sp-2;
padding-left: $gutter-spacing-sm;
padding: $sp-2 $gutter-spacing-sm;
font-weight: 600;
text-align: end;
text-align: start;
text-transform: uppercase;
border-bottom: $border $border-color;
@include fs-2;
@include mq(md) {
padding-right: $gutter-spacing;
padding-left: $gutter-spacing;
padding: $sp-2 $gutter-spacing;
margin-top: $gutter-spacing-sm;
text-align: start;
......@@ -154,6 +150,26 @@
}
}
.nav-list.nav-category-list {
> .nav-list-item {
margin: 0;
> .nav-list {
padding: 0;
> .nav-list-item {
> .nav-list-link {
color: $link-color;
}
> .nav-list-expander {
color: $link-color;
}
}
}
}
}
// Aux nav
.aux-nav {
......
// stylelint-disable selector-max-specificity, selector-max-id, selector-max-type, selector-no-qualifying-type, primer/no-override,
// stylelint-disable selector-max-specificity, selector-max-id, selector-max-type, selector-no-qualifying-type
@media print {
.site-footer,
......
//
// Search input and autocomplete
//
.search {
position: relative;
......@@ -8,7 +6,7 @@
flex-grow: 1;
height: $sp-10;
padding: $sp-2;
transition: padding linear #{$transition-duration / 2};
transition: padding linear #{$transition-duration * 0.5};
@include mq(md) {
position: relative !important;
......@@ -26,7 +24,7 @@
overflow: hidden;
border-radius: $border-radius;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
transition: height linear #{$transition-duration / 2};
transition: height linear #{$transition-duration * 0.5};
@include mq(md) {
position: absolute;
......@@ -43,11 +41,9 @@
position: absolute;
width: 100%;
height: 100%;
padding-top: $sp-2;
padding-right: $gutter-spacing-sm;
padding-bottom: $sp-2;
padding-left: #{$gutter-spacing-sm + $sp-5};
padding: $sp-2 $gutter-spacing-sm $sp-2 #{$gutter-spacing-sm + $sp-5};
font-size: 16px;
color: $body-text-color;
background-color: $search-background-color;
border-top: 0;
border-right: 0;
......@@ -56,12 +52,10 @@
border-radius: 0;
@include mq(md) {
padding-top: $gutter-spacing-sm;
padding-bottom: $gutter-spacing-sm;
padding-left: #{$gutter-spacing + $sp-5};
padding: $sp-2 $gutter-spacing-sm $sp-2 #{$gutter-spacing + $sp-5};
font-size: 14px;
background-color: $body-background-color;
transition: padding-left linear #{$transition-duration / 2};
transition: padding-left linear #{$transition-duration * 0.5};
}
&:focus {
......@@ -81,7 +75,7 @@
@include mq(md) {
padding-left: $gutter-spacing;
transition: padding-left linear #{$transition-duration / 2};
transition: padding-left linear #{$transition-duration * 0.5};
}
.search-icon {
......@@ -129,10 +123,7 @@
.search-result {
display: block;
padding-top: $sp-1;
padding-right: $sp-3;
padding-bottom: $sp-1;
padding-left: $sp-3;
padding: $sp-1 $sp-3;
&:hover,
&.active {
......@@ -225,10 +216,7 @@
}
.search-no-result {
padding-top: $sp-2;
padding-right: $sp-3;
padding-bottom: $sp-2;
padding-left: $sp-3;
padding: $sp-2 $sp-3;
@include fs-3;
}
......@@ -241,7 +229,7 @@
height: $sp-9;
background-color: $search-background-color;
border: 1px solid rgba($link-color, 0.3);
border-radius: #{$sp-9 / 2};
border-radius: #{$sp-9 * 0.5};
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
align-items: center;
justify-content: center;
......
// Skipnav
// Skip to main content
a.skip-to-main {
left: -999px;
position: absolute;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: -999;
}
a.skip-to-main:focus,
a.skip-to-main:active {
color: $link-color;
background-color: $body-background-color;
left: auto;
top: auto;
width: 30%;
height: auto;
overflow: auto;
margin: 10px 35%;
padding: 5px;
border-radius: 15px;
border: 4px solid $btn-primary-color;
text-align: center;
font-size: 1.2em;
z-index: 999;
}
@function rem($size, $unit: "") {
$remSize: $size / $root-font-size;
$rem-size: $size / $root-font-size;
@if ($unit == false) {
@return #{$remSize};
@if $unit == false {
@return #{$rem-size};
} @else {
@return #{$remSize}rem;
@return #{$rem-size}rem;
}
}
//
// Typography
//
$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue",
helvetica, roboto, noto, "segoe ui", arial, sans-serif !default;
$mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace !default;
$body-font-family: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI",
roboto, "Helvetica Neue", arial, sans-serif !default;
$mono-font-family: "SFMono-Regular", menlo, consolas, monospace !default;
$root-font-size: 16px !default; // Base font-size for rems
$body-line-height: 1.4 !default;
$content-line-height: 1.6 !default;
$body-heading-line-height: 1.25 !default;
//
// Font size
// `-sm` suffix is the size at the small (and above) media query
//
$font-size-1: 9px !default;
$font-size-1-sm: 10px !default;
$font-size-2: 11px !default; //h4 - uppercased!, h6 not uppercased, text-small
$font-size-3: 12px !default; //h5
$font-size-2: 11px !default; // h4 - uppercased!, h6 not uppercased, text-small
$font-size-3: 12px !default; // h5
$font-size-4: 14px !default;
$font-size-5: 16px !default; //h3
$font-size-6: 18px !default; //h2
$font-size-5: 16px !default; // h3
$font-size-6: 18px !default; // h2
$font-size-7: 24px !default;
$font-size-8: 32px !default; //h1
$font-size-8: 32px !default; // h1
$font-size-9: 36px !default;
$font-size-10: 42px !default;
$font-size-10-sm: 48px !default;
//
// Colors
//
$white: #fff !default;
$grey-dk-000: #959396 !default;
$grey-dk-100: #5c5962 !default;
$grey-dk-200: #44434d !default;
$grey-dk-250: #302d36 !default;
$grey-dk-300: #27262b !default;
$grey-lt-000: #f5f6fa !default;
$grey-lt-100: #eeebee !default;
$grey-lt-200: #ecebed !default;
$grey-lt-300: #e6e1e8 !default;
$purple-000: #7253ed !default;
$purple-100: #5e41d0 !default;
$purple-200: #4e26af !default;
$purple-300: #381885 !default;
$blue-000: #2c84fa !default;
$blue-100: #2869e6 !default;
$blue-200: #264caf !default;
$blue-300: #183385 !default;
$green-000: #41d693 !default;
$green-100: #11b584 !default;
$green-200: #009c7b !default;
$green-300: #026e57 !default;
$yellow-000: #ffeb82 !default;
$yellow-100: #fadf50 !default;
$yellow-200: #f7d12e !default;
$yellow-300: #e7af06 !default;
$red-000: #f77e7e !default;
$red-100: #f96e65 !default;
$red-200: #e94c4c !default;
$red-300: #dd2e2e !default;
$body-background-color: $white !default;
$sidebar-color: $grey-lt-000 !default;
$search-background-color: $white !default;
$table-background-color: $white !default;
$code-background-color: $grey-lt-000 !default;
$feedback-color: darken($sidebar-color, 3%) !default;
$body-text-color: $grey-dk-100 !default;
$body-heading-color: $grey-dk-300 !default;
$search-result-preview-color: $grey-dk-000 !default;
......@@ -85,9 +70,7 @@ $link-color: $purple-000 !default;
$btn-primary-color: $purple-100 !default;
$base-button-color: #f7f7f7 !default;
//
// Spacing
//
$spacing-unit: 1rem; // 1rem == 16px
......@@ -104,7 +87,6 @@ $spacers: (
sp-9: $spacing-unit * 3.5,
sp-10: $spacing-unit * 4,
) !default;
$sp-1: map-get($spacers, sp-1) !default; // 0.25 rem == 4px
$sp-2: map-get($spacers, sp-2) !default; // 0.5 rem == 8px
$sp-3: map-get($spacers, sp-3) !default; // 0.75 rem == 12px
......@@ -116,17 +98,13 @@ $sp-8: map-get($spacers, sp-8) !default; // 3 rem == 48px
$sp-9: map-get($spacers, sp-9) !default; // 3.5 rem == 56px
$sp-10: map-get($spacers, sp-10) !default; // 4 rem == 64px
//
// Borders
//
$border: 1px solid !default;
$border-radius: 4px !default;
$border-color: $grey-lt-100 !default;
//
// Grid system
//
$gutter-spacing: $sp-6 !default;
$gutter-spacing-sm: $sp-4 !default;
......@@ -140,9 +118,7 @@ $header-height: 60px !default;
$search-results-width: $content-width - $nav-width !default;
$transition-duration: 400ms;
//
// Media queries in pixels
//
$media-queries: (
xs: 320px,
......
......@@ -10,7 +10,7 @@
$value: map-get($media-queries, $name);
// If the key exists in the map
@if $value != null {
@if $value {
// Prints a media query based on the value
@media (min-width: rem($value)) {
@content;
......
//
// Tables
//
// stylelint-disable max-nesting-depth, selector-no-type, selector-max-type
.table-wrapper {
......@@ -22,11 +20,9 @@ table {
th,
td {
@include fs-3;
min-width: 120px;
padding-top: $sp-2;
padding-right: $sp-3;
padding-bottom: $sp-2;
padding-left: $sp-3;
padding: $sp-2 $sp-3;
background-color: $table-background-color;
border-bottom: $border rgba($border-color, 0.5);
border-left: $border $border-color;
......
//
// Typography
//
// stylelint-disable primer/selector-no-utility, primer/no-override, selector-no-type, selector-max-type
// stylelint-disable selector-no-type, selector-max-type, selector-max-specificity, selector-max-id
h1,
.text-alpha {
@include fs-8;
font-weight: 300;
}
h2,
.text-beta {
.text-beta,
#toctitle {
@include fs-6;
}
......@@ -22,6 +22,7 @@ h3,
h4,
.text-delta {
@include fs-2;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.1em;
......@@ -34,13 +35,11 @@ h4 code {
h5,
.text-epsilon {
@include fs-3;
color: $grey-dk-200;
}
h6,
.text-zeta {
@include fs-2;
color: $grey-dk-200;
}
.text-small {
......
//
// Utility classes for colors
//
// Text colors
......
// stylelint-disable primer/selector-no-utility, primer/no-override
//
// Utility classes for layout
//
// Display
.d-block {
display: block !important;
}
.d-flex {
display: flex !important;
}
.d-inline {
display: inline !important;
}
.d-inline-block {
display: inline-block !important;
}
.d-none {
display: none !important;
}
......@@ -78,18 +79,23 @@
.v-align-baseline {
vertical-align: baseline !important;
}
.v-align-bottom {
vertical-align: bottom !important;
}
.v-align-middle {
vertical-align: middle !important;
}
.v-align-text-bottom {
vertical-align: text-bottom !important;
}
.v-align-text-top {
vertical-align: text-top !important;
}
.v-align-top {
vertical-align: top !important;
}
//
// Utility classes for lists
//
// stylelint-disable primer/selector-no-utility, primer/no-override, selector-max-type
// stylelint-disable selector-max-type
.list-style-none {
padding: 0 !important;
......
//
// Utility classes for margins and padding
//
// scss-lint:disable SpaceAfterPropertyName
// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility, primer/no-override
// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before
// Margin spacer utilities
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment