StaticWebsite
/
static.iglou.eu
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Responsive mod

Browse Source 
Signed-off-by: Adrien Kara <adrien@iglou.eu>
master
Adrien Kara 5 months ago
parent 09a1457b34
commit 617bf61a23
Signed by: adrien
GPG Key ID: 605B69551C56DB62
1 changed files with 141 additions and 66 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 207
      pub/css/Monolith.css

207
pub/css/Monolith.css
Unescape View File

@ -623,16 +623,10 @@ body {
/* # Header */
.page_header {
position: fixed;
top: 0;
left: 0;
right: 0;
padding: var(--h-marge) var(--p-marge);
display: flex;
box-shadow: 0 0 .5em -.3em var(--c-gray);
justify-content: space-between;
background-color: var(--c-white);
z-index: 1000;
}
.header_logo {
@ -658,15 +652,7 @@ body {
}
.menu_entry.link {
color: var(--c-gray);
border: .1em solid transparent;
padding: 0 .5em;
display: inline-block;
position: relative;
transition: var(--t-duration) color ease-out;
line-height: 200%;
border-radius: var(--b-radius);
text-transform: capitalize;
display: none;
}
.menu_entry.link::after {
@ -705,16 +691,14 @@ body {
/* # Articles */
/* ## Primary */
#a_primary {
gap: 2em;
display: grid;
min-height: 100vh;
padding-top: calc(var(--h-size) + var(--h-marge) * 2 + 2em);
padding-top: 1em;
padding-bottom: 1em;
background-size: cover;
background-image: url(/media/header.svg);
background-repeat: no-repeat;
background-position: bottom center;
grid-template-rows: 1fr auto;
}
.hero {
@ -734,32 +718,14 @@ body {
}
.services_preview {
gap: 3em;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.services_preview__item {
box-shadow: 0 0 2em -.5em var(--c-lgray);
border-bottom: 2px solid var(--c-blue);
}
.services_preview__item_title {
text-decoration: unset;
display: none;
}
/* # Benefits */
#a_benefits {
gap: 4em;
display: grid;
grid-template-columns: 2fr 4fr;
}
/* ## Benefits */
#a_benefits {}
.benefits_reps {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
display: none;
}
.benefits_list {
@ -768,7 +734,6 @@ body {
padding: 0;
display: grid;
list-style: none;
grid-template-rows: repeat(5, 1fr);
}
.benefit_item {
@ -812,7 +777,7 @@ body {
display: none;
}
/* # FAQ */
/* ## FAQ */
.faq_title {
color: var(--c-dark);
font-weight: 600;
@ -869,9 +834,9 @@ body {
color: var(--c-blue);
}
/* # Contact/Map */
/* ## Contact/Map */
#a_contact {
margin: auto;
margin: 6em auto auto auto;
padding: 0;
position: relative;
}
@ -885,18 +850,11 @@ body {
}
.contact_info {
top: -2em;
left: 0;
bottom: -2em;
margin: 0;
padding: 2em 5vw 2em 1em;
padding: 1em;
display: flex;
position: absolute;
box-shadow: 0 0 0.5em var(--c-lgray);
border-radius: 0 var(--b-radius) var(--b-radius) 0;
flex-direction: column;
justify-content: space-evenly;
background-color: var(--c-light);
flex-wrap: wrap;
justify-content: space-around;
}
.contact_info__title {
@ -925,7 +883,6 @@ body {
.contact_info__item_content>.link {
color: var(--c-blue);
display: block;
text-align: center;
}
.contact_info__item:last-child>.contact_info__item_content {
@ -934,19 +891,16 @@ body {
/* # Footer */
#footer {
gap: 2em;
color: var(--c-white);
display: grid;
padding: 3.5em var(--p-marge) 1.5em var(--p-marge);
background-color: var(--c-blue);
background-size: 100%;
background-image: url(/media/footer.svg);
background-repeat: no-repeat;
background-position: center -15px;
grid-template-columns: repeat(3, 1fr);
}
.footer_logo {
height: 2em;
height: 4em;
text-align: center;
}
.footer_content {
@ -960,16 +914,137 @@ body {
}
.footer_social {
list-style: none;
display: flex;
justify-content: right;
padding: 0;
gap: 1em;
margin: 0;
padding: 0;
display: flex;
font-size: 2em;
gap: 1em;
list-style: none;
justify-content: center;
}
.footer_logo>.svg_icon,
.footer_social__item_link>.svg_icon {
fill: var(--c-white);
}
@media (min-width: 576px) {
/* # Header */
.page_header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
box-shadow: 0 0 .5em -.3em var(--c-gray);
}
.menu_entry.link {
color: var(--c-gray);
border: .1em solid transparent;
padding: 0 .5em;
display: inline-block;
position: relative;
transition: var(--t-duration) color ease-out;
line-height: 200%;
border-radius: var(--b-radius);
text-transform: capitalize;
}
/* # Articles */
/* ## Primary */
#a_primary {
gap: 2em;
padding-top: calc(var(--h-size) + var(--h-marge) * 2 + 2em);
grid-template-rows: 1fr auto;
}
.services_preview {
gap: 1em;
display: grid;
}
.services_preview__item {
box-shadow: 0 0 2em -.5em var(--c-lgray);
border-bottom: 2px solid var(--c-blue);
}
.services_preview__item_title {
text-decoration: unset;
}
/* ## Benefits */
#a_benefits {
gap: 2em;
display: grid;
grid-template-columns: 10em 1fr;
}
.benefits_reps {
width: 100%;
height: 100%;
display: initial;
object-fit: contain;
object-position: top;
}
/* ## Contact/Map */
.contact_info {
top: -2em;
left: 0;
bottom: -2em;
padding: 2em 5vw 2em 1em;
position: absolute;
box-shadow: 0 0 0.5em var(--c-lgray);
border-radius: 0 var(--b-radius) var(--b-radius) 0;
flex-direction: column;
justify-content: space-evenly;
background-color: var(--c-light);
}
.contact_info__item_content>.link {
text-align: center;
}
/* # Footer */
#footer {
background-size: 100%;
background-image: url(/media/footer.svg);
background-repeat: no-repeat;
background-position: center -15px;
}
}
@media (min-width: 992px) {
/* # Articles */
/* ## Primary */
.services_preview {
gap: 3em;
grid-template-columns: repeat(3, 1fr);
}
/* ## Benefits */
#a_benefits {
gap: 4em;
grid-template-columns: 2fr 4fr;
}
.benefits_reps {
object-position: center;
}
/* # Footer */
#footer {
grid-template-columns: repeat(3, 1fr);
}
.footer_logo {
height: 2em;
}
.footer_social {
justify-content: right;
}
}
Write Preview
Loading…
Cancel
Save