journal/templates/css/compute-c23f91.webflow.css
Isaac Mills 4017705026
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Increase readability on mobile
2024-04-23 00:03:36 -04:00

331 lines
5.1 KiB
CSS

:root {
--white: white;
--black: black;
--gap: calc(1rem * 12.5 / 16);
}
body {
font-family: 'Arimo', sans-serif;
}
code {
font-family: 'Fira Code', monospace;
}
.w-layout-vflex {
flex-direction: column;
align-items: flex-start;
display: flex;
}
.w-layout-blockcontainer {
max-width: 940px;
margin-left: auto;
margin-right: auto;
display: block;
}
.w-layout-grid {
grid-row-gap: 16px;
grid-column-gap: 16px;
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
display: grid;
}
.w-layout-hflex {
flex-direction: row;
align-items: flex-start;
display: flex;
}
@media screen and (max-width: 991px) {
.w-layout-blockcontainer {
max-width: 728px;
}
}
@media screen and (max-width: 767px) {
.w-layout-blockcontainer {
max-width: none;
}
}
article {
display: flex;
flex-direction: column;
align-items: center;
margin: 25px;
gap: var(--gap);
}
.content section {
display: flex;
flex-direction: column;
gap: var(--gap);
word-wrap: break-word;
margin-top: calc(2 * var(--gap));
margin-bottom: 0;
}
.content img {
margin: var(--gap) 0;
}
.content ul,
.content ol {
display: flex;
flex-direction: column;
padding: 0 0 0 2em;
}
.content * {
line-height: 1.5;
margin: 0 0;
padding: 0 0;
}
h1 {
margin-top: auto;
font-size: 128px;
font-weight: 700;
}
p {
font-size: 18px;
}
li {
font-size: 18px;
}
.utility-page-wrap {
justify-content: center;
align-items: center;
width: 100vw;
max-width: 100%;
height: 100vh;
max-height: 100%;
display: flex;
}
.utility-page-content {
text-align: center;
flex-direction: column;
width: 260px;
display: flex;
}
.utility-page-form {
flex-direction: column;
align-items: stretch;
display: flex;
}
.container-2 {
padding-top: 8px;
padding-bottom: 8px;
}
.flex-block-2 {
justify-content: center;
align-items: center;
}
.flex-block-2.purple {
flex-flow: column;
justify-content: space-around;
padding-top: 0;
display: flex;
background-color: #552a85;
overflow-x: hidden;
}
.heading-3 {
color: #f6c415;
font-size: 22vw;
overflow-x: hidden;
}
.heading-3.wrapped-compute {
display: none;
}
.heading-3.unwrapped-compute.compute-gradiant {
-webkit-text-fill-color: transparent;
background-image: linear-gradient(90deg, #f6c415, #f6c41533);
-webkit-background-clip: text;
background-clip: text;
margin-bottom: 20px;
}
.text-block {
color: #fff;
text-align: left;
margin-left: 20px;
margin-right: 20px;
font-size: 18px;
}
.container-3 {
height: 20vh;
margin-top: 8px;
margin-bottom: 8px;
padding-left: 16px;
padding-right: 16px;
}
.heading-4 {
margin-top: 0;
margin-bottom: 0;
font-size: 5vw;
}
.heading-5 {
margin-top: 0;
margin-bottom: 0;
}
.heading-6 {
margin-top: 0;
margin-bottom: 0;
font-size: 64px;
}
.paragraph {
font-size: 24px;
}
.heading-7 {
font-size: 64px;
}
.grid {
padding-left: 16px;
padding-right: 16px;
}
.heading-8 {
color: #f6c415;
text-align: left;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(90deg, #f6c415, rgba(246, 196, 21, .3));
-webkit-background-clip: text;
background-clip: text;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
}
.image {
-webkit-text-fill-color: inherit;
background-clip: border-box;
border-radius: 50%;
margin-bottom: 0;
margin-left: 20px;
margin-right: 10px;
}
.flex-block-3 {
align-items: center;
margin-bottom: 20px;
}
.text-block-2 {
color: white;
font-size: 18px;
}
article>* {
width: 96vw;
max-width: 940px;
}
#header-elements {
width: 96vw;
max-width: 940px;
}
@media screen and (max-width: 991px) {
.heading-3.unwrapped-compute.compute-gradiant {
height: 22vw;
min-height: 0%;
}
article>* {
max-width: min(575px, 85vw);
}
#header-elements {
max-width: 575px;
}
.grid {
grid-template-columns: 1fr;
}
.heading-8 {
margin-bottom: 20px;
font-size: 64px;
}
}
@media screen and (max-width: 767px) {
.heading-3.wrapped-compute.compute-gradiant {
-webkit-text-fill-color: transparent;
background-image: linear-gradient(90deg, #f6c415, #f6c41533);
-webkit-background-clip: text;
background-clip: text;
margin-bottom: 20px;
display: block;
}
.ais-Hits-item {
margin-bottom: 1em;
width: calc(50% - 1rem);
}
.heading-3.unwrapped-compute.compute-gradiant {
display: none;
}
.heading-8 {
font-size: 64px;
}
}
@media screen and (max-width: 479px) {
.flex-block-2.purple {
flex-flow: column;
justify-content: space-around;
}
.heading-3 {
font-size: 48vw;
}
.heading-3.wrapped-compute {
display: block;
}
.heading-3.wrapped-compute.compute-gradiant {
-webkit-text-fill-color: transparent;
background-image: linear-gradient(90deg, #f6c415, #f6c41533);
-webkit-background-clip: text;
background-clip: text;
min-height: 48vw;
margin-top: 0;
margin-bottom: 10px;
overflow-y: hidden;
}
.heading-3.unwrapped-compute {
display: none;
}
.text-block {
font-size: 6vw;
}
}