Skip to content

Commit

Permalink
improve home page on mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@escherwd
escherwd committed Apr 10, 2024
1 parent fcafab3 commit b7b6402
Show file tree
Hide file tree
Showing 5 changed files with 97 additions and 49 deletions.
7 changes: 5 additions & 2 deletions layouts/_default/baseof.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,12 @@

{{ partial "navbar.html" . }}

<div class="container px-4 max-w-4xl mx-auto overflow-x-hidden md:overflow-visible">
{{ block "main" . }}{{ end }}
<div class="overflow-x-hidden md:overflow-visible">
<div class="container px-4 max-w-4xl mx-auto ">
{{ block "main" . }}{{ end }}
</div>
</div>


{{ partial "footer.html" . }}
</body>
Expand Down
20 changes: 13 additions & 7 deletions layouts/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@

<!-- This is the big banner section -->
<div class="relative min-h-[500pt]">
<div class="relative scale-125">
<div class="relative scale-110 md:scale-125">
<!-- Background Image -->
<img src="/images/big/rover_hero.jpg" style="" class="w-full h-[400pt] md:pr-0 md:h-auto object-cover" alt="">
<img src="/images/big/rover_hero.jpg" style="" class="hidden md:block w-full h-[400pt] md:pr-0 md:h-auto object-cover" alt="">
<img src="/images/big/rover_hero_mobile.jpg" style="" class="block md:hidden w-full h-[400pt] md:pr-0 md:h-auto object-cover" alt="">
<!-- Radial Gradient -->
<div class="absolute w-full h-full top-0" style="background: rgb(23,23,23);
<div class="hidden md:block absolute w-full h-full top-0" style="background: rgb(23,23,23);
background: radial-gradient(circle, rgba(23,23,23,0.2) 30%, rgba(23,23,23,1) 82%);"></div>
<!-- Linear Gradient Top -->
<div class="absolute w-full top-0 h-24 bg-gradient-to-b from-neutral-900 to-neutral-900/0">
Expand All @@ -19,7 +20,7 @@

<div class="absolute top-0 h-full w-full flex items-end pb-10 md:items-center md:pb-0">
<div>
<span class="block text-h1.5 md:text-h1 font-bold font-display shadow leading-none mt-6">DAM ROBOTICS</span>
<span class="block text-h2 md:text-h1 font-bold font-display shadow leading-none mt-6">DAM ROBOTICS</span>
<span class="block text-[20px] mt-2 font-medium shadow">at Oregon State University</span>
</div>
</div>
Expand All @@ -30,7 +31,7 @@


