diff options
Diffstat (limited to 'css/style.css')
| -rw-r--r-- | css/style.css | 183 |
1 files changed, 138 insertions, 45 deletions
diff --git a/css/style.css b/css/style.css index 92f6de0..1bb8de0 100644 --- a/css/style.css +++ b/css/style.css @@ -24,11 +24,20 @@ font-display: swap; } +@font-face { + font-family: 'Ronzino'; + src: url('/font/Ronzino-Bold.woff2') format('woff2'); + font-weight: 700; + font-style: normal; + font-display: swap; +} + /* Theme */ :root { --primary-color: #0000f5; --background: #fff; - --foreground: #191919; + --foreground: #000019; + --foreground-emphasis: #191919; --selection-color: #ccc; --font-libre-caslon: 'Libre Caslon', 'Times New Roman', 'Georgia', serif; --font-ronzino: 'Ronzino', 'Arial', 'Helvetica', sans-serif; @@ -41,6 +50,7 @@ ::selection { background-color: var(--selection-color); + -webkit-text-stroke: 0; color: var(--primary-color); } @@ -48,7 +58,54 @@ * {margin: 0; padding: 0; box-sizing: border-box} html { scroll-behavior: smooth } -/* Body and base elements */ +/* Base Elements */ +h1,h2,h3,h4 { font-weight: 300 } +li,p { + hyphens: auto; + text-align: justify; + transform: translateY(5px); +} +strong { + color: var(--foreground-emphasis); + font-weight: 700; +} +p { margin-bottom: var(--base-grid); } +a[role="button"], +button { + border: var(--border-width) solid var(--foreground); + border-radius: var(--radius); + background-color: var(--background); + color: var(--foreground); + cursor: pointer; + font-family: var(--font-ronzino); + font-size: 1rem; + line-height: 1.25; + font-weight: 700; + display: inline-block; + text-decoration: none; + transition: 0.1s all linear; + padding: calc(0.5lh - var(--border-width)) 1lh; + margin-bottom: 1lh; + + &:active { + background-color: var(--foreground); + color: var(--background); + } + + label { + line-height: 1.25; + cursor: pointer; + } +} + +.textured { + h2, p, ul { + -webkit-text-stroke: calc(4 * var(--border-width)) var(--background); + paint-order: stroke fill; + } +} + +/* The Contents */ body { font-family: var(--font-ronzino); color: var(--foreground); @@ -59,6 +116,7 @@ body { flex-direction: column; align-items: stretch; height: 100vh; + /* Header */ @@ -139,8 +197,6 @@ body { } } } -h1,h2,h3,h4 { font-weight: 300 } -li,p { text-align: justify; } /* The Main Body */ main { @@ -158,9 +214,41 @@ main { font-weight: 500; transform: translateY(-8px); } + + ul { + list-style: none; + margin-left: 0; + } + li { + position: relative; + padding-left: var(--base-grid); + + &::before { + content: "✷"; + width: var(--base-grid); + display: inline-block; + margin-left: calc(-1 * var(--base-grid)); + text-align: left; + } + } +} + +#introduction { + + padding: calc(1 * var(--base-grid)); + + .content { + column-gap: var(--base-grid); + width: 100%; + max-width: calc(35 * var(--base-grid)); + background: var(--background); + display: flex; + justify-content: center; + align-items: center; + } } -.services { +#services { column-gap: calc(2 * var(--base-grid)); row-gap: calc(3 * var(--base-grid)); padding: calc(2 * var(--base-grid)); @@ -181,29 +269,52 @@ main { } } - ul { - list-style: none; - margin-left: 0; +} + +#skills { + background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"><rect x="0" y="0" width="1" height="1" fill="black"/><rect x="2" y="2" width="1" height="1" fill="black"/></svg>'); + padding: calc(2 * var(--base-grid)); + width: 100%; + display: flex; + column-gap: calc(4 * var(--base-grid)); + row-gap: calc(3 * var(--base-grid)); + flex-wrap: wrap; + + @media (max-width: 360px) { + padding: calc(2 * var(--base-grid)) var(--base-grid); } - li { - position: relative; - transform: translateY(5px); - padding-left: var(--base-grid); - - &::before { - content: "✷"; - width: var(--base-grid); - display: inline-block; - margin-left: calc(-1 * var(--base-grid)); - text-align: left; + + section { + flex: 1; + min-width: calc(17 * var(--base-grid)); + + @media (max-width: 360px) { + min-width: calc(100vw - 3 * var(--base-grid)); } } } -.skills { - background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"><rect x="0" y="0" width="1" height="1" fill="black"/><rect x="2" y="2" width="1" height="1" fill="black"/></svg>'); - padding: var(--base-grid); - width: 100vw; +#testimonials { + background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6"><rect x="0" y="0" width="1" height="1" fill="black"/><rect x="3" y="3" width="1" height="1" fill="black"/></svg>'); + padding: calc(2 * var(--base-grid)); + width: 100%; + display: flex; + column-gap: calc(4 * var(--base-grid)); + row-gap: calc(3 * var(--base-grid)); + flex-wrap: wrap; + + @media (max-width: 360px) { + padding: calc(2 * var(--base-grid)) var(--base-grid); + } + + section { + flex: 1; + min-width: calc(17 * var(--base-grid)); + + @media (max-width: 360px) { + min-width: calc(100vw - 3 * var(--base-grid)); + } + } } /* The Floating Window */ @@ -214,13 +325,13 @@ main { } .window { + .titlebar { border-bottom: var(--border-width) solid #000; - padding: calc(4 * var(--border-width)) calc(8 * var(--border-width)); + padding: calc(3 * var(--border-width)) calc(8 * var(--border-width)); line-height: calc(9 * var(--border-width)); text-align: center; - font-weight: 600; - image-rendering: crisp-edges; + font-weight: 700; background: repeating-linear-gradient( 0deg, black, @@ -245,26 +356,8 @@ main { } } - &.pinned { - width: calc(20 * var(--base-grid)); - position: absolute; - bottom: 0; - right: var(--base-grid); - } - - &.free { - - } - .content { - height: 0.01em; - padding: 5px; - transition: height 1s; - } - - &[open] .content { - overflow: hidden; - height: 10lh; + padding: var(--base-grid); } hr.divider { |