diff --git a/README.md b/README.md index 5e6faf7d..abf1511c 100644 --- a/README.md +++ b/README.md @@ -67,6 +67,130 @@ To deliver this project you must follow the steps indicated in the document: - [SASS documentation](https://sass-lang.com/) - [W3S SASS](https://www.w3schools.com/sass/) -- [SASS Guidelines](https://sass-guidelin.es/es/) - [Organizing SASS Projects](https://blog.prototypr.io/how-i-organize-sass-projects-e2d7760df86f) - [Why don't use @import](https://www.youtube.com/watch?v=CR-a8upNjJ0) + +## Question Answers + +## What is SASS? What does SASS stand for? +SASS is a cascade style language (could be simplified as a "css on steroids"), and SASS stands for "Syntactically awesome style sheets" + +## What is a CSS pre-processor? +It's a scripting language that can expand the default capabilities of CSS, such as using logic in CSS code. +## What does a pre-processor have to do with SASS? +SASS is itself a pre-processor, and it extends CSS' capabilities immensely. +## Why use SASS? +In order to save time, increase efficiency and apply logic into CSS among other extra capabilities. +## SASS has disadvantages? Which are? +SASS has to be compiled first, browsers can't understand it directly, and can't use browser built-in element inspector +## What is a SASS Variable? Explain why are useful +It is a value assigned through $, which can be used throughout the file, which can be imported to other files as well. They can save a lot of repetition and make code maintenance easy. +## Explain the SASS variables property with an example. +$long-range:100px +.navbar{ + width:$long-range; +} +## What is a mixin? Why is it important? Give an example +A mixin lets you use groups of CSS declarations that you want to reuse throughout your site. + +@mixin theme($theme: DarkGray) { + background: $theme; + box-shadow: 0 0 1px rgba($theme, .25); + color: #fff; +} + +.info { + @include theme; +} +.alert { + @include theme($theme: DarkRed); +} +.success { + @include theme($theme: DarkGreen); +} +## What is SCSS? Give an example +it's a special file type for sass, the code from which will be converted into css +## What is SASS? Give an example +Sass is an older version compared with scss that uses indentation instead of enclosures and ; . +Example: +SASS SYNTAX +$base-color: #c6538c +$border-dark: rgba($base-color, 0.88) + +.alert + border: 1px solid $border-dark +## What is the difference between .scss and .sass syntax. +scss uses enclosures and ; , and sass uses indentation +## In which cases would we use SCSS? And in which cases would we use SASS? +We should mostly use scss, since it's better to code and has all the advantages of sass. +## Explain how traditional CSS and Preprocessed CSS workflows are different. +traditional CSS is directly interpreted by the browser, but Pre-processed CSS must be compiled and converted before it can be understood by the browser. +## Can we create functions with SASS? If it is true, give an example. +Yes, we can! +@function some-func($param) { + @return (100/$param); +} + +/* How to use a function: */ +.col-6 { font-size: some-func(5);} + +/* The above is the same as: */ +.col-6 { font-size: 20; } +## What is nesting? Is it useful? Give an example of nesting +It's basically including sublocks inside of blocks of code. Among others, it can be applied to loops in JS, and it can also be applied in Sass: + +nav { + ul { + margin: 0; + padding: 0; + list-style: none; + } + + li { display: inline-block; } + + a { + display: block; + padding: 6px 12px; + text-decoration: none; + } +} +## Difference between @use & @import? Give an example +The main difference is that when using "@use" file is only imported once, which when using "@import" it's not necessarely the case. +## How can we import other CSS/SASS files in SASS? Give an example +by using @use: +SCSS SYNTAX +// foundation/_code.scss +code { + padding: .25em; + line-height: 0; +} + +// new_file.scss +@use 'foundation/code'; + +//now the file _cose.css has been imported +## Explain the concept of inheritance in SASS. +inheritance allows you to directly apply the set of properties from one selector to another. Unfortunately, you have to inherit them all, it can't be done selectively. +## Why use @extend? Give an example +Extend is perfect when trying to avoid repetition and you want to apply all the set of properties from an object to another one. See an example below: + +%message-shared { + border: 1px solid #ccc; + padding: 10px; + color: #333; +} + +// This CSS won't print because %equal-heights is never extended. +%equal-heights { + display: flex; + flex-wrap: wrap; +} + +.message { + @extend %message-shared; +} + +.success { + @extend %message-shared; + border-color: green; +} diff --git a/dev/scss/base/_base.scss b/dev/scss/base/_base.scss new file mode 100644 index 00000000..f4ca253f --- /dev/null +++ b/dev/scss/base/_base.scss @@ -0,0 +1,11 @@ +@use "../helpers" as *; + +body{ + margin: 0; + padding: 0; + box-sizing: content-box; + background-color: $notWhite; + font-family:$mainFont; + color: $darkGrey; + width: 100vw; +} \ No newline at end of file diff --git a/dev/scss/base/_index.scss b/dev/scss/base/_index.scss new file mode 100644 index 00000000..0a7930bc --- /dev/null +++ b/dev/scss/base/_index.scss @@ -0,0 +1,2 @@ +@forward "base"; +@forward "normalize"; diff --git a/dev/scss/base/_normalize.scss b/dev/scss/base/_normalize.scss new file mode 100644 index 00000000..ef276044 --- /dev/null +++ b/dev/scss/base/_normalize.scss @@ -0,0 +1,525 @@ +// ============================================================================= +// Normalize.scss based on Nicolas Gallagher and Jonathan Neal's +// normalize.css v2.1.3 | MIT License | git.io/normalize +// ============================================================================= + +// ============================================================================= +// Normalize.scss settings +// ============================================================================= + + +// Set to true if you want to add support for IE6 and IE7 +// Notice: setting to true might render some elements +// slightly differently than when set to false +$legacy_support_for_ie: false !default; // Used also in Compass + + +// Set the default font family here so you don't have to override it later +$normalized_font_family: sans-serif !default; + +$normalize_headings: true !default; + +$h1_font_size: 2em !default; +$h2_font_size: 1.5em !default; +$h3_font_size: 1.17em !default; +$h4_font_size: 1em !default; +$h5_font_size: 0.83em !default; +$h6_font_size: 0.75em !default; + +$h1_margin: 0.67em 0 !default; +$h2_margin: 0.83em 0 !default; +$h3_margin: 1em 0 !default; +$h4_margin: 1.33em 0 !default; +$h5_margin: 1.67em 0 !default; +$h6_margin: 2.33em 0 !default; + +$background: #fff !default; +$color: #000 !default; + +// ============================================================================= +// HTML5 display definitions +// ============================================================================= + +// Corrects block display not defined in IE6/7/8/9 & FF3 + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section, +summary { + display: block; +} + +// Corrects inline-block display not defined in IE6/7/8/9 & FF3 + +audio, +canvas, +video { + display: inline-block; + @if $legacy_support_for_ie { + *display: inline; + *zoom: 1; + } +} + +// 1. Prevents modern browsers from displaying 'audio' without controls +// 2. Remove excess height in iOS5 devices + +audio:not([controls]) { + display: none; // 1 + height: 0; // 2 +} + +// +// Address `[hidden]` styling not present in IE 8/9. +// Hide the `template` element in IE, Safari, and Firefox < 22. +// + +[hidden], template { + display: none; +} + +// ============================================================================= +// Base +// ============================================================================= + +// 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units +// http://clagnut.com/blog/348/#c790 +// 2. Prevents iOS text size adjust after orientation change, without disabling user zoom +// www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ + +html { + @if $legacy_support_for_ie { + font-size: 100%; // 1 + } + background: $background; + color: $color; + -webkit-text-size-adjust: 100%; // 2 + -ms-text-size-adjust: 100%; // 2 +} + +// Addresses font-family inconsistency between 'textarea' and other form elements. + +html, +button, +input, +select, +textarea { + font-family: $normalized_font_family; +} + +// Addresses margins handled incorrectly in IE6/7 + +body { + margin: 0; +} + +// ============================================================================= +// Links +// ============================================================================= + +// 1. Remove the gray background color from active links in IE 10. +// 2. Addresses outline displayed oddly in Chrome +// 3. Improves readability when focused and also mouse hovered in all browsers +// people.opera.com/patrickl/experiments/keyboard/test + +a { + // 1 + + background: transparent; + + // 2 + + &:focus { + outline: thin dotted; + } + + // 3 + + &:hover, + &:active { + outline: 0; + } +} + +// ============================================================================= +// Typography +// ============================================================================= + +// Addresses font sizes and margins set differently in IE6/7 +// Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5 + +@if $normalize_headings == true { + h1 { + font-size: $h1_font_size; + margin: $h1_margin; + } + + h2 { + font-size: $h2_font_size; + margin: $h2_margin; + } + + h3 { + font-size: $h3_font_size; + margin: $h3_margin; + } + + h4 { + font-size: $h4_font_size; + margin: $h4_margin; + } + + h5 { + font-size: $h5_font_size; + margin: $h5_margin; + } + + h6 { + font-size: $h6_font_size; + margin: $h6_margin; + } +} + +// Addresses styling not present in IE 8/9, S5, Chrome + +abbr[title] { + border-bottom: 1px dotted; +} + +// Addresses style set to 'bolder' in FF3+, S4/5, Chrome + +b, +strong { + font-weight: bold; +} + +@if $legacy_support_for_ie { + blockquote { + margin: 1em 40px; + } +} + +// Addresses styling not present in S5, Chrome + +dfn { + font-style: italic; +} + +// Addresses styling not present in IE6/7/8/9 + +mark { + background: #ff0; + color: #000; +} + +// Addresses margins set differently in IE6/7 +@if $legacy_support_for_ie { + p, + pre { + margin: 1em 0; + } +} + +// Corrects font family set oddly in IE6, S4/5, Chrome +// en.wikipedia.org/wiki/User:Davidgothberg/Test59 + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + @if $legacy_support_for_ie { + _font-family: 'courier new', monospace; + } + font-size: 1em; +} + +// Improves readability of pre-formatted text in all browsers + +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} + +// Set consistent quote types. + +q { + quotes: "\201C" "\201D" "\2018" "\2019"; +} + +// 1. Addresses CSS quotes not supported in IE6/7 +// 2. Addresses quote property not supported in S4 + +// 1 +@if $legacy_support_for_ie { + q { + quotes: none; + } +} + +// 2 +q { + &:before, + &:after { + content: ''; + content: none; + } +} + +// Address inconsistent and variable font size in all browsers. + +small { + font-size: 80%; +} + +// Prevents sub and sup affecting line-height in all browsers +// gist.github.com/413930 + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +// ============================================================================= +// Lists +// ============================================================================= + +// Addresses margins set differently in IE6/7 +@if $legacy_support_for_ie { + dl, + menu, + ol, + ul { + margin: 1em 0; + } +} + +@if $legacy_support_for_ie { + dd { + margin: 0 0 0 40px; + } +} + +// Addresses paddings set differently in IE6/7 +@if $legacy_support_for_ie { + menu, + ol, + ul { + padding: 0 0 0 40px; + } +} + +// Corrects list images handled incorrectly in IE7 + +nav { + ul, + ol { + @if $legacy_support_for_ie { + list-style-image: none; + } + } +} + +// ============================================================================= +// Embedded content +// ============================================================================= + +// 1. Removes border when inside 'a' element in IE6/7/8/9, FF3 +// 2. Improves image quality when scaled in IE7 +// code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ + +img { + border: 0; // 1 + @if $legacy_support_for_ie { + -ms-interpolation-mode: bicubic; // 2 + } +} + +// Corrects overflow displayed oddly in IE9 + +svg:not(:root) { + overflow: hidden; +} + +// ============================================================================= +// Figures +// ============================================================================= + +// Addresses margin not present in IE6/7/8/9, S5, O11 + +figure { + margin: 0; +} + +// ============================================================================= +// Forms +// ============================================================================= + +// Corrects margin displayed oddly in IE6/7 +@if $legacy_support_for_ie { + form { + margin: 0; + } +} + +// Define consistent border, margin, and padding + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +// 1. Corrects color not being inherited in IE6/7/8/9 +// 2. Remove padding so people aren't caught out if they zero out fieldsets. +// 3. Corrects text not wrapping in FF3 +// 4. Corrects alignment displayed oddly in IE6/7 + +legend { + border: 0; // 1 + padding: 0; // 2 + white-space: normal; // 3 + @if $legacy_support_for_ie { + *margin-left: -7px; // 4 + } +} + +// 1. Correct font family not being inherited in all browsers. +// 2. Corrects font size not being inherited in all browsers +// 3. Addresses margins set differently in IE6/7, FF3+, S5, Chrome +// 4. Improves appearance and consistency in all browsers + +button, +input, +select, +textarea { + font-family: inherit; // 1 + font-size: 100%; // 2 + margin: 0; // 3 + vertical-align: baseline; // 4 + @if $legacy_support_for_ie { + *vertical-align: middle; // 4 + } +} + +// Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet + +button, input { + line-height: normal; +} + +// Address inconsistent `text-transform` inheritance for `button` and `select`. +// All other form control elements do not inherit `text-transform` values. +// Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. +// Correct `select` style inheritance in Firefox 4+ and Opera. + +button, +select { + text-transform: none; +} + +// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` +// and `video` controls +// 2. Corrects inability to style clickable 'input' types in iOS +// 3. Improves usability and consistency of cursor style between image-type +// 'input' and others +// 4. Removes inner spacing in IE7 without affecting normal text inputs +// Known issue: inner spacing remains in IE6 + +button, +html input[type="button"], // 1 +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; // 2 + cursor: pointer; // 3 + @if $legacy_support_for_ie { + *overflow: visible; // 4 + } +} + +// Re-set default cursor for disabled elements + +button[disabled], +input[disabled] { + cursor: default; +} + +// Removes inner padding and border in FF3+ +// www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ + +button, input { + &::-moz-focus-inner { + border: 0; + padding: 0; + } +} + +// 1. Removes default vertical scrollbar in IE6/7/8/9 +// 2. Improves readability and alignment in all browsers + +textarea { + overflow: auto; // 1 + vertical-align: top; // 2 +} + +// ============================================================================= +// Tables +// ============================================================================= + +// Remove most spacing between table cells + +table { + border-collapse: collapse; + border-spacing: 0; +} + +input { + // 1. Addresses appearance set to searchfield in S5, Chrome + // 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof) + &[type="search"] { + -webkit-appearance: textfield; // 1 + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; // 2 + box-sizing: content-box; + + // Remove inner padding and search cancel button in Safari 5 and Chrome + // on OS X. + &::-webkit-search-cancel-button, + &::-webkit-search-decoration { + -webkit-appearance: none; + } + } + + // 1. Address box sizing set to `content-box` in IE 8/9/10. + // 2. Remove excess padding in IE 8/9/10. + // 3. Removes excess padding in IE7 + // Known issue: excess padding remains in IE6 + &[type="checkbox"], + &[type="radio"] { + box-sizing: border-box; // 1 + padding: 0; // 2 + @if $legacy_support_for_ie { + *height: 13px; // 3 + *width: 13px; // 3 + } + } +} \ No newline at end of file diff --git a/dev/scss/components/_index.scss b/dev/scss/components/_index.scss new file mode 100644 index 00000000..870e6d13 --- /dev/null +++ b/dev/scss/components/_index.scss @@ -0,0 +1,2 @@ +@forward "login"; +@forward "home"; diff --git a/dev/scss/components/home/_index.scss b/dev/scss/components/home/_index.scss new file mode 100644 index 00000000..c7048366 --- /dev/null +++ b/dev/scss/components/home/_index.scss @@ -0,0 +1,4 @@ +@forward "feed"; +@forward "navbar"; +@forward "sidebar"; + diff --git a/dev/scss/components/home/_navbar.scss b/dev/scss/components/home/_navbar.scss new file mode 100644 index 00000000..78bd0a0d --- /dev/null +++ b/dev/scss/components/home/_navbar.scss @@ -0,0 +1,61 @@ +@use "../../helpers" as *; + +.navBar { + background-color: white; + width: 100vw; + border-bottom: 1px solid $lightGrey; + position: fixed; + z-index: 1; + + &__content { + max-width: 975px; + height: 54px; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; + + > * { + width: 30%; + margin: 0 20px; + } + + &__logoContainer { + &__logo { + margin-top: 6px; + @include main-logo(103px); + cursor: pointer; + } + } + + &__searchContainer { + display: flex; + justify-content: center; + + &__search { + width: 209px; + height: 24px; + border: 1px solid $lightGrey; + background-color: $notWhite; + border-radius: 3px; + } + } + + &__iconsContainer { + display: flex; + justify-content: flex-end; + + > * { + cursor: pointer; + } + + > *:not(:first-child) { + margin-left: 22px; + } + + &__porfile { + @include porfile-picture(22px); + } + } + } +} diff --git a/dev/scss/components/home/_sidebar.scss b/dev/scss/components/home/_sidebar.scss new file mode 100644 index 00000000..61d91db6 --- /dev/null +++ b/dev/scss/components/home/_sidebar.scss @@ -0,0 +1,146 @@ +@use "../../helpers" as *; + +.sidebar { + &__porfile { + display: flex; + align-items: center; + margin-bottom: 10px; + margin-top: 24px; + height: 56px; + &__image { + @include porfile-picture(56px); + cursor: pointer; + } + &__info { + display: flex; + flex-direction: column; + margin-left: 18px; + width: calc(100% - 110px); + p { + font-size: 13.2px; + line-height: 18px; + margin: 1px 0; + } + &__username { + font-weight: 600; + } + &__name { + color: $mediumGrey; + } + } + &__switch { + @extend %reset-button; + color: $activeBlue; + font-size: 12px; + line-height: 14px; + font-weight: 400; + } + } + + &__suggestions { + &__header { + padding-bottom: 4px; + padding-top: 4px; + margin-top: 18px; + width: 100%; + display: flex; + justify-content: space-between; + + &__title { + color: $mediumGrey; + font-size: 13px; + line-height: 14px; + font-weight: 600; + } + &__showAll { + @extend %reset-button; + color: $darkGrey; + font-size: 12px; + line-height: 14px; + font-weight: 400; + } + } + &__porfile { + display: flex; + align-items: center; + padding: 1px 0; + height: 48px; + &__image { + @include porfile-picture(32px, true); + cursor: pointer; + } + &__info { + display: flex; + flex-direction: column; + margin-left: 12px; + width: calc(100% - 88px); + overflow: hidden; + p { + font-size: 13.2px; + line-height: 18px; + margin: 1px 0; + } + &__username { + font-weight: 600; + } + &__followers { + color: $mediumGrey; + width: 95%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + &__follow { + @extend %reset-button; + color: $activeBlue; + font-size: 12px; + line-height: 14px; + font-weight: 400; + } + } + } + + &__footer { + margin-top: 12px; + + &__nav { + margin-bottom: 16px; + max-width: 100%; + + &__list { + list-style: none; + margin-right: 0; + text-align: left; + padding-left: 0; + + &__item { + font-size: 11px; + font-weight: 400; + line-height: 13px; + text-transform: none; + display: inline-block; + + &__link { + color: #c7c7c7; + text-decoration: none; + } + + &:not(:last-of-type)::after{ + content: '\00B7'; + margin: 0 .25em 0 .25em; + color: #c7c7c7; + } + } + } + } + + &__credits{ + font-size: 11px; + font-weight: 400; + line-height: 13px; + color: #c7c7c7; + text-transform: uppercase; + } + } +} diff --git a/dev/scss/components/home/feed/_index.scss b/dev/scss/components/home/feed/_index.scss new file mode 100644 index 00000000..309596a7 --- /dev/null +++ b/dev/scss/components/home/feed/_index.scss @@ -0,0 +1,2 @@ +@forward "_posts.scss"; +@forward "_stories.scss"; \ No newline at end of file diff --git a/dev/scss/components/home/feed/_posts.scss b/dev/scss/components/home/feed/_posts.scss new file mode 100644 index 00000000..a25698a9 --- /dev/null +++ b/dev/scss/components/home/feed/_posts.scss @@ -0,0 +1,152 @@ +@use "../../../helpers/" as *; + +.posts { + height: fit-content; + margin-bottom: 24px; + padding: 16px 0; + display: flex; + flex-direction: column; + width: 100%; + position: relative; + + &__item { + width: 100%; + height: fit-content; + @extend %standard-box; + padding: 0; + margin-bottom: 60px; + + &__userContainer { + height: 28px; + padding: 16px; + width: calc(100% - 32px); + display: flex; + align-items: center; + + &__image { + width: 40px; + @include porfile-picture(32px, true); + } + + &__info { + width: calc(100% - 78px); + display: flex; + flex-direction: column; + color: $darkGrey; + margin-left: 14px; + + &__name { + font-size: 13px; + font-weight: 600; + } + + &__place { + font-size: 13px; + } + } + + &__action { + margin-top: 4px; + height: 24px; + width: 24px; + } + } + &__image { + width: 100%; + + img { + width: 100%; + height: auto; + } + } + + &__footer { + display: flex; + justify-content: space-between; + padding-left: 16px; + padding-right: 16px; + svg { + padding: 8px; + cursor: pointer; + + &:first-of-type { + padding-left: 0; + } + + &:last-of-type { + padding-right: 0; + } + } + &__leftButtons { + display: flex; + } + } + + &__likes { + display: flex; + padding-left: 16px; + padding-right: 16px; + width: calc(100% - 32px); + align-items: center; + + &__image { + @include porfile-picture(20px); + } + + &__text { + font-size: 14px; + margin-left: 8px; + } + } + + &__coments { + font-size: 14px; + padding-left: 16px; + padding-right: 16px; + margin-top: 14px; + &__userComent { + b:last-of-type { + color: $mediumGrey; + font-weight: 400; + } + } + &__viewAll { + color: $mediumGrey; + font-weight: 400; + margin: 8px 0 0; + } + &__comment { + margin: 8px 0 0; + svg { + float: right; + } + } + } + + &__comment { + padding-left: 16px; + padding-right: 16px; + margin-top: 12px; + border-top: 1px solid $lightGrey; + height: 56px; + display: flex; + align-items: center; + font-size: 14px; + color: $mediumGrey; + + span{ + margin-left: 14px; + + &:first-of-type{ + width: calc(100% - 84px); + } + + &:last-of-type{ + color: $activeBlue; + font-weight: 600; + opacity: 0.4; + } + } + } + } +} diff --git a/dev/scss/components/home/feed/_stories.scss b/dev/scss/components/home/feed/_stories.scss new file mode 100644 index 00000000..44a74e62 --- /dev/null +++ b/dev/scss/components/home/feed/_stories.scss @@ -0,0 +1,55 @@ +@use "../../../helpers/" as *; + +.stories { + @extend %standard-box; + height: 86px; + margin-bottom: 24px; + padding: 16px 0; + display: flex; + flex-direction: row; + width: 100%; + position: relative; + + &__item { + height: 122px; + padding: 0 4px; + top: 2px; + width: 80px; + display: flex; + flex-direction: column; + align-items: center; + cursor: pointer; + + &__image { + @include porfile-picture(56px, true); + margin-bottom: 6px; + margin-top: 4px; + } + + span { + font-size: 11.5px; + line-height: 14px; + letter-spacing: 0.01em; + max-width: 74px; + overflow: hidden; + text-overflow: ellipsis; + } + } + + &__next{ + div{ + @extend %next_button; + border-radius: 50%; + } + background-color: transparent; + border: 0; + justify-self: center; + outline: 0; + padding: 0; + position: absolute; + top: 50%; + transform: translateY(-50%); + cursor: pointer; + right: 0; + } +} diff --git a/dev/scss/components/login/_footer.scss b/dev/scss/components/login/_footer.scss new file mode 100644 index 00000000..d1634792 --- /dev/null +++ b/dev/scss/components/login/_footer.scss @@ -0,0 +1,31 @@ +@use "../../helpers" as *; + +.login__footer { + display: flex; + flex-direction: column; + width: 100vw; + height: 15vh; + + &__line { + display: flex; + flex-direction: row; + width: 100vw; + justify-content: center; + align-items: center; + + &__item { + font-size: 13px; + line-height: 14px; + margin: 0px 8px 12px; + color: $mediumGrey; + } + + &__arrow { + font-size: 13px; + line-height: 14px; + margin-right: 8px; + margin-top: -10px; + color: $mediumGrey; + } + } +} diff --git a/dev/scss/components/login/_index.scss b/dev/scss/components/login/_index.scss new file mode 100644 index 00000000..6b819b95 --- /dev/null +++ b/dev/scss/components/login/_index.scss @@ -0,0 +1,9 @@ +@forward "footer"; +@forward "main"; + +.login{ + height: 85vh; + display: flex; + justify-content: center; + align-items: center; +} \ No newline at end of file diff --git a/dev/scss/components/login/main/_index.scss b/dev/scss/components/login/main/_index.scss new file mode 100644 index 00000000..00818579 --- /dev/null +++ b/dev/scss/components/login/main/_index.scss @@ -0,0 +1,8 @@ +@forward "_login-form"; +@forward "pictures-carrusel"; + +.login__main{ + display: flex; + margin: 0 auto; + width: fit-content; +} \ No newline at end of file diff --git a/dev/scss/components/login/main/_login-form.scss b/dev/scss/components/login/main/_login-form.scss new file mode 100644 index 00000000..ff7d3fe7 --- /dev/null +++ b/dev/scss/components/login/main/_login-form.scss @@ -0,0 +1,173 @@ +@use "../../../helpers" as *; + +.login__main__content { + margin-top: 32px; + max-width: 350px; + + &__login { + @extend %standard-box; + + &__logo { + @include main-logo(175px); + margin: 22px auto 12px; + } + &__form { + margin-top: 24px; + + input { + outline: 0; + font-size: 11px; + background: $notWhite; + border: 1px solid $lightGrey; + border-radius: 3px; + overflow: hidden; + padding: 9px 0 7px 8px; + text-overflow: ellipsis; + height: 20px; + margin: 0 40px 6px; + width: calc(100% - 80px); + font-family: $mainFont; + } + + input[type="submit"] { + margin: 8px 40px; + height: 30px; + color: white; + background-color: $activeBlue; + border-radius: 4px; + padding: 5px 9px; + font-weight: 500; + width: calc(100% - 70px); + font-size: 14px; + } + } + &__or { + margin: 10px 40px 18px; + display: flex; + flex-direction: row; + &__separator { + flex-grow: 1; + height: 1px; + position: relative; + top: 0.45em; + flex-shrink: 1; + color: black; + box-sizing: border-box; + border-bottom: 0.5px solid $lightGrey; + } + &__text { + flex-grow: 0; + flex-shrink: 0; + font-size: 13px; + font-weight: 600; + line-height: 15px; + margin: 0 18px; + text-transform: uppercase; + color: $mediumGrey; + font-weight: 500; + } + } + &__facebook { + margin: 8px 40px; + &__button { + background-color: transparent; + border: 0; + box-sizing: border-box; + color: $facebookBlue; + cursor: pointer; + display: inline; + font-size: 14px; + font-weight: 600; + line-height: 18px; + padding: 0; + position: relative; + text-align: center; + text-overflow: ellipsis; + text-transform: inherit; + user-select: none; + width: auto; + display: flex; + justify-content: center; + outline: none; + margin: 0 auto; + + &__logo { + @extend %facebook-logo; + } + &__text { + margin-left: 10px; + } + } + } + &__forgot { + font-size: 12px; + line-height: 14px; + margin-top: 12px; + margin-bottom: 10px; + text-align: center; + + a { + font-size: 12px; + line-height: 14px; + margin-top: 12px; + text-align: center; + color: $facebookBlue; + } + } + } + + &__signin { + @extend %standard-box; + + &__text { + color: $darkGrey; + font-size: 14px; + margin: 15px; + text-align: center; + a { + color: $activeBlue; + font-weight: 600; + font-size: 14px; + line-height: 18px; + cursor: pointer; + } + } + } + &__downloadApp { + display: flex; + flex-direction: column; + flex-shrink: 0; + margin: 0; + padding: 0; + position: relative; + + p{ + text-align: center; + } + + &__links{ + margin-top: 10px; + display: flex; + justify-content: center; + + a{ + text-decoration: none; + margin: 0; + padding: 0; + border: 0; + vertical-align: baseline; + cursor: pointer; + + img{ + height: 40px; + cursor: pointer; + } + } + + a + a{ + margin-left: 10px; + } + + } + } +} diff --git a/dev/scss/components/login/main/_pictures-carrusel.scss b/dev/scss/components/login/main/_pictures-carrusel.scss new file mode 100644 index 00000000..7c689ac9 --- /dev/null +++ b/dev/scss/components/login/main/_pictures-carrusel.scss @@ -0,0 +1,27 @@ +@use "../../../helpers" as *; + +.mobileCarrusel { + background-image: $mobileBackgroundImage; + background-size: 454px 618px; + width: 454px; + height: 618px; + + &__images { + margin-left: 151px; + position: relative; + * { + height: 427px; + left: 0; + /* opacity: 0; */ + position: absolute; + top: 100px; + /* visibility: hidden; */ + width: 240px; + } + @for $i from 1 through 4 { + &__content__#{$i} { + @include carrusel-animation($i); + } + } + } +} diff --git a/dev/scss/helpers/_colors.scss b/dev/scss/helpers/_colors.scss new file mode 100644 index 00000000..55a79ff0 --- /dev/null +++ b/dev/scss/helpers/_colors.scss @@ -0,0 +1,6 @@ +$notWhite: #fafafa; +$lightGrey: #dbdbdb; +$mediumGrey: #8e8e8e; +$darkGrey: #262626; +$activeBlue: #0095f6; +$facebookBlue:#385185; \ No newline at end of file diff --git a/dev/scss/helpers/_extensions.scss b/dev/scss/helpers/_extensions.scss new file mode 100644 index 00000000..10522272 --- /dev/null +++ b/dev/scss/helpers/_extensions.scss @@ -0,0 +1,38 @@ +@use "colors" as *; +@use "images" as *; + +%standard-box { + top: 0; + left: 0; + right: 0; + border-radius: 3px; + border: 1px solid $lightGrey; + background-color: white; + padding: 10px 0; + margin-bottom: 10px; +} + +%facebook-logo { + background-image: $logosBackgroundImage; + background-repeat: no-repeat; + background-position: -414px -259px; + height: 16px; + width: 16px; +} + +%next_button { + background-image: $logosBackgroundImage2; + background-repeat: no-repeat; + background-position: -294px -273px; + height: 45px; + width: 45px; +} + +%reset-button { + border: 0; + display: inline; + padding: 0; + position: relative; + background-color: transparent; + outline:none; +} diff --git a/dev/scss/helpers/_fonts.scss b/dev/scss/helpers/_fonts.scss new file mode 100644 index 00000000..6379fb5c --- /dev/null +++ b/dev/scss/helpers/_fonts.scss @@ -0,0 +1,3 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); + +$mainFont: "Roboto", sans-serif; \ No newline at end of file diff --git a/dev/scss/helpers/_images.scss b/dev/scss/helpers/_images.scss new file mode 100644 index 00000000..77500f94 --- /dev/null +++ b/dev/scss/helpers/_images.scss @@ -0,0 +1,5 @@ +$mobileBackgroundImage: url("./assets/img/mobileBackground.png"); + +$logosBackgroundImage: url("./assets/img/logos.png"); + +$logosBackgroundImage2: url("./assets/img/logos2.png"); diff --git a/dev/scss/helpers/_index.scss b/dev/scss/helpers/_index.scss new file mode 100644 index 00000000..d3e9425a --- /dev/null +++ b/dev/scss/helpers/_index.scss @@ -0,0 +1,5 @@ +@forward "colors"; +@forward "extensions"; +@forward "fonts"; +@forward "images"; +@forward "mixins"; \ No newline at end of file diff --git a/dev/scss/helpers/_mixins.scss b/dev/scss/helpers/_mixins.scss new file mode 100644 index 00000000..4cc93072 --- /dev/null +++ b/dev/scss/helpers/_mixins.scss @@ -0,0 +1,109 @@ +@use "colors" as *; +@use "images" as *; + +@mixin porfile-picture($width, $isStory: false) { + width: $width; + height: $width; + + img { + width: 100%; + height: 100%; + border-radius: 50%; + overflow: hidden; + box-sizing: border-box; + display: block; + } + + @if $isStory { + width: $width + 4px; + height: $width + 4px; + background: linear-gradient( + to bottom left, + #833ab4, + #c13584, + #e1306c, + #fd1d1d, + #f56040, + #f77737, + #fcaf45, + #ffdc80 + ); + padding: 2px; + display: inline-block; + border-radius: 50%; + + img { + width: 100%; + height: 100%; + border-radius: 50%; + overflow: hidden; + box-sizing: border-box; + display: block; + border: 2px solid white; + } + } +} + +@mixin main-logo($width) { + background-image: $logosBackgroundImage; + background-repeat: no-repeat; + background-size: 430/175 * $width 401/175 * $width; + background-position: 0 -130/175 * $width; + height: 51/175 * $width; + width: $width; +} + +@mixin carrusel-animation($pos) { + @include create-carrusel-animation($pos); + animation: carrusel-animation-#{$pos} 24s linear infinite normal; +} + +@mixin create-carrusel-animation($pos) { + @-moz-keyframes carrusel-animation-#{$pos} { + $percentages: -10%, -5%, 20%, 25%; + $opacity: 0, 1, 1, 0; + @if $pos !=1 { + 0% { + opacity: 0; + } + 100% { + opacity: 0; + } + } + @for $i from 1 through 4 { + @if ($pos - 1) * 25% + nth($percentages, $i) > 0 { + #{($pos - 1) * 25% + nth($percentages, $i)} { + opacity: nth($opacity, $i); + } + } @else { + #{100%+($pos - 1) * 25% + nth($percentages, $i)} { + opacity: nth($opacity, $i); + } + } + } + } + + @keyframes carrusel-animation-#{$pos} { + $percentages: -10%, -5%, 20%, 25%; + $opacity: 0, 1, 1, 0; + @if $pos !=1 { + 0% { + opacity: 0; + } + 100% { + opacity: 0; + } + } + @for $i from 1 through 4 { + @if ($pos - 1) * 25% + nth($percentages, $i) > 0 { + #{($pos - 1) * 25% + nth($percentages, $i)} { + opacity: nth($opacity, $i); + } + } @else { + #{100%+($pos - 1) * 25% + nth($percentages, $i)} { + opacity: nth($opacity, $i); + } + } + } + } +} diff --git a/dev/scss/layout/_index.scss b/dev/scss/layout/_index.scss new file mode 100644 index 00000000..24b7de9c --- /dev/null +++ b/dev/scss/layout/_index.scss @@ -0,0 +1,2 @@ +@forward "page-home"; +@forward "page-login"; \ No newline at end of file diff --git a/dev/scss/layout/_page-home.scss b/dev/scss/layout/_page-home.scss new file mode 100644 index 00000000..e1652fa2 --- /dev/null +++ b/dev/scss/layout/_page-home.scss @@ -0,0 +1,26 @@ +@use "../helpers" as *; +.homeMain { + width: 100vh; + max-width: 935px; + height: fit-content; + margin: 0 auto; + padding: 0; + padding-top: 84px; + overflow: hidden; +} + +.feedContainer { + float: left; + max-width: 614px; + width: 100%; +} + +.sidebar{ + position: fixed; + left: max(650px, (100% - 935px) / 2 + 650px); + top: 84px; + height: 100vh; + width: 293px; + margin-bottom: 30px; + padding: 0; +} diff --git a/public/assets/css/style.css b/public/assets/css/style.css new file mode 100644 index 00000000..9e172d76 --- /dev/null +++ b/public/assets/css/style.css @@ -0,0 +1,1184 @@ +@charset "UTF-8"; +@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); +.stories, +.posts__item, +.login__main__content__login, +.login__main__content__signin { + top: 0; + left: 0; + right: 0; + border-radius: 3px; + border: 1px solid #dbdbdb; + background-color: white; + padding: 10px 0; + margin-bottom: 10px; +} + +.login__main__content__login__facebook__button__logo { + background-image: url("../img/logos.png"); + background-repeat: no-repeat; + background-position: -414px -259px; + height: 16px; + width: 16px; +} + +.stories__next div { + background-image: url("../img/logos2.png"); + background-repeat: no-repeat; + background-position: -294px -273px; + height: 45px; + width: 45px; +} + +.sidebar__porfile__switch, +.sidebar__suggestions__header__showAll, +.sidebar__suggestions__porfile__follow { + border: 0; + display: inline; + padding: 0; + position: relative; + background-color: transparent; + outline: none; +} + +body { + margin: 0; + padding: 0; + box-sizing: content-box; + background-color: #fafafa; + font-family: "Roboto", sans-serif; + color: #262626; + width: 100vw; +} + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section, +summary { + display: block; +} + +audio, +canvas, +video { + display: inline-block; +} + +audio:not([controls]) { + display: none; + height: 0; +} + +[hidden], +template { + display: none; +} + +html { + background: #fff; + color: #000; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +html, +button, +input, +select, +textarea { + font-family: sans-serif; +} + +body { + margin: 0; +} + +a { + background: transparent; +} +a:focus { + outline: thin dotted; +} +a:hover, +a:active { + outline: 0; +} + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +h2 { + font-size: 1.5em; + margin: 0.83em 0; +} + +h3 { + font-size: 1.17em; + margin: 1em 0; +} + +h4 { + font-size: 1em; + margin: 1.33em 0; +} + +h5 { + font-size: 0.83em; + margin: 1.67em 0; +} + +h6 { + font-size: 0.75em; + margin: 2.33em 0; +} + +abbr[title] { + border-bottom: 1px dotted; +} + +b, +strong { + font-weight: bold; +} + +dfn { + font-style: italic; +} + +mark { + background: #ff0; + color: #000; +} + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + font-size: 1em; +} + +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} + +q { + quotes: "“" "”" "‘" "’"; +} + +q:before, +q:after { + content: ""; + content: none; +} + +small { + font-size: 80%; +} + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +img { + border: 0; +} + +svg:not(:root) { + overflow: hidden; +} + +figure { + margin: 0; +} + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +legend { + border: 0; + padding: 0; + white-space: normal; +} + +button, +input, +select, +textarea { + font-family: inherit; + font-size: 100%; + margin: 0; + vertical-align: baseline; +} + +button, +input { + line-height: normal; +} + +button, +select { + text-transform: none; +} + +button, +html input[type="button"], +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; + cursor: pointer; +} + +button[disabled], +input[disabled] { + cursor: default; +} + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +textarea { + overflow: auto; + vertical-align: top; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +input[type="search"] { + -webkit-appearance: textfield; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; +} +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + padding: 0; +} + +.login__footer { + display: flex; + flex-direction: column; + width: 100vw; + height: 15vh; +} +.login__footer__line { + display: flex; + flex-direction: row; + width: 100vw; + justify-content: center; + align-items: center; +} +.login__footer__line__item { + font-size: 13px; + line-height: 14px; + margin: 0px 8px 12px; + color: #8e8e8e; +} +.login__footer__line__arrow { + font-size: 13px; + line-height: 14px; + margin-right: 8px; + margin-top: -10px; + color: #8e8e8e; +} + +.login__main__content { + margin-top: 32px; + max-width: 350px; +} +.login__main__content__login__logo { + background-image: url("../img/logos.png"); + background-repeat: no-repeat; + background-size: 430px 401px; + background-position: 0 -130px; + height: 51px; + width: 175px; + margin: 22px auto 12px; +} +.login__main__content__login__form { + margin-top: 24px; +} +.login__main__content__login__form input { + outline: 0; + font-size: 11px; + background: #fafafa; + border: 1px solid #dbdbdb; + border-radius: 3px; + overflow: hidden; + padding: 9px 0 7px 8px; + text-overflow: ellipsis; + height: 20px; + margin: 0 40px 6px; + width: calc(100% - 80px); + font-family: "Roboto", sans-serif; +} +.login__main__content__login__form input[type="submit"] { + margin: 8px 40px; + height: 30px; + color: white; + background-color: #0095f6; + border-radius: 4px; + padding: 5px 9px; + font-weight: 500; + width: calc(100% - 70px); + font-size: 14px; +} +.login__main__content__login__or { + margin: 10px 40px 18px; + display: flex; + flex-direction: row; +} +.login__main__content__login__or__separator { + flex-grow: 1; + height: 1px; + position: relative; + top: 0.45em; + flex-shrink: 1; + color: black; + box-sizing: border-box; + border-bottom: 0.5px solid #dbdbdb; +} +.login__main__content__login__or__text { + flex-grow: 0; + flex-shrink: 0; + font-size: 13px; + font-weight: 600; + line-height: 15px; + margin: 0 18px; + text-transform: uppercase; + color: #8e8e8e; + font-weight: 500; +} +.login__main__content__login__facebook { + margin: 8px 40px; +} +.login__main__content__login__facebook__button { + background-color: transparent; + border: 0; + box-sizing: border-box; + color: #385185; + cursor: pointer; + display: inline; + font-size: 14px; + font-weight: 600; + line-height: 18px; + padding: 0; + position: relative; + text-align: center; + text-overflow: ellipsis; + text-transform: inherit; + user-select: none; + width: auto; + display: flex; + justify-content: center; + outline: none; + margin: 0 auto; +} +.login__main__content__login__facebook__button__text { + margin-left: 10px; +} +.login__main__content__login__forgot { + font-size: 12px; + line-height: 14px; + margin-top: 12px; + margin-bottom: 10px; + text-align: center; +} +.login__main__content__login__forgot a { + font-size: 12px; + line-height: 14px; + margin-top: 12px; + text-align: center; + color: #385185; +} +.login__main__content__signin__text { + color: #262626; + font-size: 14px; + margin: 15px; + text-align: center; +} +.login__main__content__signin__text a { + color: #0095f6; + font-weight: 600; + font-size: 14px; + line-height: 18px; + cursor: pointer; +} +.login__main__content__downloadApp { + display: flex; + flex-direction: column; + flex-shrink: 0; + margin: 0; + padding: 0; + position: relative; +} +.login__main__content__downloadApp p { + text-align: center; +} +.login__main__content__downloadApp__links { + margin-top: 10px; + display: flex; + justify-content: center; +} +.login__main__content__downloadApp__links a { + text-decoration: none; + margin: 0; + padding: 0; + border: 0; + vertical-align: baseline; + cursor: pointer; +} +.login__main__content__downloadApp__links a img { + height: 40px; + cursor: pointer; +} +.login__main__content__downloadApp__links a + a { + margin-left: 10px; +} + +.mobileCarrusel { + background-image: url("../img/mobileBackground.png"); + background-size: 454px 618px; + width: 454px; + height: 618px; +} +.mobileCarrusel__images { + margin-left: 151px; + position: relative; +} +.mobileCarrusel__images * { + height: 427px; + left: 0; + /* opacity: 0; */ + position: absolute; + top: 100px; + /* visibility: hidden; */ + width: 240px; +} +.mobileCarrusel__images__content__1 { + animation: carrusel-animation-1 24s linear infinite normal; +} +@-moz-keyframes carrusel-animation-1 { + 90% { + opacity: 0; + } + 95% { + opacity: 1; + } + 20% { + opacity: 1; + } + 25% { + opacity: 0; + } +} +@keyframes carrusel-animation-1 { + 90% { + opacity: 0; + } + 95% { + opacity: 1; + } + 20% { + opacity: 1; + } + 25% { + opacity: 0; + } +} +.mobileCarrusel__images__content__2 { + animation: carrusel-animation-2 24s linear infinite normal; +} +@-moz-keyframes carrusel-animation-2 { + 0% { + opacity: 0; + } + 100% { + opacity: 0; + } + 15% { + opacity: 0; + } + 20% { + opacity: 1; + } + 45% { + opacity: 1; + } + 50% { + opacity: 0; + } +} +@keyframes carrusel-animation-2 { + 0% { + opacity: 0; + } + 100% { + opacity: 0; + } + 15% { + opacity: 0; + } + 20% { + opacity: 1; + } + 45% { + opacity: 1; + } + 50% { + opacity: 0; + } +} +.mobileCarrusel__images__content__3 { + animation: carrusel-animation-3 24s linear infinite normal; +} +@-moz-keyframes carrusel-animation-3 { + 0% { + opacity: 0; + } + 100% { + opacity: 0; + } + 40% { + opacity: 0; + } + 45% { + opacity: 1; + } + 70% { + opacity: 1; + } + 75% { + opacity: 0; + } +} +@keyframes carrusel-animation-3 { + 0% { + opacity: 0; + } + 100% { + opacity: 0; + } + 40% { + opacity: 0; + } + 45% { + opacity: 1; + } + 70% { + opacity: 1; + } + 75% { + opacity: 0; + } +} +.mobileCarrusel__images__content__4 { + animation: carrusel-animation-4 24s linear infinite normal; +} +@-moz-keyframes carrusel-animation-4 { + 0% { + opacity: 0; + } + 100% { + opacity: 0; + } + 65% { + opacity: 0; + } + 70% { + opacity: 1; + } + 95% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +@keyframes carrusel-animation-4 { + 0% { + opacity: 0; + } + 100% { + opacity: 0; + } + 65% { + opacity: 0; + } + 70% { + opacity: 1; + } + 95% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + +.login__main { + display: flex; + margin: 0 auto; + width: fit-content; +} + +.login { + height: 85vh; + display: flex; + justify-content: center; + align-items: center; +} + +.posts { + height: fit-content; + margin-bottom: 24px; + padding: 16px 0; + display: flex; + flex-direction: column; + width: 100%; + position: relative; +} +.posts__item { + width: 100%; + height: fit-content; + padding: 0; + margin-bottom: 60px; +} +.posts__item__userContainer { + height: 28px; + padding: 16px; + width: calc(100% - 32px); + display: flex; + align-items: center; +} +.posts__item__userContainer__image { + width: 40px; + width: 32px; + height: 32px; + width: 36px; + height: 36px; + background: linear-gradient( + to bottom left, + #833ab4, + #c13584, + #e1306c, + #fd1d1d, + #f56040, + #f77737, + #fcaf45, + #ffdc80 + ); + padding: 2px; + display: inline-block; + border-radius: 50%; +} +.posts__item__userContainer__image img { + width: 100%; + height: 100%; + border-radius: 50%; + overflow: hidden; + box-sizing: border-box; + display: block; +} +.posts__item__userContainer__image img { + width: 100%; + height: 100%; + border-radius: 50%; + overflow: hidden; + box-sizing: border-box; + display: block; + border: 2px solid white; +} +.posts__item__userContainer__info { + width: calc(100% - 78px); + display: flex; + flex-direction: column; + color: #262626; + margin-left: 14px; +} +.posts__item__userContainer__info__name { + font-size: 13px; + font-weight: 600; +} +.posts__item__userContainer__info__place { + font-size: 13px; +} +.posts__item__userContainer__action { + margin-top: 4px; + height: 24px; + width: 24px; +} +.posts__item__image { + width: 100%; +} +.posts__item__image img { + width: 100%; + height: auto; +} +.posts__item__footer { + display: flex; + justify-content: space-between; + padding-left: 16px; + padding-right: 16px; +} +.posts__item__footer svg { + padding: 8px; + cursor: pointer; +} +.posts__item__footer svg:first-of-type { + padding-left: 0; +} +.posts__item__footer svg:last-of-type { + padding-right: 0; +} +.posts__item__footer__leftButtons { + display: flex; +} +.posts__item__likes { + display: flex; + padding-left: 16px; + padding-right: 16px; + width: calc(100% - 32px); + align-items: center; +} +.posts__item__likes__image { + width: 20px; + height: 20px; +} +.posts__item__likes__image img { + width: 100%; + height: 100%; + border-radius: 50%; + overflow: hidden; + box-sizing: border-box; + display: block; +} +.posts__item__likes__text { + font-size: 14px; + margin-left: 8px; +} +.posts__item__coments { + font-size: 14px; + padding-left: 16px; + padding-right: 16px; + margin-top: 14px; +} +.posts__item__coments__userComent b:last-of-type { + color: #8e8e8e; + font-weight: 400; +} +.posts__item__coments__viewAll { + color: #8e8e8e; + font-weight: 400; + margin: 8px 0 0; +} +.posts__item__coments__comment { + margin: 8px 0 0; +} +.posts__item__coments__comment svg { + float: right; +} +.posts__item__comment { + padding-left: 16px; + padding-right: 16px; + margin-top: 12px; + border-top: 1px solid #dbdbdb; + height: 56px; + display: flex; + align-items: center; + font-size: 14px; + color: #8e8e8e; +} +.posts__item__comment span { + margin-left: 14px; +} +.posts__item__comment span:first-of-type { + width: calc(100% - 84px); +} +.posts__item__comment span:last-of-type { + color: #0095f6; + font-weight: 600; + opacity: 0.4; +} + +.stories { + height: 86px; + margin-bottom: 24px; + padding: 16px 0; + display: flex; + flex-direction: row; + width: 100%; + position: relative; +} +.stories__item { + height: 122px; + padding: 0 4px; + top: 2px; + width: 80px; + display: flex; + flex-direction: column; + align-items: center; + cursor: pointer; +} +.stories__item__image { + width: 56px; + height: 56px; + width: 60px; + height: 60px; + background: linear-gradient( + to bottom left, + #833ab4, + #c13584, + #e1306c, + #fd1d1d, + #f56040, + #f77737, + #fcaf45, + #ffdc80 + ); + padding: 2px; + display: inline-block; + border-radius: 50%; + margin-bottom: 6px; + margin-top: 4px; +} +.stories__item__image img { + width: 100%; + height: 100%; + border-radius: 50%; + overflow: hidden; + box-sizing: border-box; + display: block; +} +.stories__item__image img { + width: 100%; + height: 100%; + border-radius: 50%; + overflow: hidden; + box-sizing: border-box; + display: block; + border: 2px solid white; +} +.stories__item span { + font-size: 11.5px; + line-height: 14px; + letter-spacing: 0.01em; + max-width: 74px; + overflow: hidden; + text-overflow: ellipsis; +} +.stories__next { + background-color: transparent; + border: 0; + justify-self: center; + outline: 0; + padding: 0; + position: absolute; + top: 50%; + transform: translateY(-50%); + cursor: pointer; + right: 0; +} +.stories__next div { + border-radius: 50%; +} + +.navBar { + background-color: white; + width: 100vw; + border-bottom: 1px solid #dbdbdb; + position: fixed; + z-index: 1; +} +.navBar__content { + max-width: 975px; + height: 54px; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; +} +.navBar__content > * { + width: 30%; + margin: 0 20px; +} +.navBar__content__logoContainer__logo { + margin-top: 6px; + background-image: url("../img/logos.png"); + background-repeat: no-repeat; + background-size: 253.0857142857px 236.0171428571px; + background-position: 0 -76.5142857143px; + height: 30.0171428571px; + width: 103px; + cursor: pointer; +} +.navBar__content__searchContainer { + display: flex; + justify-content: center; +} +.navBar__content__searchContainer__search { + width: 209px; + height: 24px; + border: 1px solid #dbdbdb; + background-color: #fafafa; + border-radius: 3px; +} +.navBar__content__iconsContainer { + display: flex; + justify-content: flex-end; +} +.navBar__content__iconsContainer > * { + cursor: pointer; +} +.navBar__content__iconsContainer > *:not(:first-child) { + margin-left: 22px; +} +.navBar__content__iconsContainer__porfile { + width: 22px; + height: 22px; +} +.navBar__content__iconsContainer__porfile img { + width: 100%; + height: 100%; + border-radius: 50%; + overflow: hidden; + box-sizing: border-box; + display: block; +} + +.sidebar__porfile { + display: flex; + align-items: center; + margin-bottom: 10px; + margin-top: 24px; + height: 56px; +} +.sidebar__porfile__image { + width: 56px; + height: 56px; + cursor: pointer; +} +.sidebar__porfile__image img { + width: 100%; + height: 100%; + border-radius: 50%; + overflow: hidden; + box-sizing: border-box; + display: block; +} +.sidebar__porfile__info { + display: flex; + flex-direction: column; + margin-left: 18px; + width: calc(100% - 110px); +} +.sidebar__porfile__info p { + font-size: 13.2px; + line-height: 18px; + margin: 1px 0; +} +.sidebar__porfile__info__username { + font-weight: 600; +} +.sidebar__porfile__info__name { + color: #8e8e8e; +} +.sidebar__porfile__switch { + color: #0095f6; + font-size: 12px; + line-height: 14px; + font-weight: 400; +} +.sidebar__suggestions__header { + padding-bottom: 4px; + padding-top: 4px; + margin-top: 18px; + width: 100%; + display: flex; + justify-content: space-between; +} +.sidebar__suggestions__header__title { + color: #8e8e8e; + font-size: 13px; + line-height: 14px; + font-weight: 600; +} +.sidebar__suggestions__header__showAll { + color: #262626; + font-size: 12px; + line-height: 14px; + font-weight: 400; +} +.sidebar__suggestions__porfile { + display: flex; + align-items: center; + padding: 1px 0; + height: 48px; +} +.sidebar__suggestions__porfile__image { + width: 32px; + height: 32px; + width: 36px; + height: 36px; + background: linear-gradient( + to bottom left, + #833ab4, + #c13584, + #e1306c, + #fd1d1d, + #f56040, + #f77737, + #fcaf45, + #ffdc80 + ); + padding: 2px; + display: inline-block; + border-radius: 50%; + cursor: pointer; +} +.sidebar__suggestions__porfile__image img { + width: 100%; + height: 100%; + border-radius: 50%; + overflow: hidden; + box-sizing: border-box; + display: block; +} +.sidebar__suggestions__porfile__image img { + width: 100%; + height: 100%; + border-radius: 50%; + overflow: hidden; + box-sizing: border-box; + display: block; + border: 2px solid white; +} +.sidebar__suggestions__porfile__info { + display: flex; + flex-direction: column; + margin-left: 12px; + width: calc(100% - 88px); + overflow: hidden; +} +.sidebar__suggestions__porfile__info p { + font-size: 13.2px; + line-height: 18px; + margin: 1px 0; +} +.sidebar__suggestions__porfile__info__username { + font-weight: 600; +} +.sidebar__suggestions__porfile__info__followers { + color: #8e8e8e; + width: 95%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.sidebar__suggestions__porfile__follow { + color: #0095f6; + font-size: 12px; + line-height: 14px; + font-weight: 400; +} +.sidebar__footer { + margin-top: 12px; +} +.sidebar__footer__nav { + margin-bottom: 16px; + max-width: 100%; +} +.sidebar__footer__nav__list { + list-style: none; + margin-right: 0; + text-align: left; + padding-left: 0; +} +.sidebar__footer__nav__list__item { + font-size: 11px; + font-weight: 400; + line-height: 13px; + text-transform: none; + display: inline-block; +} +.sidebar__footer__nav__list__item__link { + color: #c7c7c7; + text-decoration: none; +} +.sidebar__footer__nav__list__item:not(:last-of-type)::after { + content: "·"; + margin: 0 0.25em 0 0.25em; + color: #c7c7c7; +} +.sidebar__footer__credits { + font-size: 11px; + font-weight: 400; + line-height: 13px; + color: #c7c7c7; + text-transform: uppercase; +} + +.homeMain { + width: 100vh; + max-width: 935px; + height: fit-content; + margin: 0 auto; + padding: 0; + padding-top: 84px; + overflow: hidden; +} + +.feedContainer { + float: left; + max-width: 614px; + width: 100%; +} + +.sidebar { + position: fixed; + left: max(650px, (100% - 935px) / 2 + 650px); + top: 84px; + height: 100vh; + width: 293px; + margin-bottom: 30px; + padding: 0; +} + +/*# sourceMappingURL=style.css.map */ diff --git a/public/assets/img/appStore.png b/public/assets/img/appStore.png new file mode 100644 index 00000000..460f81ab Binary files /dev/null and b/public/assets/img/appStore.png differ diff --git a/public/assets/img/googlePlay.png b/public/assets/img/googlePlay.png new file mode 100644 index 00000000..306aa45f Binary files /dev/null and b/public/assets/img/googlePlay.png differ diff --git a/public/assets/img/logos.png b/public/assets/img/logos.png new file mode 100644 index 00000000..ac503810 Binary files /dev/null and b/public/assets/img/logos.png differ diff --git a/public/assets/img/logos2.png b/public/assets/img/logos2.png new file mode 100644 index 00000000..72a2789e Binary files /dev/null and b/public/assets/img/logos2.png differ diff --git a/public/assets/img/mobileBackground.png b/public/assets/img/mobileBackground.png new file mode 100644 index 00000000..46dce6e7 Binary files /dev/null and b/public/assets/img/mobileBackground.png differ diff --git a/public/assets/img/mobileImg1.jpg b/public/assets/img/mobileImg1.jpg new file mode 100644 index 00000000..fc1d26e1 Binary files /dev/null and b/public/assets/img/mobileImg1.jpg differ diff --git a/public/assets/img/mobileImg2.jpg b/public/assets/img/mobileImg2.jpg new file mode 100644 index 00000000..6b4eae67 Binary files /dev/null and b/public/assets/img/mobileImg2.jpg differ diff --git a/public/assets/img/mobileImg3.jpg b/public/assets/img/mobileImg3.jpg new file mode 100644 index 00000000..fabae2a4 Binary files /dev/null and b/public/assets/img/mobileImg3.jpg differ diff --git a/public/assets/img/mobileImg4.jpg b/public/assets/img/mobileImg4.jpg new file mode 100644 index 00000000..baa021ee Binary files /dev/null and b/public/assets/img/mobileImg4.jpg differ diff --git a/public/assets/img/mobileImg5.jpg b/public/assets/img/mobileImg5.jpg new file mode 100644 index 00000000..679321b1 Binary files /dev/null and b/public/assets/img/mobileImg5.jpg differ diff --git a/public/assets/img/porfileImage01.jpg b/public/assets/img/porfileImage01.jpg new file mode 100644 index 00000000..ec449544 Binary files /dev/null and b/public/assets/img/porfileImage01.jpg differ diff --git a/public/assets/img/porfileImage02.jpg b/public/assets/img/porfileImage02.jpg new file mode 100644 index 00000000..8b1a1a24 Binary files /dev/null and b/public/assets/img/porfileImage02.jpg differ diff --git a/public/assets/img/porfileImage03.jpg b/public/assets/img/porfileImage03.jpg new file mode 100644 index 00000000..059f4489 Binary files /dev/null and b/public/assets/img/porfileImage03.jpg differ diff --git a/public/assets/img/porfileImage04.jpg b/public/assets/img/porfileImage04.jpg new file mode 100644 index 00000000..44d03f0f Binary files /dev/null and b/public/assets/img/porfileImage04.jpg differ diff --git a/public/assets/img/porfileImage05.jpg b/public/assets/img/porfileImage05.jpg new file mode 100644 index 00000000..26e74b06 Binary files /dev/null and b/public/assets/img/porfileImage05.jpg differ diff --git a/public/assets/img/porfileImage06.jpg b/public/assets/img/porfileImage06.jpg new file mode 100644 index 00000000..01393ee7 Binary files /dev/null and b/public/assets/img/porfileImage06.jpg differ diff --git a/public/assets/img/porfileImage07.jpg b/public/assets/img/porfileImage07.jpg new file mode 100644 index 00000000..efc1f518 Binary files /dev/null and b/public/assets/img/porfileImage07.jpg differ diff --git a/public/assets/img/porfileImage08.jpg b/public/assets/img/porfileImage08.jpg new file mode 100644 index 00000000..15b8a0c1 Binary files /dev/null and b/public/assets/img/porfileImage08.jpg differ diff --git a/public/assets/img/post01.jpg b/public/assets/img/post01.jpg new file mode 100644 index 00000000..495d1b53 Binary files /dev/null and b/public/assets/img/post01.jpg differ diff --git a/public/assets/img/post02.jpg b/public/assets/img/post02.jpg new file mode 100644 index 00000000..23b8b895 Binary files /dev/null and b/public/assets/img/post02.jpg differ diff --git a/public/assets/img/post03.jpg b/public/assets/img/post03.jpg new file mode 100644 index 00000000..3a2e8482 Binary files /dev/null and b/public/assets/img/post03.jpg differ diff --git a/public/home.html b/public/home.html new file mode 100644 index 00000000..10c7e7a6 --- /dev/null +++ b/public/home.html @@ -0,0 +1,917 @@ + + + + + + + Instagram + + + + +
+
+
+
+
+ janassembler's profile picture +
+ janassembler +
+
+
+ janassembler's profile picture +
+ random_name +
+
+
+ janassembler's profile picture +
+ aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa +
+
+
+ janassembler's profile picture +
+ bill55_ +
+
+
+ janassembler's profile picture +
+ pedro6garcia +
+
+
+ janassembler's profile picture +
+ armario +
+
+
+ janassembler's profile picture +
+ lorem_ipsum +
+
+
+ janassembler's profile picture +
+ matusantamaria +
+ +
+
+
+
+
+ janassembler's profile picture +
+
+ janassembler + gava mar +
+
+ + + + + +
+
+
+ post +
+
+
+ + + + + + + + + +
+
+ + + +
+
+ +
+ + janassembler Lorem, ipsum dolor sit amet consectetur + adipisicing elit. Esse aliquid iste doloremque possimus + molestiae... more + +

View all 31 comments

+

+ bill55_ Placeat quae exercitationem aut quos? + + + +

+

+ random_name Odit explicabo quasi earum. + + + +

+
+
+ + + + + Add a comment... + Post +
+
+
+
+
+ armario's profile picture +
+
+ armario + formentera +
+
+ + + + + +
+
+
+ post +
+
+
+ + + + + + + + + +
+
+ + + +
+
+ +
+ + armario Lorem, ipsum dolor sit amet consectetur + adipisicing elit. Esse aliquid iste doloremque possimus + molestiae... more + +

View all 31 comments

+

+ bill55_ Placeat quae exercitationem aut quos? + + + +

+

+ random_name Odit explicabo quasi earum. + + + +

+
+
+ + + + + Add a comment... + Post +
+
+
+
+
+ lorem_ipsum's profile picture +
+
+ lorem_ipsum + formentera +
+
+ + + + + +
+
+
+ post +
+
+
+ + + + + + + + + +
+
+ + + +
+
+ +
+ + lorem_ipsum Lorem, ipsum dolor sit amet consectetur + adipisicing elit. Esse aliquid iste doloremque possimus + molestiae... more + +

View all 31 comments

+

+ bill55_ Placeat quae exercitationem aut quos? + + + +

+

+ random_name Odit explicabo quasi earum. + + + +

+
+
+ + + + + Add a comment... + Post +
+
+
+
+
+
+
+ janassembler's profile picture +
+
+

janassembler

+

Jan Assembler

+
+ +
+
+
+ Suggestions For You + +
+ +
+
+ janassembler's profile picture +
+
+

+ random_name +

+

+ Followed by bill55_ + 53 more +

+
+ +
+
+
+ janassembler's profile picture +
+
+

+ aaaaaaaaaaaaaaaaa +

+

+ Followed by lorem_ipsum + 2 more +

+
+ +
+
+
+ janassembler's profile picture +
+
+

+ pedro6garcia +

+

+ Followed by random_name + 5 more +

+
+ +
+
+
+ janassembler's profile picture +
+
+

+ matusantamaria +

+

+ Followed by aaaaaaaaaaaaaaaaa + 53 more +

+
+ +
+
+
+ janassembler's profile picture +
+
+

+ lorem_ipsum +

+

+ Followed by pedro6garcia + 13 more +

+
+ +
+
+ +
+
+ + diff --git a/public/index.html b/public/index.html new file mode 100644 index 00000000..44ba929b --- /dev/null +++ b/public/index.html @@ -0,0 +1,169 @@ + + + + + + + Instagram + + + +
+
+
+
+
+ + + + +
+
+
+ +
+
+ + + +