elf
/
elf-notes
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
elf-notes/sass/index.scss

237 lines
5.1 KiB
SCSS
Raw Normal View History

Too many updates to track. Moved the 'docs' section down and eliminated the folder. It wasn't necessary. Built out the Section.html file, and started work on the SASS. Having a hell of a time getting the side panels to animate the way they do for adidoks, but I'm sure I'll figure it out eventually.
2022-06-09 03:50:30 +00:00
@import "design/_normalize";
@import "design/_scales";
@import "design/_typography";
@import "design/fonts/_nunito";
@import "design/fonts/_sauna_mono";
:root {
--default-font-size: var(--step-0);
--background-color: #ffffff;
--border-color: #e9ecef;
--text-color: #1f000d;
--header-size: calc(1.5 * var(--step-0) + 2 * var(--space-3xs));
}
:root {
font-size: var(--default-font-size);
font-family: "Nunito", sans-serif;
}
.toggle-dark {
display: none;
}
Got independent scroll behavior that I wanted. The good news is that I have the independent scroll behavior that I wanted. There are two bits of bad news. The first is that I don't UNDERSTAND why this particular configuration, with an extra level of nesting, made any difference. The bigger problem is that I still don't see the scroll bars showing up at all. And that annoys me. I should see them, right?
2022-06-10 02:16:35 +00:00
html {
height: 100%;
}
Too many updates to track. Moved the 'docs' section down and eliminated the folder. It wasn't necessary. Built out the Section.html file, and started work on the SASS. Having a hell of a time getting the side panels to animate the way they do for adidoks, but I'm sure I'll figure it out eventually.
2022-06-09 03:50:30 +00:00
body {
Got independent scroll behavior that I wanted. The good news is that I have the independent scroll behavior that I wanted. There are two bits of bad news. The first is that I don't UNDERSTAND why this particular configuration, with an extra level of nesting, made any difference. The bigger problem is that I still don't see the scroll bars showing up at all. And that annoys me. I should see them, right?
2022-06-10 02:16:35 +00:00
height: 100%;
Too many updates to track. Moved the 'docs' section down and eliminated the folder. It wasn't necessary. Built out the Section.html file, and started work on the SASS. Having a hell of a time getting the side panels to animate the way they do for adidoks, but I'm sure I'll figure it out eventually.
2022-06-09 03:50:30 +00:00
padding-top: var(--header-size);
font-size: var(--default-font-size);
font-family: "Nunito", sans-serif;
font-weight: 400;
}
@mixin fixed-top {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
}
.container {
max-width: 1044px;
width: 100%;
padding: 0 var(--space-xs) 0 var(--space-xs);
margin-right: auto;
margin-left: auto;
}
.hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
margin-left: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.navbar {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
The scrollbars are now working. I don't know why. No, that's not entirely true. I know why they're working. What I don't understand is what's different about this layout from the previous one, other than the additional context wrapper outside the overflow context, which doesn't make any sense to me; nothing I've read suggests that's how that works.
2022-06-14 00:12:16 +00:00
padding-top: 0;
max-height: var(--header-size);
Too many updates to track. Moved the 'docs' section down and eliminated the folder. It wasn't necessary. Built out the Section.html file, and started work on the SASS. Having a hell of a time getting the side panels to animate the way they do for adidoks, but I'm sure I'll figure it out eventually.
2022-06-09 03:50:30 +00:00
padding-bottom: calc(0.5 * var(--space-3xs));
background-color: var(--background-color);
opacity: 0.95;
border-bottom: 1px solid var(--border-color);
@include fixed-top();
.container {
display: flex;
flex-wrap: inherit;
align-items: center;
justify-content: space-between;
}
.btn {
cursor: pointer;
display: inline-block;
font-weight: 400;
line-height: 1.5;
color: #1d2d35;
Got independent scroll behavior that I wanted. The good news is that I have the independent scroll behavior that I wanted. There are two bits of bad news. The first is that I don't UNDERSTAND why this particular configuration, with an extra level of nesting, made any difference. The bigger problem is that I still don't see the scroll bars showing up at all. And that annoys me. I should see them, right?
2022-06-10 02:16:35 +00:00
text-align: cent er;
Too many updates to track. Moved the 'docs' section down and eliminated the folder. It wasn't necessary. Built out the Section.html file, and started work on the SASS. Having a hell of a time getting the side panels to animate the way they do for adidoks, but I'm sure I'll figure it out eventually.
2022-06-09 03:50:30 +00:00
vertical-align: middle;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
font-size: 1rem;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
&:focus {
box-shadow: none;
}
}
.brand {
font-size: var(--step-1);
margin-right: var(--space-s);
font-weight: 700;
color: var(--text-color);
text-decoration: none;
&:visited,
&:hover {
color: var(--text-color);
text-decoration: none;
}
}
form {
font-size: var(--step-0);
flex-grow: 1;
margin-left: var(--space-2xl);
margin-right: var(--space-s);
input {
appearance: none;
background-clip: padding-box;
background: #f8f9fa;
border-radius: 0.25rem;
border: 0;
color: #1d2d35;
line-height: 1.5;
padding: var(--space-3xs) var(--space-l) var(--space-3xs) var(--space-3xs);
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
width: 100%;
}
}
.navbar-nav {
font-size: var(--step-1);
align-items: center;
display: flex;
list-style: none;
gap: var(--space-xs);
margin-bottom: 0;
& > * {
line-height: 1.5;
vertical-align: middle;
}
}
}
@mixin toc-sticky {
max-width: 100%;
Got independent scroll behavior that I wanted. The good news is that I have the independent scroll behavior that I wanted. There are two bits of bad news. The first is that I don't UNDERSTAND why this particular configuration, with an extra level of nesting, made any difference. The bigger problem is that I still don't see the scroll bars showing up at all. And that annoys me. I should see them, right?
2022-06-10 02:16:35 +00:00
height: calc(100vh - var(--header-size));
Too many updates to track. Moved the 'docs' section down and eliminated the folder. It wasn't necessary. Built out the Section.html file, and started work on the SASS. Having a hell of a time getting the side panels to animate the way they do for adidoks, but I'm sure I'll figure it out eventually.
2022-06-09 03:50:30 +00:00
position: sticky;
z-index: 900;
The scrollbars are now working. I don't know why. No, that's not entirely true. I know why they're working. What I don't understand is what's different about this layout from the previous one, other than the additional context wrapper outside the overflow context, which doesn't make any sense to me; nothing I've read suggests that's how that works.
2022-06-14 00:12:16 +00:00
overflow-y: scroll;
Got independent scroll behavior that I wanted. The good news is that I have the independent scroll behavior that I wanted. There are two bits of bad news. The first is that I don't UNDERSTAND why this particular configuration, with an extra level of nesting, made any difference. The bigger problem is that I still don't see the scroll bars showing up at all. And that annoys me. I should see them, right?
2022-06-10 02:16:35 +00:00
scrollbar-width: thin;
scrollbar-color: #fff #fff;
Too many updates to track. Moved the 'docs' section down and eliminated the folder. It wasn't necessary. Built out the Section.html file, and started work on the SASS. Having a hell of a time getting the side panels to animate the way they do for adidoks, but I'm sure I'll figure it out eventually.
2022-06-09 03:50:30 +00:00
Got independent scroll behavior that I wanted. The good news is that I have the independent scroll behavior that I wanted. There are two bits of bad news. The first is that I don't UNDERSTAND why this particular configuration, with an extra level of nesting, made any difference. The bigger problem is that I still don't see the scroll bars showing up at all. And that annoys me. I should see them, right?
2022-06-10 02:16:35 +00:00
&:hover {
The scrollbars are now working. I don't know why. No, that's not entirely true. I know why they're working. What I don't understand is what's different about this layout from the previous one, other than the additional context wrapper outside the overflow context, which doesn't make any sense to me; nothing I've read suggests that's how that works.
2022-06-14 00:12:16 +00:00
scrollbar-color: var(--border-color) #fff;
Too many updates to track. Moved the 'docs' section down and eliminated the folder. It wasn't necessary. Built out the Section.html file, and started work on the SASS. Having a hell of a time getting the side panels to animate the way they do for adidoks, but I'm sure I'll figure it out eventually.
2022-06-09 03:50:30 +00:00
}
.scrollable-sidebar {
The scrollbars are now working. I don't know why. No, that's not entirely true. I know why they're working. What I don't understand is what's different about this layout from the previous one, other than the additional context wrapper outside the overflow context, which doesn't make any sense to me; nothing I've read suggests that's how that works.
2022-06-14 00:12:16 +00:00
scrollbar-width: thin;
Too many updates to track. Moved the 'docs' section down and eliminated the folder. It wasn't necessary. Built out the Section.html file, and started work on the SASS. Having a hell of a time getting the side panels to animate the way they do for adidoks, but I'm sure I'll figure it out eventually.
2022-06-09 03:50:30 +00:00
display: block;
width: auto;
padding-bottom: 4rem;
Got independent scroll behavior that I wanted. The good news is that I have the independent scroll behavior that I wanted. There are two bits of bad news. The first is that I don't UNDERSTAND why this particular configuration, with an extra level of nesting, made any difference. The bigger problem is that I still don't see the scroll bars showing up at all. And that annoys me. I should see them, right?
2022-06-10 02:16:35 +00:00
ul {
padding-left: 0;
padding-bottom: var(--step--1);
list-style: none;
ul {
padding-left: var(--space-s);
list-style: disc;
}
}
Too many updates to track. Moved the 'docs' section down and eliminated the folder. It wasn't necessary. Built out the Section.html file, and started work on the SASS. Having a hell of a time getting the side panels to animate the way they do for adidoks, but I'm sure I'll figure it out eventually.
2022-06-09 03:50:30 +00:00
}
Got independent scroll behavior that I wanted. The good news is that I have the independent scroll behavior that I wanted. There are two bits of bad news. The first is that I don't UNDERSTAND why this particular configuration, with an extra level of nesting, made any difference. The bigger problem is that I still don't see the scroll bars showing up at all. And that annoys me. I should see them, right?
2022-06-10 02:16:35 +00:00
}
Too many updates to track. Moved the 'docs' section down and eliminated the folder. It wasn't necessary. Built out the Section.html file, and started work on the SASS. Having a hell of a time getting the side panels to animate the way they do for adidoks, but I'm sure I'll figure it out eventually.
2022-06-09 03:50:30 +00:00
.main {
Got independent scroll behavior that I wanted. The good news is that I have the independent scroll behavior that I wanted. There are two bits of bad news. The first is that I don't UNDERSTAND why this particular configuration, with an extra level of nesting, made any difference. The bigger problem is that I still don't see the scroll bars showing up at all. And that annoys me. I should see them, right?
2022-06-10 02:16:35 +00:00
height: 100%;
Too many updates to track. Moved the 'docs' section down and eliminated the folder. It wasn't necessary. Built out the Section.html file, and started work on the SASS. Having a hell of a time getting the side panels to animate the way they do for adidoks, but I'm sure I'll figure it out eventually.
2022-06-09 03:50:30 +00:00
display: flex;
Got independent scroll behavior that I wanted. The good news is that I have the independent scroll behavior that I wanted. There are two bits of bad news. The first is that I don't UNDERSTAND why this particular configuration, with an extra level of nesting, made any difference. The bigger problem is that I still don't see the scroll bars showing up at all. And that annoys me. I should see them, right?
2022-06-10 02:16:35 +00:00
flex-direction: row;
Too many updates to track. Moved the 'docs' section down and eliminated the folder. It wasn't necessary. Built out the Section.html file, and started work on the SASS. Having a hell of a time getting the side panels to animate the way they do for adidoks, but I'm sure I'll figure it out eventually.
2022-06-09 03:50:30 +00:00
flex-wrap: nowrap;
Got independent scroll behavior that I wanted. The good news is that I have the independent scroll behavior that I wanted. There are two bits of bad news. The first is that I don't UNDERSTAND why this particular configuration, with an extra level of nesting, made any difference. The bigger problem is that I still don't see the scroll bars showing up at all. And that annoys me. I should see them, right?
2022-06-10 02:16:35 +00:00
& > * {
padding-top: var(--space-m);
Too many updates to track. Moved the 'docs' section down and eliminated the folder. It wasn't necessary. Built out the Section.html file, and started work on the SASS. Having a hell of a time getting the side panels to animate the way they do for adidoks, but I'm sure I'll figure it out eventually.
2022-06-09 03:50:30 +00:00
}
Got independent scroll behavior that I wanted. The good news is that I have the independent scroll behavior that I wanted. There are two bits of bad news. The first is that I don't UNDERSTAND why this particular configuration, with an extra level of nesting, made any difference. The bigger problem is that I still don't see the scroll bars showing up at all. And that annoys me. I should see them, right?
2022-06-10 02:16:35 +00:00
Too many updates to track. Moved the 'docs' section down and eliminated the folder. It wasn't necessary. Built out the Section.html file, and started work on the SASS. Having a hell of a time getting the side panels to animate the way they do for adidoks, but I'm sure I'll figure it out eventually.
2022-06-09 03:50:30 +00:00
.left-sidebar {
@include toc-sticky();
Got independent scroll behavior that I wanted. The good news is that I have the independent scroll behavior that I wanted. There are two bits of bad news. The first is that I don't UNDERSTAND why this particular configuration, with an extra level of nesting, made any difference. The bigger problem is that I still don't see the scroll bars showing up at all. And that annoys me. I should see them, right?
2022-06-10 02:16:35 +00:00
font-size: 95%;
Too many updates to track. Moved the 'docs' section down and eliminated the folder. It wasn't necessary. Built out the Section.html file, and started work on the SASS. Having a hell of a time getting the side panels to animate the way they do for adidoks, but I'm sure I'll figure it out eventually.
2022-06-09 03:50:30 +00:00
order: 0;
flex: 0 1 auto;
Got independent scroll behavior that I wanted. The good news is that I have the independent scroll behavior that I wanted. There are two bits of bad news. The first is that I don't UNDERSTAND why this particular configuration, with an extra level of nesting, made any difference. The bigger problem is that I still don't see the scroll bars showing up at all. And that annoys me. I should see them, right?
2022-06-10 02:16:35 +00:00
width: 25%;
padding-right: var(--space-s);
Too many updates to track. Moved the 'docs' section down and eliminated the folder. It wasn't necessary. Built out the Section.html file, and started work on the SASS. Having a hell of a time getting the side panels to animate the way they do for adidoks, but I'm sure I'll figure it out eventually.
2022-06-09 03:50:30 +00:00
border-right: 1px solid var(--border-color);
}
.docs-toc {
@include toc-sticky();
Got independent scroll behavior that I wanted. The good news is that I have the independent scroll behavior that I wanted. There are two bits of bad news. The first is that I don't UNDERSTAND why this particular configuration, with an extra level of nesting, made any difference. The bigger problem is that I still don't see the scroll bars showing up at all. And that annoys me. I should see them, right?
2022-06-10 02:16:35 +00:00
font-size: 85%;
Too many updates to track. Moved the 'docs' section down and eliminated the folder. It wasn't necessary. Built out the Section.html file, and started work on the SASS. Having a hell of a time getting the side panels to animate the way they do for adidoks, but I'm sure I'll figure it out eventually.
2022-06-09 03:50:30 +00:00
order: 2;
flex: 0 0 auto;
width: 18.75%;
border-left: 1px solid var(--border-color);
Got independent scroll behavior that I wanted. The good news is that I have the independent scroll behavior that I wanted. There are two bits of bad news. The first is that I don't UNDERSTAND why this particular configuration, with an extra level of nesting, made any difference. The bigger problem is that I still don't see the scroll bars showing up at all. And that annoys me. I should see them, right?
2022-06-10 02:16:35 +00:00
padding-left: var(--space-s);
Too many updates to track. Moved the 'docs' section down and eliminated the folder. It wasn't necessary. Built out the Section.html file, and started work on the SASS. Having a hell of a time getting the side panels to animate the way they do for adidoks, but I'm sure I'll figure it out eventually.
2022-06-09 03:50:30 +00:00
nav > ul {
& > li:not(:first-child) {
margin-top: var(--space-3xs);
border-top: 1px dashed #e9ecef;
}
& > li:not(:first-child) {
padding-top: var(--space-3xs);
}
ul {
padding-bottom: 0;
}
}
}
article {
order: 1;
Got independent scroll behavior that I wanted. The good news is that I have the independent scroll behavior that I wanted. There are two bits of bad news. The first is that I don't UNDERSTAND why this particular configuration, with an extra level of nesting, made any difference. The bigger problem is that I still don't see the scroll bars showing up at all. And that annoys me. I should see them, right?
2022-06-10 02:16:35 +00:00
padding: var(--space-m) var(--space-s) var(--space-m-l) var(--space-s);
Too many updates to track. Moved the 'docs' section down and eliminated the folder. It wasn't necessary. Built out the Section.html file, and started work on the SASS. Having a hell of a time getting the side panels to animate the way they do for adidoks, but I'm sure I'll figure it out eventually.
2022-06-09 03:50:30 +00:00
flex: 0 0 auto;
width: 56.25%;
}
}