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

feat: mah god after 1 long hour i have finally figured out how to stick that flexbox footer where it belongs

Browse Source
This commit is contained in:
Derek Chen
2024-04-20 16:52:43 -05:00
parent 5b7a2b06bd
commit ec12a4829e
2 changed files with 73 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
docs/index.html
View File

@@ -27,6 +27,13 @@
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Changelog</a></li>
</ul>
</nav>
<div class="wrapper">
<div class="about-text" value="">
<h1>About</h1>
@@ -89,6 +96,7 @@
<canvas id="gradeBar" style="width:100%;height:100%;"></canvas>
</div>
</div>
</div>
<div class="footy">Created by Derek Chen
<!-- because VAPA lecture was a bit boring that day -->
<div>
@@ -104,7 +112,6 @@
frameborder="0" scrolling="0" width="100" height="30" title="GitHub">
</iframe>
</div>
</div>
<script src='main.js'></script>
<script src='colorScheme.js'></script>
</body>

71
docs/main.css
View File

@@ -23,6 +23,10 @@ body {
background: var(--background-gradient); */
margin: 0;
transition: background 0.2s linear;
min-height: 100vh;
display: flex;
flex-direction: column;
}
body.dark {
@@ -43,20 +47,25 @@ main {
padding: 10%;
}
.footy {
background-color: #2e2d2d;
color: white;
padding: 1%;
position: relative;
bottom: 0;
left: 0;
width: 100%;
text-align: left;
font-size: var(--footer-size);
display: flex;
flex-direction: row;
justify-content: space-between;
align-self: flex-end;
nav ul {
font-size: var(--p-size);
list-style-type: none;
padding: 0;
text-align: center;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
text-decoration: none;
color: var(--font-color);
}
nav ul li a:hover {
text-decoration: underline;
}
* {
@@ -64,13 +73,18 @@ main {
}
.wrapper {
display: grid;
/* display: grid;
gap: 2vw;
grid-auto-rows: minmax(100px, auto);
grid-auto-rows: minmax(100px, auto); */
display: flex;
flex-direction: column;
align-items: center; /* Center items horizontally */
flex-grow: 1; /* Allow .wrapper to grow and occupy remaining space */
row-gap: 100px;
text-align: center;
color: var(--font-color);
margin-top: 30px;
min-height: 100vh;
/* min-height: 100vh; */
/* background-color: rgba(0, 0, 0, .4); */
}
@@ -101,8 +115,8 @@ main {
.bg-form {
background-color: var(--container-color);
grid-column: 1;
grid-row: 2;
/* grid-column: 1;
grid-row: 2; */
font-weight: 400;
width: auto;
margin: 0 auto;
@@ -120,6 +134,25 @@ main {
width: 80vw;
}
.footy {
background-color: #2e2d2d;
color: white;
padding: 1%;
position: relative;
bottom: 0;
left: 0;
width: 100%;
text-align: left;
font-size: var(--footer-size);
display: flex;
flex-direction: row;
justify-content: space-between;
/* margin-top: -200px; */
align-self: flex-end;
flex-shrink: 0;
}
p {
font-size: var(--p-size);
line-height: 1.5;