Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit 28ac2808 authored by Martin Déclert's avatar Martin Déclert :cd:
Browse files

Responsive

parent 8a0078c8
No related branches found
No related tags found
No related merge requests found
......@@ -14,6 +14,7 @@
body {
width: 100%;
min-height: 100vh;
}
h1, h2, h3 {
......@@ -34,7 +35,7 @@ section h3 {
header {
position: relative;
margin-top: 2rem;
padding-top: 2rem;
margin-bottom: 12rem;
height: 686px;
}
......@@ -115,6 +116,45 @@ header nav a:not(:last-child) {
header nav a:hover {
color: #0A5797;
}
@media all and (max-width: 1232px) {
header {
padding: 0 1rem;
margin-top: 1rem;
}
}
@media all and (max-width: 832px) {
header {
height: 500px;
}
header > img {
width: 75%;
}
header .right .content {
display: flex;
flex-direction: column;
justify-content: center;
}
}
@media all and (max-width: 553px) {
header .flex-wrapper {
grid-template-columns: 1fr;
}
header .flex-wrapper > .left {
display: none;
}
header .flex-wrapper .right h1 {
font-size: 1.75rem;
}
header .flex-wrapper .right .content {
width: 100%;
}
header nav {
right: 1rem;
}
header nav a:not(:last-child) {
margin-right: 3rem;
}
}
.home-page header nav .home-link {
text-decoration: underline;
......@@ -125,7 +165,7 @@ header nav a:hover {
background-position: right;
}
.home-page .hello-section .content {
width: 700px;
max-width: 700px;
margin-top: 0.5rem;
}
.home-page .hello-section .content .paragraph {
......@@ -137,7 +177,6 @@ header nav a:hover {
display: block;
}
.home-page .skills-section {
height: 346px;
margin-top: 4rem;
background-image: url("/assets/backgrounds/skills-bg.jpg");
background-repeat: no-repeat;
......@@ -167,6 +206,16 @@ header nav a:hover {
text-align: center;
margin-top: 1rem;
}
@media all and (max-width: 989px) {
.home-page section.skills-section .content {
grid-template-columns: repeat(2, 1fr);
}
}
@media all and (max-width: 680px) {
.home-page .skills-section .content {
grid-template-columns: repeat(1, 1fr) !important;
}
}
.resume-page header nav .resume-link {
text-decoration: underline;
......@@ -177,6 +226,11 @@ header nav a:hover {
background-repeat: no-repeat;
background-position: right;
}
@media all and (max-width: 989px) {
.resume-page .pro-section .content {
background-image: none !important;
}
}
.resume-page .pro-section .content .experience {
margin-bottom: 2rem;
max-width: 700px;
......@@ -212,6 +266,10 @@ header nav a:hover {
.contact-page .toast.toast-error {
color: #842029;
}
.contact-page header {
height: auto !important;
margin-bottom: 14rem;
}
.contact-page header nav .contact-link {
text-decoration: underline;
}
......@@ -223,6 +281,10 @@ header nav a:hover {
background: #0F3342;
padding: 4rem;
}
.contact-page .content * {
z-index: 100000;
position: relative;
}
.contact-page .content #email-form .input-wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
......@@ -252,6 +314,17 @@ header nav a:hover {
margin-top: 1rem;
cursor: pointer;
}
@media all and (max-width: 833px) {
.contact-page .content #email-form .input-wrapper {
grid-template-columns: repeat(1, 1fr);
}
.contact-page .content #email-form .input-wrapper .right {
margin-top: 1rem;
}
.contact-page .content #email-form .input-wrapper .right textarea {
height: 100px;
}
}
.contact-page .content .social {
margin-top: 4rem;
}
......@@ -261,8 +334,18 @@ header nav a:hover {
.contact-page .content .social .networks {
margin-top: 1rem;
}
.contact-page .content .social .networks a {
text-decoration: none;
}
.contact-page .content .social .networks a:first-child {
margin-right: 3rem;
}
@media all and (max-width: 989px) {
section {
padding: 0 1rem;
background-image: none !important;
}
}
/*# sourceMappingURL=main.css.map */
{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/atoms/header.scss","../scss/atoms/home.scss","../scss/atoms/resume.scss","../scss/atoms/contact.scss"],"names":[],"mappings":"AAAQ;AAER;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI;;;AAIR;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AC9CA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAMhB;EACI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;;;AC9ER;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;;AAIR;EACI;EACA;EACA;;;ACzDZ;EACI;;AAKJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;;AAOZ;EACI;;AAEA;EACI;EACA;;AAEA;EACI;;;ACjChB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAKJ;EACI;;AAIR;EACI;EACA;;AAGJ;EACI;EACA;;AAGI;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;;AAEA;EACI;;AAGJ;EACI;;AAEA;EACI","file":"main.css"}
\ No newline at end of file
{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/atoms/header.scss","../scss/atoms/home.scss","../scss/atoms/resume.scss","../scss/atoms/contact.scss"],"names":[],"mappings":"AAAQ;AAER;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI;;;AAIR;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AC/CA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAMhB;EACI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;;AAKZ;EArFJ;IAsFQ;IACA;;;AAGJ;EA1FJ;IA2FQ;;EAEA;IACI;;EAGJ;IACI;IACA;IACA;;;AAIR;EACI;IACI;;EAEA;IACI;;EAIA;IACI;;EAGJ;IACI;;EAKZ;IACI;;EAEA;IACI;;;;AC7HR;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAMhB;EACI;IACI;;;AAIR;EACI;IACI;;;;ACtEJ;EACI;;AAKJ;EACI;EACA;EACA;EACA;;AAEA;EANJ;IAOQ;;;AAGJ;EACI;EACA;;AAEA;EACI;;AAOZ;EACI;;AAEA;EACI;EACA;;AAEA;EACI;;;ACrChB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAIR;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;;AAIA;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;IACI;;EAEA;IACI;;EAEA;IACI;;;AAOpB;EACI;;AAEA;EACI;;AAGJ;EACI;;AAEA;EACI;;AAEA;EACI;;;AJrDxB;EACI;IACI;IACA","file":"main.css"}
\ No newline at end of file
......@@ -20,6 +20,9 @@
}
header {
height: auto!important;
margin-bottom: 14rem;
nav .contact-link {
text-decoration: underline;
}
......@@ -34,6 +37,11 @@
background: #0F3342;
padding: 4rem;
* {
z-index: 100000;
position: relative;
}
#email-form {
.input-wrapper {
display: grid;
......@@ -69,6 +77,20 @@
margin-top: 1rem;
cursor: pointer;
}
@media all and (max-width: 833px) {
.input-wrapper {
grid-template-columns: repeat(1, 1fr);
.right {
margin-top: 1rem;
textarea {
height: 100px;
}
}
}
}
}
.social {
......@@ -81,8 +103,12 @@
.networks {
margin-top: 1rem;
a:first-child {
margin-right: 3rem;
a {
text-decoration: none;
&:first-child {
margin-right: 3rem;
}
}
}
}
......
......@@ -82,4 +82,51 @@ header {
}
}
}
@media all and (max-width: 1232px) {
padding: 0 1rem;
margin-top: 1rem;
}
@media all and (max-width: 832px) {
height: 500px;
& > img {
width: 75%;
}
.right .content {
display: flex;
flex-direction: column;
justify-content: center;
}
}
@media all and (max-width: 553px) {
.flex-wrapper {
grid-template-columns: 1fr;
& > .left {
display: none;
}
.right {
h1 {
font-size: 1.75rem;
}
.content {
width: 100%;
}
}
}
nav {
right: 1rem;
a:not(:last-child) {
margin-right: 3rem;
}
}
}
}
......@@ -11,7 +11,7 @@
background-position: right;
.content {
width: 700px;
max-width: 700px;
margin-top: .5rem;
.paragraph {
......@@ -27,7 +27,6 @@
}
.skills-section {
height: 346px;
margin-top: 4rem;
background-image: url('/assets/backgrounds/skills-bg.jpg');
background-repeat: no-repeat;
......@@ -62,4 +61,16 @@
}
}
}
@media all and (max-width: 989px) {
section.skills-section .content {
grid-template-columns: repeat(2, 1fr);
}
}
@media all and (max-width: 680px) {
.skills-section .content {
grid-template-columns: repeat(1, 1fr)!important;
}
}
}
......@@ -12,6 +12,10 @@
background-repeat: no-repeat;
background-position: right;
@media all and (max-width: 989px) {
background-image: none!important;
}
.experience {
margin-bottom: 2rem;
max-width: 700px;
......
......@@ -15,6 +15,7 @@
body {
width: 100%;
min-height: 100vh;
}
h1, h2, h3 {
......@@ -36,7 +37,7 @@ section {
header {
position: relative;
margin-top: 2rem;
padding-top: 2rem;
margin-bottom: 12rem;
height: 686px;
}
......@@ -51,4 +52,11 @@ footer {
@import 'atoms/header';
@import 'atoms/home';
@import 'atoms/resume';
@import 'atoms/contact';
\ No newline at end of file
@import 'atoms/contact';
@media all and (max-width: 989px) {
section {
padding: 0 1rem;
background-image: none!important;
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment