breaking(css-theme): Big changes in CSS for new site layout and menu
This commit is contained in:
Joost De Cock
parent
c0ffb5213c
commit
5b6e97de16
20 changed files with 286 additions and 757 deletions
|
|
@ -1,12 +1,11 @@
|
|||
@import 'components/navbar';
|
||||
@import 'components/draft';
|
||||
@import 'components/draft-configurator';
|
||||
@import 'components/draft-design';
|
||||
@import 'components/topicstoc';
|
||||
@import 'components/breadcrumbs';
|
||||
@import 'components/event';
|
||||
@import 'components/example';
|
||||
@import 'components/fab';
|
||||
@import 'components/main-menu';
|
||||
@import 'components/spinner';
|
||||
@import 'components/linedrawing';
|
||||
@import 'components/modelgraph';
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
@import "elements/a";
|
||||
@import "elements/footer";
|
||||
@import "elements/ul";
|
||||
@import "elements/code";
|
||||
@import "elements/blockquote";
|
||||
@import "elements/figure";
|
||||
@import "elements/table";
|
||||
@import "elements/button";
|
||||
@import "elements/jargon";
|
||||
@import 'elements/a';
|
||||
@import 'elements/ul';
|
||||
@import 'elements/code';
|
||||
@import 'elements/blockquote';
|
||||
@import 'elements/figure';
|
||||
@import 'elements/table';
|
||||
@import 'elements/button';
|
||||
@import 'elements/jargon';
|
||||
@import 'elements/mark';
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
@import "layout/section-aside";
|
||||
@import "layout/menu-toc";
|
||||
|
||||
|
|
@ -15,18 +15,28 @@
|
|||
}
|
||||
|
||||
@mixin body-font {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
||||
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
font-family: Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
|
||||
Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
font-weight: 300;
|
||||
}
|
||||
@mixin title-font {
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-family: 'Ubuntu', sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
@mixin button-font {
|
||||
font-family: 'Roboto Condensed', sans-serif;
|
||||
font-family: 'Ubuntu', sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
@mixin fixed-font {
|
||||
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
font-family: 'Roboto mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,
|
||||
monospace;
|
||||
}
|
||||
@mixin scribble-font {
|
||||
font-family: 'Permanent Marker', cursive;
|
||||
}
|
||||
@mixin title-color-light {
|
||||
color: $oc-gray-7;
|
||||
}
|
||||
@mixin title-color-dark {
|
||||
color: $oc-gray-4;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ code[class*='language-'],
|
|||
pre[class*='language-'] {
|
||||
color: #c5c8c6;
|
||||
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
|
||||
font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
|
||||
font-family: 'Roboto mono', Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ body {
|
|||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
scroll-behavior: smooth;
|
||||
font-family: Ubuntu;
|
||||
font-weight: 300;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
|
|
|
|||
|
|
@ -7,46 +7,46 @@ h6,
|
|||
button {
|
||||
@include title-font;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $oc-gray-7;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 200;
|
||||
font-weight: 700;
|
||||
margin: 1rem 0 2rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2.5rem;
|
||||
border-top: 1px solid $oc-gray-4;
|
||||
margin: 3.5rem 0 1rem;
|
||||
padding: 1rem 0 1rem;
|
||||
font-weight: 300;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.theme-wrapper.dark h2 {
|
||||
border-color: $oc-gray-7;
|
||||
}
|
||||
h2.bare {
|
||||
border: none;
|
||||
margin: 0;
|
||||
}
|
||||
h3 {
|
||||
font-size: 2rem;
|
||||
margin: 1.75rem 0 1rem;
|
||||
font-weight: 300;
|
||||
font-weight: 700;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.75rem;
|
||||
margin: 1.5rem 0 0.75rem;
|
||||
font-weight: 300;
|
||||
font-weight: 500;
|
||||
}
|
||||
h5 {
|
||||
font-size: 1.5rem;
|
||||
margin: 1.25rem 0 0.5rem;
|
||||
font-weight: 400;
|
||||
font-weight: 500;
|
||||
}
|
||||
h6 {
|
||||
font-size: 1.25rem;
|
||||
margin: 1rem 0 0.25rem;
|
||||
font-weight: 400;
|
||||
font-weight: 500;
|
||||
}
|
||||
h2 a.anchor,
|
||||
h3 a.anchor,
|
||||
|
|
@ -56,6 +56,26 @@ h6 a.anchor {
|
|||
margin-left: -20px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.theme-wrapper.light {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
@include title-color-light;
|
||||
}
|
||||
}
|
||||
.theme-wrapper.dark {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
@include title-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
@include sm-screen {
|
||||
h1 {
|
||||
|
|
|
|||
|
|
@ -44,3 +44,7 @@
|
|||
.poh:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.scribble {
|
||||
font-family: 'Permanent marker';
|
||||
color: $oc-pink-5;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ $fc-blue: '#74c0fc';
|
|||
$fc-text-light: $oc-gray-9;
|
||||
$fc-text-dark: $oc-gray-0;
|
||||
$fc-bg-light: $oc-gray-0;
|
||||
$fc-bg-dark: $oc-gray-9;
|
||||
$fc-bg-dark: darken($oc-gray-9, 3);
|
||||
$fc-altbg-light: $oc-gray-1;
|
||||
$fc-altbg-dark: $oc-gray-8;
|
||||
$fc-notice-light: $oc-yellow-7;
|
||||
|
|
|
|||
|
|
@ -4,6 +4,9 @@ nav.breadcrumbs {
|
|||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
font-size: 95%;
|
||||
font-weight: 500;
|
||||
@include title-color-light;
|
||||
line-height: 1.1;
|
||||
li {
|
||||
list-style-type: none;
|
||||
display: inline-block;
|
||||
|
|
@ -14,8 +17,12 @@ nav.breadcrumbs {
|
|||
}
|
||||
li:before {
|
||||
content: '»';
|
||||
padding: 0 0.25rem;
|
||||
padding: 0 0.5rem;
|
||||
font-size: 125%;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
.theme-wrapper.dark nav.breadcrumbs ul {
|
||||
@include title-color-dark;
|
||||
}
|
||||
|
|
|
|||
158
packages/css-theme/src/components/_main-menu.scss
Normal file
158
packages/css-theme/src/components/_main-menu.scss
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
ul#main-menu {
|
||||
margin: 0;
|
||||
padding: 2rem 0;
|
||||
li {
|
||||
display: block;
|
||||
a {
|
||||
display: block;
|
||||
padding: 0.1rem 1rem;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
background: $oc-gray-2;
|
||||
}
|
||||
}
|
||||
> li {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
a {
|
||||
color: $oc-gray-7;
|
||||
svg {
|
||||
padding-right: 0.5rem;
|
||||
margin-bottom: -2px;
|
||||
color: $oc-violet-5;
|
||||
}
|
||||
}
|
||||
a.active {
|
||||
border-left: 4px solid $oc-green-5;
|
||||
svg {
|
||||
color: $oc-gray-7;
|
||||
}
|
||||
}
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
ul[class^='level-'] {
|
||||
> li {
|
||||
line-height: 1.5;
|
||||
> a {
|
||||
padding: 0;
|
||||
font-weight: 300;
|
||||
text-transform: none;
|
||||
}
|
||||
> a:before {
|
||||
content: '';
|
||||
background-color: currentColor;
|
||||
border-radius: 50%;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
display: inline-block;
|
||||
margin-right: 0.5rem;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
> a:hover:before {
|
||||
color: $oc-violet-4;
|
||||
}
|
||||
> a.active {
|
||||
font-weight: 500;
|
||||
background-color: $oc-gray-3;
|
||||
border-left: none;
|
||||
}
|
||||
> a.active:before {
|
||||
background-color: $oc-green-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
ul.level-1 > li {
|
||||
> a {
|
||||
padding: 0.1rem 0.5rem 0.1rem 1.5rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
> a:before {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
}
|
||||
}
|
||||
ul.level-2 > li {
|
||||
> a {
|
||||
padding: 0.3rem 0.5rem 0.3rem 3rem;
|
||||
font-size: 1.15rem;
|
||||
line-height: 1;
|
||||
}
|
||||
> a:before {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
}
|
||||
}
|
||||
ul.level-3 > li {
|
||||
> a {
|
||||
padding-left: 4rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
> a:before {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
}
|
||||
ul.level-4 > li {
|
||||
> a {
|
||||
padding-left: 5rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
> a:before {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
line-height: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include sm-screen {
|
||||
ul#main-menu {
|
||||
padding: 1rem 0;
|
||||
li a {
|
||||
padding: 0.1rem 0.5rem;
|
||||
font-size: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.theme-wrapper.dark ul#main-menu {
|
||||
li {
|
||||
a:hover {
|
||||
background: $oc-gray-9;
|
||||
}
|
||||
}
|
||||
> li {
|
||||
a {
|
||||
color: $oc-gray-4;
|
||||
svg {
|
||||
color: $oc-violet-3;
|
||||
}
|
||||
}
|
||||
a.active {
|
||||
border-left: 4px solid $oc-green-4;
|
||||
svg {
|
||||
color: $oc-gray-4;
|
||||
}
|
||||
}
|
||||
}
|
||||
ul[class^='level-'] {
|
||||
> li {
|
||||
> a:hover:before {
|
||||
color: $oc-violet-3;
|
||||
}
|
||||
> a.active {
|
||||
background-color: $oc-gray-8;
|
||||
border-left: none;
|
||||
}
|
||||
> a.active:before {
|
||||
background-color: $oc-green-4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,126 +0,0 @@
|
|||
header.navbar {
|
||||
height: 64px;
|
||||
width: calc(100% - 52px);
|
||||
margin: 0;
|
||||
padding: 0 26px;
|
||||
background: $fc-bg-dark;
|
||||
z-index: 15;
|
||||
div {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
div.logo {
|
||||
height: 64px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-right: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $oc-gray-2;
|
||||
a {
|
||||
text-decoration: none;
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
}
|
||||
}
|
||||
div.emblem {
|
||||
margin-right: 26px;
|
||||
a {
|
||||
text-decoration: none !important;
|
||||
@include button-font;
|
||||
font-size: 26px;
|
||||
span.lem {
|
||||
color: $oc-gray-2;
|
||||
}
|
||||
span.emb {
|
||||
color: $fc-link-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
div.spread {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
a.nav,
|
||||
button {
|
||||
@include button-font;
|
||||
text-decoration: none !important;
|
||||
margin: 0;
|
||||
padding: 0 13px;
|
||||
height: 60px;
|
||||
color: $fc-text-dark !important;
|
||||
border: 0;
|
||||
line-height: 64px;
|
||||
border-bottom: 4px solid $fc-bg-dark;
|
||||
font-size: 18px;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease, border-color 0.2s ease-in-out;
|
||||
background: none;
|
||||
}
|
||||
button {
|
||||
/* For buttons, border does not count for height */
|
||||
height: 64px;
|
||||
}
|
||||
button:hover,
|
||||
a.nav:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
button:hover,
|
||||
a.nav:hover,
|
||||
button.active,
|
||||
a.nav.active {
|
||||
color: $fc-link-dark;
|
||||
border-color: $fc-link-dark;
|
||||
}
|
||||
svg.nav-icon {
|
||||
margin-right: 5px;
|
||||
margin-bottom: -6px;
|
||||
}
|
||||
svg.nav-icon.moon {
|
||||
transform: rotate(26deg);
|
||||
}
|
||||
}
|
||||
|
||||
header.navbar > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@include xs-screen {
|
||||
header.navbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include sm-screen {
|
||||
header.navbar {
|
||||
height: 54px;
|
||||
width: calc(100% - 36px);
|
||||
padding: 0 18px;
|
||||
> div {
|
||||
height: 54px;
|
||||
}
|
||||
div.logo,
|
||||
div.emblem {
|
||||
margin-right: 12px;
|
||||
}
|
||||
div.logo a {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
div.emblem a {
|
||||
font-size: 22px;
|
||||
}
|
||||
a.nav {
|
||||
padding: 0 6px;
|
||||
line-height: 54px;
|
||||
height: 50px;
|
||||
}
|
||||
button {
|
||||
padding: 0 6px;
|
||||
height: 54px;
|
||||
line-height: 54px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,127 +0,0 @@
|
|||
ul.topics {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
ul.topics:first-child { padding-top: 1rem; }
|
||||
ul.topics:last-child { padding-bottom: 1rem; }
|
||||
ul.topics > li {
|
||||
@include title-font;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
a.topic {
|
||||
display: block;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-left: 4px solid transparent;
|
||||
color: $fc-text-light!important;
|
||||
}
|
||||
a.topic:hover {
|
||||
background: $oc-gray-5;
|
||||
text-decoration: none!important;
|
||||
}
|
||||
}
|
||||
ul.topics > li.inactive {
|
||||
font-weight: normal;
|
||||
}
|
||||
ul.topics > li.active {
|
||||
font-weight: bold;
|
||||
a.topic {
|
||||
border-left: 4px solid $fc-text-light;
|
||||
}
|
||||
}
|
||||
|
||||
.theme-wrapper.light ul.topic-links a { color: $fc-text-light; }
|
||||
.theme-wrapper.dark ul.topic-links a { color: $fc-text-dark; }
|
||||
.theme-wrapper.light ul.topic-links ul.links a { color: $fc-link-light; }
|
||||
.theme-wrapper.dark ul.topic-links ul.links a { color: $fc-link-dark; }
|
||||
|
||||
ul.topic-links {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
li { list-style-type: none; }
|
||||
}
|
||||
ul.topic-links li {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
ul.topic-links.level-1 > li {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
ul.topic-links ul.links {
|
||||
margin-left: 1rem;
|
||||
padding: 0;
|
||||
li {
|
||||
padding-left: 0.5rem;
|
||||
color: $fc-link-light;
|
||||
}
|
||||
}
|
||||
|
||||
ul.topic-links a {
|
||||
color: $fc-text-light;
|
||||
font-weight: normal;
|
||||
}
|
||||
ul.topic-links a.active {
|
||||
font-weight: bold;
|
||||
}
|
||||
.theme-wrapper.dark ul.topic-links a {
|
||||
color: $fc-text-dark;
|
||||
}
|
||||
|
||||
.theme-wrapper.dark ul.topics > li.active a.topic {
|
||||
border-color: $fc-text-dark;
|
||||
}
|
||||
ul.opics > li > ul.topics.l1 {
|
||||
font-weight: normal;
|
||||
a {
|
||||
color: $fc-text-light!important;
|
||||
padding-left: 2.5rem;
|
||||
display: block;
|
||||
}
|
||||
a:hover {
|
||||
background: $oc-gray-3;
|
||||
text-decoration: none!important;
|
||||
}
|
||||
li.active a {
|
||||
font-weight: bold;
|
||||
}
|
||||
ul.links {
|
||||
margin-left: 1.5rem;
|
||||
> li > a {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
color: $fc-link-light!important;
|
||||
font-weight: normal;
|
||||
}
|
||||
> li > a:hover {
|
||||
text-decoration: underline!important;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.theme-wrapper.dark {
|
||||
ul.topics > li {
|
||||
a.topic {
|
||||
color: $fc-text-dark!important;
|
||||
}
|
||||
a.topic:hover {
|
||||
background: $oc-gray-6;
|
||||
}
|
||||
}
|
||||
ul.topics > li > ul.topics.l1 {
|
||||
a {
|
||||
color: $fc-text-dark!important;
|
||||
}
|
||||
a:hover {
|
||||
background: $oc-gray-7;
|
||||
}
|
||||
ul.links {
|
||||
> li > a {
|
||||
color: $fc-link-dark!important;
|
||||
}
|
||||
> li > a:hover {
|
||||
text-decoration: underline!important;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -3,19 +3,18 @@ blockquote {
|
|||
border-radius: 4px;
|
||||
margin: 2rem auto;
|
||||
padding: 1.5rem;
|
||||
background: $oc-gray-1;
|
||||
border: 1px solid $oc-gray-2;
|
||||
background: #fff;
|
||||
border: 2px solid $oc-gray-2;
|
||||
position: relative;
|
||||
svg.icon {
|
||||
color: $oc-gray-7;
|
||||
color: $oc-gray-0;
|
||||
position: absolute;
|
||||
top: calc(50% - 18px);
|
||||
left: -18px;
|
||||
padding: 5px;
|
||||
background: inherit;
|
||||
border-radius: 50%;
|
||||
border: 1px solid transparent;
|
||||
border-color: inherit;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
blockquote > :first-child {
|
||||
|
|
@ -26,33 +25,26 @@ blockquote > p:last-of-type {
|
|||
}
|
||||
|
||||
blockquote.note {
|
||||
background: lighten($oc-violet-0, 1);
|
||||
border-color: $oc-violet-2;
|
||||
border-color: $oc-indigo-2;
|
||||
svg.icon.note {
|
||||
color: $oc-gray-0;
|
||||
background: $oc-violet-6;
|
||||
background-color: $oc-indigo-5;
|
||||
}
|
||||
}
|
||||
blockquote.tip {
|
||||
background: lighten($oc-yellow-0, 1);
|
||||
border-color: $oc-yellow-3;
|
||||
border-color: $oc-green-2;
|
||||
svg.icon.tip {
|
||||
color: $oc-gray-0;
|
||||
background: $oc-yellow-6;
|
||||
background-color: $oc-green-5;
|
||||
}
|
||||
}
|
||||
blockquote.warning {
|
||||
background: $oc-red-0;
|
||||
border-color: $oc-red-3;
|
||||
border-color: $oc-orange-2;
|
||||
svg.icon.warning {
|
||||
color: $oc-gray-0;
|
||||
background: $oc-red-7;
|
||||
background-color: $oc-orange-5;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote.fixme {
|
||||
border: 1px $oc-orange-6 dashed;
|
||||
background: transparent;
|
||||
border: 2px $oc-yellow-3 dashed;
|
||||
}
|
||||
blockquote.fixme:after {
|
||||
@include title-font;
|
||||
|
|
@ -61,8 +53,8 @@ blockquote.fixme:after {
|
|||
position: absolute;
|
||||
bottom: -25px;
|
||||
left: 20px;
|
||||
color: #fff;
|
||||
background: $oc-orange-6;
|
||||
color: $oc-gray-8;
|
||||
background: $oc-yellow-3;
|
||||
padding: 4px 8px;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
|
|
@ -92,39 +84,34 @@ blockquote.fixme:after {
|
|||
|
||||
.theme-wrapper.dark {
|
||||
blockquote {
|
||||
background: $oc-gray-8;
|
||||
background: $oc-gray-9;
|
||||
border-color: $oc-gray-7;
|
||||
> svg.icon {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
blockquote.note {
|
||||
background: darken($oc-violet-9, 30);
|
||||
border-color: $oc-violet-9;
|
||||
border-color: $oc-indigo-9;
|
||||
svg.icon.note {
|
||||
color: $oc-gray-0;
|
||||
background: $oc-violet-9;
|
||||
background-color: $oc-indigo-9;
|
||||
}
|
||||
}
|
||||
blockquote.tip {
|
||||
background: darken($oc-yellow-9, 35);
|
||||
border-color: $oc-yellow-9;
|
||||
border-color: $oc-green-9;
|
||||
svg.icon.tip {
|
||||
color: $oc-gray-0;
|
||||
background: $oc-yellow-9;
|
||||
background-color: $oc-green-9;
|
||||
}
|
||||
}
|
||||
blockquote.warning {
|
||||
background: darken($oc-red-9, 30);
|
||||
border-color: $oc-red-9;
|
||||
border-color: $oc-orange-9;
|
||||
svg.icon.warning {
|
||||
color: $oc-gray-0;
|
||||
background: $oc-red-9;
|
||||
background-color: $oc-orange-9;
|
||||
}
|
||||
}
|
||||
blockquote.fixme {
|
||||
border: 1px $oc-orange-6 dashed;
|
||||
background: transparent;
|
||||
border: 2px $oc-yellow-3 dashed;
|
||||
}
|
||||
}
|
||||
|
||||
@include xs-screen {
|
||||
.theme-wrapper.dark blockquote.fixme {
|
||||
border-left: 0;
|
||||
|
|
|
|||
|
|
@ -1,40 +0,0 @@
|
|||
footer {
|
||||
@include button-font;
|
||||
font-size: 90%;
|
||||
background: $fc-bg-dark;
|
||||
color: $fc-text-dark;
|
||||
margin: 0;
|
||||
padding: 4rem 1rem;
|
||||
text-align: center;
|
||||
a {
|
||||
color: $fc-text-dark !important;
|
||||
}
|
||||
a:hover {
|
||||
color: $fc-link-dark !important;
|
||||
}
|
||||
a.discord:hover {
|
||||
color: #2a5ee8 !important;
|
||||
}
|
||||
a.twitter:hover {
|
||||
color: #1da1f2 !important;
|
||||
}
|
||||
a.github:hover {
|
||||
color: #6cc644 !important;
|
||||
}
|
||||
a.instagram:hover {
|
||||
color: #e1306c !important;
|
||||
}
|
||||
a.facebook:hover {
|
||||
color: #3b5998 !important;
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
p.social {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,23 +1,17 @@
|
|||
.jargon-term {
|
||||
text-decoration: underline dashed $fc-link-light;
|
||||
background: $oc-cyan-0;
|
||||
text-decoration: none;
|
||||
}
|
||||
.jargon-term::after {
|
||||
content: "?";
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
transform: translate(0, -0.5em);
|
||||
font-size: 75%;
|
||||
color: $fc-link-light;
|
||||
margin-left: 3px;
|
||||
.jargon-term:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.jargon-term:hover {
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
cursor: help;
|
||||
}
|
||||
.jargon-term .jargon-info {
|
||||
display: none
|
||||
display: none;
|
||||
}
|
||||
.jargon-term:hover .jargon-info {
|
||||
display: block;
|
||||
|
|
@ -26,7 +20,7 @@
|
|||
left: 0;
|
||||
background: $fc-bg-light;
|
||||
color: $fc-text-light;
|
||||
border: 1px solid #DCDCDC;
|
||||
border: 1px solid #dcdcdc;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
font-size: 90%;
|
||||
|
|
@ -36,16 +30,12 @@
|
|||
}
|
||||
.theme-wrapper.dark {
|
||||
.jargon-term {
|
||||
text-decoration: underline dashed $fc-link-dark;
|
||||
}
|
||||
.jargon-term::after {
|
||||
color: $fc-link-dark;
|
||||
background: $oc-cyan-9;
|
||||
text-decoration: none;
|
||||
}
|
||||
.jargon-term:hover .jargon-info {
|
||||
background: $fc-bg-dark;
|
||||
color: $fc-text-dark;
|
||||
border: 1px solid #5A5A5A;
|
||||
border: 1px solid #5a5a5a;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
10
packages/css-theme/src/elements/_mark.scss
Normal file
10
packages/css-theme/src/elements/_mark.scss
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
mark {
|
||||
background: $oc-green-2 + aa;
|
||||
color: inherit;
|
||||
}
|
||||
.theme-wrapper.dark {
|
||||
mark {
|
||||
background: #176226;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
@include xs-screen {
|
||||
.theme-wrapper.light div.fs-sa aside,
|
||||
.theme-wrapper.dark div.fs-sa aside,
|
||||
.theme-wrapper.light div.draft-ui-menu,
|
||||
.theme-wrapper.dark div.draft-ui-menu,
|
||||
.theme-wrapper.light div.menu,
|
||||
.theme-wrapper.dark div.menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
padding: 0 0 1rem;
|
||||
max-width: 600px;
|
||||
z-index: -10;
|
||||
transition: opacity 0.5s ease 0s;
|
||||
opacity: 0;
|
||||
overflow: scroll;
|
||||
> ul,
|
||||
> div {
|
||||
transform: translate(0px, 20px);
|
||||
transition: transform 0.5s ease 0s;
|
||||
}
|
||||
}
|
||||
}
|
||||
.theme-wrapper.show-toc div.fs-sa aside {
|
||||
opacity: 1;
|
||||
z-index: 10;
|
||||
> ul {
|
||||
transform: translate(0px, 0px);
|
||||
}
|
||||
}
|
||||
|
||||
.theme-wrapper.light div.draft-ui-menu,
|
||||
.theme-wrapper.light div.menu {
|
||||
background: $oc-gray-1;
|
||||
}
|
||||
.theme-wrapper.dark div.draft-ui-menu,
|
||||
.theme-wrapper.dark div.menu {
|
||||
background: $oc-gray-8;
|
||||
}
|
||||
.theme-wrapper.show-menu div.menu {
|
||||
opacity: 1;
|
||||
z-index: 10;
|
||||
> div {
|
||||
transform: translate(0px, 0px);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,312 +0,0 @@
|
|||
div.fs-sa {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
max-width: 1600px;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> section {
|
||||
width: calc(100% - 300px - 4rem);
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
aside {
|
||||
padding: 0;
|
||||
width: 300px;
|
||||
}
|
||||
aside div.sticky {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: calc(100vh - 64px);
|
||||
overflow-y: auto;
|
||||
ul.links {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
aside div.aside-context {
|
||||
padding: 0;
|
||||
h5 {
|
||||
padding: 1.5rem 1rem 0.5rem 1rem;
|
||||
a {
|
||||
margin-left: -1rem;
|
||||
margin-right: -1rem;
|
||||
padding: 0.25rem 0 0 1rem;
|
||||
}
|
||||
}
|
||||
h6 {
|
||||
padding: 0.25rem 0 0 1rem;
|
||||
a {
|
||||
margin-left: -1rem;
|
||||
margin-right: 0;
|
||||
padding: 0.25rem 0 0 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
color: $oc-gray-6;
|
||||
}
|
||||
ol,
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
li > a {
|
||||
padding: 0.25rem 1rem 0.25rem 1.5rem;
|
||||
}
|
||||
li > a.level-2 {
|
||||
padding: 0.125rem 0.25rem 0.125rem 2.25rem;
|
||||
}
|
||||
li > a.level-3 {
|
||||
padding: 0 0.25rem 0 3.75rem;
|
||||
}
|
||||
}
|
||||
aside ul.aside-main-menu {
|
||||
margin: 2rem 0 1rem;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
li {
|
||||
text-transform: uppercase;
|
||||
font-family: 'Roboto condensed';
|
||||
line-height: 2;
|
||||
font-size: 1.25rem;
|
||||
a {
|
||||
font-weight: 900;
|
||||
padding: 0.25rem 0;
|
||||
display: block;
|
||||
svg {
|
||||
margin: 5px 1rem -5px;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
section {
|
||||
article > div.text-section {
|
||||
/* I've got 99 problems but too long text lines ain't on */
|
||||
max-width: 99ch;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.theme-wrapper.light > div.fs-sa > aside > div.sticky {
|
||||
ul li {
|
||||
a {
|
||||
color: $oc-gray-7;
|
||||
svg {
|
||||
color: $oc-violet-5;
|
||||
}
|
||||
}
|
||||
a:hover {
|
||||
background-color: $oc-violet-0;
|
||||
text-decoration: none;
|
||||
}
|
||||
a.active {
|
||||
background-color: $oc-violet-0;
|
||||
svg {
|
||||
color: $oc-gray-7;
|
||||
}
|
||||
}
|
||||
}
|
||||
div.aside-context {
|
||||
a {
|
||||
color: $oc-gray-7 !important;
|
||||
font-family: 'Roboto condensed';
|
||||
display: block;
|
||||
}
|
||||
a:hover {
|
||||
background-color: $oc-violet-0;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.theme-wrapper.dark > div.fs-sa > aside > div.sticky {
|
||||
ul li {
|
||||
a {
|
||||
color: $oc-gray-4;
|
||||
svg {
|
||||
color: $oc-violet-4;
|
||||
}
|
||||
}
|
||||
a:hover {
|
||||
background-color: $oc-gray-8;
|
||||
text-decoration: none;
|
||||
}
|
||||
a.active {
|
||||
background-color: $oc-gray-8;
|
||||
svg {
|
||||
color: $oc-gray-4;
|
||||
}
|
||||
}
|
||||
}
|
||||
div.aside-context {
|
||||
a {
|
||||
color: $oc-gray-4 !important;
|
||||
font-family: 'Roboto condensed';
|
||||
display: block;
|
||||
}
|
||||
a:hover {
|
||||
background-color: $oc-gray-8;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.theme-wrapper.dark {
|
||||
div.fs-sa {
|
||||
> section {
|
||||
background: $oc-gray-9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include sm-screen {
|
||||
div.fs-sa {
|
||||
> section {
|
||||
width: calc(100% - 200px - 3rem);
|
||||
padding: 1rem;
|
||||
}
|
||||
aside {
|
||||
padding: 0;
|
||||
width: 200px;
|
||||
}
|
||||
aside div.aside-context {
|
||||
h5 {
|
||||
padding: 1rem 0.5rem 0.5rem 0.5rem;
|
||||
a {
|
||||
margin-left: -0.5rem;
|
||||
margin-right: -0.5rem;
|
||||
padding: 0.25rem 0 0 0.5rem;
|
||||
}
|
||||
}
|
||||
h6 {
|
||||
padding: 0.25rem 0 0 0.5rem;
|
||||
a {
|
||||
margin-left: -0.5rem;
|
||||
margin-right: 0;
|
||||
padding: 0.25rem 0 0 0.5rem;
|
||||
}
|
||||
}
|
||||
li > a {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
}
|
||||
aside ul.aside-main-menu {
|
||||
margin: 1rem 0;
|
||||
li {
|
||||
font-family: 'Roboto condensed';
|
||||
line-height: 2;
|
||||
font-size: 1rem;
|
||||
a {
|
||||
padding: 0.15rem 0;
|
||||
svg {
|
||||
margin: 5px 0.5rem -5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include xs-screen {
|
||||
ul.aside-main-menu {
|
||||
margin: 0 0 1rem;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
li {
|
||||
text-transform: uppercase;
|
||||
font-family: 'Roboto condensed';
|
||||
line-height: 2;
|
||||
font-size: 1.25rem;
|
||||
a {
|
||||
font-weight: 900;
|
||||
padding: 0.25rem 0;
|
||||
display: block;
|
||||
svg {
|
||||
margin: 5px 1rem -5px;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.theme-wrapper.light ul.aside-main-menu {
|
||||
li a {
|
||||
color: $oc-gray-9 !important;
|
||||
}
|
||||
}
|
||||
.theme-wrapper.dark ul.aside-main-menu {
|
||||
li a {
|
||||
color: $oc-gray-0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
div.fs-sa {
|
||||
> section {
|
||||
width: calc(100% - 2rem);
|
||||
padding: 1rem;
|
||||
}
|
||||
aside {
|
||||
padding: 0;
|
||||
width: 200px;
|
||||
}
|
||||
aside div.aside-context {
|
||||
h5 {
|
||||
padding: 1rem 0.5rem 0.5rem 0.5rem;
|
||||
a {
|
||||
margin-left: -0.5rem;
|
||||
margin-right: -0.5rem;
|
||||
padding: 0.25rem 0 0 0.5rem;
|
||||
}
|
||||
}
|
||||
h6 {
|
||||
padding: 0.25rem 0 0 0.5rem;
|
||||
a {
|
||||
margin-left: -0.5rem;
|
||||
margin-right: 0;
|
||||
padding: 0.25rem 0 0 0.5rem;
|
||||
}
|
||||
}
|
||||
li > a {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
div.context-wrapper {
|
||||
font-family: 'Roboto condensed';
|
||||
padding: 1rem;
|
||||
h5 {
|
||||
padding: 1rem 0 0.5rem 0;
|
||||
margin: 0;
|
||||
line-height: 1.25;
|
||||
a {
|
||||
padding: 0.25rem 0 0 1rem;
|
||||
}
|
||||
}
|
||||
h6 {
|
||||
padding: 0.5rem 0 0.25rem 0;
|
||||
margin: 0;
|
||||
a {
|
||||
padding: 0.25rem 0 0 1rem;
|
||||
}
|
||||
}
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
color: $oc-gray-6;
|
||||
}
|
||||
ol,
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
li > a {
|
||||
padding: 0.25rem 1rem 0.25rem 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +1,11 @@
|
|||
@import "reset";
|
||||
@import 'reset';
|
||||
@import '../../../node_modules/open-color/open-color.scss';
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
@import "prism";
|
||||
@import "theme-wrapper";
|
||||
@import "typography";
|
||||
@import "layout";
|
||||
@import "scroll";
|
||||
@import "components";
|
||||
@import "elements";
|
||||
@import "utility";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'prism';
|
||||
@import 'theme-wrapper';
|
||||
@import 'typography';
|
||||
@import 'scroll';
|
||||
@import 'components';
|
||||
@import 'elements';
|
||||
@import 'utility';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue