mirror of
https://github.com/Radiquum/radiquum.github.io.git
synced 2025-04-05 15:54:34 +00:00
refactor: change main block text sizing for mobile
This commit is contained in:
parent
0a1efad39e
commit
c7eb07fb06
GPG key ID:
858E8EE696525EED
2 changed files with 59 additions and 49 deletions
|
|
@ -49,12 +49,11 @@
|
|||
<div class="container px-2 2xl:h-screen" id="section_landing">
|
||||
<div class="text-white h-full lg:max-h-[45vh] xl:max-h-[40vh] 2xl:max-h-[60vh] relative">
|
||||
<div class="bg-bg-pink w-full h-full lg:max-h-[45vh] xl:max-h-[40vh] 2xl:max-h-[60vh] max-w-[46.25%] absolute top-0 right-0 -z-10 hidden sm:block"></div>
|
||||
<div class="flex flex-col items-center justify-center gap-4 pt-8 pb-4 sm:gap-12 sm:py-8 sm:px-8 sm:flex-row">
|
||||
<div class="flex flex-col items-center justify-center gap-4 pt-8 pb-4 sm:justify-between 2xl:justify-center sm:gap-12 sm:py-8 sm:px-8 sm:flex-row">
|
||||
<img src="./static/avatar_512.png" alt="" class="w-[256px] lg:w-[372px] 2xl:w-[512px]" />
|
||||
<div class="p-4 bg-bg-pink sm:bg-transparent">
|
||||
<h1 class="text-2xl font-semibold lg:text-4xl xl:text-6xl 2xl:text-8xl">KENTAI RADIQUUM</h1>
|
||||
<p class="text-2xl font-light lg:text-3xl xl:text-4xl 2xl:text-5xl">Async / Await • Red panda /
|
||||
Protogen</p>
|
||||
<div class="w-full p-4 bg-bg-pink sm:bg-transparent md:w-auto">
|
||||
<h1 class="text-3xl font-semibold lg:text-4xl xl:text-6xl 2xl:text-8xl">KENTAI RADIQUUM</h1>
|
||||
<p class="text-xl font-light lg:text-2xl xl:text-4xl 2xl:text-5xl">Async / Await <br class="md:hidden" /> <span class="hidden md:inline">•</span> Red panda / Protogen</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -686,6 +686,14 @@ video {
|
|||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -738,6 +746,10 @@ video {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.h-2 {
|
||||
height: 0.5rem;
|
||||
}
|
||||
|
||||
.max-h-\[4px\] {
|
||||
max-height: 4px;
|
||||
}
|
||||
|
|
@ -799,6 +811,10 @@ video {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.w-2 {
|
||||
width: 0.5rem;
|
||||
}
|
||||
|
||||
.max-w-\[46\.25\%\] {
|
||||
max-width: 46.25%;
|
||||
}
|
||||
|
|
@ -872,6 +888,10 @@ video {
|
|||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.rounded-full {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.border {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
|
@ -989,6 +1009,10 @@ video {
|
|||
padding: 8px;
|
||||
}
|
||||
|
||||
.p-1 {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.px-2 {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
|
|
@ -1153,10 +1177,6 @@ video {
|
|||
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.ease-in {
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
||||
}
|
||||
|
||||
.\[filter\:darken\(10\%\)\] {
|
||||
filter: darken(10%);
|
||||
}
|
||||
|
|
@ -1244,6 +1264,10 @@ body {
|
|||
display: block;
|
||||
}
|
||||
|
||||
.sm\:inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.sm\:h-10 {
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
|
@ -1397,8 +1421,16 @@ body {
|
|||
margin-top: 6rem;
|
||||
}
|
||||
|
||||
.md\:h-screen {
|
||||
height: 100vh;
|
||||
.md\:inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.md\:hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.md\:w-auto {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.md\:scroll-mt-20 {
|
||||
|
|
@ -1415,10 +1447,6 @@ body {
|
|||
margin-top: -248px;
|
||||
}
|
||||
|
||||
.xl\:h-screen {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.xl\:max-h-\[40vh\] {
|
||||
max-height: 40vh;
|
||||
}
|
||||
|
|
@ -1435,6 +1463,10 @@ body {
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.xl\:justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.xl\:text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
|
|
@ -1457,44 +1489,10 @@ body {
|
|||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
@media (min-width: 1000px) {
|
||||
.lg\:xl\:max-h-\[40vh\] {
|
||||
max-height: 40vh;
|
||||
}
|
||||
}
|
||||
|
||||
.lg\:h-screen {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.lg\:max-h-\[40vh\] {
|
||||
max-height: 40vh;
|
||||
}
|
||||
|
||||
.lg\:max-h-\[50vh\] {
|
||||
max-height: 50vh;
|
||||
}
|
||||
|
||||
.lg\:max-h-\[50\%\] {
|
||||
max-height: 50%;
|
||||
}
|
||||
|
||||
.lg\:max-h-\[40\%\] {
|
||||
max-height: 40%;
|
||||
}
|
||||
|
||||
.lg\:max-h-\[45\%\] {
|
||||
max-height: 45%;
|
||||
}
|
||||
|
||||
.lg\:max-h-\[45vh\] {
|
||||
max-height: 45vh;
|
||||
}
|
||||
|
||||
.lg\:max-h-\[30vh\] {
|
||||
max-height: 30vh;
|
||||
}
|
||||
|
||||
.lg\:w-\[372px\] {
|
||||
width: 372px;
|
||||
}
|
||||
|
|
@ -1507,6 +1505,10 @@ body {
|
|||
gap: 1rem;
|
||||
}
|
||||
|
||||
.lg\:p-4 {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.lg\:text-3xl {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
|
|
@ -1516,6 +1518,11 @@ body {
|
|||
font-size: 2.25rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
.lg\:text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1800px) {
|
||||
|
|
@ -1547,6 +1554,10 @@ body {
|
|||
flex-direction: row;
|
||||
}
|
||||
|
||||
.\32xl\:justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.\32xl\:text-4xl {
|
||||
font-size: 2.25rem;
|
||||
line-height: 2.5rem;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue