Draft: Style 2021

themes/rc3/css/base.css

 @font-face {
-    font-family: 'orbitronregular';
-    src: url('../fonts/orbitron-variablefont_wght-webfont.woff2') format('woff2'),
-         url('../fonts/orbitron-variablefont_wght-webfont.woff') format('woff');
-    font-weight: normal;
+    font-family: 'changa-semibold';
+    src: url('../fonts/Changa-SemiBold.woff2') format('woff2');
+    font-weight: bold;
     font-style: normal;
 }
 
 @font-face {
-    font-family: 'montserratbold';
-    src: url('../fonts/montserrat-bold-webfont.woff2') format('woff2'),
-         url('../fonts/montserrat-bold-webfont.woff') format('woff');
-    font-weight: normal;
+    font-family: 'space-mono-reg';
+    src: url('../fonts/SpaceMono-Regular-webfont.woff') format('woff2');
+    font-weight: 400;
     font-style: normal;
 }
 
 @font-face {
-    font-family: 'montserratitalic';
-    src: url('../fonts/montserrat-italic-webfont.woff2') format('woff2'),
-         url('../fonts/montserrat-italic-webfont.woff') format('woff');
-    font-weight: normal;
+    font-family: 'space-mono-bold';
+    src: url('../fonts/SpaceMono-Bold-webfont.woff') format('woff2');
+    font-weight: 700;
     font-style: normal;
 }
 
 @font-face {
-    font-family: 'montserratregular';
-    src: url('../fonts/montserrat-regular-webfont.woff2') format('woff2'),
-         url('../fonts/montserrat-regular-webfont.woff') format('woff');
+    font-family: 'space-mono-bold-ital';
+    src: url('../fonts/SpaceMono-BoldItalic-webfont.woff') format('woff2');
+    font-weight: 700;
+    font-style: italic;
+}
+
+/* @font-face {
+    font-family: 'FontAwesome';
+    src: url('../fonts/fontawesome-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;
-}
+} */
 
 
 :root {
+    --primary-c1: rgba(255, 255, 255, 1);
+    --primary-c2: rgba(76, 76, 76, 1);
+    --primary-c3: rgba(0, 0, 0, 1);
+
+    --bg-color: rgba(0, 0, 0, 0.2);
+
+    --font-space: 0.075em;
+    --font-lineheight: 1.5;
+    --font-base: 1rem;
+
     --primary-c1: #f00efa;
     --primary-c2: rgba(104, 0, 231, 1);
     --primary-c3: #4ce9f8;
@@ -55,7 +68,14 @@
     --secondary-c3: rgba(255, 235, 216, 1);
     --secondary-c4: rgba(1, 2, 42, 1);
 
+    --border-radius: 0;
 
+    /* font Vars */
+    --font-h: 'changa-semibold';
+    --font-reg: 'space-mono-reg';
+    --font-bold: 'space-mono-bold';
+    --font-bold-ital: 'space-mono-bold-ital';
+    /* --font-icon: 'FontAwesome'; */
 }
 
 
@@ -64,17 +84,17 @@ html {
     /* The nav header is 3.5rem high, plus 20px for the margin-top of the
        main container. */
     scroll-padding-top: calc(3.5rem + 20px);
-    background-color: var(--primary-c4);
-    font-size: 100%;
+    background-color: var(--primary-c3);
+    font-size: 16px;
     /* csslint ignore:end */
 }
 
 body {
-    font-size: 100%;
-    line-height: 1.7rem;
-    font-family: "montserratregular";
-    background-color: var(--primary-c4);
-    color: var(--secondary-c3);
+    font-size: 16px;
+    line-height: 1.7;
+    font-family: var(--font-reg);
+    background-color: var(--primary-c3);
+    color: var(--primary-c1);
 }
 
 /* Replacement for `body { background-attachment: fixed; }`, which has
@@ -98,21 +118,24 @@ body > .container {
 }
 
 a {
-    color: var(--secondary-c3);
+    color: var(--primary-c1);
+    text-decoration: underline;
 }
 
 [role="main"] a {
-    color: var(--primary-c3 );
+    color: var(--primary-c1);
     /*text-decoration: underline;*/
 }
 
