diff --git a/static/serve/style.css b/static/serve/style.css index 7209bfe..de0ada9 100644 --- a/static/serve/style.css +++ b/static/serve/style.css @@ -1,3 +1,4 @@ +/** headline font https://fonts.google.com/specimen/Rubik+Doodle+Shadow/license?categoryFilters=Appearance:%2FTheme%2FShaded */ @font-face { font-family: 'Rubik Doodle Shadow'; src: @@ -5,6 +6,7 @@ url('RubikDoodleShadow-Regular.woff') format('woff'); } +/** reset pico.css */ :root { --pico-typography-spacing-vertical: 2rem; --pico-font-family: 'Arial', sans-serif; @@ -14,10 +16,7 @@ --pico-card-sectioning-background-color: unset; } -h2 { - --pico-typography-spacing-top: 4rem; -} - +/** Headline Styles */ h1 { font-family: 'Rubik Doodle Shadow', sans-serif; text-transform: uppercase; @@ -28,6 +27,11 @@ h1 { text-align: center; } +h2 { + --pico-typography-spacing-top: 4rem; +} + +/** Button Styles */ input[type="submit"], button:not([class="secondary"]) { transition: margin-top 0.3s ease, @@ -61,6 +65,7 @@ input[type="submit"]:active { box-shadow: 0px 0px 0px var(--pico-primary-hover-background); } +/** General reusable styles */ .font-headline { font-family: 'Rubik Doodle Shadow', sans-serif; text-transform: uppercase; @@ -83,6 +88,7 @@ input[type="submit"]:active { } } +/* custom ul style */ ul.iterated { padding-left: unset; } @@ -123,10 +129,9 @@ header a { font-size: 1.25em; } -.easteregg { - color: var(--pico-background-color); -} + +/** Style Blockquote*/ blockquote { text-align: center; font-size: 1.3rem; @@ -137,7 +142,6 @@ blockquote { } /** Style article*/ - article { display: inline-block; border: 2px solid var(--pico-color); @@ -145,7 +149,7 @@ article { position: relative; padding: clamp(1rem, 1.875rem + 2vw, 3rem); - &::before { + &::after { content: ''; border: 1px solid var(--pico-color); display: block; @@ -156,6 +160,7 @@ article { left: 50%; transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(0.5deg); border-radius: 1% 1% 2% 4% / 2% 6% 5% 4%; + z-index: -1; } } @@ -174,4 +179,9 @@ article>footer { font-family: 'Courier New', monospace; border: unset; background-color: unset; +} + +/** Funny stuff*/ +.easteregg { + color: var(--pico-background-color); } \ No newline at end of file