From 86c71768a78533990005e5e623854906be7560ed Mon Sep 17 00:00:00 2001 From: Yuliang Weng <59968766+yld-weng@users.noreply.github.com> Date: Fri, 4 Nov 2022 16:47:29 +0000 Subject: [PATCH] style: new branding --- .../2020-03-22-datavizhub-guide/index.mdx | 202 ++++++---- .../index.mdx | 15 +- .../2020-07-04-LearningPath-Lab/index.mdx | 15 +- .../index.mdx | 350 ++++++++++++------ .../workconflict.jsx | 2 +- .../FairnessVis.jsx | 2 +- gatsby-config.js | 2 +- src/components/blog/blogPostGrid.jsx | 6 +- .../__snapshots__/eventNotice.spec.js.snap | 4 +- .../__snapshots__/featuredItem.spec.js.snap | 44 +-- .../__snapshots__/homeCommunity.spec.js.snap | 48 +-- .../__snapshots__/latestPost.spec.js.snap | 48 +-- .../__snapshots__/learningPath.spec.js.snap | 52 +-- src/components/home/eventNotice.jsx | 2 +- src/components/home/featuredItem.jsx | 8 +- src/components/home/homeCommunity.jsx | 2 +- src/components/home/homeShowcase.jsx | 2 +- src/components/home/latestPost.jsx | 6 +- src/components/home/learningPath.jsx | 2 +- .../__snapshots__/header.spec.js.snap | 70 ++-- .../__snapshots__/search.spec.js.snap | 10 +- src/components/shared/footer.jsx | 2 +- src/components/shared/header.jsx | 97 ++--- src/components/shared/layout.jsx | 50 +-- src/components/shared/seo.jsx | 9 +- src/components/style/styleComponent.jsx | 23 +- src/components/style/visStyle.jsx | 2 +- .../__snapshots__/visLayout.spec.js.snap | 8 +- .../__snapshots__/wordCloud.spec.js.snap | 4 +- src/css/animation.scss | 100 ++--- src/css/index.scss | 16 +- src/css/style.scss | 10 +- src/data/nav.json | 30 ++ src/images/Favicon_128x128.png | Bin 0 -> 5716 bytes src/images/UOSLogo_Primary_Violet_RGB.svg | 1 + src/images/UOSLogo_Primary_White_RGB.svg | 1 + src/pages/404.jsx | 17 +- src/pages/about.jsx | 31 +- src/pages/index.jsx | 8 +- tailwind.config.js | 15 +- 40 files changed, 770 insertions(+), 546 deletions(-) create mode 100644 src/data/nav.json create mode 100644 src/images/Favicon_128x128.png create mode 100644 src/images/UOSLogo_Primary_Violet_RGB.svg create mode 100644 src/images/UOSLogo_Primary_White_RGB.svg diff --git a/content/docs/2020-03-22-datavizhub-guide/index.mdx b/content/docs/2020-03-22-datavizhub-guide/index.mdx index 2c4fd3318..5fd4bb448 100644 --- a/content/docs/2020-03-22-datavizhub-guide/index.mdx +++ b/content/docs/2020-03-22-datavizhub-guide/index.mdx @@ -2,98 +2,170 @@ type: docs author: ["Dataviz Team"] title: "Data Visualisation" -description: "What, Why, How, Where. Learn more by go through three different learning paths - which includes contents on explore data visualisations, tutorials and guides on creating - data visualisation, and adopt reproducible workflow." +description: + "What, Why, How, Where. Learn more by go through three different learning paths + which includes contents on explore data visualisations, tutorials and guides on creating + data visualisation, and adopt reproducible workflow." date: 2020-03-22 template: "custom" featured: false --- -import React from 'react' -import Scrollspy from 'react-scrollspy' -import Fade from 'react-reveal/Fade' -import bg from './bg1.jpg' - +import React from "react"; +import Scrollspy from "react-scrollspy"; +import Fade from "react-reveal/Fade"; +import bg from "./bg1.jpg"; -
-
+
+
Data Visualisation
Dataviz.Shef Team
- What is data visualisation - Why is it important - How this site could help - Where should I start + + What is data visualisation + + + Why is it important + + + How this site could help + + + Where should I start +
-
- +
+
-

