www
/
www-new
12
2
Fork 3
Code Issues 57 Pull Requests 31 Projects Releases Wiki Activity

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

Browse Source
merge-requests/16/head
Adi Thakral 2 years ago
parent 4777b5f274
commit 1dcc97368d
11 changed files with 7766 additions and 4293 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 18
      components/EventCard.module.css
  2. 28
      components/EventDescriptionCard.module.css
  3. 14
      components/MiniEventCard.module.css
  4. 26
      components/Navbar.module.css
  5. 20
      components/NewsCard.module.css
  6. 6
      components/TeamMember.module.css
  7. 46
      components/TeamMemberCard.module.css
  8. 44
      components/playground.module.css
  9. 11835
      package-lock.json
  10. 4
      package.json
  11. 18
      postcss.config.json

18
components/EventCard.module.css
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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);
}
}

11835
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
Unescape 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
Unescape 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"
]
}
Write Preview
Loading…
Cancel
Save