godot/KWeb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

flex monstrosity

Browse Source
This commit is contained in:
godot 2024-01-20 10:31:11 +01:00
parent 08de0f0fe0
commit a9d52aa766
2 changed files with 23 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
basic.css
View File

@ -3,14 +3,12 @@
max-width: 64em; max-width: 64em;
flex-grow: 1; flex-grow: 1;
max-width: 64em; max-width: 64em;
align-items: center;
} }
body { body {
margin: 0px; margin: 0px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
} }
header{ header{
@ -19,9 +17,10 @@ header{
background-color: #2867af; background-color: #2867af;
width: 100vw; width: 100vw;
display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
display: flex;
} }
@ -58,24 +57,27 @@ header > .wrapper > .title{
font-weight: bold; font-weight: bold;
} }
body > .main {
display: flex;
flex-direction: row;
width: 100vw;
align-items: center;
align-content: center;
}
body > .main > .wrapper{ body > .main > .wrapper{
background-color: white; background-color: white;
flex-direction: column; flex-direction: column;
justify-content: center;
} }
@media screen and (min-width: 640em) { #@media screen and (min-width: 640em) {
body > .main > .ad { body > .ad {
flex-grow: 1; background-color: red;
background-color: red;` position: absolute;
z-index: 1;
width: 100vw;
height: 100vh;
} }
#}
.main {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
} }
article{ article{
@ -88,8 +90,6 @@ article{
text-overflow: hidden; text-overflow: hidden;
white-space: normal; white-space: normal;
text-overflow: ellipsis; text-overflow: ellipsis;
max-height: 40vh;
} }
article > .text{ article > .text{

10
index.html
View File

@ -16,9 +16,10 @@
</div> </div>
</div> </div>
</header> </header>
<div class="main">
<div class="ad"></div> <div class="ad"></div>
<div class="wrapper">
<div class="main">
<div class="wrapper">
<article><div class="text">Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis. <article><div class="text">Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
</div> </div>
<div class="img"> <div class="img">
@ -66,10 +67,7 @@
</div> </div>
<div class="ad">
</div>
</div> </div>
<footer> <footer>