update responsive design

This commit is contained in:
Youwen Wu 2023-10-12 01:04:49 -07:00
parent 42bd2caa66
commit 9937df58f0
2 changed files with 58 additions and 8 deletions

View file

@ -164,21 +164,47 @@ footer p {
/* z-index: 1; */
}
/* all other screens */
@media only screen and not (max-width : 1200px) {
/* all other screens (massive screens) */
@media only screen and not (max-width : 1850px) {
/* Styles */
.bg-text {
font-size: 25vh;
/* font-size: 25vh; */
font-size: 18rem;
opacity: 0.15;
}
}
/* large size screen */
@media only screen
and (max-width : 1200px) {
and (max-width : 1850px) {
/* Styles */
.bg-text {
font-size: 20vw;
opacity: 0.25;
font-size: 15rem;
opacity: 0.15;
/* margin-top: 10vh */
}
}
/* medium size screen */
@media only screen
and (max-width : 1500px) {
/* Styles */
.bg-text {
font-size: 12rem;
opacity: 0.15;
word-break: break-word;
margin-top: 8vh;
/* margin-top: 10vh */
}
}
/* phablet size screen */
@media only screen
and (max-width : 1100px) {
/* Styles */
.bg-text {
font-size: 10rem;
opacity: 0.15;
word-break: break-word;
margin-top: 8vh;
/* margin-top: 10vh */
@ -190,8 +216,9 @@ and (max-width : 1200px) {
and (max-width : 600px) {
/* Styles */
.bg-text {
font-size: 30vw;
opacity: 0.25;
z-index: 1;
font-size: 8rem;
opacity: 0.1;
word-break: break-word;
margin-top: 22vh;
}

View file

@ -83,6 +83,29 @@
<p>Quake 3 Arena fully playable in the browser and hosted within the SRVUSD intranet</p>
</div>
</div>
<h2>Hardware Projects</h2>
<div class="projects-list">
<div class="project">
<!-- <img src="assets/img/quake-3-arena.png" /> -->
<h3>Jankbook Pro</h3>
<p>Dell 3100 2-in-1 Chromebook, unenrolled and loaded with custom firmware allowing booting to Linux</p>
</div>
<div class="project">
<!-- <img src="assets/img/quake-3-arena.png" /> -->
<h3>Toughbook</h3>
<p>Decommissioned robotics laptop. Probably not a real toughbook, but it sure looks like one</p>
</div>
<div class="project">
<!-- <img src="assets/img/quake-3-arena.png" /> -->
<h3>ESP Deauther</h3>
<p>Work-in-progress multi-vector network offensive security testing device, based on an ESP development board</p>
</div>
<div class="project">
<!-- <img src="assets/img/quake-3-arena.png" /> -->
<h3>Gallium Intranet</h3>
<p>A private network hosted by Gallium workshop in order to facilitate easy local area connections to other devices</p>
</div>
</div>
<h2>Honorary Members</h2>
<div class="members-list">
<div class="member">