<section class="relative grid grid-cols-3 gap-8">
<div class="col-span-3 md:col-span-1">
<div class="col-span-3 md:col-span-1 hidden md:block">
<img class="rounded-lg shadow-md" src="/images/big/home_team.JPG" alt="">
</div>
<div class="col-span-3 md:col-span-2">
Expand Down Expand Up @@ -113,6 +114,9 @@ <h3 class="text-h3 font-display font-semibold mb-3">Welcome to the OSU Robotics
generations of robotics students to this day.
</p>
</div>
<div class="col-span-3 md:hidden">
<img class="rounded-lg shadow-md" src="/images/big/home_team.JPG" alt="">
</div>
<div class="relative col-span-3 md:col-span-1">
<!-- <img class="rounded-lg shadow-md" src="/images/big/home_team.JPG" alt=""> -->
<div class="absolute w-full h-full flex items-center">
Expand All @@ -134,8 +138,10 @@ <h3 class="text-h3 font-display font-semibold mb-3">Welcome to the OSU Robotics
</div>
<div class="h-48 py-8 relative">
<div class="font-display font-medium text-white/60 text-h4">Thank you to our Sponsors!</div>
<div class="flex justify-around">
<div class="flex-none h-6 w-42 bg-neutral-700"></div>
<div class="flex flex-col md:flex-row justify-around py-6 gap-6">
<img src="/images/logos/altium.png" class="h-8 object-contain" alt="Altium">
<!-- <img src="/images/logos/altium.png" class="h-8 object-contain" alt="Altium"> -->
<!-- <div class="flex-none h-6 w-42 bg-neutral-700"></div> -->
</div>
</div>
</section>
Expand Down
119 changes: 79 additions & 40 deletions static/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -916,6 +916,12 @@ video {
.top-navbar {
top: 64px;
}
.-left-\[999px\] {
left: -999px;
}
.-right-\[999px\] {
right: -999px;
}
.-z-10 {
z-index: -10;
}
Expand Down Expand Up @@ -995,8 +1001,8 @@ video {
.mt-8 {
margin-top: 2rem;
}
.mr-7 {
margin-right: 1.75rem;
.ml-4 {
margin-left: 1rem;
}
.block {
display: block;
Expand Down Expand Up @@ -1070,12 +1076,18 @@ video {
.h-full {
height: 100%;
}
.h-8 {
height: 2rem;
}
.min-h-\[400px\] {
min-height: 400px;
}
.min-h-\[500pt\] {
min-height: 500pt;
}
.min-h-\[200px\] {
min-height: 200px;
}
.w-10 {
width: 2.5rem;
}
Expand Down Expand Up @@ -1109,30 +1121,25 @@ video {
.max-w-md {
max-width: 28rem;
}
.max-w-full {
max-width: 100%;
}
.flex-1 {
flex: 1 1 0%;
}
.flex-none {
flex: none;
}
.-translate-x-6 {
--tw-translate-x: -1.5rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-\[10\] {
--tw-translate-x: -10;
.rotate-3 {
--tw-rotate: 3deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-\[10px\] {
--tw-translate-x: -10px;
.-rotate-\[12deg\] {
--tw-rotate: -12deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-\[140px\] {
--tw-translate-x: -140px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-\[40px\] {
--tw-translate-x: -40px;
.-rotate-\[7deg\] {
--tw-rotate: -7deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-105 {
Expand Down Expand Up @@ -1160,6 +1167,17 @@ video {
--tw-scale-y: 1.3;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-110 {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.grid-flow-row {
grid-auto-flow: row;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
Expand All @@ -1175,9 +1193,15 @@ video {
.flex-row {
flex-direction: row;
}
.flex-row-reverse {
flex-direction: row-reverse;
}
.flex-col {
flex-direction: column;
}
.flex-col-reverse {
flex-direction: column-reverse;
}
.content-around {
align-content: space-around;
}
Expand All @@ -1187,6 +1211,9 @@ video {
.items-center {
align-items: center;
}
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
Expand Down Expand Up @@ -1241,17 +1268,13 @@ video {
.border-b {
border-bottom-width: 1px;
}
.border-white\/50 {
border-color: rgb(255 255 255 / 0.5);
}
.border-gray-700 {
--tw-border-opacity: 1;
border-color: rgb(55 65 81 / var(--tw-border-opacity));
}
.border-neutral-700 {
--tw-border-opacity: 1;
border-color: rgb(64 64 64 / var(--tw-border-opacity));
}
.border-white\/50 {
border-color: rgb(255 255 255 / 0.5);
}
.bg-\[green\] {
--tw-bg-opacity: 1;
background-color: rgb(0 128 0 / var(--tw-bg-opacity));
Expand Down Expand Up @@ -1375,6 +1398,10 @@ video {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
Expand All @@ -1383,9 +1410,9 @@ video {
padding-top: 2rem;
padding-bottom: 2rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.pb-10 {
padding-bottom: 2.5rem;
Expand Down Expand Up @@ -1414,6 +1441,9 @@ video {
.pl-3 {
padding-left: 0.75rem;
}
.pl-4 {
padding-left: 1rem;
}
.pl-5 {
padding-left: 1.25rem;
}
Expand Down Expand Up @@ -1447,11 +1477,11 @@ video {
.pt-navbar {
padding-top: 64px;
}
.pt-\[72px\] {
padding-top: 72px;
.pb-8 {
padding-bottom: 2rem;
}
.pl-4 {
padding-left: 1rem;
.pt-8 {
padding-top: 2rem;
}
.text-center {
text-align: center;
Expand Down Expand Up @@ -1697,18 +1727,10 @@ video {
background-color: rgb(0 0 0 / 0.5);
}

.last\:border-none:last-child {
border-style: none;
}

.hover\:opacity-90:hover {
opacity: 0.9;
}

.peer:last-child ~ .peer-last\:border-none {
border-style: none;
}

@media (min-width: 768px) {

.md\:-right-1 {
Expand All @@ -1723,6 +1745,11 @@ video {
grid-column: span 2 / span 2;
}

.md\:mx-auto {
margin-left: auto;
margin-right: auto;
}

.md\:block {
display: block;
}
Expand Down Expand Up @@ -1751,8 +1778,9 @@ video {
max-width: 28rem;
}

.md\:-translate-x-0 {
--tw-translate-x: -0px;
.md\:scale-125 {
--tw-scale-x: 1.25;
--tw-scale-y: 1.25;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

Expand All @@ -1772,6 +1800,10 @@ video {
align-items: center;
}

.md\:justify-around {
justify-content: space-around;
}

.md\:overflow-visible {
overflow: visible;
}
Expand All @@ -1797,3 +1829,10 @@ video {
font-size: 72px;
}
}

@media (min-width: 1024px) {

.lg\:overflow-visible {
overflow: visible;
}
}
Binary file added static/images/big/rover_hero_mobile.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/images/logos/altium.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit b7b6402

Please sign in to comment.