What is data visualisation?

+

+ What is data visualisation? +

- Data visualisation generally considered as the graphical representation of information and data, it - is currently an extremely active and critical aspect in research, teaching, and development, and - is closely related to information graphics, information visualisation, scientific visualisation, - and statistical graphics. + Data visualisation generally considered as the graphical + representation of information and data, it is currently an extremely + active and critical aspect in research, teaching, and development, and + is closely related to information graphics, information visualisation, + scientific visualisation, and statistical graphics. dashboard with visualisations - The main purpose of data visualisation is to communicate information clearly and effectively by - means of graphical representation. However, this does not mean that data visualisation must be - boring for its functional purpose, or extremely complicated to look gorgeous. -

In order to effectively communicate ideas and concepts, - aesthetic and functions need to go hand in hand, and by visually communicating key aspects and - features, we get deep insights into fairly sparse and complex datasets. - + The main purpose of data visualisation is to communicate information + clearly and effectively by means of graphical representation. However, + this does not mean that data visualisation must be boring for its + functional purpose, or extremely complicated to look gorgeous. +

In order to effectively communicate ideas and concepts, aesthetic + and functions need to go hand in hand, and by visually communicating key + aspects and features, we get deep insights into fairly sparse and complex + datasets.

-
+
-
-

Why is it important?

-

- The huge amount of data is one of the characteristics of the Internet era. Learn to quickly digest - and absorb useful information in huge data groups can greatly help to seize opportunities. Studies - have shown that the amount of information we use visually is far greater than other senses. This also - means that the possibility of finding relevant information through data visualization is far greater - than other methods, and it allow viewers to get more information. huge dataset - While many organisations and companies across different sectors relying on data to gain insights and - optimising their products, data visualisation is not yet an integral part of research communication. - Today, powerful, modern, open source, interactive and web-based visualisation tools have revolutionised - the potential for research data impact, we are here to help our researchers make the most of their - data and take advantage of such tools. -

-
+
+

+ Why is it important? +

+

+ The huge amount of data is one of the characteristics of the Internet + era. Learn to quickly digest and absorb useful information in huge + data groups can greatly help to seize opportunities. Studies have + shown that the amount of information we use visually is far greater + than other senses. This also means that the possibility of finding + relevant information through data visualization is far greater than + other methods, and it allow viewers to get more information.{" "} + huge dataset + While many organisations and companies across different sectors relying + on data to gain insights and optimising their products, data visualisation + is not yet an integral part of research communication. Today, powerful, + modern, open source, interactive and web-based visualisation tools have + revolutionised the potential for research data impact, we are here to help + our researchers make the most of their data and take advantage of such + tools. +

+
-
-

How this site could help?

-

- Support through:
- • Documentation on dataviz best practice and use of tools
- • Communication channels
- • Capacity building opportunities through Events
+

+

+ How this site could help? +

+

+ Support through:
+ • Documentation on dataviz best practice and use of tools
+ • Communication channels
+ • Capacity building opportunities through Events
• Help when you needed
• Contribution
-

-
+

+
-
-

Where should I start?

-

- • Learn from documentations
- • Share your data visualisations on ORDA showcase
- • Join the google group and/or slack community
- • Contribute blog post
- • Contribute to the website
- • Get in touch with ideas for training, coding clubs, hackathons
-

-
+
+

+ Where should I start? +

+

+ • Learn from documentations
+ • Share your data visualisations on + ORDA showcase +
+ • Join the{" "} + + google group + {" "} + and/or{" "} + + slack community + {" "} +
+ • + Contribute blog post +
+ •{" "} + + Contribute + {" "} + to the website
+ • Get in touch with ideas for training, coding clubs, hackathons
+

