remove inline CSS and reconfigure CSP plugin

README.md

@@ -5,9 +5,12 @@ nvm install 16
 npm install -g yarn
 yarn
 yarn global add gatsby-cli
-gatsby develop
+yarn build
+yarn start
 ```
 
+For a production build, use `yarn serve` instead of `yarn start`.
+
 ### Marquez green
 RGB: 113-221-191\
 CMYK: 49-0-14-13\

gatsby-config.ts

@@ -90,15 +90,14 @@ const plugins = [
           disableOnDev: false,
           reportOnly: false,
           mergeScriptHashes: true,
-          mergeStyleHashes: false,
+          mergeStyleHashes: true,
           mergeDefaultDirectives: true,
           directives: {
-            "script-src": "https: 'unsafe-eval'",
-            "script-src-elem": "'self' 'unsafe-inline' https://plausible.io/js/script.outbound-links.js",
-            "style-src": "'self' 'unsafe-inline'",
-            "style-src-elem": "'self' 'unsafe-inline' https://fonts.googleapis.com",
+            "script-src": "'self' 'unsafe-eval' https://plausible.io/js/script.outbound-links.js",
+            "script-src-elem": "'self' 'unsafe-hashes' 'sha256-jd1C8gAt3KiQo8RJ8fB5lxwhuFWo8UXLGvHAehvxeVk=' 'sha256-iKkBKEi9og8215U4DjZbF+TYC1aw/Q4XtA+Yz8JiSh4=' 'sha256-OzUnmjMIVuS+lOnNyveodXW96iw8WIDsfo02bVyJTKE=' 'sha256-r1R1bJHQ2LX3ekmreqx7Y+aSiGGrpPYACbCKNP9s82Q=' 'sha256-egpbluqkD8NT0bY3bWy7raM9tRIMkfUWboq0Y8KqsFk=' https://plausible.io/js/script.outbound-links.js https://www.googletagmanager.com",
+            "style-src": "'self' 'unsafe-hashes' 'sha256-+94JOX1HQRANuLOsn1gpzNE3I3JLzO0wrP9KspQf0cM=' 'sha256-iahNazrr5t3BQXcVfXbYSR8Bd2AOXPifwVTBbIKb/bE=' 'sha256-7buiYDizqbiAS404WOu2AY5NZDzyVesjpBU80D6Nno4=' 'sha256-f7qc12gYVX0xoX9jAoOIxHvtXcfppKYwcBr7sE0GLR4=' 'sha256-o4LYhp5wtluJ8/NWUV2vi+r5AxmP8X2zEvYHCpji+kI=' 'sha256-MtxTLcyxVEJFNLEIqbVTaqR4WWr0+lYSZ78AzGmNsuA=' https://fonts.googleapis.com",
+            "style-src-elem": "'self' 'unsafe-hashes' 'sha256-LuLD83XjKEDeQE2JbDqHgDbq4FVgc43d4S4wUyGCjEs=' 'sha256-mLiecSDCbxU+GwpOjEW11Ddlsg09pqoF9VA2VJ8XAK4=' 'sha256-UrOiXfLZp9TdAD7NY9X+JKYQ8F+C7AsCo9loq6bNNX8=' 'sha256-27nLLCfJPKzC4cpzFwNqY3YTXYmR0/qs1ExOGhQCw/c=' 'sha256-cLHlYu9WwZQgD1K6YlWPqFYXJEuD9YpxdlDktBDedco=' https://fonts.googleapis.com",
             "font-src": "'self' data: https://fonts.gstatic.com/s/karla/v30/qkBIXvYC6trAT55ZBi1ueQVIjQTD-JqaHUlKZbLXGhmRytc.woff2 https://fonts.gstatic.com/s/karla/v30/qkBIXvYC6trAT55ZBi1ueQVIjQTD-JqaE0lKZbLXGhmR.woff2",
-            "img-src": "*"
           }
         }
     },

schema.json

@@ -3698,18 +3698,6 @@
               },
               "isDeprecated": false,
               "deprecationReason": null
-            },
-            {
-              "name": "img_src",
-              "description": null,
-              "args": [],
-              "type": {
-                "kind": "SCALAR",
-                "name": "String",
-                "ofType": null
-              },
-              "isDeprecated": false,
-              "deprecationReason": null
             }
           ],
           "inputFields": null,
@@ -20376,16 +20364,6 @@
                 "ofType": null
               },
               "defaultValue": null
-            },
-            {
-              "name": "img_src",
-              "description": null,
-              "type": {
-                "kind": "INPUT_OBJECT",
-                "name": "StringQueryOperatorInput",
-                "ofType": null
-              },
-              "defaultValue": null
             }
           ],
           "interfaces": null,
@@ -21774,12 +21752,6 @@
               "isDeprecated": false,
               "deprecationReason": null
             },
-            {
-              "name": "pluginCreator___pluginOptions___directives___img_src",
-              "description": null,
-              "isDeprecated": false,
-              "deprecationReason": null
-            },
             {
               "name": "pluginCreator___pluginOptions___pathCheck",
               "description": null,
@@ -23130,12 +23102,6 @@
               "isDeprecated": false,
               "deprecationReason": null
             },
-            {
-              "name": "pluginOptions___directives___img_src",
-              "description": null,
-              "isDeprecated": false,
-              "deprecationReason": null
-            },
             {
               "name": "pluginOptions___pathCheck",
               "description": null,

src/components/cookie.tsx

@@ -7,12 +7,12 @@ interface Props {
 
 const CookieBox = ({ onChange}: Props) => {
     return (
-        <div className="fixed bottom-0 left-0 w-full bg-bgalt border-t-2 border-primary p-4 flex flex-wrap items-center justify-between z-50">
-            <div className="flex">
-                <p className="text-color-default mr-2">This website uses cookies to ensure you get the best experience on our website.</p>
-                <Link to="/privacy-policy" className="text-color-1">Privacy policy</Link>
+        <div className="cookie-div">
+            <div className="cookie-inner-div">
+                <p className="cookie-p">This website uses cookies to ensure you get the best experience on our website.</p>
+                <Link to="/privacy-policy" className="cookie-link">Privacy policy</Link>
             </div>
-            <button className="px-3 py-1 rounded bg-bgalt border-2 border-secondary text-color-default hover:border-primary duration-200 transition-all" onClick={onChange}>Accept</button>
+            <button className="cookie-btn" onClick={onChange}>Accept</button>
         </div>
     )
 }

src/components/footer.tsx

@@ -26,16 +26,16 @@ export default function() {
     ))
 
     return (
-        <footer className="border-t-2 border-dashed border-color-2 footer py-12">
-            <div className="container mx-auto text-center">
+        <footer className="footer-outer-div">
+            <div className="footer-inner-div">
                 <div
-                    className="text-color-1 my-3"
+                    className="footerlinks"
                 >
                     <ul>
                     {footerLinks} 
                     </ul>
                 </div>
-                <p className="text-color-default text-lg">
+                <p className="footer-copyright">
                     Copyright &copy; {new Date().getFullYear()} The Linux Foundation<sup>®</sup>. All rights reserved.      
                 </p>
             </div>
@@ -45,7 +45,7 @@ export default function() {
 
 const ListItem: React.FC<{ data: FooterLinksQuery_site_siteMetadata_footerLinks }> = ({ data }) => {
     return (
-        <li className="inline-block mx-3 animated-link-parent">
+        <li className="footerlink-list">
             <Link to={data.url} title={data.name} rel={data.rel}>
                 <span>{data.name}</span>
             </Link>

src/components/item-blog.tsx

@@ -12,22 +12,22 @@ export const ItemBlog: React.FC<{ data: ItemBlogProps}> = ({ data }) => {
     const [focused, changeFocused] = useState(false);
 
     return (
-        <div className="blog-item w-full md:w-1/2 lg:w-1/3 p-4">
+        <div className="item-blog-div">
             <Link to={data.fields.slug} title={data.frontmatter.title}>
                 <div className="image">
                     {data.frontmatter.image.publicURL.endsWith('.svg') ?
                     <img src={data.frontmatter.image.publicURL} alt={data.frontmatter.title} className="w-full" /> :
                     <Img fluid={data.frontmatter.image.childImageSharp?.fluid} alt={data.frontmatter.title} className="w-full" />}
                 </div>
-                <div className="p-4 py-3">
-                    <h4 className="text-color-1 text-3xl pt-1">
+                <div className="item-blog-frontmatter-outer-div">
+                    <h4 className="item-blog-frontmatter-title">
                         {data.frontmatter.title}
                     </h4>
-                    <div className="flex items-center text-secondary">
-                        <Calendar className="stroke-current"/>
-                        <p className="pl-2 text-color-default font-sans">{data.frontmatter.date} by {data.frontmatter.author}</p>
+                    <div className="item-blog-frontmatter-inner-div">
+                        <Calendar className="item-blog-frontmatter-calendar"/>
+                        <p className="item-blog-frontmatter-author-title">{data.frontmatter.date} by {data.frontmatter.author}</p>
                     </div>
-                    <p className="pt-3 text-color-default">
+                    <p className="item-blog-frontmatter-description">
                         {data.frontmatter.description}
                     </p>
                 </div>

src/components/layout.tsx

@@ -82,7 +82,7 @@ export default ({ children, front, seo, navPlaceholder=true, location }: LayoutP
             <Head data={query}/>
             <SEO {...seo} />
             <div className={`wrapper ${themes[theme].name}`}>
-                <div className="text-color-default bg-bg">
+                <div className="layout-navbar-inner-div">
                     <Navbar front={front} navPlaceholder={navPlaceholder} location={location} currentTheme={theme} switchTheme={switchTheme} themes={themes} allowThemeSwitch={query.site.siteMetadata.switchTheme}/>
                     {children}
                     <Footer />

src/components/navigation-list.tsx

@@ -43,8 +43,8 @@ const List: React.FC<NavigationListProps> = ({
             const next = i !== themes.length - 1 ? i + 1 : 0
             return (
                 <button
-                    className={`text-color-1 transition-transform duration-200 transform top-0 left-0 ${
-                        i === currentTheme ? "scale-100" : "scale-0 absolute"
+                    className={`navigation-list-btn ${
+                        i === currentTheme ? "navigation-list-btn-theme" : "navigation-list-btn-no-theme"
                     }`}
                     title={`Switch to ${themes[next].label}`}
                     key={`${name}-theme-switch-btn-${item.name}`}
@@ -70,7 +70,7 @@ const List: React.FC<NavigationListProps> = ({
 const ListItem = ({ data, active, liClassName }) => {
     return (
         <li className={`${liClassName} ${active ? "active" : ""}`}>
-            <Link to={data.url} title={data.name} className="text-color-1 focus:text-primary">
+            <Link to={data.url} title={data.name} className="navigation-list-link">
                 <span>{data.name}</span>
             </Link>
         </li>

src/components/navigation.tsx

@@ -50,51 +50,46 @@ const Navbar: React.FC<NavbarProps> = ({ navPlaceholder, location, currentTheme,
     return (
         <React.Fragment>
             <div
-                className={`duration-300 transition-all flex justify-center lg:justify-between items-center z-20 fixed w-full nav ${
-                    scrolled ? "scrolled bg-bg p-4" : "p-5"
+                className={`navigation-outer-div nav ${
+                    scrolled ? "navigation-outer-div-scrolled" : "navigation-outer-div-unscrolled"
                 }`}
                 ref={navbar}
             >
                 <button
-                    className="absolute text-primary outline-0 lg:hidden"
-                    style={{
-                        transform: "translateY(-50%)",
-                        top: "50%",
-                        left: "10px",
-                    }}
+                    className="navigation-btn"
                     onClick={() => {
                         setSidebarOpen(true)
                     }}
                 >
                     <Menu />
                 </button>
                 <SideBar open={sidebarOpen} onChange={setSidebarOpen}>
-                    <div className="bg-bg h-full flex flex-col justify-center relative">
-                        <div className="absolute top-0 my-4 text-center w-full">
-                            <Link to="/" title={data.site.siteMetadata.title} className="inline-block">
+                    <div className="navigation-sidebar-outer-div">
+                        <div className="navigation-sidebar-inner-div-1">
+                            <Link to="/" title={data.site.siteMetadata.title} className="navigation-sidebar-link">
                                 <Logo
-                                    className={`duration-300 transition-all ${
-                                        scrolled ? "h-8" : "h-12"
+                                    className={`navigation-sidebar-link-logo ${
+                                        scrolled ? "navigation-sidebar-link-logo-scrolled" : "navigation-sidebar-link-logo-unscrolled"
                                     }`}
                                 />
                             </Link>
                         </div>
-                        <div className="text-center">
-                            <List name="sidebar-nav" current={currentLocation}  currentTheme={currentTheme} switchTheme={switchTheme} themes={themes} withThemeSwitch={allowThemeSwitch} liClassName="block my-2"/>
+                        <div className="navigation-sidebar-inner-div-2">
+                            <List name="sidebar-nav" current={currentLocation}  currentTheme={currentTheme} switchTheme={switchTheme} themes={themes} withThemeSwitch={allowThemeSwitch} liClassName="navigation-sidebar-inner-div-2-list"/>
                         </div>
                     </div>
                 </SideBar>
                 <Link to="/" title={data.site.siteMetadata.title}>
                     <Logo
-                        className={`duration-300 transition-all ${
-                            scrolled ? "h-8" : "h-12"
+                        className={`navigation-link-logo ${
+                            scrolled ? "navigation-link-logo-scrolled" : "navigation-link-logo-unscrolled"
                         }`}
                     />
                 </Link>
-                <div className="hidden lg:block">
-                    <List name="navbar" className="nav-links flex" current={currentLocation} currentTheme={currentTheme} switchTheme={switchTheme} themes={themes} withThemeSwitch={allowThemeSwitch}/>
+                <div className="navigation-inner-div-1">
+                    <List name="navbar" className="navigation-navbar" current={currentLocation} currentTheme={currentTheme} switchTheme={switchTheme} themes={themes} withThemeSwitch={allowThemeSwitch}/>
                 </div>
-                <div className="absolute line h-px left-0 bottom-0 bg-gradient-primary"></div>
+                <div className="navigation-inner-div-2"></div>
             </div>
             {navPlaceholder && (
                 <div style={{ height: `${navbarHeight}px` }}></div>

src/components/pagination.tsx

@@ -8,8 +8,8 @@ export default function({ pageContext, type }) {
 
 
         return (
-            <div className="pagination mt-8">
-                <ul className="text-center">
+            <div className="pagination-outer-div">
+                <ul className="pagination-ul">
                     {pageContext.currentPage !== 1 && (
                         <Item type={type} currentPage={pageContext.currentPage} page={pageContext.currentPage-1} icon={<ChevronLeft />} title="Previous Page"/>
                     )}
@@ -35,12 +35,12 @@ const Item: React.FC<ItemProps> = ({ type, currentPage, title, page, icon }) =>
 
     return (
         <li
-            className={`inline-block align-middle`}
+            className={`pagination-li`}
         >
             <Link
                 to={to}
                 title={_title}
-                className={`rounded-full bg-bgalt flex items-center justify-center w-12 text-center h-12 m-3 transition-all duration-300 hover:shadow-2xl focus:shadow-2xl ${active ? "bg-gradient-primary text-white shadow-2xl" : ""}`}
+                className={`pagination-link ${active ? "pagination-link-active" : ""}`}
             >
                 <span>{icon || page}</span>
             </Link>

src/components/shortcodes/index.tsx

@@ -10,7 +10,7 @@ const Row = ({ children }) => {
 
 const Col = ({ children }) => {
     return (
-        <div className="flex-1 p-2">
+        <div className="shortcodes">
             {children}
         </div>
     )

src/components/sidebar.tsx

@@ -195,16 +195,14 @@ export default class SideBar extends React.Component<SideBarProps, SideBarState>
 
     render(){
         return(
-            <div className="r-swipe-sidebar-container" style={{
-                position: "absolute"
-            }}>
+            <div className="r-swipe-sidebar-container">
                 <div className="r-swipe-sidebar" ref={this.sidebarParent} style={{
                     position: "fixed",
+                    height: "100%",
+                    top: "0",
                     left: `${this.state.progress-100}%`,
                     width: this.settings.sidebarWidth,
-                    height: "100%",
-                    top: 0,
-                    zIndex: 9999,
+                    zIndex: "9999",
                     transitionProperty: "left",
                     transitionDuration: this.state.transitionTime+"s",
                     transitionTimingFunction: "linear",
@@ -215,8 +213,6 @@ export default class SideBar extends React.Component<SideBarProps, SideBarState>
                 <div 
                     className="r-swipe-sidebar-overlay"
                     ref={this.sidebarOverlay}
-                    role="button"
-                    tabIndex={-1}
                     style={{
                         position: "fixed",
                         top: 0,
@@ -228,14 +224,15 @@ export default class SideBar extends React.Component<SideBarProps, SideBarState>
                         zIndex: 9998,
                         transitionProperty: "opacity",
                         transitionDuration: "0s",
-                        opacity: `${this.state.progress/200}`
+                        opacity: "`${this.state.progress/200}`"
                     }}
+                    role="button"
+                    tabIndex={-1}
                     onClick={this.closeSidebar}
                     onKeyPress={(e) => {
                         if(e.which === 27) this.closeSidebar();
                     }}
                 >
-
                 </div>
             </div>
         )

src/components/ui.tsx

@@ -47,7 +47,7 @@ const TextInput = ({ label, type = "text", name, onChange, footer }) => {
         <input
             type={type}
             name={name}
-            className="block w-full outline-none px-4 py-2 focus:outline-none bg-bg text-color-default"
+            className="ui-input"
             onFocus={() => changeFocused(true)}
             onBlur={() => changeFocused(false)}
             onChange={onChange}
@@ -58,12 +58,11 @@ const TextInput = ({ label, type = "text", name, onChange, footer }) => {
     if (type === "textarea") {
         elem = (
             <textarea
-                className="block w-full outline-none resize-none px-4 py-2 focus:outline-none bg-bg text-color-default"
+                className="ui-textarea"
                 name={name}
                 onChange={event => {
                     event.target.style.height = "auto"
                     event.target.style.height = event.target.scrollHeight + "px";
-
                     onChange(event);
                 }}
                 onFocus={() => changeFocused(true)}
@@ -76,11 +75,11 @@ const TextInput = ({ label, type = "text", name, onChange, footer }) => {
     return (
         <div
             className={`${
-                focused ? "input focused shadow-2xl" : ""
-            } transition-all duration-300 py-3 lg:p-4 pb-6`}
+                focused ? "input focused" : ""
+            } ui-input-div`}
         >
-            <p className="text-color-3">{label}</p>
-            <div className="bg-gradient-primary p-2px">
+            <p className="ui-input-div-p">{label}</p>
+            <div className="ui-input-div-elem">
                 {elem}
             </div>
             {footer &&