From 1b553040a5903f84aa8196e58df3f4ffea58c225 Mon Sep 17 00:00:00 2001 From: Segundo Fdez Date: Sat, 12 Feb 2022 13:12:25 +0100 Subject: [PATCH] added basic styles for layout. test header --- ...s_abdeb689137b085b8cf50bb0fe96e360.content | 177 ++++++++++++++---- src/themes/oscar/assets/css/common.css | 24 ++- src/themes/oscar/assets/css/main.css | 3 + .../oscar/assets/css/modules/footer.css | 21 +++ .../oscar/assets/css/modules/header.css | 32 ++++ .../oscar/assets/css/utilities/visibility.css | 15 ++ src/themes/oscar/assets/css/variables.css | 110 ++++++----- src/themes/oscar/layouts/index.html | 2 +- src/themes/oscar/layouts/partials/footer.html | 16 +- src/themes/oscar/layouts/partials/header.html | 17 +- src/themes/oscar/layouts/sections/single.html | 2 +- 11 files changed, 318 insertions(+), 101 deletions(-) create mode 100644 src/themes/oscar/assets/css/modules/footer.css create mode 100644 src/themes/oscar/assets/css/modules/header.css create mode 100644 src/themes/oscar/assets/css/utilities/visibility.css diff --git a/src/resources/_gen/assets/css/css/main.css_abdeb689137b085b8cf50bb0fe96e360.content b/src/resources/_gen/assets/css/css/main.css_abdeb689137b085b8cf50bb0fe96e360.content index f75a1a7..7796771 100644 --- a/src/resources/_gen/assets/css/css/main.css_abdeb689137b085b8cf50bb0fe96e360.content +++ b/src/resources/_gen/assets/css/css/main.css_abdeb689137b085b8cf50bb0fe96e360.content @@ -277,69 +277,92 @@ template { display: none; } :root { -/* ========================================================================== - Fonts - ========================================================================== */ - --font-brand: 'Overpass Mono', monospace; + /* ========================================================================== + Fonts + ========================================================================== */ + --font-brand: 'Overpass Mono', monospace; - /* Fonts weights */ - --fw-regular: 400; - --fw-bold: 700; + /* Fonts weights */ + --fw-regular: 400; + --fw-bold: 700; - /* ========================================================================== - Colors - ========================================================================== */ + /* ========================================================================== + Colors + ========================================================================== */ - /* Brand - ========================================================================== */ - --color-brand: #0161f0; - --background-main: #F0F0F0; - --color-main: #292929; + /* Brand + ========================================================================== */ + --background-main: #F0F0F0; + --color-main: #292929; + --color-link: #0161f0; + --color-link-hover:#575757; -/* ========================================================================== - Font sizes - ========================================================================== */ + /* ========================================================================== + Font sizes + ========================================================================== */ - /* Font sizes */ - --font-size-1: 14px; - --font-size-2: 16px; - --font-size-3: 26px; + /* Font sizes https://www.modularscale.com/?16,14&px&1.5 */ + --font-size-1: 14px; + --font-size-2: 16px; + --font-size-3: 24px; + --font-size-4: 36px; + --font-size-5: 54px; - /* Font sizes names */ - --font-heading: var(--fw-bold) var(--font-size-3) / 1.25 var(--font-brand); - --font-body: var(--font-size-2) / 1.38 var(--font-brand); - --font-caption: var(--font-size-1) / 1.37 var(--font-brand); + /* Font sizes names */ + --font-title: var(--fw-bold) var(--font-size-4) / 1.25 var(--font-brand); + --font-heading: var(--fw-bold) var(--font-size-3) / 1.25 var(--font-brand); + --font-body: var(--font-size-2) / 1.38 var(--font-brand); + --font-caption: var(--font-size-1) / 1.37 var(--font-brand); + + /* ========================================================================== + Spacing + ========================================================================== */ + --spacing-1: calc(1rem / 2); + --spacing-2: 1rem; + --spacing-3: 1.5rem; + --spacing-4: 2rem; + --spacing-5: 2.5rem; + --spacing-6: 3rem; + + /* ========================================================================== + Size + ========================================================================== */ + --logo-width: 102px; } /* Dark theme */ @media (prefers-color-scheme: dark) { - :root { - --color-brand: #02A4FF; - --background-main: #292929; - --color-main: #F0F0F0; - } + :root { + --background-main: #292929; + --color-main: #F0F0F0; + --color-link: #02A4FF; + --color-link-hover:#9e9e9e; + } } /* ========================================================================== - Breakpoints - ========================================================================== */ + Breakpoints + ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } body { - background-color: var(--background-main); font-family: var(--font-brand); - text-rendering: auto; - color: var(--color-main); font: var(--font-body); + text-rendering: auto; + background-color: var(--background-main); + color: var(--color-main); } body a { - color: var(--color-brand); + color: var(--color-link); text-decoration: none; } +body a:hover { + color: var(--color-link-hover); + } h1, h2, h3, h4, h5, h6, b, strong { font-weight: var(--fw-bold); @@ -347,9 +370,89 @@ b, strong { i, em { font-style: italic; } +/* TODO: move this */ +.wrapper { + max-width: 768px; +} +@media (min-width: 480px) { +.wrapper { + margin-left: calc(20vw + var(--logo-width)) +} + } +.main { + margin-top: var(--spacing-6); + padding: var(--spacing-3); +} /* Layout */ /* Components */ /* Modules */ +.header { + padding: var(--spacing-3); +} +@media (min-width: 480px) { +.header { + display: flex; + align-items: end; + position: sticky; + top: 0; + z-index: 1; + background: var(--background-main) +} + } +.logo { + margin: 0; +} +.logo svg { + vertical-align: middle; + } +.logo svg > * { + stroke: currentColor; + } +@media (min-width: 480px) { +.main-nav { + margin-left: 20vw +} + } +.main-nav ul { + list-style-type: none; + padding: 0; + margin: 0; + display: flex; + gap: var(--spacing-2); + } +.footer { + padding: var(--spacing-6) var(--spacing-3); + font: var(--font-caption); + display: flex; + gap: var(--spacing-1); + flex-wrap: wrap; +} +.footer span::after { + content: '|'; + opacity: .4; + } +.footer-contact { + list-style-type: none; + padding: 0; + margin: 0; + display: flex; + gap: var(--spacing-2); + flex-wrap: wrap; +} /* Specific pages */ /* Utilities */ +/* Available for screen readers */ +.sr-only { + position: absolute; + width: 1px; + height: 1px; + border: 0; + clip: rect(0, 0, 0,0); + margin: -1px; + padding: 0; + overflow: hidden; +} +.hide { + display: none; +} /* Vendors */ diff --git a/src/themes/oscar/assets/css/common.css b/src/themes/oscar/assets/css/common.css index 46fac4b..bc748de 100644 --- a/src/themes/oscar/assets/css/common.css +++ b/src/themes/oscar/assets/css/common.css @@ -5,14 +5,17 @@ } body { - background-color: var(--background-main); font-family: var(--font-brand); - text-rendering: auto; - color: var(--color-main); font: var(--font-body); + text-rendering: auto; + background-color: var(--background-main); + color: var(--color-main); a { - color: var(--color-brand); + color: var(--color-link); text-decoration: none; + &:hover { + color: var(--color-link-hover); + } } } h1, h2, h3, h4, h5, h6, @@ -22,4 +25,17 @@ b, strong { i, em { font-style: italic; +} + +/* TODO: move this */ +.wrapper { + max-width: 768px; + @media (--screen-xs) { + margin-left: calc(20vw + var(--logo-width)); + } +} + +.main { + margin-top: var(--spacing-6); + padding: var(--spacing-3); } \ No newline at end of file diff --git a/src/themes/oscar/assets/css/main.css b/src/themes/oscar/assets/css/main.css index ec51cef..575a58a 100644 --- a/src/themes/oscar/assets/css/main.css +++ b/src/themes/oscar/assets/css/main.css @@ -9,9 +9,12 @@ /* Components */ /* Modules */ +@import 'assets/css/modules/header.css'; +@import 'assets/css/modules/footer.css'; /* Specific pages */ /* Utilities */ +@import 'assets/css/utilities/visibility.css'; /* Vendors */ diff --git a/src/themes/oscar/assets/css/modules/footer.css b/src/themes/oscar/assets/css/modules/footer.css new file mode 100644 index 0000000..9165e0e --- /dev/null +++ b/src/themes/oscar/assets/css/modules/footer.css @@ -0,0 +1,21 @@ +.footer { + padding: var(--spacing-6) var(--spacing-3); + font: var(--font-caption); + display: flex; + gap: var(--spacing-1); + flex-wrap: wrap; + span { + &::after { + content: '|'; + opacity: .4; + } + } +} +.footer-contact { + list-style-type: none; + padding: 0; + margin: 0; + display: flex; + gap: var(--spacing-2); + flex-wrap: wrap; +} \ No newline at end of file diff --git a/src/themes/oscar/assets/css/modules/header.css b/src/themes/oscar/assets/css/modules/header.css new file mode 100644 index 0000000..67002b0 --- /dev/null +++ b/src/themes/oscar/assets/css/modules/header.css @@ -0,0 +1,32 @@ +.header { + padding: var(--spacing-3); + @media (--screen-xs) { + display: flex; + align-items: end; + position: sticky; + top: 0; + z-index: 1; + background: var(--background-main); + } +} +.logo { + margin: 0; + svg { + vertical-align: middle; + > * { + stroke: currentColor; + } + } +} +.main-nav { + @media (--screen-xs) { + margin-left: 20vw; + } + ul { + list-style-type: none; + padding: 0; + margin: 0; + display: flex; + gap: var(--spacing-2); + } +} diff --git a/src/themes/oscar/assets/css/utilities/visibility.css b/src/themes/oscar/assets/css/utilities/visibility.css new file mode 100644 index 0000000..aedc54e --- /dev/null +++ b/src/themes/oscar/assets/css/utilities/visibility.css @@ -0,0 +1,15 @@ +/* Available for screen readers */ +.sr-only { + position: absolute; + width: 1px; + height: 1px; + border: 0; + clip: rect(0, 0, 0,0); + margin: -1px; + padding: 0; + overflow: hidden; +} + +.hide { + display: none; +} \ No newline at end of file diff --git a/src/themes/oscar/assets/css/variables.css b/src/themes/oscar/assets/css/variables.css index c4b71d4..5a1c965 100644 --- a/src/themes/oscar/assets/css/variables.css +++ b/src/themes/oscar/assets/css/variables.css @@ -1,64 +1,84 @@ :root { -/* ========================================================================== - Fonts - ========================================================================== */ - --font-brand: 'Overpass Mono', monospace; + /* ========================================================================== + Fonts + ========================================================================== */ + --font-brand: 'Overpass Mono', monospace; - /* Fonts weights */ - --fw-regular: 400; - --fw-bold: 700; + /* Fonts weights */ + --fw-regular: 400; + --fw-bold: 700; - /* ========================================================================== - Colors - ========================================================================== */ + /* ========================================================================== + Colors + ========================================================================== */ - /* Brand - ========================================================================== */ - --color-brand: #0161f0; - --background-main: #F0F0F0; - --color-main: #292929; + /* Brand + ========================================================================== */ + --background-main: #F0F0F0; + --color-main: #292929; + --color-link: #0161f0; + --color-link-hover:#575757; -/* ========================================================================== - Font sizes - ========================================================================== */ + /* ========================================================================== + Font sizes + ========================================================================== */ - /* Font sizes */ - --font-size-1: 14px; - --font-size-2: 16px; - --font-size-3: 26px; + /* Font sizes https://www.modularscale.com/?16,14&px&1.5 */ + --font-size-1: 14px; + --font-size-2: 16px; + --font-size-3: 24px; + --font-size-4: 36px; + --font-size-5: 54px; - /* Font sizes names */ - --font-heading: var(--fw-bold) var(--font-size-3) / 1.25 var(--font-brand); - --font-body: var(--font-size-2) / 1.38 var(--font-brand); - --font-caption: var(--font-size-1) / 1.37 var(--font-brand); + /* Font sizes names */ + --font-title: var(--fw-bold) var(--font-size-4) / 1.25 var(--font-brand); + --font-heading: var(--fw-bold) var(--font-size-3) / 1.25 var(--font-brand); + --font-body: var(--font-size-2) / 1.38 var(--font-brand); + --font-caption: var(--font-size-1) / 1.37 var(--font-brand); + + /* ========================================================================== + Spacing + ========================================================================== */ + --spacing-1: calc(1rem / 2); + --spacing-2: 1rem; + --spacing-3: 1.5rem; + --spacing-4: 2rem; + --spacing-5: 2.5rem; + --spacing-6: 3rem; + + /* ========================================================================== + Size + ========================================================================== */ + --logo-width: 102px; } /* Dark theme */ @media (prefers-color-scheme: dark) { - :root { - --color-brand: #02A4FF; - --background-main: #292929; - --color-main: #F0F0F0; - } + :root { + --background-main: #292929; + --color-main: #F0F0F0; + --color-link: #02A4FF; + --color-link-hover:#9e9e9e; + } } -/* ========================================================================== - Breakpoints - ========================================================================== */ - @custom-media --screen-xxs (min-width: 320px); - @custom-media --screen-xs (min-width: 480px); - @custom-media --screen-s (min-width: 768px); - @custom-media --screen-m (min-width: 960px); - @custom-media --screen-ml (min-width: 1024px); - @custom-media --screen-l (min-width: 1281px); - @custom-media --screen-xl (min-width: 1441px); - @custom-media --screen-xxl (min-width: 1920px); + /* ========================================================================== + Breakpoints + ========================================================================== */ + @custom-media --screen-xxs (min-width: 320px); + @custom-media --screen-xs (min-width: 480px); + @custom-media --screen-s (min-width: 768px); + @custom-media --screen-m (min-width: 960px); + @custom-media --screen-ml (min-width: 1024px); + @custom-media --screen-l (min-width: 1281px); + @custom-media --screen-xl (min-width: 1441px); + @custom-media --screen-xxl (min-width: 1920px); - @custom-media --max-screen-s (max-width: 769px); - @custom-media --max-screen-m (max-width: 960px); - @custom-media --max-screen-ml (max-width: 1024px); \ No newline at end of file + @custom-media --max-screen-s (max-width: 769px); + @custom-media --max-screen-m (max-width: 960px); + @custom-media --max-screen-ml (max-width: 1024px); \ No newline at end of file diff --git a/src/themes/oscar/layouts/index.html b/src/themes/oscar/layouts/index.html index 205d5a5..d4119dc 100644 --- a/src/themes/oscar/layouts/index.html +++ b/src/themes/oscar/layouts/index.html @@ -1,6 +1,6 @@ {{ define "main" }} -
+

List: Index

diff --git a/src/themes/oscar/layouts/partials/footer.html b/src/themes/oscar/layouts/partials/footer.html index 3fdfa4f..76f1400 100644 --- a/src/themes/oscar/layouts/partials/footer.html +++ b/src/themes/oscar/layouts/partials/footer.html @@ -1,5 +1,11 @@ -
- - © {{ .Site.Author.name }}. {{ i18n "generator" | safeHTML }} - -
+ diff --git a/src/themes/oscar/layouts/partials/header.html b/src/themes/oscar/layouts/partials/header.html index 2dd171b..f286908 100644 --- a/src/themes/oscar/layouts/partials/header.html +++ b/src/themes/oscar/layouts/partials/header.html @@ -1,15 +1,16 @@ -
-

+
+

- - - - + + {{ .Site.Title }} + + + - {{ .Site.Title }} + {{ .Site.Title }}

-