-a:hover, a:focus {
-    color: var(--primary-c3);
+a:hover,
+a:focus {
+    color: var(--primary-c1);
     text-decoration: underline;
 }
 
 
-.navbar.fixed-top { /* csslint allow: adjoining-classes */
+.navbar.fixed-top {
+    /* csslint allow: adjoining-classes */
     /* csslint ignore:start */
     position: -webkit-sticky;
     position: sticky;
@@ -128,39 +151,76 @@ video {
     height: auto !important;
 }
 
-.col-md-9 img {
+.col-md-8 img {
     max-width: 100%;
     display: inline-block;
     padding: 4px;
     line-height: 1.428571429;
     background-color: #fff;
     border: 1px solid #ddd;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     margin: 20px auto 30px auto;
 }
 
-h1 {
-    color: #444;
-    font-weight: 400;
-    font-size: 42px;
-    font-family: "orbitronregular";
-    text-transform: uppercase;
-    color: var(--primary-c3);
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+    color: var(--primary-c1);
+    font-family: var(--font-reg);
+    /* font-weight: 700; */
+    /* letter-spacing: var(--font-space); */
+    /* text-transform: lowercase; */
 }
 
-h2, h3, h4, h5, h6 {
-    color: #444;
-    font-weight: 300;
-    font-family: "orbitronregular";
-    text-transform: uppercase;
-    color: var(--primary-c3);
+h1,
+.h1 {
+    font-size: calc(var(--font-base) * 2.5);
+}
+
+h2,
+.h2 {
+    font-size: calc(var(--font-base) * 1.2);
+}
+
+h3,
+.h3 {
+    font-size: calc(var(--font-base) * 1);
+}
+
+h4,
+.h4 {
+    font-size: calc(var(--font-base) * 1);
+}
+
+h5,
+.h5 {
+    font-size: calc(var(--font-base) * 1);
+}
+
+h6,
+.h6 {
+    font-size: calc(var(--font-base) * 1);
+}
+
+p, .p {
+    font-size: var(--font-base);
 }
 
 hr {
     border-top: 1px solid #aaa;
 }
 
-pre, .rst-content tt {
+pre,
+.rst-content tt {
     max-width: 100%;
     background: #fff;
     border: solid 1px #e1e4e5;
@@ -168,15 +228,16 @@ pre, .rst-content tt {
     overflow-x: auto;
 }
 
-code.code-large, .rst-content tt.code-large {
-    font-size: 90%;
+code.code-large,
+.rst-content tt.code-large {
+    font-size: 0.9em;
 }
 
 code {
     padding: 2px 5px;
-    background: black;
-    border: solid 1px #8102fd;
-    color: white;
+    background: var(--primary-c2);
+    border: solid 1px var(--primary-c1);
+    color: var(--primary-c1);
     white-space: pre-wrap;
     word-wrap: break-word;
 }
@@ -187,16 +248,16 @@ pre code {
     border: none;
     white-space: pre;
     word-wrap: normal;
-    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-    font-size: 12px;
+    font-family: var(--font-reg);
+    font-size: 0.9em;
 }
 
 kbd {
     padding: 2px 4px;
-    font-size: 90%;
+    font-size: 0.9em;
     color: #fff;
     background-color: #333;
-    border-radius: 3px;
+    border-radius: var(--border-radius);
     -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
     box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
 }
@@ -205,7 +266,8 @@ a code {
     color: #2FA4E7;
 }
 
-a:hover code, a:focus code {
+a:hover code,
+a:focus code {
     color: #157AB5;
 }
 
@@ -219,11 +281,11 @@ footer {
 footer>hr {
     border: 0;
     height: 1px;
-    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--primary-c1), rgba(0, 0, 0, 0));
+    /* background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--primary-c1), rgba(0, 0, 0, 0)); */
 }
 
 footer a {
-    color: var(--primary-c3-s1);
+    color: var(--primary-c1);
     text-decoration: none;
 }
 
@@ -237,26 +299,90 @@ footer a:hover {
 }
 
 
+
+.rc-content-box {
+    padding: 0 !important;
+}
+
+.rc-content-box > * {
+    margin-left: 15px;
+    margin-right: 15px;
+}
+
+.rc-content-box > h1,
+.rc-content-box > h2 {
+    margin-bottom: 1.5rem;
+    font-family: var(--font-bold);
+    font-size: calc(var(--font-base) * 1.2);
+}
+.rc-content-box > p,
+.rc-content-box > ul {
+    margin-bottom: 1.5rem;
+    font-family: var(--font-reg);
+}
+
+.rc-content-box > h3 {
+    font-family: var(--font-bold);
+}
+
+.rc-content-box > h3,
+.rc-content-box > h4 {
+    margin-left: 3rem;
+}
+.rc-content-box > h3::before,
+.rc-content-box > h4::before {
+    content: "//";
+    margin-right: 0.3rem;
+    display: inline-block;
+}
+
+
+.rc-content-box>h1:first-of-type,
+.rc3-block-head {
+    background-color: var(--primary-c1);
+    color: var(--primary-c2);
+    text-decoration: none;
+    text-transform: lowercase;
+    font-size: 1.25rem;
+    font-family: var(--font-h);
+    width: 100%;
+    text-align: center !important;
+    margin: 0;
+    padding: 0.02rem 0.95rem;
+    line-height: 1.5;
+    margin-bottom: 0.9rem;
+    letter-spacing: var(--font-space);
+}
+
 .navbar .navbar-nav .nav-link,
-.navbar .navbar-nav .show >.nav-link
-, .navbar .navbar-nav .active >.nav-link
-, .navbar .navbar-nav .nav-link.show
-, .navbar .navbar-nav .nav-link.active {
+.navbar .navbar-nav .show>.nav-link,
+.navbar .navbar-nav .nav-link.show,
+.navbar .navbar-nav .nav-link.active {
     color: var(--primary-c1);
 }
 
-.navbar .navbar-nav .nav-link:hover
-, .navbar .navbar-nav .nav-link:focus {
-    color: var(--primary-c3-s1);
+.navbar .navbar-nav .active>.nav-link,
+.navbar .navbar-nav .nav-link:hover,
+.navbar .navbar-nav .nav-link:focus {
+    color: var(--primary-c1);
+    text-decoration: underline;
+}
+
+.navbar .navbar-nav .nav-link.disabled:hover,
+.navbar .navbar-nav .nav-link.disabled:focus {
+    color: var(--primary-c2);
+    text-decoration: none;
 }
 
 .bg-secondary {
     /*background-color: var(--primary-c2-s2) !important;*/
-    background-color: transparent !important;
+    background-color: var(--bg-color) !important;
+
 }
 
 .card {
-    border: 1px solid var(--primary-c3);
+    border: 1px solid var(--primary-c1);
+    border-radius: var(--border-radius);
 }
 
 .navbar-brand img {
@@ -265,17 +391,20 @@ footer a:hover {
 }
 
 #toc-collapse .nav-link:hover {
-    color: var(--primary-c3);
+    color: var(--primary-c1);
 }
 
 .navbar {
-    font-family: "orbitronregular";
-    text-transform: uppercase;
+    font-family: var(--font-h);
+    text-transform: lowercase;
     border-bottom: 1px solid var(--primary-c1);
+    font-size: calc(var(--font-base) * 1.1);
+    letter-spacing: var(--font-space);
 }
 
 .bg-primary {
-    background-color: var(--primary-c4) !important;  /*its !important in bootstrap min... sorry for that*/
+    background-color: var(--primary-c3) !important;
+    /*its !important in bootstrap min... sorry for that*/
     background-image: none;
 }
 
@@ -286,7 +415,8 @@ footer a:hover {
  * sections of docs content.
  */
 
-.bs-sidebar.affix { /* csslint allow: adjoining-classes */
+.bs-sidebar.affix {
+    /* csslint allow: adjoining-classes */
     /* csslint ignore:start */
     position: -webkit-sticky;
     position: sticky;
@@ -296,7 +426,8 @@ footer a:hover {
     top: calc(3.5rem + 20px);
 }
 
-.bs-sidebar.card { /* csslint allow: adjoining-classes */
+.bs-sidebar.card {
+    /* csslint allow: adjoining-classes */
     padding: 0;
     max-height: 90%;
     overflow-y: auto;
@@ -311,7 +442,8 @@ footer a:hover {
     transform: scale(1, -1);
 }
 
-.bs-sidebar .navbar-toggler.collapsed span { /* csslint allow: adjoining-classes */
+.bs-sidebar .navbar-toggler.collapsed span {
+    /* csslint allow: adjoining-classes */
     -moz-transform: scale(1, 1);
     -webkit-transform: scale(1, 1);
     -o-transform: scale(1, 1);
@@ -321,9 +453,9 @@ footer a:hover {
 
 /* First level of nav */
 .bs-sidebar>.navbar-collapse>.nav {
-    padding-top:    10px;
-    padding-bottom: 10px;
-    border-radius: 5px;
+    padding-top: 0;
+    padding-bottom: 0.9rem;
+    border-radius: var(--border-radius);
     width: 100%;
 }
 
@@ -333,41 +465,56 @@ footer a:hover {
     padding: 5px 10px 5px 20px;
     z-index: 1;
     overflow-wrap: anywhere;
-    line-height: 1.3em;
+    line-height: 1.7;
+    color: var(--primary-c1);
 }
+
 .bs-sidebar .nav>li>a:hover,
 .bs-sidebar .nav>li>a:focus {
-    text-decoration: none;
-    border-right: 2px solid var(--primary-c3);
+    text-decoration: underline;
+    border-right: 2px solid var(--primary-c1);
+    color: var(--primary-c1);
 }
+
 .bs-sidebar .nav>li>a.active,
 .bs-sidebar .nav>li>a.active:hover,
 .bs-sidebar .nav>li>a.active:focus {
-    font-weight: bold;
     background-color: transparent;
-    border-right: 2px solid var(--primary-c3);
+    border-right: 3px solid var(--primary-c1);
+    color: var(--primary-c1);
 }
 
-.bs-sidebar .nav .nav .nav {
-    margin-left: 1em;
+.bs-sidebar .nav li > ul {
+    padding-left: 2rem;
 }
 
-.bs-sidebar .nav > li > a {
-    font-weight: bold;
+.bs-sidebar .nav li > ul a::before{
+    content: "//";
+    display: inline-block;
+    margin-right: 0.3rem;
 }
 
-.bs-sidebar .nav .nav > li > a {
-    font-weight: normal;
+.bs-sidebar .nav a {
+    font-family: var(--font-bold);
+}
+
+.bs-sidebar .nav li > ul a, .bs-sidebar .nav li > ul a::before {
+    font-family: var(--font-reg);
 }
 
 .headerlink {
-    font-family: FontAwesome;
-    font-size: 14px;
+    font-family: var(--font-icon);
+    font-size: calc(var(--font-base) * 1.5);
     display: none;
     padding-left: .5em;
 }
 
-h1:hover .headerlink, h2:hover .headerlink, h3:hover .headerlink, h4:hover .headerlink, h5:hover .headerlink, h6:hover .headerlink{
+h1:hover .headerlink,
+h2:hover .headerlink,
+h3:hover .headerlink,
+h4:hover .headerlink,
+h5:hover .headerlink,
+h6:hover .headerlink {
     display: inline-block;
 }
 
@@ -377,23 +524,26 @@ h1:hover .headerlink, h2:hover .headerlink, h3:hover .headerlink, h4:hover .head
     padding: 15px;
     margin-bottom: 20px;
     border: 1px solid transparent;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     text-align: left;
 }
 
-.admonition.note { /* csslint allow: adjoining-classes */
+.admonition.note {
+    /* csslint allow: adjoining-classes */
     color: #3a87ad;
     background-color: #d9edf7;
     border-color: #bce8f1;
 }
 
-.admonition.warning { /* csslint allow: adjoining-classes */
+.admonition.warning {
+    /* csslint allow: adjoining-classes */
     color: #c09853;
     background-color: #fcf8e3;
     border-color: #fbeed5;
 }
 
-.admonition.danger { /* csslint allow: adjoining-classes */
+.admonition.danger {
+    /* csslint allow: adjoining-classes */
     color: #b94a48;
     background-color: #f2dede;
     border-color: #eed3d7;
@@ -405,13 +555,15 @@ h1:hover .headerlink, h2:hover .headerlink, h3:hover .headerlink, h4:hover .head
 }
 
 @media (max-width: 991.98px) {
-    .navbar-collapse.show { /* csslint allow: adjoining-classes */
+    .navbar-collapse.show {
+        /* csslint allow: adjoining-classes */
         overflow-y: auto;
         max-height: calc(100vh - 3.5rem);
     }
 }
 
-.dropdown-item.open { /* csslint allow: adjoining-classes */
+.dropdown-item.open {
+    /* csslint allow: adjoining-classes */
     color: #fff;
     background-color: #2FA4E7;
 }
@@ -437,11 +589,10 @@ h1:hover .headerlink, h2:hover .headerlink, h3:hover .headerlink, h4:hover .head
 }
 
 .dropdown-submenu:hover>a::after {
-    border-left-color: #fff;
+    border-left-color: var(--primary-c1);
 }
 
 
-
 @media (min-width: 992px) {
     .dropdown-menu {
         overflow-y: auto;
@@ -462,13 +613,14 @@ h1:hover .headerlink, h2:hover .headerlink, h3:hover .headerlink, h4:hover .head
         padding: 0.5rem 0;
     }
 
-    .dropdown-submenu.pull-left { /* csslint allow: adjoining-classes */
+    .dropdown-submenu.pull-left {
+        /* csslint allow: adjoining-classes */
         float: none;
     }
 
-    .dropdown-submenu.pull-left > .dropdown-menu { /* csslint allow: adjoining-classes */
+    .dropdown-submenu.pull-left>.dropdown-menu {
+        /* csslint allow: adjoining-classes */
         left: -100%;
         margin-left: 10px;
     }
 }
\ No newline at end of file
-