+
-
\ No newline at end of file +
diff --git a/content/docs/2020-07-03-LearningPath-Introduction/index.mdx b/content/docs/2020-07-03-LearningPath-Introduction/index.mdx index d7b47b61b..02fa01db3 100644 --- a/content/docs/2020-07-03-LearningPath-Introduction/index.mdx +++ b/content/docs/2020-07-03-LearningPath-Introduction/index.mdx @@ -23,10 +23,7 @@ import { TiChevronLeft, TiChevronRight } from "react-icons/ti"; style={{ background: "#251d5a" }} >
-
+
Learning Path - Introduction
@@ -91,7 +88,9 @@ import { TiChevronLeft, TiChevronRight } from "react-icons/ti"; >
-

WELCOME!

+

+ WELCOME! +

This is the first learning path prepared from the{" "} Dataviz.Shef team that helps you to get started. This learning @@ -114,7 +113,7 @@ import { TiChevronLeft, TiChevronRight } from "react-icons/ti";

-

+

Data visualisation basics

@@ -338,7 +337,7 @@ import { TiChevronLeft, TiChevronRight } from "react-icons/ti"; {/* What charts? */}
-

+

What charts?

@@ -377,7 +376,7 @@ import { TiChevronLeft, TiChevronRight } from "react-icons/ti";

-

Tools!

+

Tools!

There are many tools available out there to build visualisations and each of them has their own focus, strength and weaknesses. These tools diff --git a/content/docs/2020-07-04-LearningPath-Lab/index.mdx b/content/docs/2020-07-04-LearningPath-Lab/index.mdx index fc690509b..3e0d0320c 100644 --- a/content/docs/2020-07-04-LearningPath-Lab/index.mdx +++ b/content/docs/2020-07-04-LearningPath-Lab/index.mdx @@ -20,12 +20,7 @@ import { TiChevronLeft, TiChevronRight } from "react-icons/ti";

-
- Learning Path - Lab -
+
Learning Path - Lab
Tutorials and guides on create data visualisations using different tools and languages. @@ -100,7 +95,7 @@ import { TiChevronLeft, TiChevronRight } from "react-icons/ti"; >
-

WELCOME!

+

WELCOME!

This is the second learning path prepared from the Dataviz.Shef team that is specifically designed for those who have completed{" "} @@ -139,7 +134,7 @@ import { TiChevronLeft, TiChevronRight } from "react-icons/ti";

-

R

+

R

-

Python

+

Python

-

Matlab

+

Matlab

-
-
Learning Path - Workflow
-
Increase your research impact through reproducible data visualisation workflows.
+
+
+
+ Learning Path - Workflow +
+
+ Increase your research impact through reproducible data visualisation + workflows. +
Dataviz.Shef Team
-
Learning Path - Lab
+
+ Learning Path - Lab +
-
- +
+
-

WELCOME!

+

+ WELCOME! +

- This is the third learning path prepared from the Dataviz.Shef team that is specifically designed - for those who have completed the Learning path - Lab or those experienced in creating data - visualisations using tools such as Python, R, Matlab, or Javascript etc.. If not, it is - recommended that you go through - the Learning path - Lab before you - read on.

- We will be referring to external resources as there are already resources available on the - internet and we have organised them in relevant sections. In addition, the university has a - partnership with Linkedin Learning providing thousands of online training courses to staff and - students through MUSE, we have also - included some useful courses to help you get started.

- The previous learning path focused on exploring what we can do with each programming language - to produce suitable data visualisations through three stages: data processing,   - Data visualisation, and Share. This learning path will guide you through a reproducible workflow - and how it might help you to increase your research impact. + This is the third learning path prepared from the Dataviz.Shef + team that is specifically designed for those who have completed the{" "} + Learning path - Lab or those experienced in creating data + visualisations using tools such as Python, R, Matlab, or Javascript + etc.. If not, it is recommended that you go through the{" "} + + + Learning path - Lab + + {" "} + before you read on.

+ We will be referring to external resources as there are already resources + available on the internet and we have organised them in relevant sections. + In addition, the university has a partnership with + Linkedin Learning + providing thousands of online training courses to staff and students + through + MUSE + , we have also included some useful courses to help you get started.{" "} +
+
+ The previous learning path focused on exploring what we can do with each + programming language to produce suitable data visualisations through three + stages: data processing,   + Data visualisation, and Share. This learning path will + guide you through a reproducible workflow and how it might help you to + increase your research impact.

