From bd4e307e852c606ffcdcccd70444d1c82867e39b Mon Sep 17 00:00:00 2001 From: Ian Baysa Date: Sat, 26 Jan 2019 15:48:20 -0800 Subject: [PATCH 1/4] questions and import --- README.md | 42 +++++---- css/index.css | 223 ++++++++++++++++++++++++++++++++++++++++++++++++ less/index.less | 8 +- 3 files changed, 257 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 8ad61eb4ad..cdb211d21d 100644 --- a/README.md +++ b/README.md @@ -34,14 +34,26 @@ Edit this document to include your answers after each question. Make sure to lea 1. What is the difference between an adaptive website and a fully responsive website? +Responsive is automatically adjusted based on the size of the user's screen and Adaptive will adapt to the width of the user's screen. + 2. Describe what it means to be mobile first vs desktop first. +Mobile begins with designing for he main function of the site then aims for the higher resolutions often called progressive enhancement. +Desktop first means designing for the highest specifications then going down to smaller resolutions often called graceful degradation. + 3. What does `font-size: 62.5%` in the `html` tag do for us when using `rem` units? +it will make the 'rem' units easier to use because 100% font-size in html converts to 16px and 1 'rem' unit is equivalent to 10px, so if you change it to 62.5%, the px will be 10 which is 1 rem. + 4. How would you describe preprocessing to someone new to CSS? +very powerful and the most interesting part of web development so far. best tools to design css. + 5. What is your favorite concept in preprocessing? What is the concept that gives you the most trouble? +my favorite concept is the variables because it is very easy to use and very useful. +The concept that gives me the most trouble is the parameters because it was confusing at first. + You are expected to be able to answer all these questions. Your responses contribute to your Sprint Challenge grade. Skipping this section *will* prevent you from passing this challenge. ## Project Set Up @@ -52,27 +64,27 @@ Because you are using a preprocessor, there are two parts to setting up your pro Follow these steps to set up your project: -- [ ] Create a forked copy of this project. -- [ ] Add your project manager as collaborator on Github. -- [ ] Clone your OWN version of the repository (Not Lambda's by mistake!). -- [ ] Create a new branch: git checkout -b ``. -- [ ] Implement the project on your newly created `` branch, committing changes regularly. -- [ ] Push commits: git push origin ``. +- [x] Create a forked copy of this project. +- [x] Add your project manager as collaborator on Github. +- [x] Clone your OWN version of the repository (Not Lambda's by mistake!). +- [x] Create a new branch: git checkout -b ``. +- [x] Implement the project on your newly created `` branch, committing changes regularly. +- [x] Push commits: git push origin ``. Follow these steps for completing your project. -- [ ] Submit a Pull-Request to merge Branch into master (student's Repo). **Please don't merge your own pull request** -- [ ] Add your project manager as a reviewer on the pull-request -- [ ] Your project manager will count the project as complete by merging the branch back into master. +- [x] Submit a Pull-Request to merge Branch into master (student's Repo). **Please don't merge your own pull request** +- [x] Add your project manager as a reviewer on the pull-request +- [x] Your project manager will count the project as complete by merging the branch back into master. ### Preprocessor Set up -* [ ] Verify that you have LESS installed correctly by running `lessc -v` in your terminal, if you don't get a version message back, reach out to your project manager for help. -* [ ] Open your terminal and navigate to your preprocessing project by using the `cd` command -* [ ] Once in your project's root folder, run the following command `less-watch-compiler less css index.less` -* [ ] Verify your compiler is working correctly by changing the `background-color` on the `html` selector to `red` in your `index.less` file. -* [ ] Once you see the red screen, you can delete that style and you're ready to start on the next task +* [x] Verify that you have LESS installed correctly by running `lessc -v` in your terminal, if you don't get a version message back, reach out to your project manager for help. +* [x] Open your terminal and navigate to your preprocessing project by using the `cd` command +* [x] Once in your project's root folder, run the following command `less-watch-compiler less css index.less` +* [x] Verify your compiler is working correctly by changing the `background-color` on the `html` selector to `red` in your `index.less` file. +* [x] Once you see the red screen, you can delete that style and you're ready to start on the next task ## Minimum Viable Product @@ -80,7 +92,7 @@ Your finished project must include all of the following requirements: ### Import LESS Files -* [ ] Navigate to your `index.less` file. Notice the file is blank. You have been asked to use a certain import order. That order is as follows: +* [x] Navigate to your `index.less` file. Notice the file is blank. You have been asked to use a certain import order. That order is as follows: ```markdown 1.variables.less diff --git a/css/index.css b/css/index.css index e69de29bb2..285f39a467 100644 --- a/css/index.css +++ b/css/index.css @@ -0,0 +1,223 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +* { + box-sizing: border-box; +} +html { + font-size: 62.5%; +} +html, +body { + font-family: 'Ubuntu', sans-serif; + color: #5E6164; +} +h1, +h2, +h3, +h4, +h5 { + font-family: 'Russo One', sans-serif; + color: #23293B; +} +h2 { + font-size: 3.2rem; +} +h3 { + font-size: 2.8rem; +} +p { + font-size: 1.6rem; + line-height: 1.4; +} +.container { + max-width: 800px; + width: 100%; + margin: 0 auto; +} +footer { + color: #22283B; + background: #f4f4f4; + padding: 20px 0; + border: 1px double #e0e0e0; + border-radius: 10px; + display: flex; + justify-content: center; + align-items: center; +} +.home .intro h2 { + padding: 15px; +} +.home .intro p { + padding: 0 15px; +} +.home .space-images { + display: flex; + flex-wrap: wrap; + width: 100%; +} +.home .space-images img { + width: 28%; + margin: 20px 2.5%; + border-radius: 20px; + height: 100%; +} +.home .visit-planets { + padding: 15px; +} +.home .visit-planets h3 { + margin-top: 11px; +} +.home .visit-planets p { + margin-top: 13px; +} +.home .walk { + margin-top: 60px; + border-top: 1px solid #dee2e6; + padding: 50px 60px; + display: flex; + justify-content: center; +} +.home .walk .walk-text { + width: 50%; +} +.home .walk .walk-text h3 { + margin-bottom: 10px; +} +.home .walk .walk-text p { + margin-bottom: 26px; +} +.home .walk .walk-img { + width: 46%; + margin-left: 4%; +} +.home .walk .walk-img img { + width: 100%; + height: auto; + border-radius: 10px; +} diff --git a/less/index.less b/less/index.less index 798843e162..469786563b 100644 --- a/less/index.less +++ b/less/index.less @@ -1,6 +1,12 @@ // Import your less files here: - +@import "variables.less"; +@import "mixins.less"; +@import "reset.less"; +@import "global.less"; +@import "navigation.less"; +@import "footer.less"; +@import "home-page.less"; From 0e9bbc546b65225509072d6cbed8c5cb1889ef26 Mon Sep 17 00:00:00 2001 From: Ian Baysa Date: Sat, 26 Jan 2019 17:03:35 -0800 Subject: [PATCH 2/4] fixing the horizontal bar --- README.md | 20 ++++++++++---------- css/index.css | 22 +++++++++++----------- index.html | 14 +++++++++++++- less/footer.less | 2 +- less/global.less | 6 +----- less/home-page.less | 23 +++++++++++++++++------ less/mixins.less | 30 +++++++++++++++++++++++++++++- less/navigation.less | 33 ++++++++++++++++++++++++++++++++- less/variables.less | 1 + 9 files changed, 115 insertions(+), 36 deletions(-) diff --git a/README.md b/README.md index cdb211d21d..da7fcb5bab 100644 --- a/README.md +++ b/README.md @@ -108,27 +108,27 @@ _You will know everything is working properly when you see the styles enabled fo ### Home Page - Desktop HTML & LESS -* [ ] Take 10 minutes to review the code that has already been provided for you. Take time to see how the home page was built. +* [x] Take 10 minutes to review the code that has already been provided for you. Take time to see how the home page was built. -* [ ] Add a viewport meta tag to the head of your index.html page +* [x] Add a viewport meta tag to the head of your index.html page -* [ ] [Review the provided home desktop design file](design-files/home-desktop.png). You are to build the missing navigation system and header image. You have been provided all content necessary in the [index.html file](index.html) +* [x] [Review the provided home desktop design file](design-files/home-desktop.png). You are to build the missing navigation system and header image. You have been provided all content necessary in the [index.html file](index.html) -* [ ] Navigation Styles: Use the `navigation.less` file for styling. +* [x] Navigation Styles: Use the `navigation.less` file for styling. -* [ ] Main Content Styles: Use the `home-page.less` file for styling +* [x] Main Content Styles: Use the `home-page.less` file for styling -* [ ] LESS Mixins: Create and use 2 different mixins to aid your styling. Use the `mixins.less` file for your mixins +* [x] LESS Mixins: Create and use 2 different mixins to aid your styling. Use the `mixins.less` file for your mixins -* [ ] LESS Parametric Mixin: create a parametric mixin that is used to create the `sign up` button styles. +* [x] LESS Parametric Mixin: create a parametric mixin that is used to create the `sign up` button styles. -* [ ] Use at least 2 parameters to create your button +* [x] Use at least 2 parameters to create your button -* [ ] Create a hover state that swaps the background color and font color of the base button styles. +* [x] Create a hover state that swaps the background color and font color of the base button styles. ### Mobile Design -* [ ] Create a `@phone` variable that contains a `max-width: 500px` media query string. Use the `@phone` variable for all your nested mobile styling. +* [x] Create a `@phone` variable that contains a `max-width: 500px` media query string. Use the `@phone` variable for all your nested mobile styling. * [ ] [Review the provided home mobile design file](design-files/home-mobile.png). Match your mobile styling the best you can using the design file. diff --git a/css/index.css b/css/index.css index 285f39a467..a1c0dc8c95 100644 --- a/css/index.css +++ b/css/index.css @@ -83,8 +83,8 @@ time, mark, audio, video { - margin: 0; - padding: 0; + margin: 0%; + padding: 0%; border: 0; font-size: 100%; font: inherit; @@ -158,23 +158,23 @@ p { .container { max-width: 800px; width: 100%; - margin: 0 auto; + margin: 0% auto; } footer { color: #22283B; background: #f4f4f4; - padding: 20px 0; + padding: 2% 0%; border: 1px double #e0e0e0; - border-radius: 10px; + border-radius: 1%; display: flex; justify-content: center; align-items: center; } .home .intro h2 { - padding: 15px; + padding: 1%; } .home .intro p { - padding: 0 15px; + padding: 0% 1%; } .home .space-images { display: flex; @@ -183,12 +183,12 @@ footer { } .home .space-images img { width: 28%; - margin: 20px 2.5%; - border-radius: 20px; + margin: 2% 2.5%; + border-radius: 2%; height: 100%; } .home .visit-planets { - padding: 15px; + padding: 1%; } .home .visit-planets h3 { margin-top: 11px; @@ -199,7 +199,7 @@ footer { .home .walk { margin-top: 60px; border-top: 1px solid #dee2e6; - padding: 50px 60px; + padding: 6% 7%; display: flex; justify-content: center; } diff --git a/index.html b/index.html index 6ba6990f3a..ff67cc552f 100644 --- a/index.html +++ b/index.html @@ -13,10 +13,22 @@ - +
+
+

