css cleanup

This commit is contained in:
Elisabeth Dickinson 2021-02-26 17:38:14 +01:00
parent 51d08f3c36
commit 9a019b40dd
4 changed files with 138 additions and 305 deletions

View File

@ -85,29 +85,7 @@
transform : $args;
}
//-- Material Design Icons
@mixin mdi-icon($content){
font-family: 'Material-Design-Icons';
content: $content;
display: inline-block;
text-rendering: geometricPrecision;
font-size: 1em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@mixin inline-icon($img-url, $size, $margin){
content: '';
display: inline-block;
width: $size;
height: $size;
vertical-align: middle;
background-size: contain;
background-repeat: no-repeat;
background-image: url($img-url);
margin: $margin;
}
//-- add icon
@mixin inline-icomoon($icon-content, $margin) {
content: '#{$icon-content}';

View File

@ -59,93 +59,6 @@ $color-epsilon-lightest : #FF8D63;
// Typography
// ===============================================
$fw_extralight : 200;
$fw_light : 300;
$fw_regular : 400;
$fw_medium : 500;
$fw_semibold : 600;
$fw_bold : 800;
$fw_extrabold : 900;
// Fonts
// ===============================================
// As a base font, we use bts4 native font stack:
// website/static/src/scss/primary_variables.scss
$font-family-serif: Georgia, "Times New Roman", Times, serif;
$o-website-values-palettes: (
(
"font-number": 1,
"headings-font-number": 2,
"navbar-font-number": 1,
"buttons-font-number": 1,
),
);
//------------------------------------------------------------------------------
// Website customizations
//------------------------------------------------------------------------------
$o-website-values-palettes: (
(
// Font
'font': 'Inter',
'headings-font': 'Inter',
'navbar-font': 'Inter',
'buttons-font': 'Inter',
'font-size-base': 0.875rem,
'link-underline': 'never',
'btn-ripple': true,
// Buttons
'btn-padding-y': 0.375rem,
'btn-padding-x': 0.75rem,
'btn-font-size': 0.875rem,
'btn-padding-y-sm': 0.25rem,
'btn-padding-x-sm': 0.375rem,
'btn-font-size-sm': .75rem,
'btn-padding-y-lg': 0.625rem,
'btn-padding-x-lg': 1rem,
'btn-font-size-lg': 1rem,
'btn-border-radius': 0.125rem,
'btn-border-radius-sm': 0.125rem,
'btn-border-radius-lg': 0.125rem,
// Inputs
'input-padding-y': 0.375rem,
'input-padding-x': 0.75rem,
'input-font-size': 0.875rem,
'input-padding-y-sm': 0.25rem,
'input-padding-x-sm': 0.375rem,
'input-font-size-sm': 0.75rem,
'input-padding-y-lg': 0.625rem,
'input-padding-x-lg': 1rem,
'input-font-size-lg': 1rem,
'input-border-radius': 0.125rem,
'input-border-radius-sm': 0.125rem,
'input-border-radius-lg': 0.125rem,
// Footer
'footer-effect': 'slideout_slide_hover',
),
);
//------------------------------------------------------------------------------
// Fonts
//------------------------------------------------------------------------------
$o-theme-font-configs: (
'Inter': (
'family': ('Inter', sans-serif),
'url': 'Inter:200,300,400,500,600,700,800,900',
)
);
$fw_extralight: 200;
$fw_light: 300;
@ -156,91 +69,6 @@ $fw_bold: 700;
$fw_extrabold: 800;
$fw_black: 900;
//------------------------------------------------------------------------------
// Colors
//------------------------------------------------------------------------------
$o-violet: #875a7b;
$o-violet-dark: #7A436B;
$o-violet-darkest: #64305E;
$o-inverse-lightest: #98a6b0;
$o-inverse-light: #8b979f;
$o-inverse: #47738f;
$o-inverse-dark: #5b7687;
$o-inverse-darker: #485761;
$color-alpha: #00A19B;
$color-alpha-dark: #00807D;
$color-alpha-light: #26d1af;
$color-alpha-lightest: #2aebc4;
$color-beta: #5b899e;
$color-beta-dark: #3d5d6b;
$color-beta-light: #699fb8;
$color-beta-lightest: #77b5d1;
$color-gamma: #e46f78;
$color-gamma-dark: #b0565c;
$color-gamma-light: #fc7c84;
$color-gamma-lightest: #fc959c;
$color-delta: #5c5b80;
$color-delta-dark: #37364d;
$color-delta-light: #6e6d99;
$color-delta-lightest: #807fb3;
$color-epsilon: #d5653e;
$color-epsilon-dark: #a34e2f;
$color-epsilon-light: #f07346;
$color-epsilon-lightest: #ff8d63;
$header-link-normal: #343a40;
$gray-lightest: #F9F9F9;
$gray-lighter: #F2F2F2;
$gray-light: #d5d5d5;
$gray: #888888;
$gray-dark: #707070;
$gray-darker: #282F33;
$gray-darkest: shade-color($gray-darker, 30%);
$primary: $color-alpha-dark;
$secondary: $o-violet-dark;
$brand-primary : $o-violet;
$brand-success : #50AF51;
$brand-info: #4B9EB6;
$brand-warning : #f39c1e;
$brand-danger : #D9534F;
$doc_paper_dark: $gray-lighter;
$doc_paper: #ffffff;
$doc_exercise: #938E94;
$doc_code-bg: #F8F8F8;
$doc_lime: #CDDC39;
$doc_orange: #FF5722;
$doc_cyan: $color-alpha;
//------------------------------------------------------------------------------
// Misc
//------------------------------------------------------------------------------
// Header
$o-header-height: 90px;
$o-side-nav-width: 350px;
$o-on-page-width: 25%;
$o-header-white: #ffffff;
// Paths and Prefixes
$website-img-base-url: "../img/";
$website-2x-prefix: "2x_";
// Animations and Transitions
$o-ease: cubic-bezier(.55,0,.1,1);
$font-size-secondary: .875rem;
//------------------------------------------------------------------------------
// icomoon icons
@ -332,3 +160,89 @@ $i-lightbulb: "\e921";
$i-check: "\e909";
$i-edit: "\e932";
//------------------------------------------------------------------------------
// Colors
//------------------------------------------------------------------------------
$o-violet: #875a7b;
$o-violet-dark: #7A436B;
$o-violet-darkest: #64305E;
$o-inverse-lightest: #98a6b0;
$o-inverse-light: #8b979f;
$o-inverse: #47738f;
$o-inverse-dark: #5b7687;
$o-inverse-darker: #485761;
$color-alpha: #00A19B;
$color-alpha-dark: #00807D;
$color-alpha-light: #26d1af;
$color-alpha-lightest: #2aebc4;
$color-beta: #5b899e;
$color-beta-dark: #3d5d6b;
$color-beta-light: #699fb8;
$color-beta-lightest: #77b5d1;
$color-gamma: #e46f78;
$color-gamma-dark: #b0565c;
$color-gamma-light: #fc7c84;
$color-gamma-lightest: #fc959c;
$color-delta: #5c5b80;
$color-delta-dark: #37364d;
$color-delta-light: #6e6d99;
$color-delta-lightest: #807fb3;
$color-epsilon: #d5653e;
$color-epsilon-dark: #a34e2f;
$color-epsilon-light: #f07346;
$color-epsilon-lightest: #ff8d63;
$header-link-normal: #343a40;
$gray-lightest: #F9F9F9;
$gray-lighter: #F2F2F2;
$gray-light: #d5d5d5;
$gray: #888888;
$gray-dark: #707070;
$gray-darker: #282F33;
$gray-darkest: shade-color($gray-darker, 30%);
$primary: $color-alpha-dark;
$secondary: $o-violet-dark;
$brand-primary : $o-violet;
$brand-success : #50AF51;
$brand-info: #4B9EB6;
$brand-warning : #f39c1e;
$brand-danger : #D9534F;
$doc_paper_dark: $gray-lighter;
$doc_paper: #ffffff;
$doc_exercise: #938E94;
$doc_code-bg: #F8F8F8;
$doc_lime: #CDDC39;
$doc_orange: #FF5722;
$doc_cyan: $color-alpha;
//------------------------------------------------------------------------------
// Misc
//------------------------------------------------------------------------------
// Header
$o-header-height: 90px;
$o-side-nav-width: 350px;
$o-on-page-width: 25%;
$o-header-white: #ffffff;
// Paths and Prefixes
$website-img-base-url: "../img/";
$website-2x-prefix: "2x_";
// Animations and Transitions
$o-ease: cubic-bezier(.55,0,.1,1);

View File

@ -9,13 +9,6 @@
$enable-shadows : true;
// Define common padding and border radius sizes and more.
$line-height-lg: 1.3333333 !default; // extra decimals for Win 8.1 Chrome
$line-height-sm: 1.3 !default;
$border-radius: 2rem / 16 !default;
$border-radius-lg: 2rem / 16 !default;
$border-radius-sm: 1rem / 16 !default;
// Fonts
//
// Font, line-height, and color for body text, headings, and more.
@ -27,18 +20,6 @@ $h4-font-size: 1rem;
$h5-font-size: 1rem;
$h6-font-size: $font-size-secondary;
/* $headings-font-weight: $fw_semibold !default; */
/* $display1-size: 5.5rem * 10 / 16 !default;
$display2-size: 4.5rem * 10 / 16 !default;
$display3-size: 3.5rem * 10 / 16 !default;
$display4-size: 3rem * 10 / 16 !default;
$display1-weight: $fw_semibold !default;
$display2-weight: $fw_semibold !default;
$display3-weight: $fw_semibold !default;
$display4-weight: $fw_semibold !default; */
$display-line-height: 1;
/* $blockquote-font-size: $font-size-base !default; */

View File

@ -174,6 +174,49 @@ header.o_main_header{
}
}
//------------------------------------------------------------------------------
// On this page local toctree
//------------------------------------------------------------------------------
aside.o_page_toc {
display: none;
@include font-size($font-size-secondary);
@include media-breakpoint-up(lg) {
display: block;
position: -webkit-sticky;
position: sticky;
top: $o-header-height;
right: 0;
width: $o-on-page-width;
height: calc(100% - #{$o-header-height});
padding: 3rem 3rem 3rem 0;
}
h3 {
text-transform: uppercase;
font-weight: $fw_bold;
color: $gray-darker;
padding-left: .5rem;
margin-bottom: 0;
}
a {
font-weight: $fw_regular;
color: $gray-darkest;
}
.o_page_toc_title {
display:none;
+ ul {
padding-left: 0;
}
}
.o_active_toc_entry > a {
font-weight: $fw_bold;
}
}
//------------------------------------------------------------------------------
// Main page content
//------------------------------------------------------------------------------
@ -268,7 +311,7 @@ header.o_main_header{
.toctree-l1 > a {
display: block;
color: $gray-darker;
font-size: 1.2rem;
@include font-size($h2-font-size);
padding-bottom: .5rem;
border-bottom: 1px solid $gray-light;
margin-bottom: 1rem;
@ -418,13 +461,15 @@ header.o_main_header{
a.headerlink {
visibility: hidden !important;
&:after {
@include inline-icomoon($i-link, 0 1rem 0 0);
content: '#{$i-link}';
font-family: $icomoon-font-family !important;
@include font-size($font-size-base);
vertical-align: middle;
margin: 0 1rem 0 0;
visibility: hidden;
font-size: 1rem;
color: $gray-light;
opacity: 0;
transition: .1s
@include o-transition(all, .1s)
}
}
// This makes permalinks only visible on hover.
@ -612,70 +657,16 @@ header.o_main_header{
}
}
}
//------------------------------------------------------------------------------
// On this page toc
//------------------------------------------------------------------------------
aside.o_page_toc {
display: none;
@include media-breakpoint-up(lg) {
display: block;
position: -webkit-sticky;
position: sticky;
top: $o-header-height;
right: 0;
width: $o-on-page-width;
height: calc(100% - #{$o-header-height});
padding: 3rem 3rem 3rem 1rem;
font-size: .9rem;
}
.o_page_toc_nav > ul {
padding-left: 0;
}
h3 {
text-transform: uppercase;
font-weight: $fw_bold;
font-size: 1rem;
color: $gray-darker;
}
ul {
list-style: none;
a {
display: block;
padding: .5rem 0;
font-weight: $fw_regular;
color: $gray-darker;
&.o_page_toc_title {
display:none;
+ ul {
padding-left: 0;
}
}
}
}
.o_active_toc_entry > a {
font-weight: $fw_bold;
}
}
}
//------------------------------------------------------------------------------
// Footer
//------------------------------------------------------------------------------
footer{
footer {
> div {
padding: 3rem;
@include media-breakpoint-up(lg) {
padding-left: calc(#{$o-side-nav-width} + 3rem)
}
}
@ -691,35 +682,4 @@ footer{
}
}
.o_footer_nav {
display: flex;
.o_footer_nav_title {
font-weight: $fw_regular;
text-transform: uppercase;
padding: 0 1rem;
}
.accordion {
.accordion-collapse {
border: none;
}
.accordion-body {
background: $gray-100;
> li > a {
font-weight: $fw-regular;
}
}
.accordion-button::after {
background-size: .8rem;
width: .8rem;
height: .8rem;
}
}
}
}
}