Skip to content

Commit

Permalink
fix: scss file change
Browse files Browse the repository at this point in the history
  • Loading branch information
@kekeandzeyu
kekeandzeyu committed Feb 4, 2025
1 parent 36e905c commit e9a5989
Show file tree
Hide file tree
Showing 3 changed files with 122 additions and 52 deletions.
6 changes: 3 additions & 3 deletions src/layouts/NotesLayout.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,9 @@ import "../styles/pages-styles/notes-custom.scss";
<h3>Contents</h3>
<ul>
{headings.filter(h => h.depth >= 2 && h.depth <= 4).map(h => (
<li>
<a href={`#${h.slug}`} class={h.depth === 2 ? 'second-heading' : h.depth === 3 ? 'third-heading' : 'fourth-heading'}>{h.text}</a>
</li>
<li>
<a href={`#${h.slug}`} class={h.depth === 2 ? 'second-heading' : h.depth === 3 ? 'third-heading' : 'fourth-heading'}>{h.text}</a>
</li>
))}
</ul>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/styles/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ $button-font-size: 20px;

/* Sidebar Settings */
$sidebar-width: 22vw;
$right-sidebar-width: 18vw;
$right-sidebar-width: 22vw;

/* Aside Settings */
$color-aside-primary: rgb(0, 123, 255);
Expand Down
166 changes: 118 additions & 48 deletions src/styles/pages-styles/notes-content.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,23 @@

/* Main Content */
.main-content {
display: flex;
flex: 1;
width: 100%;
display: grid;
grid-template-columns:
minmax(v.$sidebar-width, auto) minmax(auto, 1200px) minmax(v.$right-sidebar-width, auto);
grid-template-rows: 1fr;
min-height: 100vh;
}

