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

28
components/EventDescriptionCard.module.css
View File

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

14
components/MiniEventCard.module.css
View File

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

26
components/Navbar.module.css
View File

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

20
components/NewsCard.module.css
View File

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

6
components/TeamMember.module.css
View File

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

46
components/TeamMemberCard.module.css
View File

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

44
components/playground.module.css
View File

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

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"
]
}