SpaceWalkers

+ + +
+
diff --git a/less/footer.less b/less/footer.less index 2d5144100d..657b10c687 100644 --- a/less/footer.less +++ b/less/footer.less @@ -2,7 +2,7 @@ footer { color: #22283B; background: #f4f4f4; - padding: 20px 0; + padding: 2% 0%; border: 1px double #e0e0e0; border-radius: 10px; display: flex; diff --git a/less/global.less b/less/global.less index 359bc1af8a..62032778b7 100644 --- a/less/global.less +++ b/less/global.less @@ -30,9 +30,5 @@ p { line-height: 1.4; } -.container { - max-width: 800px; - width: 100%; - margin: 0 auto; -} + diff --git a/less/home-page.less b/less/home-page.less index 4eea66100a..c484bc99a7 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -5,11 +5,11 @@ .intro { h2 { - padding: 15px; + padding: 1%; } p { - padding:0 15px; + padding:0% 1%; } } @@ -21,14 +21,14 @@ img { width: 28%; - margin: 20px 2.5%; + margin: 2% 2%; border-radius: 20px; height: 100%; } } .visit-planets { - padding: 15px; + padding: 1%; h3 { margin-top: 11px; @@ -42,7 +42,7 @@ .walk { margin-top: 60px; border-top: 1px solid @main-border-color; - padding: 50px 60px; + padding: 6% 7%; display: flex; justify-content: center; @@ -58,8 +58,19 @@ } .btn { + .button(@btn-bg-color, @btn-font-color, 9rem, 3rem, 1.5rem); + @media @phone { + width: 100%; + height: 10%; + padding:1%; + } } } + } + @media @phone { + width: 100%; + margin-top: 2rem; + } .walk-img { width: 46%; @@ -72,4 +83,4 @@ } } } -}// home \ No newline at end of file +// home \ No newline at end of file diff --git a/less/mixins.less b/less/mixins.less index 530984da71..2b9fb0c6c5 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -1 +1,29 @@ -// Mixins Here \ No newline at end of file +// Mixins Here +.navhome { + display: flex; + justify-content: space-evenly; + } + .auto { + margin: o auto; + } + .button(@bgcolor, @fntcolor, @width, @height, @fntsize) { + background-color: @bgcolor; + color: @fntcolor; + border-radius: 0.5rem; + width: @width; + height: @height; + font-size: @fntsize; + padding: 0.5rem; + text-align: center; + + &:hover { + background-color: @shuttle-gray; + color: @fntcolor; + } + } + + .display-none-mobile { + @media @phone { + display: none; + } + } \ No newline at end of file diff --git a/less/navigation.less b/less/navigation.less index 17779ae17a..f161dbe067 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -1 +1,32 @@ -// Navigation code here \ No newline at end of file +// Navigation code here.nav { + .nav { + width: 80%; + background: @nav-bg; + border-bottom: 2px solid @nav-border; + + .nav-container { + max-width: 80rem; + padding: 2rem 0 1rem 0; + width:100%; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + + h1 { + font-size: 3rem; + padding-bottom: 2rem; + } + + nav p { + width: 100%; + nav a { + display:inline; + font-size: 1.5rem; + color: @nav-font; + text-decoration: none; + } + } + } + } + \ No newline at end of file diff --git a/less/variables.less b/less/variables.less index b5b3d46021..451c488926 100644 --- a/less/variables.less +++ b/less/variables.less @@ -24,3 +24,4 @@ @border-real: #dee2e6; // Mobile var +@phone: ~"(max-width: 500px)"; \ No newline at end of file From 3737e4972658b4c39607e4c438d14ef70ed8408e Mon Sep 17 00:00:00 2001 From: Ian Baysa Date: Mon, 28 Jan 2019 19:52:08 -0800 Subject: [PATCH 3/4] @import and questions --- README.md | 66 +++++++++++++++++++++++++++++-------------------- less/index.less | 8 +++++- 2 files changed, 46 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index 8ad61eb4ad..da50a9c81c 100644 --- a/README.md +++ b/README.md @@ -34,14 +34,26 @@ Edit this document to include your answers after each question. Make sure to lea 1. What is the difference between an adaptive website and a fully responsive website? +Responsive is automatically adjusted based on the size of the user's screen and Adaptive will adapt to the width of the user's screen. + 2. Describe what it means to be mobile first vs desktop first. +Mobile begins with designing for he main function of the site then aims for the higher resolutions often called progressive enhancement. +Desktop first means designing for the highest specifications then going down to smaller resolutions often called graceful degradation. + 3. What does `font-size: 62.5%` in the `html` tag do for us when using `rem` units? +it will make the 'rem' units easier to use because 100% font-size in html converts to 16px and 1 'rem' unit is equivalent to 10px, so if you change it to 62.5%, the px will be 10 which is 1 rem. + 4. How would you describe preprocessing to someone new to CSS? +very powerful and the most interesting part of web development so far and the best tools for designing css. + 5. What is your favorite concept in preprocessing? What is the concept that gives you the most trouble? +favorite concept is the variables because it is very easy to use and very useful. +The concept that gives me the most trouble is the parameters because it was confusing at first. + You are expected to be able to answer all these questions. Your responses contribute to your Sprint Challenge grade. Skipping this section *will* prevent you from passing this challenge. ## Project Set Up @@ -52,27 +64,27 @@ Because you are using a preprocessor, there are two parts to setting up your pro Follow these steps to set up your project: -- [ ] Create a forked copy of this project. -- [ ] Add your project manager as collaborator on Github. -- [ ] Clone your OWN version of the repository (Not Lambda's by mistake!). -- [ ] Create a new branch: git checkout -b ``. -- [ ] Implement the project on your newly created `` branch, committing changes regularly. -- [ ] Push commits: git push origin ``. +- [x] Create a forked copy of this project. +- [x] Add your project manager as collaborator on Github. +- [x] Clone your OWN version of the repository (Not Lambda's by mistake!). +- [x] Create a new branch: git checkout -b ``. +- [x] Implement the project on your newly created `` branch, committing changes regularly. +- [x] Push commits: git push origin ``. Follow these steps for completing your project. -- [ ] Submit a Pull-Request to merge Branch into master (student's Repo). **Please don't merge your own pull request** -- [ ] Add your project manager as a reviewer on the pull-request -- [ ] Your project manager will count the project as complete by merging the branch back into master. +- [x] Submit a Pull-Request to merge Branch into master (student's Repo). **Please don't merge your own pull request** +- [x] Add your project manager as a reviewer on the pull-request +- [x] Your project manager will count the project as complete by merging the branch back into master. ### Preprocessor Set up -* [ ] Verify that you have LESS installed correctly by running `lessc -v` in your terminal, if you don't get a version message back, reach out to your project manager for help. -* [ ] Open your terminal and navigate to your preprocessing project by using the `cd` command -* [ ] Once in your project's root folder, run the following command `less-watch-compiler less css index.less` -* [ ] Verify your compiler is working correctly by changing the `background-color` on the `html` selector to `red` in your `index.less` file. -* [ ] Once you see the red screen, you can delete that style and you're ready to start on the next task +* [x] Verify that you have LESS installed correctly by running `lessc -v` in your terminal, if you don't get a version message back, reach out to your project manager for help. +* [x] Open your terminal and navigate to your preprocessing project by using the `cd` command +* [x] Once in your project's root folder, run the following command `less-watch-compiler less css index.less` +* [x] Verify your compiler is working correctly by changing the `background-color` on the `html` selector to `red` in your `index.less` file. +* [x] Once you see the red screen, you can delete that style and you're ready to start on the next task ## Minimum Viable Product @@ -80,7 +92,7 @@ Your finished project must include all of the following requirements: ### Import LESS Files -* [ ] Navigate to your `index.less` file. Notice the file is blank. You have been asked to use a certain import order. That order is as follows: +* [x] Navigate to your `index.less` file. Notice the file is blank. You have been asked to use a certain import order. That order is as follows: ```markdown 1.variables.less @@ -96,31 +108,31 @@ _You will know everything is working properly when you see the styles enabled fo ### Home Page - Desktop HTML & LESS -* [ ] Take 10 minutes to review the code that has already been provided for you. Take time to see how the home page was built. +* [x] Take 10 minutes to review the code that has already been provided for you. Take time to see how the home page was built. -* [ ] Add a viewport meta tag to the head of your index.html page +* [x] Add a viewport meta tag to the head of your index.html page -* [ ] [Review the provided home desktop design file](design-files/home-desktop.png). You are to build the missing navigation system and header image. You have been provided all content necessary in the [index.html file](index.html) +* [x] [Review the provided home desktop design file](design-files/home-desktop.png). You are to build the missing navigation system and header image. You have been provided all content necessary in the [index.html file](index.html) -* [ ] Navigation Styles: Use the `navigation.less` file for styling. +* [x] Navigation Styles: Use the `navigation.less` file for styling. -* [ ] Main Content Styles: Use the `home-page.less` file for styling +* [x] Main Content Styles: Use the `home-page.less` file for styling -* [ ] LESS Mixins: Create and use 2 different mixins to aid your styling. Use the `mixins.less` file for your mixins +* [x] LESS Mixins: Create and use 2 different mixins to aid your styling. Use the `mixins.less` file for your mixins -* [ ] LESS Parametric Mixin: create a parametric mixin that is used to create the `sign up` button styles. +* [x] LESS Parametric Mixin: create a parametric mixin that is used to create the `sign up` button styles. -* [ ] Use at least 2 parameters to create your button +* [x] Use at least 2 parameters to create your button -* [ ] Create a hover state that swaps the background color and font color of the base button styles. +* [x] Create a hover state that swaps the background color and font color of the base button styles. ### Mobile Design -* [ ] Create a `@phone` variable that contains a `max-width: 500px` media query string. Use the `@phone` variable for all your nested mobile styling. +* [x] Create a `@phone` variable that contains a `max-width: 500px` media query string. Use the `@phone` variable for all your nested mobile styling. -* [ ] [Review the provided home mobile design file](design-files/home-mobile.png). Match your mobile styling the best you can using the design file. +* [x] [Review the provided home mobile design file](design-files/home-mobile.png). Match your mobile styling the best you can using the design file. -* [ ] Push your changes and create a pull request if you haven't already. +* [x] Push your changes and create a pull request if you haven't already. In your solution, it is essential that you follow best practices and produce clean and professional results. Schedule time to review, refine, and assess your work and perform basic professional polishing including spell-checking and grammar-checking on your work. It is better to submit a challenge that meets MVP than one that attempts too much and does not. diff --git a/less/index.less b/less/index.less index 798843e162..bc6b1dbf96 100644 --- a/less/index.less +++ b/less/index.less @@ -1,5 +1,11 @@ // Import your less files here: - +@import "variables.less"; +@import "mixins.less"; +@import "reset.less"; +@import "global.less"; +@import "navigation.less"; +@import "footer.less"; +@import "home-page.less"; From 1b8b8d432b9dd1fd51190e3524da03b59fcc8ab7 Mon Sep 17 00:00:00 2001 From: Ian Baysa Date: Mon, 28 Jan 2019 19:54:10 -0800 Subject: [PATCH 4/4] variable and nav --- less/navigation.less | 31 ++++++++++++++++++++++++++++++- less/variables.less | 1 + 2 files changed, 31 insertions(+), 1 deletion(-) diff --git a/less/navigation.less b/less/navigation.less index 17779ae17a..811fa66c4f 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -1 +1,30 @@ -// Navigation code here \ No newline at end of file +// Navigation code here +.nav { + width: 80%; + background: @nav-bg; + border-bottom: 2px solid @nav-border; + + .nav-container { + padding: 2rem 0 1rem 0; + width:100%; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + + h1 { + font-size: 3rem; + padding-bottom: 2rem; + } + + nav p { + width: 100%; + nav a { + display:inline; + font-size: 1.5rem; + color: @nav-font; + text-decoration: none; + } + } + } + } \ No newline at end of file diff --git a/less/variables.less b/less/variables.less index b5b3d46021..451c488926 100644 --- a/less/variables.less +++ b/less/variables.less @@ -24,3 +24,4 @@ @border-real: #dee2e6; // Mobile var +@phone: ~"(max-width: 500px)"; \ No newline at end of file