diff --git a/.gitignore b/.gitignore index 5a670e940..2b0ef117f 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules/ .DS_Store dist/ + diff --git a/README.md b/README.md index 9afc742da..fe32fb404 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,11 @@ # css-frameworks-ca -Replace this text with a description of your social media project. + +##### This is a simple 3 page social media site built with html and bootstrap. No functionality. + +## Installation + +#### git clone https://github.com/flanderos/css-frameworks-ca/tree/redelivery +#### npm install +#### npm run build +#### npm start + diff --git a/feed.html b/feed.html new file mode 100644 index 000000000..8d5353fcb --- /dev/null +++ b/feed.html @@ -0,0 +1,381 @@ + + + + + + + + CSS Course Assignment + + +
+

CSS Framework CA, Social Media Page

+
+ +
+
+
+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
Sort by:
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+
+ +
+
+
+
+
+ Tags: Cool story, Nice +
+ +
+

The Power of Positivity

+

Life is too short to be negative. Embrace every moment and focus on the good things! It's amazing how a positive mindset can change your outlook.

+
+
Posted: 16.08.1987
+
Reactions: 2 likes
+
+
+ + +
+
+ + +
+
Geir Arne: Nice post!
+
Durek: Great content!
+
+
+
+
+
+ +
+
+
+
+
+ Tags: Cool story, Nice +
+ +
+

The Power of Positivity

+

Life is too short to be negative. Embrace every moment and focus on the good things! It's amazing how a positive mindset can change your outlook.

+
+
Posted: 16.08.1987
+
Reactions: 2 likes
+
+
+ + +
+
+ + +
+
Geir Arne: Nice post!
+
Durek: Great content!
+
+
+
+
+
+ +
+
+
+
+
+ Tags: Cool story, Nice +
+ +
+

The Power of Positivity

+

Life is too short to be negative. Embrace every moment and focus on the good things! It's amazing how a positive mindset can change your outlook.

+
+
Posted: 16.08.1987
+
Reactions: 2 likes
+
+
+ + +
+
+ + +
+
Geir Arne: Nice post!
+
Durek: Great content!
+
+
+
+
+
+ +
+
+
+
+
+ Tags: Cool story, Nice +
+ +
+

The Power of Positivity

+

Life is too short to be negative. Embrace every moment and focus on the good things! It's amazing how a positive mindset can change your outlook.

+
+
Posted: 16.08.1987
+
Reactions: 2 likes
+
+
+ + +
+
+ + +
+
Geir Arne: Nice post!
+
Durek: Great content!
+
+
+
+
+
+ +
+
+
+
+
+ Tags: Cool story, Nice +
+ +
+

The Power of Positivity

+

Life is too short to be negative. Embrace every moment and focus on the good things! It's amazing how a positive mindset can change your outlook.

+
+
Posted: 16.08.1987
+
Reactions: 2 likes
+
+
+ + +
+
+ + +
+
Geir Arne: Nice post!
+
Durek: Great content!
+
+
+
+
+
+ +
+
+
+
+
+ Tags: Cool story, Nice +
+ +
+

The Power of Positivity

+

Life is too short to be negative. Embrace every moment and focus on the good things! It's amazing how a positive mindset can change your outlook.

+
+
Posted: 16.08.1987
+
Reactions: 2 likes
+
+
+ + +
+
+ + +
+
Geir Arne: Nice post!
+
Durek: Great content!
+
+
+
+
+
+ +
+
+
+
+
+ Tags: Cool story, Nice +
+ +
+

The Power of Positivity

+

Life is too short to be negative. Embrace every moment and focus on the good things! It's amazing how a positive mindset can change your outlook.

+
+
Posted: 16.08.1987
+
Reactions: 2 likes
+
+
+ + +
+
+ + +
+
Geir Arne: Nice post!
+
Durek: Great content!
+
+
+
+
+
+ +
+
+
+
+
+ Tags: Cool story, Nice +
+ +
+

The Power of Positivity

+

Life is too short to be negative. Embrace every moment and focus on the good things! It's amazing how a positive mindset can change your outlook.

+
+
Posted: 16.08.1987
+
Reactions: 2 likes
+
+
+ + +
+
+ + +
+
Geir Arne: Nice post!
+
Durek: Great content!
+
+
+
+
+
+ +
+
+
+
+
+ Tags: Cool story, Nice +
+ +
+