-
+
- +
-

Reproducibility

-

- In computer science, reproducibility means that as long as the environment and initial - conditions are the same, when the program is executed or the program is executed repeatedly, no - matter if it is executed from beginning to end without stopping, or "stop and restart" execution, - we will get the same result. Therefore, reproducibility of data visualisation should follow the - same principle.

- Given the data and code provided (by an author) we should be able to get the - same output by following the same steps as the author does. But how do we ensure that data and - code are preserved and is accessible even after a long period of time for further research or - reference is important for data visulisations as well as for publications. We hope you will find - this information useful and if you have any questions or have found any errors in this page please - contact us on our communication - channels (email, slack, google group). -

+

+ Reproducibility +

+

+ In computer science, reproducibility means that as long as the + environment and initial conditions are the same, when the program is + executed or the program is executed repeatedly, no matter if it is + executed from beginning to end without stopping, or "stop and restart" + execution, we will get the same result. Therefore, + reproducibility of data visualisation should follow the same + principle.
+
+ Given the data and code provided (by an author) we should be able to + get the same output by following the same steps as the author does. + But how do we ensure that data and code are preserved and is + accessible even after a long period of time for further research or + reference is important for data visulisations as well as for + publications. We hope you will find this information useful and if you + have any questions or have found any errors in this page please + contact us on our communication channels ( + email,{" "} + slack,{" "} + + google group + + ). +

- +
-

Make yourself identifiable

-

- Sometimes two researchers could have the same name or initials due to culture differences and - writing systems etc, it is important that there is a mechanism for identifying who you are - regardless where and when you published articles, datasets, and make other contributions. To - resolve this problem, ORCID (Open Researcher and Contributor ID) was introduced in 2012 that - can provide a persistent digital identifier (an ORCID iD) that distinguishes you from other - researchers and a record that supports automatic links among all your professional activities. - Your ORCID iD and connections are stored in the ORCID Registry, in an account you - own and manage. To register, visit orcid.org. -

+

+ Make yourself identifiable +

+

+ Sometimes two researchers could have the same name or initials due to + culture differences and writing systems etc, it is important that + there is a mechanism for identifying who you are regardless where and + when you published articles, datasets, and make other contributions. + To resolve this problem, ORCID (Open Researcher and Contributor + ID) was introduced in 2012 that can{" "} + + provide a persistent digital identifier (an ORCID iD) that + distinguishes you from other researchers and a record that supports + automatic links among all your professional activities. Your{" "} + ORCID iD and connections are stored in the ORCID Registry, in + an account you own and manage + + . To register, visit{" "} + orcid.org. +

-

Make your data identifiable

-

- Identifying datasets and codes is equally important to identify - yourself. DOI (digital object identifier) was introduced in 2000 to identify many resources across - academic, professional, and government information, this will help you to include your datasets - and code within your publication through DOI. If other researchers can easily locate your data - and make use of it to reproduce your work to make sense of your data and communicate findings - more widely. Read the next section to learn more about options of data repositories you can use. -

- +

+ Make your data identifiable +

+

+ Identifying datasets and codes is equally important to identify + yourself. DOI (digital object identifier) was introduced in + 2000 to identify many resources across academic, professional, and + government information, this will help you to include your datasets + and code within your publication through DOI. If other + researchers can easily locate your data and make use of it to + reproduce your work to make sense of your data and communicate + findings more widely. Read the{" "} + + next section + {" "} + to learn more about options of data repositories you can use. +

+
-

Deposit your data

-

- For reproducibility purposes we advise you to deposit data and codes in data repositories that - can be accessed and cited by anyone around the world through a - unique DOI (digital object identifier). For some repositories it is possible to use programming - languages like Python and R to fetch data directly from the source using URL provided. If your - data is not classified as sensitive data and no discipline-specific repository is available, we - encourage you to deposit data and code in University's data - repository (powered by figshare) - Online Research Data (ORDA). For other - recommendations including discipline-specific repositories, visit - The University Library’s Research Data Repositories Page. -

-

- If you have a GitHub account, check out the following articles: -

- - Citable code - Connect figshare with GitHub - -

