massi-world

style.templ.css (4873B)

---

 :root {
   --dark-bg: #1d2c3a;
   --dark-fg: #acbdcf;
   --dark-link: white;
 
   --light-bg: #def0ff;
   --light-fg: #455564;
   --light-link: black;
 
   --bg: var(--light-bg);
   --fg: var(--light-fg);
   --link: var(--light-link);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --bg: var(--dark-bg);
     --fg: var(--dark-fg);
     --link: var(--dark-link);
   }
 }
 
 @media (max-width: 600px) {
   header {
     line-height: 1.2;
   }
 }
 
 html {
   font-size: 20px;
   color: var(--fg);
   background: var(--bg);
   font-family:
     Courier New,
     monospace;
 }
 
 body {
   box-sizing: border-box;
   line-height: 1.6;
   margin: 0px auto;
   max-width: 40rem;
   min-height: 100vh;
   min-height: 100dvh;
   padding: 0.75rem 0.75rem 10rem 0.75rem;
   position: relative;
 }
 
 footer {
   position: absolute;
   bottom: 0;
   padding: 0.75rem 0;
 }
 
 a {
   color: var(--link);
   text-decoration: 1px underline;
   text-underline-offset: 0.2em;
 }
 
 .md h1 {
   font-size: 1.4rem;
   font-weight: bold;
   margin: 2rem 0 1rem;
 }
 
 .md p,
 .md ul,
 .md ol {
   margin-top: 0;
 }
 
 h1 > a,
 h2 > a,
 h3 > a,
 h4 > a {
   color: inherit;
   text-decoration: none;
   position: relative;
 }
 
 #svg-arrow {
   vertical-align: middle;
   width: 1em;
   height: 1em;
   padding: 0 0.4em;
 }
 
 header {
   display: flex;
   flex-wrap: wrap;
   justify-items: flex-start;
   font-size: 1.2rem;
   padding-bottom: 3rem;
 }
 
 header > span {
   display: flex;
   align-items: center;
 }
 
 header > span:not(:last-child) {
 }
 
 header a {
   color: inherit;
   text-decoration: none;
 }
 
 header a:hover {
   text-decoration: 1px underline;
 }
 
 header span:last-child a {
   font-size: 2rem;
   text-decoration: none;
 }
 
 .flex-break {
   flex-basis: 100%;
   width: 0;
   height: 0;
 }
 
 ul {
   margin-left: -1rem;
 }
 
 h1:hover > a::after,
 h2:hover > a::after,
 h3:hover > a::after,
 h4:hover > a::after {
   content: "🔗";
   position: absolute;
   right: -1.2rem;
   font-size: 0.8rem;
   top: 0;
   bottom: 0;
   align-content: center;
 }
 
 ul > li {
   list-style: url("@(web-root)/shared/assets/spiral-for-light-mode.svg");
 }
 
 @media (prefers-color-scheme: dark) {
   ul > li {
     list-style: url("@(web-root)/shared/assets/spiral-for-dark-mode.svg");
   }
 }
 
 .color-synth .samples {
   display: flex;
   max-width: 100%;
 }
 
 .color-synth .samples > * {
   flex: auto;
   min-width: 1px;
   margin: 0 0 0.5rem 0.5rem;
   border-radius: 0.2rem;
 }
 
 .color-synth .samples > *:first-child {
   margin-left: 0;
 }
 
 @media (max-width: 600px) {
   html {
     font-size: 18px;
   }
   header {
     padding-bottom: 2rem;
   }
   .color-synth .samples {
     flex-wrap: wrap;
   }
   .color-synth .samples > * {
     max-width: calc(50% - 0.25rem);
   }
   .color-synth .samples > *:nth-child(2n + 1) {
     margin-left: 0;
   }
 }
 
 /* projects/swatchbuckler: */
 
 .sb-gradient {
   display: flex;
   flex-direction: column;
 }
 
 .sb-gradient > div {
   display: flex;
 }
 
 .gradient-swatch {
   height: 50px;
   width: 100px;
 }
 
 picture,
 picture img {
   max-width: 100%;
 }
 
 header span:last-child img {
   height: 2rem;
   padding: 0 0.3rem;
 }
 
 :root {
   --world-size: 60px;
 }
 
 #the-world {
   position: relative;
   width: var(--world-size);
   height: var(--world-size);
   background-image: url("@(web-root)/shared/assets/mw-spritesheet.png");
   background-size: auto 100%;
   image-rendering: pixelated;
   transition: transform 5s ease-out;
 }
 
 p:first-child {
   margin-top: 0;
 }
 
 header.home-header {
   display: flex;
   justify-content: center;
   padding: 1rem 0 1.75rem;
 }
 
 .header-home:not(:last-child) {
   --world-size: 30px;
 }
 
 header {
   line-height: 1.4;
 }
 
 header a {
   display: inline-flex;
   align-items: center;
 }
 
 .header-home #contains-the-world {
   position: absolute;
   right: 100%;
 }
 
 #contains-the-world {
   display: inline-block;
   width: var(--world-size);
   height: var(--world-size);
   position: relative;
 }
 
 @media (max-width: 600px) {
   :root {
     --world-size: 60px;
   }
   .header-home:not(:last-child) {
     --world-size: 40px;
   }
 }
 
 @font-face {
   font-family: "Playfair Display";
   src: local("Playfair Display"),
     url("@(web-root)/shared/fonts/PlayfairDisplay-VariableFont_wght.ttf");
 }
 
 @font-face {
   font-family: "Atkinson Hyperlegible";
   src: local("Atkinson Hyperlegible"),
     url("@(web-root)/shared/fonts/Atkinson-Hyperlegible-Regular-102.ttf");
 }
 
 @font-face {
   font-family: "Atkinson Hyperlegible";
   font-weight: 500 900;
   src: local("Atkinson Hyperlegible Bold"),
     url("@(web-root)/shared/fonts/Atkinson-Hyperlegible-Bold-102.ttf");
 }
 
 @font-face {
   font-family: "Atkinson Hyperlegible";
   font-style: oblique;
   src: local("Atkinson Hyperlegible Italic"),
     url("@(web-root)/shared/fonts/Atkinson-Hyperlegible-Italic-102.ttf");
 }
 
 @font-face {
   font-family: "Atkinson Hyperlegible";
   font-weight: 500 900;
   font-style: oblique;
   src: local("Atkinson Hyperlegible Bold Italic"),
     url("@(web-root)/shared/fonts/Atkinson-Hyperlegible-BoldItalic-102.ttf");
 }