The Power of Positivity

+

Life is too short to be negative. Embrace every moment and focus on the good things! It's amazing how a positive mindset can change your outlook.

+
+
Posted: 16.08.1987
+
Reactions: 2 likes
+
+
+ + +
+
+ + +
+
Geir Arne: Nice post!
+
Durek: Great content!
+
+
+
+
+
+ + +
+
+ + + + + + diff --git a/index.html b/index.html new file mode 100644 index 000000000..c92608a0a --- /dev/null +++ b/index.html @@ -0,0 +1,49 @@ + + + + + + + + CSS Course Assignment + + +
+

CSS Framework CA, Social Media Page

+
+
+
+
+

Enter site

+
+
+
+
+ + +
+
+ + +
+ +
+
+
+
+
+
+

About

+

This is my CSS Framework project to display functional Bootstrap and scss. + The site is not functional

+

The site is build with the following technology:

+ +
+
+ + + diff --git a/media/avatar.jpg b/media/avatar.jpg new file mode 100644 index 000000000..d7ff00d07 Binary files /dev/null and b/media/avatar.jpg differ diff --git a/media/will.jpg b/media/will.jpg new file mode 100644 index 000000000..ba32780d4 Binary files /dev/null and b/media/will.jpg differ diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 000000000..341a66293 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,244 @@ +{ + "name": "css-frameworks-ca", + "version": "0.0.1", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "css-frameworks-ca", + "version": "0.0.1", + "dependencies": { + "bootstrap": "^5.3.3", + "sass": "^1.74.1" + } + }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, + "node_modules/anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/binary-extensions": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz", + "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==", + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/bootstrap": { + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz", + "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "peerDependencies": { + "@popperjs/core": "^2.11.8" + } + }, + "node_modules/braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "dependencies": { + "fill-range": "^7.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/chokidar": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", + "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/immutable": { + "version": "4.3.6", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz", + "integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==" + }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dependencies": { + "is-extglob": "^2.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "engines": { + "node": ">=0.12.0" + } + }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, + "node_modules/sass": { + "version": "1.77.2", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.2.tgz", + "integrity": "sha512-eb4GZt1C3avsX3heBNlrc7I09nyT00IUuo4eFhAbeXWU2fvA7oXI53SxODVAA+zgZCk9aunAZgO+losjR3fAwA==", + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/source-map-js": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", + "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + } + } +} diff --git a/package.json b/package.json index 4086f0f7b..d435756ef 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,9 @@ "version": "0.0.1", "description": "A starting point for the CSS Frameworks CA project", "scripts": { - "test": "echo \"We will learn more about testing in the Workflow course\" && exit 1" + "test": "echo \"We will learn more about testing in the Workflow course\" && exit 1", + "build": "sass src/scss/main.scss:dist/css/main.css --style compressed --watch", + "start": "live-server" }, "repository": { "type": "git", @@ -17,10 +19,14 @@ "SCSS", "SASS" ], - "author": "Oliver Dipple ", - "license": "ISC", + "author": "Anders Hellerud", + "license": "", "bugs": { - "url": "https://github.com/NoroffFEU/css-frameworks-ca/issues" + "url": "" }, - "homepage": "https://github.com/NoroffFEU/css-frameworks-ca#readme" -} + "homepage": "", + "dependencies": { + "bootstrap": "^5.3.3", + "sass": "^1.74.1" + } +} \ No newline at end of file diff --git a/profile.html b/profile.html new file mode 100644 index 000000000..5013ecb9e --- /dev/null +++ b/profile.html @@ -0,0 +1,127 @@ + + + + + + + + Feed Page + + +
+

CSS Framework CA, Social Media Page

+
+ + + +
+
+
+
+
+

Will Smith

+
+
+
+
Followers
+

99k

+
+
+
Following
+

1

+
+
+
+
+ picture of Will Smith +
+
+ +
+
+ User Avatar +
+
+ +
+
+

Name: Will Smith

+

Email: Will@email.com

+

Age: 16

+

Gender: Male

+

About:
Hey everyone, it’s Will. Let’s get real for a second...

+
+ +
+

Most Recent Posts

