From d81b47bdc628b3676fea37c77712adba9bb0fe6f Mon Sep 17 00:00:00 2001 From: mrjvs Date: Sun, 4 Nov 2018 18:33:23 +0100 Subject: [PATCH] refactor css and placed html in template file. --- assets/css/pretendo-common.css | 177 ++++++++++++++++++++++++ assets/css/pretendo-home.css | 80 +++++++++++ assets/css/style.css | 238 --------------------------------- assets/html/index.html | 116 ---------------- routes/home.js | 5 + views/newhome.hbs | 126 +++++++++++++++++ 6 files changed, 388 insertions(+), 354 deletions(-) create mode 100644 assets/css/pretendo-common.css create mode 100644 assets/css/pretendo-home.css delete mode 100644 assets/css/style.css delete mode 100644 assets/html/index.html create mode 100644 views/newhome.hbs diff --git a/assets/css/pretendo-common.css b/assets/css/pretendo-common.css new file mode 100644 index 0000000..1b13793 --- /dev/null +++ b/assets/css/pretendo-common.css @@ -0,0 +1,177 @@ +/*******************************************************/ +/* copyrighted by pretendo. */ +/* website design by jipfr, mrjvs and benthehuman */ +/*******************************************************/ + +/* fonts */ +@import url('https://fonts.googleapis.com/css?family=Roboto:400,700'); + +/* setup */ +body { + margin: 0; + font-family: 'Roboto', Arial, Helvetica, sans-serif; + font-weight: 400; + background: #eeeeef; + overflow-x: hidden; +} + +/* common header */ +nav.navWrapper { + background: #673db6; + color: white; + display: flex; + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 10; +} +nav.navWrapper .navItem { + flex: 0; + padding: 20px; + color: rgba(255, 255, 255, 0.8); + text-decoration: none; + font-size: 1em; +} +nav.navWrapper .navItem.brand { + font-weight: 600; + background: #5231a7; + padding: 20px 40px; + color: white; +} +nav.navWrapper .navSpread { + flex: 1; +} + +/* content wrapper */ +.contentWrapper { + position: relative; + width: 100%; +} +nav.navWrapper ~ .contentWrapper:nth-child(2) { + margin-top: 3.7rem; +} +.contentWrapper .bgExtrude { + position: absolute; + top: 0; + left: 0; + width: 100%; + background: #673db6; + height: 10rem; + z-index: 2; +} +.contentWrapper.bgLines::before, .contentWrapper.bgLines::after { + content: ""; + position: absolute; + z-index: 3; + width: 0; + height: 0; + border-style: solid; + border-width: 100vh 0 0 200vw; + border-color: transparent transparent transparent #673db6; + left: 0; + bottom: 0; +} +.contentWrapper.bgLines::after { + border-width: 0 0 100vh 200vw; + border-color: transparent transparent #9575CD transparent; + right: 0; + left: auto; + z-index: 2; +} +.contentWrapper > * { + z-index: 3; + position: relative; +} + +/* footer */ +footer { + background: #673db6; + padding: 2em 1em; +} +footer .content { + background: white; + border-radius: 5px; + padding: 1em; + text-align: center; + box-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.07); + color: #707070; +} +footer .content span { + color: black; +} + +/* big card */ +section.bigCardWrapper { + padding: 20px; +} +section.bigCardWrapper .bigCard { + max-width: 80vw; + margin: auto; + background-color: white; + box-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.07); + padding: 5vw 12vw; + box-sizing: border-box; + color: #707070; +} +section.bigCardWrapper .bigCard.lessPadding { + padding: 5vw; +} +section.bigCardWrapper .bigCard.bigCardPartWrapper { + display: flex; +} + + +/* text styles */ +.txt-highlight { + color: #673db6; + margin-bottom: 0; + font-size: 1rem; + font-weight: bold; +} +.txt-title { + color: #191919; + margin-top: 10px; + margin-bottom: 15px; + font-size: 2.5em; +} +.txt-smallHeading { + font-size: 1.2em; + font-weight: bold; + color: #383838; +} + +/* components - buttons */ +button { + margin: 0; + padding: 0; + border: 0; + border-radius: 0; + font-family: 'Roboto'; + font-size: 1em; +} +button.btn { + background: #673db6; + color: white; + padding: 12px 80px; + border-radius: 10px; + box-shadow: 0 3px 12px rgba(0, 0, 0, 0.17); +} +button.btn-alt { + background: white; + padding: 10px 45px; + color: #673db6; + border: 1px solid #673db6; + box-shadow: 0 3px 12px rgba(0, 0, 0, 0.07); + border-radius: 5px; + position: absolute; + bottom: 20px; +} + +/* helper classes */ +.cont-flex { + display: flex; +} +.flex-item { + flex: 1; +} \ No newline at end of file diff --git a/assets/css/pretendo-home.css b/assets/css/pretendo-home.css new file mode 100644 index 0000000..e249821 --- /dev/null +++ b/assets/css/pretendo-home.css @@ -0,0 +1,80 @@ +/* home header */ + +header { + text-align: center; + color: white; + background: #673db6; + padding: 5rem; +} +header hr { + width: 175px; + height: 2px; + background: white; + display: inline-block; + border: 0; + margin: 0 auto; + display: block; +} +header h1 { + font-size: 3.5em; + font-weight: 400; + letter-spacing: 0.25em; + margin: 0; + margin-bottom: 10px; + text-transform: uppercase; +} +header h3 { + font-weight: normal; + max-width: 80%; + display: inline-block; + font-size: 1.1rem; +} + +/* profiles */ +.cardProfiles { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} +.profile { + min-width: 250px; + width: 50%; + max-width: 550px; + margin-bottom: 10px; + display: flex; +} +.profile .profileIcon { + margin-right: 10px; + width: 80px; height: 80px; + border-radius: 50%; + border: 1px solid rgba(0, 0, 0, 0.5); +} +.profileText { + width: calc(100% - 130px); + min-width: 200px; + display: flex; + flex-direction: column; + justify-content: center; +} +.profileText h2 { + margin: 0; +} +.profileText p { + margin-top: 5px; +} + +/* news cards */ +.smallCard { + width: 100%; + max-width: 250px; + height: 350px; + padding: 20px; + border: 1px solid #9474cc; border-radius: 10px; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07); + position: relative; + margin-left: 3em; +} +.smallCard h3 { + font-size: 1.5em !important; + margin: 0; +} \ No newline at end of file diff --git a/assets/css/style.css b/assets/css/style.css deleted file mode 100644 index b879841..0000000 --- a/assets/css/style.css +++ /dev/null @@ -1,238 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Roboto:400,700'); -body { - margin: 0; - font-family: Roboto; - font-weight: 400; - display: flex; flex-wrap: wrap; - justify-content: center; - margin-bottom: 300px; - background: #673db6; #eeeeef -} - - -.test0 { - width: 80%; - max-width: 400px; - margin-top: 100px; -} - -.headerWrapper { - background: #673db6; - color: white; -} - -.header0 { - padding: 20px 0; -} -.header0 a { - padding: 20px; - color: rgba(255, 255, 255, 0.8); - text-decoration: none; - font-size: 1em; -} -.header0 a.project { - font-weight: 600; - background: #5231a7; - padding: 20px 40px; - color: white; -} - -.header1 { - width: 100%; - height: 300px; -} -.header1div { - width: 80%; - max-width: 600px; -} -.header1div .regular { - margin-top: 10px; -} - -.header2 { - height: 100px; -} - -.mainDiv { - margin-top: -100px; -} - -.card { - padding: 5vw 12vw; - background: white; - box-shadow: 0px; - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); - margin-bottom: 50px; -} -.specialCard { - padding: 5vw 5vw; -} - -.cardProfiles { - display: flex; - flex-wrap: wrap; - justify-content: space-between; -} - -.profile { - min-width: 250px; - width: 50%; - max-width: 550px; - margin-bottom: 10px; -} -.profile .profileIcon { - margin-right: 10px; -} -.profile .profileIcon img { - width: 80px; height: 80px; - border-radius: 50%; - border: 1px solid rgba(0, 0, 0, 0.5); -} -.profileText { - width: calc(100% - 130px); - min-width: 200px; -} -.profileText p { - margin-top: 5px; -} - -.divider { - width: 175px; - height: 2px; - background: white; -} - -.hugeText { - font-size: 3.5em; - font-weight: 700; - letter-spacing: 0.25em; - margin: 0; margin-bottom: 10px; -} -.highlight { - color: #673db6; - margin-bottom: 0; - font-size: 1em; -} -.smallheading { - font-size: 1.25em; -} -.text { - font-size: 1em; - color: #707070; -} - -.heading1 { - color: #191919; - margin-top: 10px; - margin-bottom: 15px; - font-size: 2.5em; -} -.secondary { - font-weight: 100; - color: #383838; -} - -button { - margin: 0; padding: 0; - border: 0; border-radius: 0; - font-family: Roboto; - font-size: 1em; -} -.button1 { - background: #673db6; - color: white; - padding: 12px 80px; - border-radius: 10px; - box-shadow: 0 3px 12px rgba(0, 0, 0, 0.17); -} -.button2 { - background: white; - padding: 10px 45px; - color: #673db6; - border: 1px solid #673db6; - box-shadow: 0 3px 12px rgba(0, 0, 0, 0.07); - border-radius: 5px; - position: absolute; - bottom: 20px; -} -.card20 { - width: 100%; - max-width: 400px; - min-width: 200px; - margin-bottom: 20px; -} -.card21 { - align-items: center; - width: 100%; - max-width: 650px; -} -.smallCardBit { - width: calc(95% - 400px); - min-width: 300px; -} -@media screen and (max-width: 1000px) { - .smallCard { - margin-bottom: 20px; - } - body { - background: yellow; - } -} -.smallCard { - width: 100%; - max-width: 250px; height: 350px; - padding: 20px; - border: 1px solid #9474cc; border-radius: 10px; - box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07); - position: relative; -} -.smallCard h3 { - font-size: 1.5em !important; - margin: 0; -} - - - - -.bodyDiv { - width: 90%; - max-width: 1500px; -} -.bold { - font-weight: 700; -} -.centerX { - display: flex; - justify-content: center; -} -.centerY { - display: flex; - align-items: center; -} -.top { - display: flex; - align-items: flex-start; -} -.wrap { - display: flex; - flex-wrap: wrap; -} -.uppercase { - text-transform: uppercase; -} -.regular { - font-weight: 300; -} -.fw { - width: 100%; -} -.noMargin { - margin: 0; -} -.spread { - display: flex; - justify-content: space-between; -} -.centerText { - text-align: center; -} \ No newline at end of file diff --git a/assets/html/index.html b/assets/html/index.html deleted file mode 100644 index 08c3c2a..0000000 --- a/assets/html/index.html +++ /dev/null @@ -1,116 +0,0 @@ - - - - - - - -
-
-
-
- PRETENDO - News - Progress - Contact -
-
- :) -
-
- -
-
-
-

