From 68b2912615974a742e077d7f090545cafd4b8e95 Mon Sep 17 00:00:00 2001 From: Segundo Fdez Date: Thu, 20 Jan 2022 11:07:26 +0100 Subject: [PATCH] test styles --- ...s_abdeb689137b085b8cf50bb0fe96e360.content | 355 ++++++++++++++++++ ....css_abdeb689137b085b8cf50bb0fe96e360.json | 1 + src/themes/oscar/assets/css/common.css | 7 + src/themes/oscar/assets/css/main.css | 17 - src/themes/oscar/assets/css/variables.css | 6 +- 5 files changed, 368 insertions(+), 18 deletions(-) create mode 100644 src/resources/_gen/assets/css/css/main.css_abdeb689137b085b8cf50bb0fe96e360.content create mode 100644 src/resources/_gen/assets/css/css/main.css_abdeb689137b085b8cf50bb0fe96e360.json diff --git a/src/resources/_gen/assets/css/css/main.css_abdeb689137b085b8cf50bb0fe96e360.content b/src/resources/_gen/assets/css/css/main.css_abdeb689137b085b8cf50bb0fe96e360.content new file mode 100644 index 0000000..f75a1a7 --- /dev/null +++ b/src/resources/_gen/assets/css/css/main.css_abdeb689137b085b8cf50bb0fe96e360.content @@ -0,0 +1,355 @@ + +@import 'https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@400;700&display=swap'; +/* Basic */ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ +/* Document + ========================================================================== */ +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + } +/* Sections + ========================================================================== */ +/** + * Remove the margin in all browsers. + */ +body { + margin: 0; + } +/** + * Render the `main` element consistently in IE. + */ +main { + display: block; + } +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; + } +/* Grouping content + ========================================================================== */ +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ + } +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } +/* Text-level semantics + ========================================================================== */ +/** + * Remove the gray background on active links in IE 10. + */ +a { + background-color: transparent; + } +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ + } +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, + strong { + font-weight: bolder; + } +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, + kbd, + samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } +/** + * Add the correct font size in all browsers. + */ +small { + font-size: 80%; + } +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ +sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } +sub { + bottom: -0.25em; + } +sup { + top: -0.5em; + } +/* Embedded content + ========================================================================== */ +/** + * Remove the border on images inside links in IE 10. + */ +img { + border-style: none; + } +/* Forms + ========================================================================== */ +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ +button, + input, + optgroup, + select, + textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ + } +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ +button, + input { /* 1 */ + overflow: visible; + } +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ +button, + select { /* 1 */ + text-transform: none; + } +/** + * Correct the inability to style clickable types in iOS and Safari. + */ +button, + [type="button"], + [type="reset"], + [type="submit"] { + -webkit-appearance: button; + } +/** + * Remove the inner border and padding in Firefox. + */ +button::-moz-focus-inner, + [type="button"]::-moz-focus-inner, + [type="reset"]::-moz-focus-inner, + [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; + } +/** + * Restore the focus styles unset by the previous rule. + */ +button:-moz-focusring, + [type="button"]:-moz-focusring, + [type="reset"]:-moz-focusring, + [type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; + } +/** + * Correct the padding in Firefox. + */ +fieldset { + padding: 0.35em 0.75em 0.625em; + } +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ + } +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; + } +/** + * Remove the default vertical scrollbar in IE 10+. + */ +textarea { + overflow: auto; + } +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ +[type="checkbox"], + [type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + } +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ +[type="number"]::-webkit-inner-spin-button, + [type="number"]::-webkit-outer-spin-button { + height: auto; + } +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ + } +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; + } +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ + } +/* Interactive + ========================================================================== */ +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ +details { + display: block; + } +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; + } +/* Misc + ========================================================================== */ +/** + * Add the correct display in IE 10+. + */ +template { + display: none; + } +/** + * Add the correct display in IE 10. + */ +[hidden] { + display: none; + } +:root { +/* ========================================================================== + Fonts + ========================================================================== */ + --font-brand: 'Overpass Mono', monospace; + + /* Fonts weights */ + --fw-regular: 400; + --fw-bold: 700; + + + /* ========================================================================== + Colors + ========================================================================== */ + + /* Brand + ========================================================================== */ + --color-brand: #0161f0; + --background-main: #F0F0F0; + --color-main: #292929; + + +/* ========================================================================== + Font sizes + ========================================================================== */ + + /* Font sizes */ + --font-size-1: 14px; + --font-size-2: 16px; + --font-size-3: 26px; + + /* 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); + +} +/* Dark theme */ +@media (prefers-color-scheme: dark) { + :root { + --color-brand: #02A4FF; + --background-main: #292929; + --color-main: #F0F0F0; + } +} +/* ========================================================================== + 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); +} +body a { + color: var(--color-brand); + text-decoration: none; + } +h1, h2, h3, h4, h5, h6, +b, strong { + font-weight: var(--fw-bold); +} +i, em { + font-style: italic; +} +/* Layout */ +/* Components */ +/* Modules */ +/* Specific pages */ +/* Utilities */ +/* Vendors */ diff --git a/src/resources/_gen/assets/css/css/main.css_abdeb689137b085b8cf50bb0fe96e360.json b/src/resources/_gen/assets/css/css/main.css_abdeb689137b085b8cf50bb0fe96e360.json new file mode 100644 index 0000000..d514d9a --- /dev/null +++ b/src/resources/_gen/assets/css/css/main.css_abdeb689137b085b8cf50bb0fe96e360.json @@ -0,0 +1 @@ +{"Target":"css/main.css","MediaType":"text/css","Data":{}} \ No newline at end of file diff --git a/src/themes/oscar/assets/css/common.css b/src/themes/oscar/assets/css/common.css index 32562ef..46fac4b 100644 --- a/src/themes/oscar/assets/css/common.css +++ b/src/themes/oscar/assets/css/common.css @@ -5,8 +5,15 @@ } body { + background-color: var(--background-main); font-family: var(--font-brand); text-rendering: auto; + color: var(--color-main); + font: var(--font-body); + a { + color: var(--color-brand); + text-decoration: none; + } } h1, h2, h3, h4, h5, h6, b, strong { diff --git a/src/themes/oscar/assets/css/main.css b/src/themes/oscar/assets/css/main.css index 87f2f72..ec51cef 100644 --- a/src/themes/oscar/assets/css/main.css +++ b/src/themes/oscar/assets/css/main.css @@ -15,20 +15,3 @@ /* Utilities */ /* Vendors */ - -/* TODO: - install postcss with: - - postcss-import - - postcss-custom-media - - postcss-nested (I think this is working by default, so probably we don´t need this plugin) - */ - -/* TODO: - move this to common. */ -body { - background-color: var(--background-main); - a { - color: orange; - } -} - diff --git a/src/themes/oscar/assets/css/variables.css b/src/themes/oscar/assets/css/variables.css index 7a12cfe..c4b71d4 100644 --- a/src/themes/oscar/assets/css/variables.css +++ b/src/themes/oscar/assets/css/variables.css @@ -15,7 +15,9 @@ /* Brand ========================================================================== */ + --color-brand: #0161f0; --background-main: #F0F0F0; + --color-main: #292929; /* ========================================================================== @@ -38,7 +40,9 @@ /* Dark theme */ @media (prefers-color-scheme: dark) { :root { - --background-main: #000000; + --color-brand: #02A4FF; + --background-main: #292929; + --color-main: #F0F0F0; } }