kamov/website
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

(styles,wiki) improve page styles

Browse source
This commit is contained in:
Maciej Jur 2023-06-10 02:00:47 +02:00
parent afe7c4760e
commit 158d471be7
4 changed files with 46 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/layouts/Home.astro
View file

@ -6,7 +6,7 @@ import Base from "./Base.astro";
---
<Base>
<main class="l-home">
<article class="l-home__article markdown readable">
<article class="l-home__article markdown">
<slot />
</article>
<aside class="l-home__aside">

8
src/styles/_markdown.scss
View file

@ -20,6 +20,8 @@
> p {
margin: 0.5em 0;
line-height: 1.5em;
hyphens: auto;
text-align: justify;
> a {
color: var(--c-primary);
@ -27,9 +29,13 @@
}
> h1, > h2, > h3, > h4, > h5, > h6 {
margin: 1em 0 0.5em 0;
margin-bottom: 0.5em;
font-family: var(--serif);
font-weight: 500;
&:not(:first-child) {
margin-top: 1em;
}
}
blockquote {

2
src/styles/components/_link-tree.scss
View file

@ -1,6 +1,6 @@
.link-tree {
position: relative;
max-height: 100vh;
max-height: min(100vh, 100%);
padding: 1em;
overflow-y: auto;

56
src/styles/layouts/_wiki.scss
View file

@ -1,13 +1,17 @@
$bp-m: 58rem;
$bp-l: 80rem;
.wiki-main {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
@media (min-width: 58rem) {
@media (min-width: $bp-m) {
grid-template-columns: 16rem 1fr;
}
@media (min-width: 80rem) {
@media (min-width: $bp-l) {
grid-template-columns: 16rem 1fr 16rem;
}
}
@ -17,11 +21,11 @@
width: 16rem;
height: 100%;
transition: margin-left linear 0.1s;
background-color: white;
background-color: var(--c-bg-main);
box-shadow: var(--shadow-m);
z-index: 5;
@media (min-width: 58rem) {
@media (min-width: $bp-m) {
position: static;
background-color: unset;
box-shadow: unset;
@ -38,25 +42,12 @@
right: -2em;
cursor: pointer;
@media (min-width: 58rem) {
@media (min-width: $bp-m) {
display: none;
}
}
}
.wiki-icon {
max-height: 1.5em;
max-width: 1.5em;
}
.wiki-article {
margin-inline: 1em;
@media (min-width: 80rem) {
margin-inline: 2em;
}
}
#wiki-aside-shown {
&:checked {
~ .wiki-aside {
@ -70,9 +61,36 @@
~ .wiki-aside {
margin-left: -16rem;
@media (min-width: 58rem) {
@media (min-width: $bp-m) {
margin-left: unset;
}
}
}
}
.wiki-icon {
max-height: 1.5em;
max-width: 1.5em;
}
.wiki-article {
max-width: 100%;
margin-inline: auto;
padding: 1em;
padding-top: 2em;
background-color: white;
box-shadow: var(--shadow-l);
transition: margin ease-in-out 0.2s, padding ease-in-out 0.2s;
@media (min-width: $bp-m) {
max-width: min(100%, 50em);
margin-block: 1em;
padding-top: 1em;
border-radius: 0.5em;
}
@media (min-width: $bp-l) {
margin-block: 2em;
padding: 2em;
}
}