DerexXD/ut-grade-distribution-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Introducing custom properties to make responsiveness easier

Browse Source
This commit is contained in:
Derek Chen
2023-07-26 19:44:19 -05:00
parent 232f14f4b1
commit 1cf69f943b
2 changed files with 94 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/index.html
View File

@@ -52,7 +52,7 @@
<input type="text" id="courseField" name="fname" required><br><br> <input type="text" id="courseField" name="fname" required><br><br>
<label for="courseNum">Course Number (Ex: "307"):</label> <label for="courseNum">Course Number (Ex: "307"):</label>
<input type="text" id="courseNum" name="fname" required><br><br> <input type="text" id="courseNum" name="fname" required><br><br>
<label for="courseName">Course Name (Optional, useful for same-number classes Ex: UGS 303):</label> <label for="courseName">Course Name (Optional, for same-number classes Ex: UGS 303):</label>
<input type="text" id="courseName" name="fname"><br><br> <input type="text" id="courseName" name="fname"><br><br>
<!-- <label for="sectionNum">Section Number (Optional, Experimental)</label> <!-- <label for="sectionNum">Section Number (Optional, Experimental)</label>
<input type="text" id="sectionNum" name="fname" required><br><br> --> <input type="text" id="sectionNum" name="fname" required><br><br> -->

172
docs/main.css
View File

@@ -1,140 +1,150 @@
:root {
--bg-form-padding: 3px;
--form-padding: 3px;
--p-size: 10px;
--label-size: 10px;
--h1-size: 15px;
}
body { body {
font-family: 'Helvetica Neue', sans-serif; font-family: 'Helvetica Neue', sans-serif;
background: #1b1a2a; background: #1b1a2a;
background: linear-gradient(90deg, rgba(61, 87, 92, 1) 0, #454454 100%); background: linear-gradient(90deg, rgba(61, 87, 92, 1) 0, #454454 100%);
} }
a { a {
color: #2c82c9; color: #2c82c9;
text-decoration: none text-decoration: none
} }
main { main {
padding: 10% padding: 10%
} }
footer { footer {
background-color: #2e2d2d; background-color: #2e2d2d;
color: #fff; color: #fff;
padding: 1%; padding: 1%;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
text-align: left; text-align: left;
font-size: 1rem font-size: 1rem
} }
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
.wrapper { .wrapper {
display: grid; display: grid;
gap: 2vw; gap: 2vw;
grid-auto-rows: minmax(100px, auto); grid-auto-rows: minmax(100px, auto);
text-align: center; text-align: center;
color: #fff; color: #fff;
/* background-color: rgba(0, 0, 0, .4); */ /* background-color: rgba(0, 0, 0, .4); */
} }
.about-text { .about-text {
background-color: rgba(0, 0, 0, .4); background-color: rgba(0, 0, 0, .4);
border: 3px solid #f1f1f1; border: 3px solid #f1f1f1;
grid-column: 1; grid-column: 1;
grid-row: 1; grid-row: 1;
width: 70%; width: 70%;
margin: 0 auto; margin: 0 auto;
border-radius: 10px; border-radius: 10px;
} }
.bg-form { .bg-form {
background-color: rgba(0, 0, 0, .4); background-color: rgba(0, 0, 0, .4);
border: 3px solid #f1f1f1; border: 3px solid #f1f1f1;
grid-column: 1; grid-column: 1;
grid-row: 2; grid-row: 2;
font-weight: 400; font-weight: 400;
width: auto; width: auto;
height: auto; height: auto;
margin: 0 auto; margin: 0 auto;
border-radius: 10px; border-radius: 10px;
} }
.chart-container { .chart-container {
position: relative; position: relative;
margin: auto; margin: auto;
height: 80vh; height: 80vh;
width: 80vw; width: 80vw;
} }
/* Mobile */ /* Mobile */
.bg-form { .bg-form {
padding: 3px; padding: 3px;
} }
.about-text { .about-text {
padding: 3px; padding: 3px;
} }
p { p {
font-size: 10px; font-size: var(--p-size);
line-height: 1.5; line-height: 1.5;
margin: 0 0 1rem 0 margin: 0 0 1rem 0
} }
label { label {
font-size: 10px; font-size: var(--label-size);
} }
h1 { h1 {
font-size: 15px; font-size: var(--h1-size);
margin: 0 0 1rem 0 margin: 0 0 1rem 0
} }
/* Tablet */ /* Tablet */
@media (min-width:600px) { @media (min-width:600px) {
.bg-form { :root {}
padding: 15px;
}
.about-text { .bg-form {
padding: 10px; padding: 15px;
} }
p { .about-text {
font-size: 14px; padding: 10px;
} }
label { p {
font-size: 14px; font-size: 14px;
} }
h1 { label {
font-size: 18px; font-size: 14px;
} }
h1 {
font-size: 18px;
}
} }
/* Desktop */ /* Desktop */
@media (min-width:900px) { @media (min-width:900px) {
.bg-form { .bg-form {
padding: 24px; padding: 24px;
} }
.about-text { .about-text {
padding: 12px; padding: 12px;
} }
p { p {
font-size: 16px; font-size: 16px;
} }
label { label {
font-size: 18px; font-size: 18px;
} }
h1 { h1 {
font-size: 30px; font-size: 30px;
margin: 0 0 1rem 0 margin: 0 0 1rem 0
} }
} }