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

35
docs/index.html
View File

@@ -27,6 +27,13 @@
</head> </head>
<body> <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="wrapper">
<div class="about-text" value=""> <div class="about-text" value="">
<h1>About</h1> <h1>About</h1>
@@ -89,21 +96,21 @@
<canvas id="gradeBar" style="width:100%;height:100%;"></canvas> <canvas id="gradeBar" style="width:100%;height:100%;"></canvas>
</div> </div>
</div> </div>
<div class="footy">Created by Derek Chen </div>
<!-- because VAPA lecture was a bit boring that day --> <div class="footy">Created by Derek Chen
<div> <!-- because VAPA lecture was a bit boring that day -->
<input type="checkbox" class="checkbox" id="colorToggle"> <div>
<label for="colorToggle" class="checkbox-label"> <input type="checkbox" class="checkbox" id="colorToggle">
<i class="fas fa-moon"></i> <label for="colorToggle" class="checkbox-label">
<i class="fas fa-sun"></i> <i class="fas fa-moon"></i>
<span class="ball"></span> <i class="fas fa-sun"></i>
</label> <span class="ball"></span>
</div> </label>
<iframe
src="https://ghbtns.com/github-btn.html?user=Derec4&repo=ut-grade-distribution-viewer&type=star&count=true&size=large"
frameborder="0" scrolling="0" width="100" height="30" title="GitHub">
</iframe>
</div> </div>
<iframe
src="https://ghbtns.com/github-btn.html?user=Derec4&repo=ut-grade-distribution-viewer&type=star&count=true&size=large"
frameborder="0" scrolling="0" width="100" height="30" title="GitHub">
</iframe>
</div> </div>
<script src='main.js'></script> <script src='main.js'></script>
<script src='colorScheme.js'></script> <script src='colorScheme.js'></script>

71
docs/main.css
View File

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