mirror of
https://github.com/BradNut/weddingsite
synced 2025-09-08 17:40:36 +00:00
Updating deps and adding noscript styling.
This commit is contained in:
Bradley Shellnut
parent
3309c81fbf
commit
e84e20e0f1
8 changed files with 226 additions and 11 deletions
|
|
@ -7,9 +7,6 @@ const Layout = ({ children }) => (
|
|||
<Head>
|
||||
<title>NN By the Sea</title>
|
||||
</Head>
|
||||
<noscript>
|
||||
<h1>🐧🐧🐧 Please enable JavaScript to view our site. 🐧🐧🐧</h1>
|
||||
</noscript>
|
||||
<main>
|
||||
<div className="container">{children}</div>
|
||||
</main>
|
||||
|
|
|
|||
12
package.json
12
package.json
|
|
@ -18,7 +18,7 @@
|
|||
"mongodb": "^3.6.9",
|
||||
"mongoose": "^5.12.13",
|
||||
"next": "^10.2.3",
|
||||
"next-iron-session": "^4.1.13",
|
||||
"next-iron-session": "^4.2.0",
|
||||
"next-with-apollo": "^5.1.1",
|
||||
"normalize.css": "^8.0.1",
|
||||
"nprogress": "^0.2.0",
|
||||
|
|
@ -32,11 +32,11 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.14.3",
|
||||
"@babel/preset-env": "^7.14.2",
|
||||
"@typescript-eslint/eslint-plugin": "^4.25.0",
|
||||
"@typescript-eslint/parser": "^4.25.0",
|
||||
"@babel/preset-env": "^7.14.4",
|
||||
"@typescript-eslint/eslint-plugin": "^4.26.1",
|
||||
"@typescript-eslint/parser": "^4.26.1",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"eslint": "^7.27.0",
|
||||
"eslint": "^7.28.0",
|
||||
"eslint-config-airbnb": "^18.2.1",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-config-wesbos": "^2.0.0-beta.7",
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
"eslint-plugin-prettier": "^3.4.0",
|
||||
"eslint-plugin-react": "^7.24.0",
|
||||
"eslint-plugin-react-hooks": "^4.2.0",
|
||||
"prettier": "^2.3.0",
|
||||
"prettier": "^2.3.1",
|
||||
"typescript": "^4.3.2"
|
||||
},
|
||||
"eslintConfig": {
|
||||
|
|
|
|||
|
|
@ -41,7 +41,36 @@ function MyApp({ Component, pageProps }) {
|
|||
as="font"
|
||||
crossOrigin=""
|
||||
/>
|
||||
<noscript>
|
||||
<link rel="stylesheet" href="assets/css/noscript.css" />
|
||||
</noscript>
|
||||
</Head>
|
||||
<noscript>
|
||||
<div id="no-script">
|
||||
<div id="no-script-box">
|
||||
<img
|
||||
id="no-script-img"
|
||||
src="assets/images/js-logo.png"
|
||||
alt="Please enable JavaScript"
|
||||
/>
|
||||
<h1 id="no-script-maintext">
|
||||
Please enable JavaScript to view the site.
|
||||
</h1>
|
||||
<h2 id="no-script-subtext">
|
||||
This Web application relies on Javascript to function, please{' '}
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Enable JavaScript Insructions"
|
||||
href="https://www.enable-javascript.com/"
|
||||
>
|
||||
enable
|
||||
</a>{' '}
|
||||
it. Thank You! 🚀
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</noscript>
|
||||
<Component {...pageProps} />
|
||||
</Page>
|
||||
</SWRConfig>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export default function LogoutPage() {
|
|||
const { user } = useUser({ redirectTo: '/login' });
|
||||
|
||||
if (!user || user.isLoggedIn === false) {
|
||||
return <Layout>loading...</Layout>;
|
||||
return <Layout>Loading...</Layout>;
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ const SgProfile = () => {
|
|||
const { user } = useUser({ redirectTo: '/login' })
|
||||
|
||||
if (!user || user.isLoggedIn === false) {
|
||||
return <Layout>loading...</Layout>
|
||||
return <Layout>Loading...</Layout>
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
|
|||
189
public/assets/css/noscript.css
Normal file
189
public/assets/css/noscript.css
Normal file
|
|
@ -0,0 +1,189 @@
|
|||
:root {
|
||||
/* Define Colors as colors */
|
||||
--red: #990000;
|
||||
--coral: #e64c44;
|
||||
--blue: #336699;
|
||||
--seaFoamBlue: #466b72;
|
||||
--purpleBlue: #2e2b5e;
|
||||
--white: #fffffe;
|
||||
--greyWhite: #e6e3e0;
|
||||
--grey: #efefef;
|
||||
--yellow: #ffc600;
|
||||
--light: #ffffff;
|
||||
--black: #1b2d45;
|
||||
--dark: #000000;
|
||||
--seaGreen: #83c6a4;
|
||||
--lighterDark: #131415;
|
||||
--shellYellow: #ffc850;
|
||||
--lightGrey: #c5c5c5;
|
||||
--lightGray: var(--lightGrey);
|
||||
--lightShade: #f8f7f5;
|
||||
--darkGrey: #272727;
|
||||
--coralTan: #ffddb7;
|
||||
--blueGreen: #1d384e;
|
||||
--lightViolet: #c298f7;
|
||||
--darkerViolet: #7551a9;
|
||||
|
||||
/* Define Colors intentions */
|
||||
--primary: var(--coralTan);
|
||||
--secondary: var(--coralTan);
|
||||
--danger: var(--grey);
|
||||
--background: var(--seaFoamBlue);
|
||||
--textColor: var(--black);
|
||||
--buttonTextColor: var(--black);
|
||||
--textAccent: var(--purpleBlue);
|
||||
--lineColor: var(--grey);
|
||||
--cardBg: var(--darkGrey);
|
||||
--headerBackground: var(--darkGrey);
|
||||
--footerBackground: var(--darkGrey);
|
||||
--linkHover: var(--lightViolet);
|
||||
--lightHairLine: var(--lightGrey);
|
||||
|
||||
/* Styles */
|
||||
--line: solid 1px var(--lineColor);
|
||||
|
||||
/* Type */
|
||||
--headingFont: 'Istok Web';
|
||||
--bodyFont: 'Kanit';
|
||||
--baseFontSize: 100%;
|
||||
--h1: 4.209rem;
|
||||
--h2: 3.157rem;
|
||||
--h3: 2.369rem;
|
||||
--h4: 1.777rem;
|
||||
--h5: 1.333em;
|
||||
--h6: 1rem;
|
||||
--bodyTextSize: 1.777rem;
|
||||
--smallText: 1.333rem;
|
||||
--lineHeight: 1.75;
|
||||
|
||||
/* Elevation */
|
||||
--level-0: none;
|
||||
--level-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
--level-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
--level-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
||||
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
--level-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
|
||||
0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
--level-1-primary: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
|
||||
0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
--level-2-primary: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px #c298f7;
|
||||
--level-3-primary: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px #c298f7;
|
||||
--level-4-primary: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
|
||||
0 10px 10px -5px #c298f7;
|
||||
|
||||
/* Positioning */
|
||||
--containerPadding: 2.5%;
|
||||
--headerHeight: 8rem;
|
||||
--borderRadius: 10px;
|
||||
--maxWidth: 850px;
|
||||
|
||||
/* Media Queryies - Not yet supported in CSS */
|
||||
/*
|
||||
--xsmall: 340px;
|
||||
--small: 500px;
|
||||
--large: 960px;
|
||||
--wide: 1200px;
|
||||
*/
|
||||
}
|
||||
|
||||
html {
|
||||
width: 100%;
|
||||
background-image: url('https://res.cloudinary.com/royvalentinedev/image/upload/v1621792514/wedding/Background_u0cgyd.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-color: var(--seaFoamBlue);
|
||||
font-size: 62.5%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: var(--lineHeight);
|
||||
color: var(--primary);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: var(--bodyTextSize);
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
}
|
||||
html {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--primary) var(--background);
|
||||
}
|
||||
body::-webkit-scrollbar-track {
|
||||
background: var(--background);
|
||||
}
|
||||
body::-webkit-scrollbar-thumb {
|
||||
background-color: var(--primary);
|
||||
border-radius: 6px;
|
||||
border: 3px solid var(--background);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--primary);
|
||||
color: var(--background);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--linkHover);
|
||||
}
|
||||
|
||||
#no-script {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
color: var(--primary);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#no-script-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
font-size: 3rem;
|
||||
padding: 0.5em;
|
||||
border: 0.2em solid var(--background);
|
||||
border-radius: 0.5em;
|
||||
background-color: hsl(190, 24%, 45%);
|
||||
}
|
||||
|
||||
#no-script-img {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#no-script-maintext {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
#no-script-subtext {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 758px) {
|
||||
#no-script-maintext {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
#no-script-subtext {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
#no-script-img {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 174 KiB After Width: | Height: | Size: 174 KiB |
BIN
public/assets/images/js-logo.png
Normal file
BIN
public/assets/images/js-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
Loading…
Reference in a new issue