Start9/start9.com
2
0
Fork 0
mirror of https://github.com/Start9Labs/start9.com.git synced 2026-03-30 20:14:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

safari target: additional stuff

Browse Source
This commit is contained in:
Spencer Flagg
2022-10-07 17:53:44 +02:00
parent 081e066553
commit b83334ac6f
1 changed files with 40 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/assets/styles/be-your-own.scss
View File

@@ -1,7 +1,9 @@
@media screen and (min-width: 900px) { @media screen and (min-width: 900px) {
#be-your-own { --size: 3rem; #be-your-own {
--size: 3rem;
--rows-above: 2; --rows-above: 2;
--rows-height: 7;} --rows-height: 7;
}
} }
@media screen and (max-width: 1300px) { @media screen and (max-width: 1300px) {
@@ -9,16 +11,16 @@
--rows-above: 1; --rows-above: 1;
--rows-height: 3; --rows-height: 3;
} }
.service__content{ .service__content {
justify-content: center !important; justify-content: center !important;
} }
.service__link{ .service__link {
margin: 10rem 0 0 0 !important; margin: 10rem 0 0 0 !important;
flex-direction: row !important; flex-direction: row !important;
} }
.service__info{ .service__info {
margin: 0 0 0 1rem !important; margin: 0 0 0 1rem !important;
&::before{ &::before {
top: 25% !important; top: 25% !important;
left: calc(-4rem + 2px) !important; left: calc(-4rem + 2px) !important;
align-self: flex-start !important; align-self: flex-start !important;
@@ -29,11 +31,12 @@
border-left: 2rem transparent solid !important; border-left: 2rem transparent solid !important;
} }
} }
} }
@media screen and (max-width: 900px) { @media screen and (max-width: 900px) {
#be-your-own { --size: 2rem; } #be-your-own {
--size: 2rem;
}
} }
#be-your-own { #be-your-own {
@@ -76,7 +79,11 @@
align-items: center; align-items: center;
height: var(--size); height: var(--size);
padding: var(--p); padding: var(--p);
background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)); background: linear-gradient(
90deg,
rgba(255, 255, 255, 0.08),
rgba(255, 255, 255, 0.02)
);
border-bottom: 0.5rem transparent solid; border-bottom: 0.5rem transparent solid;
} }
#ticker__window { #ticker__window {
@@ -141,7 +148,7 @@
top: 0; top: 0;
bottom: 0; bottom: 0;
.service__link{ .service__link {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@@ -149,21 +156,22 @@
margin-top: 2rem; margin-top: 2rem;
margin-right: 5rem; margin-right: 5rem;
transition: var(--t-simple); transition: var(--t-simple);
&:hover{ &:hover {
transform: scale(1.05); transform: scale(1.05);
} }
} }
.service__image{ .service__image {
width: 12rem; width: 12rem;
&.service__image--gitea, &.service__image--photoview{ &.service__image--gitea,
&.service__image--photoview {
background-color: var(--c-1); background-color: var(--c-1);
padding: 1rem; padding: 1rem;
box-sizing: border-box; box-sizing: border-box;
} }
} }
.service__info{ .service__info {
background-color: var(--c-text-accent); background-color: var(--c-text-accent);
width: 20ch; width: 20ch;
padding: 1rem; padding: 1rem;
@@ -173,10 +181,10 @@
flex-direction: column; flex-direction: column;
box-shadow: var(--sh-2); box-shadow: var(--sh-2);
&::before{ &::before {
position: absolute; position: absolute;
top: calc(-4rem + 2px); top: calc(-4rem + 2px);
content: ''; content: "";
display: block; display: block;
//width: 0; //width: 0;
//height: 0; //height: 0;
@@ -186,17 +194,17 @@
border-left: 2rem transparent solid; border-left: 2rem transparent solid;
align-self: center; align-self: center;
} }
*{ * {
color: var(--c-text-primary); color: var(--c-text-primary);
} }
p{ p {
font-size: .75rem; font-size: 0.75rem;
height: 4em; height: 4em;
overflow: hidden; overflow: hidden;
} }
} }
.service__bkg{ .service__bkg {
filter: opacity(0.25) blur(2rem); filter: opacity(0.25) blur(2rem);
width: 100%; width: 100%;
position: absolute; position: absolute;