- There might be cases where your data comes from external sources like data.gov.uk, don't forget - acknowledge the source of the information in your data and state the licence applied to. -

-

- We also encourage you not to limit to data visulisation and to visit The University - Library RDM page to give you a broad - overview of Research Data Management at the university and many specific guidances. -

+

+ Deposit your data +

+

+ For reproducibility purposes we advise you to deposit data and codes + in data repositories that can be accessed and cited by anyone{" "} + around the world through a unique DOI (digital object + identifier). For some repositories it is possible to use programming + languages like Python and R to fetch data directly from the source + using URL provided. If your data is not classified as sensitive data + and no discipline-specific repository is available, we encourage you + to deposit data and code in University's data repository (powered by{" "} + figshare) -{" "} + + Online Research Data (ORDA) + + . For other recommendations including discipline-specific + repositories, visit The University Library’s{" "} + + Research Data Repositories Page + + . +

+

If you have a GitHub account, check out the following articles:

+ + + Citable code + + + Connect figshare with GitHub + + +

+ There might be cases where your data comes from external sources like{" "} + data.gov.uk, don't forget acknowledge the source of the + information in your data and state the licence applied to. +

+

+ We also encourage you not to limit to data visulisation and to visit + The University Library{" "} + + RDM page + {" "} + to give you a broad overview of Research Data Management at the + university and many specific guidances. +

-
+
-

Congratulations!

You - have completed the learning path - Workflow, now you understand the importance of the - reproducible data visualisation workflow and also able to deposit data and code in suitable - data repositories. Note that we are updating learning paths from time to time, so do keep eye - on this website and our community channels to get the latest information. +

+ Congratulations! +