Pretendo

-
- -

A work-in-progress Nintendo Service replacement for Wii U and 3DS. Fully open source.

-
-
-
-
- -
-
-

Wait a second

-

What exactly is this?

-

Yeah, I'm not actually going to remake all the cubes and stuff.

-

- Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. -

-
-
-

Who is responsible?

-

Who made this?

-
-
-
- -
-
-
-

RedDucks

-

Project owner, lead developer, very violent young man. Splatoon obsessed as well.

-
- -
-
-
-
-
-
-

Be notified

-

Stay updated

-

- Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. -

-
-
-
-
-

Super cool

-

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea

- -
-
-

Super cool

-

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea

- -
-
-
-
- - - - - \ No newline at end of file diff --git a/routes/home.js b/routes/home.js index 5af1ab2..ca240be 100644 --- a/routes/home.js +++ b/routes/home.js @@ -14,5 +14,10 @@ router.get('/', (req, res) => { res.render('home'); }); +router.get('/newhome', (req, res) => { + res.render('newhome'); +}); + + // export the router module.exports = router; diff --git a/views/newhome.hbs b/views/newhome.hbs new file mode 100644 index 0000000..07cd63f --- /dev/null +++ b/views/newhome.hbs @@ -0,0 +1,126 @@ + + + + + + + + Pretendo + + + + + + +
+
+

