hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Some more sassy moving

Browse Source
This commit is contained in:
David Lapshin
2024-05-20 16:25:21 +03:00
parent d77ebed269
commit 4535abdc13
6 changed files with 46 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
sass/_aside.scss
View File

@ -1,15 +0,0 @@
aside {
float: right;
margin-inline-start: 1rem;
box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner);
background-color: var(--primary-color-alpha);
padding: 1rem;
width: 30%;
@media only screen and (max-width: 720px) {
float: none;
margin-inline-start: 0;
width: 100%;
}
}

9
sass/_details.scss
View File

@ -1,9 +0,0 @@
details {
border-radius: var(--rounded-corner);
background-color: var(--fg-muted-1);
padding: 1rem;
&>summary {
cursor: pointer;
}
}

19
sass/_kbd.scss
View File

@ -1,19 +0,0 @@
kbd {
display: inline-block;
transition-duration: var(--transition);
transition-property: transform, box-shadow, background-color;
cursor: pointer;
box-shadow: inset 0 -2px 0 var(--fg-muted-2), 0 -1px 0 var(--fg-muted-3);
border-radius: var(--rounded-corner-small);
background-color: var(--fg-muted-2);
padding: 0.125rem 0.375rem;
font-size: 0.8rem;
line-height: normal;
// Small nice thingy, keys can be pressed!
&:active {
transform: translateY(2px);
box-shadow: inset 0 1px 0 var(--fg-muted-2);
background-color: var(--fg-muted-3);
}
}

0
sass/_pre-container.scss
View File

46
sass/_typography.scss
View File

@ -56,6 +56,26 @@ mark {
color: var(--primary-color); color: var(--primary-color);
} }
kbd {
display: inline-block;
transition-duration: var(--transition);
transition-property: transform, box-shadow, background-color;
cursor: pointer;
box-shadow: inset 0 -2px 0 var(--fg-muted-2), 0 -1px 0 var(--fg-muted-3);
border-radius: var(--rounded-corner-small);
background-color: var(--fg-muted-2);
padding: 0.125rem 0.375rem;
font-size: 0.8rem;
line-height: normal;
// Small nice thingy, keys can be pressed!
&:active {
transform: translateY(2px);
box-shadow: inset 0 1px 0 var(--fg-muted-2);
background-color: var(--fg-muted-3);
}
}
a { a {
color: var(--primary-color); color: var(--primary-color);
font-weight: bold; font-weight: bold;
@ -91,3 +111,29 @@ dt {
dd { dd {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
aside {
float: right;
margin-inline-start: 1rem;
box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner);
background-color: var(--primary-color-alpha);
padding: 1rem;
width: 30%;
@media only screen and (max-width: 720px) {
float: none;
margin-inline-start: 0;
width: 100%;
}
}
details {
border-radius: var(--rounded-corner);
background-color: var(--fg-muted-1);
padding: 1rem;
&>summary {
cursor: pointer;
}
}

4
sass/style.scss
View File

@ -9,24 +9,20 @@
@use "variables"; @use "variables";
@use "article-list"; @use "article-list";
@use "aside";
@use "buttons"; @use "buttons";
@use "code"; @use "code";
@use "comments"; @use "comments";
@use "containers"; @use "containers";
@use "crt"; @use "crt";
@use "details";
@use "external"; @use "external";
@use "footer"; @use "footer";
@use "general"; @use "general";
@use "icon"; @use "icon";
@use "johnvertisement"; @use "johnvertisement";
@use "kbd";
@use "media"; @use "media";
@use "nav"; @use "nav";
@use "not-found"; @use "not-found";
@use "post-nav"; @use "post-nav";
@use "pre-container";
@use "statements"; @use "statements";
@use "table"; @use "table";
@use "tags"; @use "tags";