diff --git a/styles/main.scss b/styles/main.scss index c290751..01ef33f 100644 --- a/styles/main.scss +++ b/styles/main.scss @@ -124,6 +124,7 @@ header { #content { width: calc(80% - 20px); + padding-bottom: 100px; @media screen and (max-width: $small) { width: 100%; @@ -143,6 +144,7 @@ header { #tags { display: flex; flex-wrap: wrap; + gap: 5px; a { @extend .tag; @@ -158,11 +160,12 @@ header { h1, h2 { margin-top: 10px; } - - .highlight { + + .highlight { pre { padding: 10px; overflow-x: scroll; + border-radius: 5px; } } } @@ -217,3 +220,66 @@ header { // -------------------------------------------------- + +.info-block, .warning-block, .success-block, .note-block { + border-radius: 5px; + padding: 2px 5px; + box-shadow: 2px 2px 2px rgba(0, 0, 0, .1); + margin: 10px 0; +} + + +.info-block { + background: #BBDEFB; + color: #0D47A1; + + p::before { + content: "ℹ️ " + } +} + +.warning-block { + background: #FFE0B2; + color: #E65100; + + p::before { + content: "⚠️ "; + } +} + +.success-block { + background: #C8E6C9; + color: #1B5E20; + + p::before { + content: "✅ "; + } +} + +.note-block { + background: #D7CCC8; + color: #3E2723; + + p::before { + content: "📝 "; + } +} + +// -------------------------------------------------- + +table { + thead { + background-color: $primary-light; + } + + tr { + border-bottom: 1px solid red; + } +} + + +dt { + &::before { + content: "-"; + } +}