www
/
www-new
12
3
Fork 5
Code Issues 58 Pull Requests 42 Projects Releases Wiki Activity

Convert rems to px and use calc to convert on build time

This commit is contained in:
Adi Thakral 2021-05-24 18:58:28 +00:00
parent 4777b5f274
commit 1dcc97368d
11 changed files with 3596 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/EventCard.module.css
View File

@ -1,23 +1,23 @@
.card { .card {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
max-width: 1000px; max-width: calc(1000rem / 16);
box-sizing: border-box; box-sizing: border-box;
padding: 24px; padding: calc(24rem / 16);
} }
.card aside { .card aside {
flex: 0 0 144px; flex: 0 0 calc(144rem / 16);
margin-right: 24px; margin-right: calc(24rem / 16);
} }
.card aside img { .card aside img {
width: 100%; width: 100%;
margin-bottom: 16px; margin-bottom: 1rem;
} }
.spacer { .spacer {
margin-top: 76px; margin-top: calc(76rem / 16);
} }
.registerButton { .registerButton {
@ -25,7 +25,7 @@
} }
.content > h2 { .content > h2 {
font-size: 24px; font-size: calc(24rem / 16);
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
margin-top: 0; margin-top: 0;
@ -35,11 +35,11 @@
.content, .content,
.content > h3 { .content > h3 {
color: var(--purple-2); color: var(--purple-2);
font-size: 14px; font-size: calc(14rem / 16);
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
margin-top: 0; margin-top: 0;
margin-bottom: 14px; margin-bottom: calc(14rem / 16);
} }
.content { .content {

28
components/EventDescriptionCard.module.css
View File

@ -1,16 +1,16 @@
.card { .card {
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
max-width: 540px; max-width: calc(540rem / 16);
padding: 1.5rem; padding: calc(24rem / 16);
border-radius: 4px; border-radius: calc(4rem / 16);
background-color: white; background-color: white;
} }
.poster { .poster {
width: 150px; width: calc(150rem / 16);
height: 150px; height: calc(150rem / 16);
margin-right: 1.25rem; margin-right: calc(20rem / 16);
} }
.details { .details {
@ -21,19 +21,19 @@
.name { .name {
color: var(--purple-2); color: var(--purple-2);
font-weight: bolder; font-weight: bolder;
font-size: 1.125rem; font-size: calc(18rem / 16);
line-height: 1.6875rem; line-height: calc(27rem / 16);
margin: 0; margin: 0;
} }
.desc { .desc {
color: var(--purple-2); color: var(--purple-2);
font-size: 0.75rem; font-size: calc(12rem / 16);
margin-top: 0.75rem; margin-top: calc(12rem / 16);
} }
.spacer { .spacer {
height: 35px; height: calc(35rem / 16);
} }
.button { .button {
@ -43,7 +43,7 @@
} }
.logo { .logo {
width: 30px; width: calc(30rem / 16);
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0; right: 0;
@ -53,10 +53,10 @@
margin: 0; margin: 0;
color: var(--blue-1); color: var(--blue-1);
font-weight: bolder; font-weight: bolder;
font-size: 0.75rem; font-size: calc(12rem / 16);
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: calc(768rem / 16)) {
.card { .card {
padding: 0; padding: 0;
background-color: #e1eefa; background-color: #e1eefa;

14
components/MiniEventCard.module.css
View File

@ -1,24 +1,24 @@
.miniEventCard { .miniEventCard {
max-width: 936px; max-width: calc(936rem / 16);
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
color: var(--purple-2); color: var(--purple-2);
padding: 1.25rem; padding: calc(20rem / 16);
font-size: 0.875rem; font-size: calc(14rem / 16);
} }
.name { .name {
display: flex; display: flex;
font-size: 1.125rem; font-size: calc(18rem / 16);
margin: 0; margin: 0;
} }
.nameSpacer { .nameSpacer {
width: 140px; width: calc(140rem / 16);
} }
.info { .info {
margin-bottom: 0.75rem; margin-bottom: calc(12rem / 16);
} }
.details { .details {
@ -27,7 +27,7 @@
right: 0; right: 0;
cursor: pointer; cursor: pointer;
color: var(--blue-2); color: var(--blue-2);
margin: 1.25rem; margin: calc(20rem / 16);
} }
.miniEventCard[open] .shortDescription { .miniEventCard[open] .shortDescription {

26
components/Navbar.module.css
View File

@ -14,9 +14,9 @@
align-items: center; align-items: center;
width: stretch; width: stretch;
max-width: 1440px; max-width: calc(1440rem / 16);
height: auto; height: auto;
padding: 1.75rem 8.5rem; padding: calc(28rem / 16) calc(136rem / 16);
} }
.logo { .logo {
@ -30,7 +30,7 @@
} }
.logo img { .logo img {
width: 96px; width: calc(96rem / 16);
} }
.navMenu { .navMenu {
@ -43,7 +43,7 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 32rem; width: calc(512rem / 16);
} }
.navMenu li { .navMenu li {
@ -97,14 +97,14 @@
position: absolute; position: absolute;
margin: 0; margin: 0;
margin-top: 3rem; margin-top: calc(48rem / 16);
padding: 0; padding: 0;
border-radius: 0.5rem; border-radius: calc(8rem / 16);
background-color: var(--white); background-color: var(--white);
box-shadow: 0 0.5rem 1rem var(--blue-1-20); box-shadow: 0 calc(8rem / 16) 1rem var(--blue-1-20);
font-size: 0.875rem; font-size: calc(14rem / 16);
} }
.dropdown > li { .dropdown > li {
@ -112,7 +112,7 @@
} }
.dropdown > li > a { .dropdown > li > a {
padding: 0.5rem; padding: calc(8rem / 16);
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
} }
@ -124,12 +124,12 @@
.dropdown > li:first-child > a { .dropdown > li:first-child > a {
padding-top: 1rem; padding-top: 1rem;
border-radius: 0.5rem 0.5rem 0 0; border-radius: calc(8rem / 16) calc(8rem / 16) 0 0;
} }
.dropdown > li:last-child > a { .dropdown > li:last-child > a {
padding-bottom: 1rem; padding-bottom: 1rem;
border-radius: 0 0 0.5rem 0.5rem; border-radius: 0 0 calc(8rem / 16) calc(8rem / 16);
} }
.navMenu > li .dropdown { .navMenu > li .dropdown {
@ -144,8 +144,8 @@
/* On a smaller desktop screen, keep the same navbar layout but decrease the /* On a smaller desktop screen, keep the same navbar layout but decrease the
* horizontal padding so it still fits * horizontal padding so it still fits
*/ */
@media screen and (max-width: 960px) { @media screen and (max-width: calc(960rem / 16)) {
.navContent { .navContent {
padding: 1.75rem 4rem; padding: calc(28rem / 16) calc(64rem / 16);
} }
} }

20
components/NewsCard.module.css
View File

@ -1,31 +1,31 @@
.card { .card {
padding: 1.6875rem 2.4375rem; padding: calc(27rem / 16) calc(39rem / 16);
max-width: 524px; max-width: calc(524rem / 16);
background-color: white; background-color: white;
} }
.date { .date {
color: var(--purple-2); color: var(--purple-2);
font-size: 1.125rem; font-size: calc(18rem / 16);
font-weight: bold; font-weight: bold;
line-height: 1.6875rem; line-height: calc(27rem / 16);
} }
.author { .author {
color: var(--purple-1); color: var(--purple-1);
font-style: normal; font-style: normal;
line-height: 1.3125rem; line-height: calc(21rem / 16);
font-size: 0.875rem; font-size: calc(14rem / 16);
margin: 0.3125rem 0rem 0.4375rem 0rem; margin: calc(5rem / 16) 0 calc(7rem / 16) 0;
} }
.content { .content {
line-height: 1.3125rem; line-height: calc(21rem / 16);
color: var(--purple-2); color: var(--purple-2);
font-size: 0.875rem; font-size: calc(14rem / 16);
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: calc(768rem / 16)) {
.card { .card {
padding: 0; padding: 0;
background-color: transparent; background-color: transparent;

6
components/TeamMember.module.css
View File

@ -1,5 +1,5 @@
.container { .container {
max-width: 7.875rem; max-width: calc(126rem / 16);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0; margin: 0;
@ -13,8 +13,8 @@
.caption { .caption {
text-align: center; text-align: center;
font-size: 0.875rem; font-size: calc(14rem / 16);
margin-top: 1.5rem; margin-top: calc(24rem / 16);
} }
.name { .name {

46
components/TeamMemberCard.module.css
View File

@ -1,24 +1,24 @@
.card { .card {
display: grid; display: grid;
grid-template-columns: 126px auto; grid-template-columns: calc(126rem / 16) auto;
grid-template-areas: grid-template-areas:
"picture name" "picture name"
"picture role" "picture role"
"picture description"; "picture description";
column-gap: 2rem; column-gap: calc(32rem / 16);
row-gap: 0; row-gap: 0;
justify-items: start; justify-items: start;
align-items: start; align-items: start;
max-width: 847px; max-width: calc(847rem / 16);
} }
.picture { .picture {
grid-area: picture; grid-area: picture;
justify-self: center; justify-self: center;
max-width: 126px; max-width: calc(126rem / 16);
max-height: 126px; max-height: calc(126rem / 16);
clip-path: circle(50%); clip-path: circle(50%);
} }
@ -32,7 +32,7 @@
margin: 0; margin: 0;
color: var(--blue-1); color: var(--blue-1);
font-size: 2.25rem; font-size: calc(36rem / 16);
line-height: 1.1; line-height: 1.1;
font-weight: 700; font-weight: 700;
} }
@ -42,7 +42,7 @@
margin: 0; margin: 0;
color: var(--purple-2); color: var(--purple-2);
font-size: 1.5rem; font-size: calc(24rem / 16);
line-height: 1.7; line-height: 1.7;
font-weight: 600; font-weight: 600;
} }
@ -54,17 +54,17 @@
line-height: 1.875; line-height: 1.875;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: calc(768rem / 16)) {
.card { .card {
grid-template-columns: 90px auto; grid-template-columns: calc(90rem / 16) auto;
column-gap: 1.375rem; column-gap: calc(22rem / 16);
max-width: 460px; max-width: calc(460rem / 16);
} }
.picture { .picture {
max-width: 90px; max-width: calc(90rem / 16);
max-height: 90px; max-height: calc(90rem / 16);
} }
.name, .name,
@ -76,10 +76,10 @@
} }
/* TODO: Use the correct mobile styles from figma /* TODO: Use the correct mobile styles from figma
@media only screen and (max-width: 375px) { @media only screen and (max-width: calc(375rem / 16)) {
.card { .card {
grid-template-columns: 70px auto; grid-template-columns: calc(70rem / 16) auto;
grid-template-rows: auto calc(0.875rem * 1.5 + 0.75rem) auto; grid-template-rows: auto calc(calc(14rem / 16) * 1.5 + calc(12rem / 16)) auto;
grid-template-areas: grid-template-areas:
"picture name" "picture name"
"picture role" "picture role"
@ -87,28 +87,28 @@
column-gap: 1.4375rem; column-gap: 1.4375rem;
align-items: end; align-items: end;
max-width: 190px; max-width: calc(190rem / 16);
} }
.picture { .picture {
max-width: 70px; max-width: calc(70rem / 16);
max-height: 70px; max-height: calc(70rem / 16);
} }
.name, .name,
.role, .role,
.description { .description {
font-size: 0.875rem; font-size: calc(14rem / 16);
line-height: 1.5; line-height: 1.5;
} }
.role { .role {
margin-bottom: 0.75rem; margin-bottom: calc(12rem / 16);
} }
.description { .description {
justify-self: top; justify-self: top;
margin-top: 0.75rem; margin-top: calc(12rem / 16);
margin-left: 0.75rem; margin-left: calc(12rem / 16);
} }
} */ } */

44
components/playground.module.css
View File

@ -3,7 +3,7 @@
} }
.newsDemo { .newsDemo {
padding: 50px; padding: calc(50rem / 16);
background-color: var(--off-white); background-color: var(--off-white);
display: inline-block; display: inline-block;
} }
@ -12,16 +12,16 @@
font-style: normal; font-style: normal;
font-weight: bold; font-weight: bold;
color: var(--purple-2); color: var(--purple-2);
font-size: 24px; font-size: calc(24rem / 16);
line-height: 36px; line-height: calc(36rem / 16);
margin-bottom: 14px; margin-bottom: calc(14rem / 16);
} }
.newsDesc { .newsDesc {
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 14px; font-size: calc(14rem / 16);
line-height: 21px; line-height: calc(21rem / 16);
white-space: pre-line; white-space: pre-line;
color: var(--purple-2); color: var(--purple-2);
vertical-align: baseline; vertical-align: baseline;
@ -29,19 +29,19 @@
.news > hr { .news > hr {
border: none; border: none;
height: 1px; height: calc(1rem / 16);
background-color: var(--purple-2); background-color: var(--purple-2);
margin: 0 0 13px 0; margin: 0 0 calc(13rem / 16) 0;
} }
.eventDescriptionCardDemo { .eventDescriptionCardDemo {
padding: 50px 0; padding: calc(50rem / 16) 0;
background-color: var(--off-white); background-color: var(--off-white);
display: inline-block; display: inline-block;
} }
.eventDescriptionCardDemo > * { .eventDescriptionCardDemo > * {
margin: 12px 50px; margin: calc(12rem / 16) calc(50rem / 16);
} }
.eventDescriptionCardDemo > *:first-child { .eventDescriptionCardDemo > *:first-child {
@ -53,41 +53,41 @@
} }
.teamMemberDemo { .teamMemberDemo {
padding: 10px 50px 30px 50px; padding: calc(10rem / 16) calc(50rem / 16) calc(30rem / 16) calc(50rem / 16);
max-width: 847px; max-width: calc(847rem / 16);
} }
.committee { .committee {
margin: 0; margin: 0;
color: var(--purple-2); color: var(--purple-2);
font-weight: 600; font-weight: 600;
font-size: 24px; font-size: calc(24rem / 16);
line-height: 36px; line-height: calc(36rem / 16);
} }
.teamMemberDemo > hr { .teamMemberDemo > hr {
border: none; border: none;
height: 1px; height: calc(1rem / 16);
background-color: var(--blue-2); background-color: var(--blue-2);
width: 100%; width: 100%;
margin-top: 24px; margin-top: calc(24rem / 16);
margin-bottom: 46px; margin-bottom: calc(46rem / 16);
} }
.teamMembers { .teamMembers {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(calc(100rem / 16), 1fr));
row-gap: 2.6875rem; row-gap: calc(43rem / 16);
column-gap: 3.3125rem; column-gap: calc(53rem / 16);
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: calc(768rem / 16)) {
.newsDemo, .newsDemo,
.eventDescriptionCardDemo { .eventDescriptionCardDemo {
background-color: #e1eefa; background-color: #e1eefa;
} }
.eventDescriptionCardDemo > * { .eventDescriptionCardDemo > * {
margin: 50px; margin: calc(50rem / 16);
} }
} }

3495
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@ -33,6 +33,10 @@
"eslint-plugin-prettier": "^3.4.0", "eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.23.2", "eslint-plugin-react": "^7.23.2",
"eslint-plugin-react-hooks": "^4.2.0", "eslint-plugin-react-hooks": "^4.2.0",
"postcss": "^8.3.0",
"postcss-calc": "^8.0.0",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-preset-env": "^6.7.0",
"typescript": "^4.2.4" "typescript": "^4.2.4"
} }
} }

18
postcss.config.json Normal file
View File

@ -0,0 +1,18 @@
{
"plugins": [
"postcss-flexbugs-fixes",
[
"postcss-preset-env",
{
"autoprefixer": {
"flexbox": "no-2009"
},
"stage": 3,
"features": {
"custom-properties": false
}
}
],
"postcss-calc"
]
}