/* Notes Part */
.notes-content {
grid-column: 2;
background-color: white;
margin-left: v.$sidebar-width;
margin-right: v.$right-sidebar-width;
flex: 1;
padding: 48px 32px 0;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
line-height: 1.6;

h1 {
font-size: 44px;
Expand Down Expand Up @@ -70,7 +73,8 @@
margin: 24px 0;
}

a[href^="http://"], a[href^="https://"] {
a[href^="http://"],
a[href^="https://"] {
position: relative;

&::after {
Expand All @@ -87,6 +91,10 @@
padding: 2px 6px;
border-radius: 3px;
word-break: break-word;
font-family: v.$code-font !important;
font-weight: normal !important;
font-size: 16px !important;
background-color: rgba(25, 25, 28, 0.05) !important;
}

button {
Expand Down Expand Up @@ -124,17 +132,14 @@
font-size: 16px !important;
}

code {
font-family: v.$code-font !important;
font-weight: normal !important;
font-size: 16px !important;
background-color: rgba(25, 25, 28, 0.05) !important;
}

div.expressive-code {
padding-top: 24px;
border-radius: 16px !important;
}

[id] {
scroll-margin-top: 80px;
}
}

#last-modified {
Expand All @@ -145,12 +150,16 @@

/* Left Sidebar for Navigation across Notes */
.sidebar {
width: v.$sidebar-width;
grid-column: 1;
flex-shrink: 0;
box-sizing: border-box;
height: 100%;
position: fixed;
position: sticky;
overflow-y: auto;
top: 0;
height: 100vh;
align-self: start;
overflow-y: auto;
background-color: white;
border-right: 1px solid #d1d1d2;

Expand All @@ -160,14 +169,14 @@
text-decoration: none;
color: #555861;
transition: color 0.2s ease;
display: flex; /* Make a full height and width of li */
align-items: center; /* Vertically center the text */
display: flex;
align-items: center;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 16px;
height: 100%; /* Make <a> fill the height of li */
width: 100%; /* Make <a> fill the width of li */
box-sizing: border-box; /* Include padding and border in element's total width and height */
height: 100%;
width: 100%;
box-sizing: border-box;
}

&-content {
Expand All @@ -177,26 +186,26 @@
padding-bottom: 10px;

ul {
padding-left: 10px;
list-style: none;
gap: 0.25em;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
}

&-link {
padding: 1px 1px 1px 1px;
border-radius: 8px;
width: 95%;
height: 40px;
transition: background-color 0.2s ease;
margin: 4px auto;
justify-content: center;
display: flex;
align-items: center;
position: relative; /* For positioning the button */
overflow: hidden; /* Clip content to rounded borders */

position: relative;
overflow: hidden;
transition: all 0.2s ease;

&.sub-link {
a {
Expand All @@ -205,16 +214,16 @@
}

&.has-sublink {
flex-direction: row-reverse; /* Button on the right */
padding-right: 0; /* Reset padding for button positioning */
flex-direction: row-reverse;
padding-right: 0;

a {
justify-content: space-between; /* Keep text on left, button area on right */
padding-left: 16px; /* Keep text padding */
padding-right: 40px; /* Make space for button click area */
justify-content: space-between;
padding-left: 16px;
padding-right: 40px;
}
}


&:hover {
background-color: #e0e0e0;

Expand All @@ -224,15 +233,15 @@
}

&.active-link {
background-color: v.$theme-navigation-background-color;
border-left: 2px v.$theme-text-color solid;

a {
color: white;
color: v.$theme-text-color;
}
}

button {
color: white;
}
&:hover:not(.active-link) {
background-color: #f5f5f5;
}
}
}
Expand All @@ -248,34 +257,33 @@
font-size: 14px;
margin-left: 10px;
z-index: 3;
color: #555861; /* Inherit default link color */
position: absolute; /* Position button on the right */
color: #555861;
position: absolute;
right: 10px;
top: 50%;
height: 100%;
transform: translateY(-50%);
transition: color 0.2s ease;
}

.sidebar-link:hover .collapse-button,
.sidebar-link.active-link .collapse-button {
color: inherit; /* Keep button color consistent with link hover/active */
color: v.$theme-text-color;
}


.collapse-button.rotated {
transform: translateY(-50%) rotate(-90deg);
transition: transform 0.3s ease;
}

/* Right Sidebar for Navigation inside Notes */
.right-sidebar {
width: v.$right-sidebar-width;
grid-column: 3;
flex-shrink: 0;
box-sizing: border-box;
padding: 30px 10px;
padding: 2rem 1rem;
height: 100vh;
background-color: white;
position: fixed;
position: sticky;
top: 0;
z-index: 0;
right: 0;
Expand All @@ -292,9 +300,20 @@
margin-bottom: 10px;
}

ul {
> ul {
list-style: none;
padding-left: 10px;
position: relative;

&::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 1px;
background-color: #eee;
}
}

ul ul {
Expand All @@ -307,13 +326,34 @@

a {
text-decoration: none;
position: relative;
transition: all 0.2s ease;
color: #555861;
display: block;
padding: 4px 0;
font-size: 0.9em;

&::before {
content: '';
position: absolute;
left: -8px;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 4px;
background-color: currentColor;
border-radius: 50%;
opacity: 0;
transition: opacity 0.2s ease;
}

&:hover {
color: black;
color: v.$theme-text-color;
padding-left: 12px;

&::before {
opacity: 1;
}
}
}
}
Expand All @@ -335,4 +375,34 @@
.footer {
margin-left: v.$sidebar-width;
z-index: 2;
}

@media (max-width: 1200px) {
.main-content {
grid-template-columns: v.$sidebar-width 1fr;

.notes-content {
padding: 48px 5%;
}
}
}

@media (max-width: 768px) {
.main-content {
grid-template-columns: 1fr;
height: auto;
overflow: visible;

.sidebar {
position: static;
height: auto;
border-right: none;
border-bottom: 1px solid #d1d1d2;
}

.notes-content {
overflow: visible;
padding: 32px 16px;
}
}
}

0 comments on commit e9a5989

Please sign in to comment.