Pretendo

+
+

A work-in-progress Nintendo Service replacement for Wii U and 3DS. Fully open source.

+
+
+
+
+
+
+

Wait a second

+

What exactly is this?

+

Yeah, I'm not actually going to remake all the cubes and stuff.

+

+ Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. +

+
+
+ +
+
+

who is responsible?

+

who made this?

+
+ +
+ +
+

RedDucks

+

Project owner, lead developer, very violent young man. Splatoon obsessed as well.

+
+
+ +
+

RedDucks

+

Project owner, lead developer, very violent young man. Splatoon obsessed as well.

+
+
+ +
+

RedDucks

+

Project owner, lead developer, very violent young man. Splatoon obsessed as well.

+
+
+ +
+

RedDucks

+

Project owner, lead developer, very violent young man. Splatoon obsessed as well.

+
+
+ +
+

RedDucks

+

Project owner, lead developer, very violent young man. Splatoon obsessed as well.

+
+
+ +
+

RedDucks

+

Project owner, lead developer, very violent young man. Splatoon obsessed as well.

+
+
+
+
+
+ +
+
+
+

Be notified

+

Stay updated

+

+ Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. +

+ +
+
+
+

Super cool

+

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea

+ +
+
+

Super cool

+

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea

+ +
+
+
+
+
+ + + \ No newline at end of file