+
+ + + + + + +
+
+
+ + +
+
+
+
+ + + + + + + diff --git a/public/css/main.css b/public/css/main.css new file mode 100644 index 000000000..65784902a --- /dev/null +++ b/public/css/main.css @@ -0,0 +1 @@ +h1{color:#6d1710}body{font-family:"Roboto",sans-serif;display:flex;justify-content:center;align-items:center;flex-direction:column}.container{margin-top:50px;display:flex;flex-wrap:wrap;justify-content:space-between}.card{border:2px solid #343a40}.card-header{background-color:#fff;border-bottom:2px solid #343a40}.card-body{background-color:#f8f9fa}form{max-width:90%;margin:0 auto;border-radius:10px;min-width:300px}.form-control{width:90%}.btn-primary{background-color:#010102;border-color:#010203;width:90%}.btn-primary:hover{background-color:#6d1710;border-color:#6d1710}.profile-card{max-width:90%;margin:5px auto}header{width:100%}nav{width:100%}#loginform{max-width:500px}article{margin:5px auto}/*# sourceMappingURL=main.css.map */ diff --git a/public/css/main.css.map b/public/css/main.css.map new file mode 100644 index 000000000..1338f4cd1 --- /dev/null +++ b/public/css/main.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../../src/scss/main.scss"],"names":[],"mappings":"AAKA,GACE,MANkB,QASpB,KACE,gCACA,aACA,uBACA,mBACA,sBAGF,WACE,gBACA,aACA,eACA,8BAGF,MACE,yBAEA,aACE,sBACA,gCAGF,WACE,yBAIJ,KACE,cACA,cACA,mBACA,gBAIF,cACE,UAGF,aACE,yBACA,qBACA,UAEA,mBACE,yBACA,qBAIJ,cACE,cACA,gBAGF,OACE,WAGF,IACE,WAGF,WACE,gBAGF,QACE","file":"main.css"} \ No newline at end of file diff --git a/src/scss/_buttons.sass b/src/scss/_buttons.sass new file mode 100644 index 000000000..3edc388b5 --- /dev/null +++ b/src/scss/_buttons.sass @@ -0,0 +1,29 @@ +$btn-bg-primary: #25486b +$btn-bg-secondary: #25486b +$btn-padding: 5px 10px +$btn-hover-darken: 10% +$btn-hover-transition: 0.3s + +$btn-font-family: "Michroma" + +@import "../../node_modules/bootstrap/scss/bootstrap" +@import "_fonts.scss" + + +@mixin button-style($bg-color, $hover-darken) + background-color: $bg-color + color: #fff + padding: $btn-padding + border: none + border-radius: 5px + transition: $btn-hover-transition + &:hover + background-color: darken($bg-color, $hover-darken) + + +.btn-primary + @include button-style($btn-bg-primary, $btn-hover-darken) + + +.btn-secondary + @include button-style($btn-bg-secondary, $btn-hover-darken) \ No newline at end of file diff --git a/src/scss/_feed.scss b/src/scss/_feed.scss new file mode 100644 index 000000000..9fb3056f4 --- /dev/null +++ b/src/scss/_feed.scss @@ -0,0 +1,152 @@ +@import "../../node_modules/bootstrap/scss/bootstrap"; +@import "../scss/fonts.scss"; + +/* $primary-blue-colour: #25486b; +$gutter: 16px; + +.article-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: $gutter; + margin-bottom: 50px; + font-family: "Montserrat", sans-serif; + + @media (max-width: 1199px) { + grid-template-columns: repeat(2, 1fr); + } + + @media (max-width: 999px) { + grid-template-columns: 1fr; + } + + @media (max-width: 700px) { + grid-template-columns: 1fr; + } +} + +.card.postbox { + display: flex; + flex-direction: column; + min-height: 450px; + margin-bottom: $gutter; +} + +.card-body { + flex-grow: 1; + padding: 16px; + + header { + background-color: #25486b; + padding: 4px; + border-radius: 5px; + + button { + background-color: #fff; + transition: 0.3s; + } + } +} + +#sort-button { + background-color: #fff; + color: black; + padding: 5px; + width: 100px; + font-family: michroma; + margin-top: 5px; + border: none; + border-radius: 5px; + transition: 0.3s; + + &:hover { + background-color: #25486b; + color: #fff; + box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; + } +} + + +#postId { + transition:0.3s; +} + +.posttags { + margin-bottom: 10px; +} + +.commentsection { + margin-top: 10px; +} + +.card-title { + font-size: 1.25rem; +} + +.card-text { + font-size: 0.9rem; + line-height: 1.5; + font-family: Turret Road; +} + + +@media (min-width: 1400px) { + .card.postbox { + height: auto; + flex-direction: column; + } +} + +.form-check-input:checked { + background-color: #007bff; + border-color: #007bff; +} + +.form-check-input { + transition: 0.3s; + width: 20px; + height: 20px; +} + +h5 { + color: #fff; +} + +label { + color: #fff; +} + +#postcomment-button { + background-color: #1ec06f; + border: none; + color: #25486b; +} + +#search-container { + display: flex; + align-items: baseline; + gap: 5px; + margin-top: 20px; + + input { + border: none; + border-radius: 5px; + font-family: michroma; + height: 30px; + + } + button { + background-color: #fff; + font-family: michroma; + height: 30px; + margin: 0 auto; + border: none; + border-radius: 5px; + padding: 0px 50px 0px 50px; + + } + + &:hover { + box-shadow: rgba(0, 0, 0, 0.2) 0px 7px 29px 0px; + } +} + */ \ No newline at end of file diff --git a/src/scss/_fonts.scss b/src/scss/_fonts.scss new file mode 100644 index 000000000..adabd25ee --- /dev/null +++ b/src/scss/_fonts.scss @@ -0,0 +1,10 @@ +@import url("https://fonts.googleapis.com"); +@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); +@import url("https://fonts.gstatic.com"); +@import url("https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Michroma&family=Syncopate:wght@400;700&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Turret+Road:wght@200;300;400;500;700;800&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" ); + +$primary-font: "Roboto"; +$header-font: "Syncopate"; diff --git a/src/scss/_profile.scss b/src/scss/_profile.scss new file mode 100644 index 000000000..d728de066 --- /dev/null +++ b/src/scss/_profile.scss @@ -0,0 +1,98 @@ +@import "../../node_modules/bootstrap/scss/bootstrap"; +@import "../scss/fonts.scss"; + + + +/* #cardHeader { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: baseline; + + #followerCount { + display: flex; + flex-direction: row; + gap: 20px; + color: #6d1710; + + div { + + h5 { + color: #6d1710; + } + + } + + } + + #followerNumber { + font-weight: 800; + font-size: 16px; + } +} + +#followingCount { + display: flex; + flex-direction: row; + gap: 20px; + + #followingNumber { + font-weight: 800; + font-size: 16px; + } + +} + +#userName { + font-family: syncopate; + font-size: 30px; + font-weight: 600; + color: $primary-h1-colour; +} + +#profileInfo { + font-family: "Turret Road", sans-serif; + font-weight: 400; + + p { + + span { + font-weight: 900; + } + } +} + +#mostRecent { + font-family: Michroma; + height: 300px; +} + +.card { + + transition: 0.3s; + + &:hover { + box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px; + } + + .card-body { + + height: 200px; + border-radius: 5px; + transition: 0.5s; + + .card-title { + font-weight: 900; + } + + } +} + +#editAvatarDiv { + display: flex; + +} + +#editAvatarButton { + width: 160px; +} */ \ No newline at end of file diff --git a/src/scss/index.scss b/src/scss/index.scss deleted file mode 100644 index 8b1378917..000000000 --- a/src/scss/index.scss +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/scss/main.scss b/src/scss/main.scss new file mode 100644 index 000000000..1a3824ce1 --- /dev/null +++ b/src/scss/main.scss @@ -0,0 +1,23 @@ +$primary: #25486b; +$secondary: #d3d3d3; +$success: rgb(94, 153, 94); +$danger: rgb(177, 30, 30); +$info: rgb(0, 114, 114); +$warning: rgb(255, 255, 0); +$light: rgb(241, 241, 241); +$dark: rgb(83, 83, 83); + +$body-bg:$light; +$input-bg:#fff; + +@import "../../node_modules/bootstrap/scss/bootstrap"; +@import "../scss/_fonts.scss"; +@import "../scss/_profile.scss"; +@import "../scss/_feed.scss"; +@import "../scss/_buttons.sass"; + + +html, body { + overflow-x: hidden; + font-family: $primary-font; +} \ No newline at end of file