diff options
| author | Joe Carstairs <jcarstairs@scottlogic.com> | 2023-08-01 20:21:11 +0100 |
|---|---|---|
| committer | Joe Carstairs <jcarstairs@scottlogic.com> | 2023-08-02 18:57:52 +0100 |
| commit | 227eac690914886c5dd6d9a8bd627534c86b4a5d (patch) | |
| tree | 36927e42c47b8e1c7c0135bf358e954b0bd8e41a /frontend/public | |
| parent | 6bd4846b71944add485433703d85982b2396d9ad (diff) | |
Initial commit
Diffstat (limited to 'frontend/public')
| -rw-r--r-- | frontend/public/favicon.ico | bin | 0 -> 15406 bytes | |||
| -rw-r--r-- | frontend/public/main.css | 308 | ||||
| -rw-r--r-- | frontend/public/normalize.css | 353 |
3 files changed, 661 insertions, 0 deletions
diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico Binary files differnew file mode 100644 index 0000000..d8c1f5c --- /dev/null +++ b/frontend/public/favicon.ico diff --git a/frontend/public/main.css b/frontend/public/main.css new file mode 100644 index 0000000..11e81b2 --- /dev/null +++ b/frontend/public/main.css @@ -0,0 +1,308 @@ +:root { + --color-primary-50: #fdd3fd; + --color-primary-100: #f49ff4; + --color-primary-200: #e372e3; + /* --color-primary-300: #e372e3; + --color-primary-400: #ba40ba; */ + --color-primary-500: #8f3d8f; + /* --color-primary-600: #6c356c; + --color-primary-700: #5b335b; */ + --color-primary-800: #442c44; + --color-primary-900: #251d25; + + --max-width-prose-content: 35rem; + + --breakpoint-sm: 640px; + --breakpoint-lg: 1280px; + + --spacing-block-lg: 2rem; + --spacing-block-md: 1.25rem; + --spacing-block-sm: 0.375rem; + --spacing-inline-lg: 5rem; + --spacing-inline-md: 3rem; + --spacing-inline-sm: 1.5rem; + + --base-font-size-min: 16px; + --base-font-size-max: 30px; + + --font-size-sm: 0.875rem; + + scroll-behavior: smooth; + font-family: 'Alegreya Sans', Lato, Calibri, 'sans-serif'; + font-size: var(--base-font-size-min); + font-weight: 300; + color: var(--color-primary-50); + background-color: var(--color-primary-900); +} + +@media screen and (min-width: var(--breakpoint-sm)) { + :root { + --sm-to-lg: calc(var(--breakpoint-lg) - var(--breakpoint-sm)); + --this-to-lg: calc(100vw - var(--base-font-size-min)); + --base-font-size-range: calc(var(--base-font-size-max) - var(--base-font-size-min)); + --font-size-to-add: calc(var(--base-font-size-range) * (var(--sm-to-lg) / var(--this-to-lg))); + font-size: calc(var(--base-font-size-min) + var(--font-size-to-add)); + } +} + +:is(main, article) { + background-color: var(--color-primary-50); + color: var(--color-primary-900); + container-name: main; + container-type: inline-size; +} + +:is(main, article) :is(section, header):not(:is(section, header) :is(section, header)) { + padding-inline: max(10%, calc((100% - var(--max-width-prose-content)) / 2)); +} + +:is(main, article) + :is(section, header):not(.section--full-width):not(:is(section, header) :is(section, header)) + > p { + max-width: var(--max-width-prose-content); +} + +:is(main, article) :is(section, header):not(:is(section, header) :is(section, header)) { + padding-block: var(--spacing-block-lg) var(--spacing-inline-lg); +} + +:is(main, article) section:nth-child(even):not(:is(section, header) :is(section, header)) { + background-color: var(--color-primary-100); +} + +.title, h1, h2, h3, h4 { + font-family: Alegreya, 'Goudy Old Style', Garamond, serif; +} + +.title { + font-size: 3.75rem; + font-weight: 700; + padding-block-start: var(--spacing-block-sm); +} + +.title--small { + font-size: 1.25rem; + padding-block-start: 0; +} + +h1, h2, h3, h4 { + padding-block-start: var(--spacing-block-lg); +} + +h1:first { + padding-block-start: var(--spacing-block-sm); +} + +h1 { + font-size: 2.5rem; + font-weight: 600; +} + +h2 { + font-size: 2rem; + font-weight: 500; +} + +h3 { + font-size: 1.5rem; + font-weight: 400; +} + +h4 { + font-size: 1.125rem; + font-weight: 400; +} + +p:not(:first) { + padding-block-start: var(--spacing-block-md); +} + +.link { + text-decoration: underline; + text-decoration-color: var(--color-primary-900); + border: dotted transparent 2px; + border-radius: 0.375rem; + transition: + text-decoration-color 300ms, + color 300ms, + border-color 300ms, + font-weight 300ms; +} + +.link:hover { + text-decoration-color: transparent; +} + +.link:focus { + border-color: var(--color-primary-500); +} + +.link:active { + font-weight: 700; + color: var(--color-primary-100); +} + +.btn { + border: solid 2px var(--color-primary-900); + font-weight: 500; + text-decoration: underline; + padding-inline: 0.5rem; + padding-block: 0.25rem; + background-color: transparent; + transition: + background-color 300ms, + text-decoration-color 300ms, + transform 50ms; +} + +.btn:hover { + background-color: var(--color-primary-200); + text-decoration-color: transparent; +} + +.btn:active { + transform: scale(1.1, 1.1); +} + +.btn--dark { + border-color: var(--color-primary-50); +} + +.btn--dark:hover { + background-color: var(--color-primary-800); +} + +td { + padding-block-start: var(--spacing-block-sm); +} + +hr { + width: 33%; + margin-block: auto; + margin-inline: --spacing-inline-sm; +} + +ol li { + list-style-type: decimal; + margin-inline-start: --spacing-inline-md; +} + +.schedule dt { + font-weight: 500; + margin-block-start: var(--spacing-block-md); + text-align: center; +} + +.schedule dd { + text-align: center; +} + +.schedule dd:last-child { + margin-block-end: var(--spacing-block-md); +} + +@container main (min-width: 20rem) { + .schedule { + display: grid; + grid-template-columns: fit-content(5rem) 1fr; + grid-column-gap: var(--spacing-inline-sm); + grid-row-gap: var(--spacing-block-sm); + } + + .schedule dt { + grid-column-start: 1; + margin: 0; + text-align: end; + } + + .schedule dd { + grid-column-start: 2; + text-align: start; + } + + .schedule dd:last-child { + margin-block-end: 0; + } +} + +@container main (min-width: 20rem) { + .lallans-issue__primary-info { + display: grid; + grid-template-columns: 1fr min-content; + grid-template-rows: min-content min-content; + grid-gap: 1rem; + } + + .lallans-issue__primary-info header { + grid-row: 1 / 3; + } + + .lallans-issue__img { + min-width: 10rem; + } +} + +.lallans-issue__img { + height: auto; + max-width: 10rem; +} + +.news-post { + margin-block: 1.5rem; + margin-inline: 0.5rem; + width: 30%; + border: solid 2px var(--color-primary-800); + color: var(--color-primary-800); + overflow: hidden; + text-overflow: ellipsis; + padding-inline: var(--spacing-inline-sm); + padding-block: var(--spacing-block-sm); + transition: + background-color 300ms, + color 300ms, + transform 50ms; +} + +.news-post:hover { + background-color: var(--color-primary-50); + color: var(--color-primary-900); +} + +.news-post:active { + transform: scale(1.1, 1.1); +} + +.news-post__title { + padding-block: 0; + text-decoration: underline; + transition: text-decoration 300ms; +} + +.news-post:hover .news-post__title { + text-decoration-color: transparent; +} + +.news-post__summary { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + white-space: normal; + font-size: var(--font-size-sm); +} + +footer { + padding-block-start: var(--spacing-block-md); + padding-bottom: 8rem; + margin-inline: 10%; +} + +.back-to-top-link { + width: fit-content; + margin-inline: auto; +} + +@media (min-width: var(--breakpoint-sm)) { + .back-to-top-link { + margin-inline-end: 0; + } +}
\ No newline at end of file diff --git a/frontend/public/normalize.css b/frontend/public/normalize.css new file mode 100644 index 0000000..a10992b --- /dev/null +++ b/frontend/public/normalize.css @@ -0,0 +1,353 @@ +/*! 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; +} + +:visited { + color: inherit; +}
\ No newline at end of file |
