lucht/src/assets/styles/main.css
2024-12-04 11:44:25 +01:00

1 line
8 KiB
CSS
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

:root{--test-var: #909090;--background-color: var(--primary);--background-color-secondary: #202020;--background-color-tertiary: #ff6e6c;--primary: #312b18;--secondary: #ff6e6c;--text-primary: #1f1135;--text-secondary: #ffffff;--text-tertiary: #301e4e;--link-color: #301e4e;--tag-color: #301e4e;--button-color: #ff636c;--ratio: 1.2;--s-5: calc(var(--s-4) / var(--ratio));--s-4: calc(var(--s-3) / var(--ratio));--s-3: calc(var(--s-2) / var(--ratio));--s-2: calc(var(--s-1) / var(--ratio));--s-1: calc(var(--s0) / var(--ratio));--s0: 1rem;--s1: calc(var(--s0) * var(--ratio));--s2: calc(var(--s1) * var(--ratio));--s3: calc(var(--s2) * var(--ratio));--s4: calc(var(--s3) * var(--ratio));--s5: calc(var(--s4) * var(--ratio));--max-width: 1000px}*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role=list],ol[role=list]{list-style:none}html{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}#layout{display:flex;flex-direction:column;min-height:100vh;overflow:hidden;background:var(--primary)}#main-container{width:90%;max-width:var(--max-width);margin:0 auto;padding-bottom:var(--s1);flex:1 0 auto;overflow:hidden}#main-container main{max-width:65ch}h1{font-size:clamp(var(--s3),3vw,var(--s4));margin:0 0 var(--s0)}h2{font-size:clamp(var(--s2),3vw,var(--s3))}h3{font-size:clamp(var(--s1),3vw,var(--s2));margin:0 0 var(--s-1);font-style:italic}h4{margin:var(--s-2) 0;font-size:clamp(var(--s-0),3vw,var(--s1));text-transform:uppercase}p{margin-bottom:var(--s1)}ul{margin-top:var(--s0);margin-bottom:var(--s0)}a{color:var(--link-color)}*{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif}h1,h2,h3,h4,h5,h6{font-family:"Bitter","Bookman Old Style",serif}@font-face{font-family:"Basis Grotesque Mono Pro Light";src:url("../../fonts/basis-grotesque-mono-pro/BasisGrotesqueMonoProLight.eot");src:url("../../fonts/basis-grotesque-mono-pro/BasisGrotesqueMonoProLight.eot?#iefix") format("embedded-opentype"),url("../../fonts/basis-grotesque-mono-pro/BasisGrotesqueMonoProLight.woff2") format("woff2"),url("../../fonts/basis-grotesque-mono-pro/BasisGrotesqueMonoProLight.woff") format("woff"),url("../../fonts/basis-grotesque-mono-pro/BasisGrotesqueMonoProLight.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}header{min-width:100%}#header--container{width:90%;max-width:var(--max-width);padding:var(--s1) 0;margin:0 auto;display:flex;flex-direction:column;flex-wrap:wrap;align-items:left;color:var(--text-primary)}#header--title a{font-size:clamp(var(--s3),3vw,var(--s4));font-weight:200;background:linear-gradient(to right, var(--primary), var(--primary) 63%, var(--secondary) 63%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);text-decoration:none}@media screen and (min-width: 48rem){#header--container{flex-direction:row;justify-content:space-between;align-items:center}}.landing{z-index:1;display:flex;flex-direction:column;align-items:center;position:fixed;top:0;bottom:0;left:0;right:0;justify-content:center}.landing .hero{position:fixed;display:flex;flex-direction:column;justify-content:space-between;align-items:center;flex-shrink:0;width:min-content;aspect-ratio:1;gap:2rem}.landing .hero .hero__content{display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:1rem;border:3px solid var(--primary);background:#fff;gap:1rem}.landing .hero .hero__header{display:flex;flex-direction:column;gap:.5rem}.landing .hero .hero__header span{color:var(--primary);font-family:Basis Grotesque Mono Pro Light;font-size:1.9rem;font-style:normal;font-weight:300;line-height:normal;letter-spacing:.26644rem;text-transform:uppercase}.landing .hero .hero__info{font-size:1.2rem;color:var(--primary);font-family:Basis Grotesque Mono Pro Light;font-style:800;font-weight:300;line-height:normal;letter-spacing:.26644rem;text-transform:uppercase}.landing .hero .hero__icons{width:100%;display:flex;justify-content:space-evenly}.landing .hero .hero__icons a{text-decoration:none}.landing .hero .hero__icons svg{height:3rem;width:3rem}.bkg{z-index:0;position:fixed;top:0;bottom:0;left:0;right:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr}.bkg img{object-fit:cover;min-height:100vh;width:100%}.bkg img.bkg--winter{border-right:4px solid var(--primary)}.bkg img.bkg--summer{filter:sepia(100%) brightness(1.5) contrast(0.75);border-left:0px solid var(--primary)}@media screen and (max-width: 600px){.bkg{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.bkg img{min-height:auto;height:50vh}.bkg img.bkg--winter{border-right:none;border-bottom:1.5px solid var(--primary)}.bkg img.bkg--summer{border-left:none;border-top:1.5px solid var(--primary)}}footer{width:100%;max-width:100vw;background:var(--background-color-secondary);color:var(--text-secondary)}footer a{color:var(--text-secondary);text-decoration:none}footer a:hover{text-decoration:underline}#footer--container{width:90%;max-width:var(--max-width);margin:0 auto;padding:var(--s2) 0;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}nav ul{padding:0;display:block;display:flex;flex-direction:row;flex-wrap:wrap;list-style-type:none;gap:var(--s0) var(--s2);font-size:var(--s0)}nav ul li::before{content:""}nav ul li a{color:var(--text-primary);text-decoration:none}nav ul li a:hover{text-decoration:underline}.nav--active{text-decoration:underline}@media screen and (min-width: 48rem){nav ul{font-size:var(--s1)}}#posts--list article{margin-bottom:var(--s2)}.post--time{font-size:clamp(var(--s-1),3vw,var(--s0));font-weight:200}.tags--container{padding:var(--s-1) 0;display:flex;flex-wrap:wrap;gap:var(--s0)}.tag a{padding:var(--s-2) var(--s-1);color:var(--text-secondary);text-decoration:none;background:var(--background-color-secondary)}.icon{fill:var(--text-secondary);width:var(--s2);height:var(--s2)}.logo .icon{width:15rem;height:15rem}