diff options
Diffstat (limited to 'css/style.css')
| -rw-r--r-- | css/style.css | 278 |
1 files changed, 278 insertions, 0 deletions
diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..92f6de0 --- /dev/null +++ b/css/style.css @@ -0,0 +1,278 @@ +/* Font Faces */ +@font-face { + font-family: 'Libre Caslon'; + src: url('/font/LibreCaslonCondensed[wdth,wght].woff2') format('woff2-variations'); + font-weight: 400 700; + font-stretch: 75% 100%; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Libre Caslon'; + src: url('/font/LibreCaslonCondensed-Italic[wght].woff2') format('woff2-variations'); + font-weight: 400 700; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Ronzino'; + src: url('/font/Ronzino-Medium.woff2') format('woff2'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +/* Theme */ +:root { + --primary-color: #0000f5; + --background: #fff; + --foreground: #191919; + --selection-color: #ccc; + --font-libre-caslon: 'Libre Caslon', 'Times New Roman', 'Georgia', serif; + --font-ronzino: 'Ronzino', 'Arial', 'Helvetica', sans-serif; + --root-font-size: 1rem; + --base-grid: 1.25rem; + --radius: 4px; + --border-width: 1px; + --outer-radius: calc(var(--radius) - var(--border-width)); +} + +::selection { + background-color: var(--selection-color); + color: var(--primary-color); +} + +/* CSS Reset */ +* {margin: 0; padding: 0; box-sizing: border-box} +html { scroll-behavior: smooth } + +/* Body and base elements */ +body { + font-family: var(--font-ronzino); + color: var(--foreground); + background: var(--primary-color); + font-size: var(--root-font-size); + line-height: 1.25; + display: flex; + flex-direction: column; + align-items: stretch; + height: 100vh; + +/* Header */ + + & > header { + color: #fff; + display: flex; + background: var(--primary-color); + font-family: var(--font-libre-caslon); + padding: var(--base-grid); + position: relative; + + h1 { + font-size: 2rem; + flex: 0 0 auto; + line-height: 1.25; + + @media (max-width: 600px) { + font-size: 1rem; + line-height: 1.25; + } + } + + p { + font-size: 4.5rem; + font-style: italic; + line-height: 5rem; + margin: 0.5lh auto 0.25lh; + transform: translateY(-5px); + white-space: pre; + width: min-content; + + @media (max-width: 800px) { + font-size: 3rem; + line-height: 3.75rem; + margin: 1lh auto var(--base-grid); + transform: translateY(-7px) + } + + @media (max-width: 600px) { + font-size: 2rem; + line-height: 1.25; + margin: 0.75lh auto 0.25lh; + transform: translateY(-1px) + } + + @media (max-width: 360px) { + font-size: 1rem; + margin: 2lh auto 0; + transform: translateY(4px); + } + } + + a { + color: #fff; + display: block; + margin-top: 9px; + text-decoration: none; + width: min-content; + word-spacing: 100vw; + + @media (max-width: 600px) { + margin-top: 4px + } + } + + /* Animation */ + + canvas { + background: var(--primary-color); + display: block; + height: 60px; + width: 60px; + + @media (max-width: 600px) { + height: 40px; + width: 40px; + } + } + } +} +h1,h2,h3,h4 { font-weight: 300 } +li,p { text-align: justify; } +/* The Main Body */ + +main { + flex-grow: 1; + background-color: var(--background); + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + + h2 { + font-size: 1.5rem; + line-height: 1.6667; + font-family: var(--font-libre-caslon); + font-weight: 500; + transform: translateY(-8px); + } +} + +.services { + column-gap: calc(2 * var(--base-grid)); + row-gap: calc(3 * var(--base-grid)); + padding: calc(2 * var(--base-grid)); + width: 100%; + max-width: calc(83 * var(--base-grid)); + background: var(--background); + display: flex; + justify-content: center; + flex-wrap: wrap; + + section { + flex: 1; + min-width: calc(17 * var(--base-grid)); + max-width: calc(25 * var(--base-grid)); + + @media (max-width: 360px) { + min-width: calc(100vw - 2 * var(--base-grid)); + } + } + + ul { + list-style: none; + margin-left: 0; + } + 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; + } + } +} + +.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; +} + +/* The Floating Window */ +.cutoff-corners { + background-color: #fff; + border: var(--border-width) solid #000; + border-radius: var(--radius); +} + +.window { + .titlebar { + border-bottom: var(--border-width) solid #000; + padding: calc(4 * 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; + background: repeating-linear-gradient( + 0deg, + black, + black var(--border-width), + white var(--border-width), + white calc(var(--border-width) * 2) + ); + background-clip: content-box; + background-origin: content-box; + list-style: none; + + &::marker { + content: ""; + } + + .label { + background-color: #fff; + padding: var(--border-width) calc(5 * var(--border-width)); + line-height: calc(12 * var(--border-width)); + height: calc(12 * var(--border-width)); + display: inline-block; + } + } + + &.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; + } + + hr.divider { + margin-left: -6px; + margin-right: -6px; + } +} + +aside { + background: var(--background) +} |