mirrors/VogelSocialMedia
1
0
Fork 0
mirror of https://github.com/bubblecup-12/VogelSocialMedia.git synced 2025-07-07 14:38:50 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

do intro

Browse source
This commit is contained in:
Niklas 2025-06-30 14:29:50 +02:00
parent 9acf08d933
commit fa8a031849
8 changed files with 182 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

115
code/frontend/src/pages/about.css
View file

@ -1,11 +1,15 @@
:root {
--margin-mobile: 2rem;
}
.mainbox {
/* TODO header height variablen anpassen sobald PR für header durch ist*/
margin-top: var(--Header-height);
min-height: calc(100vh - var(--Header-height));
min-width: 360px;
max-width: 100vw;
}
@media screen and (min-width: 768px) {
.mainbox {
min-width: 60rem;
min-height: 60rem;
margin-top: var(--Header-height);
}
}
@ -15,6 +19,62 @@
justify-content: start;
}
.intro {
box-sizing: border-box;
margin: 3vw;
}
.block {
max-width: calc(100vw-var(--margin-mobile));
display: grid;
grid-template-rows: 1fr auto;
align-items: center;
justify-content: space-between;
height: clamp(30vw, 45vh, 100%);
margin: 2vw;
vertical-align: center;
margin-block-end: 2rem;
}
.block2 {
display: grid;
grid-template-areas:
"text"
"pic";
grid-template-columns: 1fr;
}
.block2 .text1 {
grid-area: text;
}
.block2 .pic2 {
grid-area: pic;
justify-self: start;
}
.block .pic-justify {
justify-self: end;
}
.item {
max-width: 90vw;
max-height: 19rem;
}
.pic {
max-width: 80vw;
border-radius: var(--border-radius);
box-shadow: 0px 5px 8.9px 15px rgba(115, 116, 206, 0.25);
}
.text1 {
height: 100%;
color: white;
font-size: 4rem;
}
.text-start {
text-align: start;
}
.text-end {
text-align: end;
}
/* TODO Entfernen vor final*/
.test {
height: 100vh;
@ -22,3 +82,52 @@
color: aqua;
background-color: aquamarine;
}
@media screen and (min-width: 768px) {
.about-title {
flex-direction: row;
justify-content: start;
}
.intro {
box-sizing: border-box;
margin: 2rem;
}
.block {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
justify-content: space-between;
height: clamp(30vw, 45vh, 100%);
margin: 1rem;
vertical-align: center;
margin-block-end: 2rem;
}
.block2 {
grid-template-areas: "pic text";
grid-template-columns: auto 1fr;
align-items: center;
}
.item {
height: clamp(19rem, 30vw, 30vw);
max-height: none;
}
.text1 {
height: 100%;
color: white;
font-size: clamp(5rem, 8vw, 15vw);
display: flex;
align-items: center;
}
/* TODO Entfernen vor final*/
.test {
height: 100vh;
width: 100vw;
color: aqua;
background-color: aquamarine;
}
}