{" "} + You have completed the learning path - Workflow, now you understand + the importance of the reproducible data visualisation workflow and also + able to deposit data and code in suitable data repositories. Note that we + are updating learning paths from time to time, so do keep eye on this + website and our community channels to get the latest information.
-
-
\ No newline at end of file + +
+
diff --git a/content/visualisation/2021-06-04-Workplace-Conflict/workconflict.jsx b/content/visualisation/2021-06-04-Workplace-Conflict/workconflict.jsx index 235a045fa..5e760d811 100644 --- a/content/visualisation/2021-06-04-Workplace-Conflict/workconflict.jsx +++ b/content/visualisation/2021-06-04-Workplace-Conflict/workconflict.jsx @@ -69,7 +69,7 @@ const Workconflict = () => { style={{ color: "#fff", lineHeight: 1.3, - fontFamily: "TUOS Stephenson, Georgia, Times, serif", + fontFamily: "Source Serif Pro, serif", fontSize: "3.75rem", fontWeight: "700", marginBottom: "2.5rem", diff --git a/content/visualisation/2022-01-31-ORDA-datasets-FAIRness-assessment/FairnessVis.jsx b/content/visualisation/2022-01-31-ORDA-datasets-FAIRness-assessment/FairnessVis.jsx index cedfbf230..5c39df24a 100644 --- a/content/visualisation/2022-01-31-ORDA-datasets-FAIRness-assessment/FairnessVis.jsx +++ b/content/visualisation/2022-01-31-ORDA-datasets-FAIRness-assessment/FairnessVis.jsx @@ -25,7 +25,7 @@ const FairnessVis = () => { style={{ fontSize: "2.5rem", fontWeight: "900", - fontFamily: "TUoS Blake", + fontFamily: "Source Serif Pro", color: "#1a1919", fontStyle: "italic" }} diff --git a/gatsby-config.js b/gatsby-config.js index 80a9e836b..fdd77aa68 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -221,7 +221,7 @@ module.exports = { background_color: `#ffffff`, theme_color: `#ffffff`, display: `minimal-ui`, - icon: `src/images/icon.png`, // This path is relative to the root of the site. + icon: `src/images/Favicon_128x128.png`, // This path is relative to the root of the site. cache_busting_mode: "none" // Work with offline plugin } }, diff --git a/src/components/blog/blogPostGrid.jsx b/src/components/blog/blogPostGrid.jsx index 4e207e751..9188a3d7c 100644 --- a/src/components/blog/blogPostGrid.jsx +++ b/src/components/blog/blogPostGrid.jsx @@ -32,7 +32,7 @@ const blogPostGrid = ({ allMdx }) => {

Featured

@@ -43,10 +43,10 @@ const blogPostGrid = ({ allMdx }) => {
-

+

{title}

-

+

{description}

diff --git a/src/components/home/__tests__/__snapshots__/eventNotice.spec.js.snap b/src/components/home/__tests__/__snapshots__/eventNotice.spec.js.snap index c7541f517..838050900 100644 --- a/src/components/home/__tests__/__snapshots__/eventNotice.spec.js.snap +++ b/src/components/home/__tests__/__snapshots__/eventNotice.spec.js.snap @@ -25,7 +25,7 @@ Object { class="flex flex-wrap w-full overflow-hidden max-h-90 text-gray-700 group pb-2 px-2" href="https://www.eventbrite.co.uk/e/celebration-of-open-research-at-the-university-of-sheffield-tickets-163679197887" rel="noopener noreferrer" - style="font-family: TUoS Blake;" + style="font-family: Source Serif Pro;" target="_blank" >

Featured

Featured

, "container":

Featured

Featured

YOUR COMMUNITY. @@ -99,7 +99,7 @@ Object { href="/events" >

@@ -583,7 +583,7 @@ Object { class="flex w-full h-full justify-center" >
@@ -1260,7 +1260,7 @@ Object { class="flex w-full h-full justify-center" >
, "container":
a { color: rgb(34, 34, 34); font-weight: 600; - border-left: #00aeef 6px solid; + border-left: #9adbe8 6px solid; padding-left: 8px; } } @@ -279,19 +279,19 @@ Home Search bar & animation padding-left: 1rem; margin-top: 2.5rem; margin-bottom: 1.3rem; - border-left: 1rem solid #11b1ff; - font-family: "TUOS Stephenson", Georgia, Times, serif; + border-left: 0.5rem solid #9adbe8; + font-family: "Source Sans Pro", sans-serif; } h1.accAbt { @extend .accAbt; font-size: 2rem; margin-top: 5rem; - border-left: 1.7rem solid #1961ae; + border-left: 1rem solid #440099; } h2.accAbt { @extend .accAbt; font-size: 1.6rem; - font-family: "Open Sans", sans-serif; + font-family: "Source Serif Pro", serif; } .accAbtSubItem { padding-left: 2rem; diff --git a/src/data/nav.json b/src/data/nav.json new file mode 100644 index 000000000..3350e00c8 --- /dev/null +++ b/src/data/nav.json @@ -0,0 +1,30 @@ +[ + { + "route": "/", + "title": "Home" + }, + { + "route": "/community", + "title": "Community" + }, + { + "route": "/events", + "title": "Events" + }, + { + "route": "/blog", + "title": "Blog" + }, + { + "route": "/visualisation", + "title": "Visualisation" + }, + { + "route": "https://orda.shef.ac.uk/visualisations/", + "title": "Showcase" + }, + { + "route": "/about", + "title": "About" + } +] diff --git a/src/images/Favicon_128x128.png b/src/images/Favicon_128x128.png new file mode 100644 index 0000000000000000000000000000000000000000..05a9ebfb04d41933ce7872daeebe5029bc31564b GIT binary patch literal 5716 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�Vz9V0M;)iBN zQ2v~q^7H#3w$1{Y{NCA8^M-X^5f#Ubr_GyJ#OHYr59f6o_0%ypCFU5ua8AaL7C9gb zL5x7fpp4-SEcW?qG>7kMuKq>TYB_g^`F&}2LXipJF5G#4t^umoou!hZT*$JbQOFfl zs(|AN%>d7e$gWW5Q#XngqFczcVNRgBd~W|hAWTlk@P<$)laMMvA~o<;Hh|es&Uv|!~ zFK|tL<_(KgAxI6=sCpzC4X?I91$$t3Xx*=>ju|fTA^p zQNyVJij3zR^!xAtd?Zu}mrv?k{ZcankOMv+`n>8IB8DHdl{IDN{Ay+}Z&ZB}+?YX) zE}vp(LWYCI{^O{P0VHCAks>vNc~Igjs_Yv`Tes!}%5?4~Wfg1aXAJK5$5D4@&~sHA z7ZhelbV7G;QIW6pc;B%zi4NM5G+r;#xf9I`n7!K5GMg0;-0h2_RtB&&>$|I-C+orb zX4DYd2hTqljdDHzr0v=nmt*_iGSYz8`JJ`fmkS*_5l0%MmcVGpkZ&4lRRM~s1talk zAb z+^uCH8ZiOiB#@cVeg4VR6^*-?R%i+l$r$>67ZQQN)1;{RyJ9(8ka8~{^n?MV!Y(5| zu3^@(RVs-wE`5eT#i4VAd@7$4uzNy=pDTUQ1yM^NC<*Lovr@J!C>kMT|C}QG0khiK zcX;7PZZ&}ya{Oh%ca!tqw0({I`qFQ`^9k?UF>)n>QHLjFxU$Vu1U;P(V9S_m^JxJh zpH+|Az($Bm4y=B6bgjnxF$i7o9-B1~`Qv=*Hr9wvFRcDJ`Y|A4N9YlAE-3dFD+x%< zBu(SgrVM8IBpG`;z>?1~d{T6m^ZKTI;Vtc`+UZ*cJ)aV0+sTHkQRr1YR0I%Kn=EN2 zSv#WtS&rXO$G}N^{v_h#_G#RI zsa^4^D)2Ot+QN*a*cK$PlZ3t!U-~^H$}&MutX`9%buw`jm8zSkx*aCy;Vvb8C%*Jk z1-KZLF=_|)g*qRrmKl9|~uV~buNQVh3yF?JqwcItqqd?TN z@?9xGaLBFR)nHHn%-9W{8%2C+k_vEPlShZD4x`q=61uy0-uz*85w&yJ-2%1(I(Fsv z#m~<}&vF4pK(pyN89%U6w!jFVDSIAb@%Z|m-gKXQ?B0*c?>_k7%v}Assc3E?>D@(l zFAO3658EJ5V>du-?6h!+R01yIP!+p?t>(?9RO^=+NstAI&+3Os%5Fa8fP#*peuQ_6 zpwSE<5fiYA9;#v&Kv-1+X;rzbc73m+*q^rgzViH@UZ9aSKpH|9nbv^A{YvVTMXMM< zuEz`Z`OGHlAvBv;YpS~rw2lE3RvPTABbihX`)w6ZYgWCB)-r%xZ$8;q=iWsb=vczn zwsT4^&}s%y*m}c#Wr|KqV8&YbJ*(TR6LW$A6oWFh%NmJwsRdfJpKGhQPr{sH0J$DT z+!fe9*x##0jb3BUF@PcvBg|RCE9NW%C`vHGjP>W|G~pF(Ep22j`$_uFj0BJSMYCZ=lVF^_r7V;=LE$2@9*i2OeZtjQ%&WQm>t0000dk1d- literal 0 HcmV?d00001 diff --git a/src/images/UOSLogo_Primary_Violet_RGB.svg b/src/images/UOSLogo_Primary_Violet_RGB.svg new file mode 100644 index 000000000..0bd478678 --- /dev/null +++ b/src/images/UOSLogo_Primary_Violet_RGB.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/UOSLogo_Primary_White_RGB.svg b/src/images/UOSLogo_Primary_White_RGB.svg new file mode 100644 index 000000000..d1c995020 --- /dev/null +++ b/src/images/UOSLogo_Primary_White_RGB.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/404.jsx b/src/pages/404.jsx index df10cb36c..aa2d298b9 100644 --- a/src/pages/404.jsx +++ b/src/pages/404.jsx @@ -1,7 +1,7 @@ -import React from "react" -import SEO from "../components/shared/seo" -import Bg from "../images/404/moon.jpg" -import { Link } from "gatsby" +import React from "react"; +import SEO from "../components/shared/seo"; +import Bg from "../images/404/moon.jpg"; +import { Link } from "gatsby"; const NotFoundPage = () => ( <> @@ -19,7 +19,10 @@ const NotFoundPage = () => ( className="flex items-center justify-center text-center" style={{ backgroundImage: `url(${Bg})`, minHeight: "650px" }} > -
+

Page Not Found

(

-) +); -export default NotFoundPage +export default NotFoundPage; diff --git a/src/pages/about.jsx b/src/pages/about.jsx index 014c02218..a69bd7039 100644 --- a/src/pages/about.jsx +++ b/src/pages/about.jsx @@ -1,15 +1,15 @@ -import React from "react" -import { Link } from "gatsby" -import SEO from "../components/shared/seo" -import RSE from "../images/about/rse.png" -import ITS from "../images/about/its.png" -import ORDA from "../images/about/orda_logo.jpg" -import Fade from "react-reveal/Fade" -import bg from "../images/about/about.jpg" +import React from "react"; +import { Link } from "gatsby"; +import SEO from "../components/shared/seo"; +import RSE from "../images/about/rse.png"; +import ITS from "../images/about/its.png"; +import ORDA from "../images/about/orda_logo.jpg"; +import Fade from "react-reveal/Fade"; +import bg from "../images/about/about.jpg"; const About = () => { let logoStyle = - "max-w-xs rounded overflow-hidden my-4 p-6 flex flex-wrap justify-center content-center w-full sm:w-1/3" + "max-w-xs rounded overflow-hidden my-4 p-6 flex flex-wrap justify-center content-center w-full sm:w-1/3"; return ( <> @@ -32,7 +32,10 @@ const About = () => { }} > -
+

{ >

The
@@ -165,7 +168,7 @@ const About = () => {

- ) -} + ); +}; -export default About +export default About; diff --git a/src/pages/index.jsx b/src/pages/index.jsx index f3e63cfd1..14d40b9fc 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -102,7 +102,7 @@ const IndexPage = ({ data: { featuredItem, latestPost, eventBrite } }) => { What is data visualisation @@ -114,7 +114,7 @@ const IndexPage = ({ data: { featuredItem, latestPost, eventBrite } }) => { {/* Right component */} {/*style={{borderTop: "50px solid #000000", }} */}
{/* An example of visualisation, update weekly/monthly? */} @@ -215,7 +215,7 @@ const IndexPage = ({ data: { featuredItem, latestPost, eventBrite } }) => {

Data and visualisation

@@ -257,7 +257,7 @@ const IndexPage = ({ data: { featuredItem, latestPost, eventBrite } }) => { >

Collaboration and Partnership.

diff --git a/tailwind.config.js b/tailwind.config.js index beca9169f..d8783150d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -25,8 +25,10 @@ module.exports = { backgroundColor: { footer: "#414042", highlight: "#1cbfff", - "brand-blue": "#00aeef", + "brand-blue": "#9ADBE8", "brand-pink": "#ff79b4", + "brand-black": "#131E29", + "brand-purple": "#440099", light_grey: "#f1f1f1", light_black: "rgba(0,0,0, .6)", "black-10": "rgba(0, 0, 0, .1)", @@ -44,8 +46,10 @@ module.exports = { sheflightBlue: "#ade1f8" }, borderColor: { - "brand-blue": "#00aeef", + "brand-blue": "#9ADBE8", "brand-pink": "#ff79b4", + "brand-black": "#131E29", + "brand-purple": "#440099", menu_red: "#ff5e5e", menu_yellow: "#f3f218", menu_green: "#99f318", @@ -76,9 +80,6 @@ module.exports = { c1: "0px 12px 15px 0px #C8C4C1", c2: "0px 12.3px 15.37px 0px #3A3631" }, - fontFamily: { - stephenson: ["TUOS Stephenson", "Georgia", "Times", "serif"] - }, fontSize: { xxs: ".65rem", med: ".94rem" @@ -200,7 +201,9 @@ module.exports = { }, textColor: { highlight: "#337ab7", - "brand-blue": "#00aeef", + "brand-blue": "#9ADBE8", + "brand-black": "#131E29", + "brand-purple": "#440099", shefBlue: "#0066b3", shefPurple: "#251d5a", shefYellow: "#fedf00",