From cdffc6aaffd4128b2a2acfcefa5871ec0e9839a0 Mon Sep 17 00:00:00 2001 From: Sylvestre Ledru Date: Sun, 28 Jan 2024 10:26:55 +0100 Subject: [PATCH] remove the css into a file so that we can reuse it --- homepage/index.html | 253 +------------------------------------------- homepage/style.css | 250 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 251 insertions(+), 252 deletions(-) create mode 100644 homepage/style.css diff --git a/homepage/index.html b/homepage/index.html index 297690b60..008f71af9 100644 --- a/homepage/index.html +++ b/homepage/index.html @@ -4,258 +4,7 @@ uutils - +
diff --git a/homepage/style.css b/homepage/style.css new file mode 100644 index 000000000..9347d654e --- /dev/null +++ b/homepage/style.css @@ -0,0 +1,250 @@ +/* All these styles are adapted from oranda to match their look */ +@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700;900&display=swap"); +:root { + --dark-fg-color: #fff; + --light-fg-color: #141414; + --light-bg-color: var(--dark-fg-color); + --dark-bg-color: var(--light-fg-color); + --fg-color: var(--light-fg-color); + --bg-color: var(--light-bg-color); + --light-link-color: #0284c7; + --dark-link-color: #8bb9fe; + --link-color: var(--light-link-color); + --light-highlight-bg-color: #ededed; + --light-highlight-fg-color: #595959; + --dark-highlight-bg-color: #27272a; + --dark-highlight-fg-color: #ededed; + --highlight-fg-color: var(--light-highlight-fg-color); + --highlight-bg-color: var(--light-highlight-bg-color); + --font-face: "Fira Sans", sans-serif; +} + +*, +::after, +::before { + border: 0 solid #e5e7eb; + box-sizing: border-box; +} + +html { + font-feature-settings: normal; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, + Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, + Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; + font-variation-settings: normal; + line-height: 1.5; + tab-size: 4; +} + +blockquote, +dd, +dl, +figure, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +p, +pre { + margin: 0; +} + +a { + color: var(--link-color); + text-decoration: inherit; +} + +/* PAGE LAYOUT */ +html, +body { + font-family: var(--font-face); + height: 100%; + scroll-behavior: smooth; +} + +body { + line-height: inherit; + margin: 0; +} + +.container { + display: flex; + flex-direction: column; + min-height: 100%; +} + +.page-body { + flex-grow: 1; +} + +/* REPO BANNER */ +.repo_banner { + background-color: var(--fg-color); + color: var(--bg-color); + padding-bottom: 0.375rem; + padding-top: 0.375rem; +} + +.repo_banner > a { + align-items: flex-start; + display: flex; + gap: 0.5rem; + height: 20px; + justify-content: center; +} +.repo_banner > a, +.repo_banner > a:hover { + color: rgb(248 250 252); +} +.repo_banner > a:hover { + text-decoration-color: #f8fafc; + text-decoration-line: underline; + text-underline-offset: 1px; +} + +/* HEADER */ +.logo { + display: block; + height: 170px; + margin: auto; +} +.title { + font-size: 3.75rem; + line-height: 1; + text-align: center; + padding-bottom: 0.5rem; +} +@media (min-width: 640px) { + .title { + font-size: 6rem; + line-height: 1; + } +} + +/* MAIN */ +main { + margin: 6rem auto; + max-width: 80%; +} + +@media (min-width: 1024px) { + main { + max-width: 56rem; + } +} + +h1 { + font-size: 1.875rem; + font-weight: 900; + line-height: 2.25rem; + line-height: 1.25; + margin-bottom: 2rem; +} + +p { + font-size: 1rem; + line-height: 1.5rem; + line-height: 1.625; + margin-bottom: 2rem; +} + +@media (min-width: 640px) { + h1 { + font-size: 3.75rem; + line-height: 1; + } + + p { + font-size: 1.125rem; + line-height: 1.75rem; + } +} + +h2 { + font-size: 1.5rem; + font-weight: 700; + line-height: 2rem; + line-height: 1.25; + margin-bottom: 1.5rem; +} + +@media (min-width: 640px) { + h2 { + font-size: 3rem; + line-height: 1; + } +} + +h2, +h3 { + margin-top: 3rem; +} + +@media (min-width: 640px) { + li { + font-size: 1.125rem; + line-height: 1.75rem; + } +} + +ul { + margin-top: 0; + margin-bottom: 2rem; +} + +/* FOOTER */ +footer { + align-items: center; + background-color: var(--fg-color); + color: var(--bg-color); + display: flex; + flex-grow: 0; + flex-shrink: 1; + font-size: 0.75rem; + justify-content: space-between; + line-height: 1rem; + padding: 0.5rem 1rem; + width: 100%; +} + +.github-icon { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E"); + height: 1.25rem; + width: 1.25rem; +} + +.projects { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + width: 100%; + gap: 1rem; +} + +.project { + flex-basis: 20rem; + flex-grow: 1; + border: 3px solid #888; + border-radius: 6px; + padding: 2rem; + text-decoration: none; + color: var(--fg-color); + font-size: 2rem; + font-weight: 700; + transition: text-decoration 0.3s; + transition: border-color 0.3s; +} +.project > span { + color: transparent; + transition: color 0.3s; +} +.project:hover > span { + color: black; +} +.project:hover { + border-color: black; +}