diff --git a/style/_sidebar.scss b/style/_sidebar.scss index 1f680c0..d2b775a 100644 --- a/style/_sidebar.scss +++ b/style/_sidebar.scss @@ -1,4 +1,5 @@ @use 'mixins'; +@use 'vars'; aside { grid-row: 2/3; @@ -59,15 +60,6 @@ aside { font-weight: 300; } - .class { - input { - - } - } - - .level { - } - button { color: white; } @@ -89,8 +81,8 @@ aside { > h6 { font-size: 0.7em; text-align: right; - margin-top: 10px; - margin-bottom: 6px; + margin-top: 8px; + margin-bottom: 4px; padding: 5px; color: #666; font-family: "Galderglynn Titling"; diff --git a/style/_vars.scss b/style/_vars.scss new file mode 100644 index 0000000..0e01c4e --- /dev/null +++ b/style/_vars.scss @@ -0,0 +1 @@ +$t: "Galderglynn Titling", sans-serif; diff --git a/style/main.scss b/style/main.scss index bbe92cf..9285766 100644 --- a/style/main.scss +++ b/style/main.scss @@ -1,7 +1,10 @@ +@use 'sass:list'; + @use 'mixins'; @use 'reset'; @use 'header'; @use 'sidebar'; +@use 'vars'; html { background: black; @@ -29,16 +32,25 @@ h1, h2, h3, h4, h5, h6 { display: grid; grid-template-rows: 100px 1fr; grid-template-columns: 2fr 6fr; - grid-gap: 15px; + grid-gap: 20px; } header, aside, main { background: rgba(12, 12, 12, 1); position: relative; + $shadow: (); + @for $i from 1 through 6 { + $shadow: list.append($shadow, drop-shadow(-#{$i}px #{$i}px 0 hsl(0deg, 0%, 10%))); + } + filter: list.join($shadow, drop-shadow(-0px 6px 20px hsl(0deg, 0%, 3%))); } +aside { + z-index: 10; +} main { + z-index: 8; grid-row: 2/3; grid-column: 2/3; }