diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss index b0c09dc..109ab23 100644 --- a/quartz/styles/custom.scss +++ b/quartz/styles/custom.scss @@ -1,3 +1,86 @@ @use "./base.scss"; // put your custom CSS here! +.page-title { + font-size: 2.6rem; + margin: 0; + + font-family: var(--titleFont); + + position: relative; + + a { + font-weight: 500; + letter-spacing: 0.5px; + + &::after { + content: ""; + position: absolute; + left: -10rem; + top: 2rem; + width: 28rem; + height: 28px; + background-image: linear-gradient(to right, transparent 0%, #7ba9ef 100%); + z-index: -1; + transform: rotate(-30deg); + border-radius: 5px; + filter: blur(40px); + } + } +} + +.article-title { + font-size: 2.2rem; + margin: 2rem 0 1.2rem 0; +} + +.content-meta { + font-family: var(--metaFont); + font-size: 1.3rem; +} + +.center article { + font-size: 1.05rem; + text-align: justify; + + p { + hyphens: none; + } +} + +.floating-image { + @media all and (max-width: 800px) { + display: none; + } + + position: relative; + display: inline-block; + + img:first-child { + position: relative; + z-index: 2; + height: 100%; + width: 100%; + } + + img:last-child { + position: absolute; + top: 0; + left: 0; + z-index: 1; + height: 100%; + width: 100%; + filter: blur(20px) brightness(0.6); + } +} + +.footer { + font-family: var(--metaFont); + font-size: 1.3rem; + color: var(--gray); + margin-bottom: 2rem; +} + +.explorer-toggle { + margin-bottom: 0.8rem; +}