From 2aa56182a33f58ef454abbe0968319e3dcc52c93 Mon Sep 17 00:00:00 2001 From: Isabelle Date: Tue, 7 Nov 2023 22:02:00 +0000 Subject: [PATCH] Worked on the responsiveness on the phone and small laptops --- index.html | 8 +++++- sass/main.scss | 68 +++++++++++++++++++++++++++++++++++++----------- src/main.css | 44 +++++++++++++++++++++++++++++-- src/main.css.map | 2 +- 4 files changed, 103 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index bd15cf0..e001cb1 100644 --- a/index.html +++ b/index.html @@ -51,10 +51,14 @@

Saint of the Day

notion logo widget +

Add floral corners?

- + + + +
@@ -63,6 +67,8 @@

Saint of the Day

+
+ diff --git a/sass/main.scss b/sass/main.scss index fe293e7..abd1adb 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -15,13 +15,16 @@ body { padding: 20px 10px; box-shadow: 0 2px 3px 0px rgba(94, 68, 68, 0.224); - + .hrLine { + border: none; + border-top: 2px dotted black; + width : 40%; + margin: 10px 0 + } .title_container { @include flex(column); gap: 5px; - margin-bottom: 10px; - h1 { font-family: "Bacasime Antique", serif; @@ -40,14 +43,17 @@ body { } } - .flower_container{ + .flower_container { @include flex(acen); gap: 10px; div { @include flex(acen); - gap: 5px; + gap: 5px; + input[type="radio"] { + accent-color: #cc6368; + } } } @@ -68,7 +74,7 @@ body { &:hover, &:focus, - &:active { + &:active { background-color: #fdf0ff; } border-radius: 10px; @@ -76,7 +82,7 @@ body { -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; -} + } } footer { @@ -84,20 +90,19 @@ body { text-decoration: underline wavy #d89195; color: #cc6368; font-weight: bold; - + &:hover { - color: #c89d9f; + color: #d67fa3; } } } - border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; -} + } .card_wrapper { // background-color: #f0dfd7; @@ -155,7 +160,6 @@ body { border: 1px solid black; .header { - // background-color: rgb(162, 112, 104); width: 100%; border-top-right-radius: 10px; border-top-left-radius: 10px; @@ -234,7 +238,7 @@ body { background-color: #ffffff; cursor: url(https://cur.cursors-4u.net/symbols/sym-1/sym48.cur), auto !important; box-shadow: 0 2px 3px 0px rgba(94, 68, 68, 0.465); - + &:hover { background-color: #f0d7d8b9; } @@ -251,8 +255,6 @@ body { } } - - border-radius: 10%; -webkit-border-radius: 10%; -moz-border-radius: 10%; @@ -296,3 +298,39 @@ body { } } } + +/* Phones */ +@media screen and (max-width: 500px) { + body { + margin: 60px 0; + + .options_container { + width: 80%; + } + } +} + +/* Large Screens - Laptop & Computer */ +@media screen and (min-width: 1201px) and (max-width: 1600px) { + body { + background-color: blueviolet; + + .card_wrapper { + margin-top: 10px; + transform: scale(0.8); + -webkit-transform: scale(0.8); + -moz-transform: scale(0.8); + -ms-transform: scale(0.8); + -o-transform: scale(0.8); + } + + .options_container { + margin-top: -50px; + transform: scale(0.8); + -webkit-transform: scale(0.8); + -moz-transform: scale(0.8); + -ms-transform: scale(0.8); + -o-transform: scale(0.8); + } + } +} diff --git a/src/main.css b/src/main.css index ed77a6c..77ddc9c 100644 --- a/src/main.css +++ b/src/main.css @@ -31,13 +31,18 @@ body .options_container { -ms-border-radius: 10px; -o-border-radius: 10px; } +body .options_container .hrLine { + border: none; + border-top: 2px dotted black; + width: 40%; + margin: 10px 0; +} body .options_container .title_container { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 5px; - margin-bottom: 10px; } body .options_container .title_container h1 { font-family: "Bacasime Antique", serif; @@ -64,6 +69,9 @@ body .options_container .flower_container div { align-items: center; gap: 5px; } +body .options_container .flower_container div input[type=radio] { + accent-color: #cc6368; +} body .options_container .input_wrapper { display: flex; justify-content: center; @@ -96,7 +104,7 @@ body .options_container footer a { font-weight: bold; } body .options_container footer a:hover { - color: #c89d9f; + color: #d67fa3; } body .card_wrapper { background-color: #f0d7d8; @@ -276,4 +284,36 @@ body .card_wrapper .wrapper .footer { } body .card_wrapper .wrapper .footer h2 { font-family: "Bacasime Antique", serif; +} + +/* Phones */ +@media screen and (max-width: 500px) { + body { + margin: 60px 0; + } + body .options_container { + width: 80%; + } +} +/* Large Screens - Laptop & Computer */ +@media screen and (min-width: 1201px) and (max-width: 1600px) { + body { + background-color: blueviolet; + } + body .card_wrapper { + margin-top: 10px; + transform: scale(0.8); + -webkit-transform: scale(0.8); + -moz-transform: scale(0.8); + -ms-transform: scale(0.8); + -o-transform: scale(0.8); + } + body .options_container { + margin-top: -50px; + transform: scale(0.8); + -webkit-transform: scale(0.8); + -moz-transform: scale(0.8); + -ms-transform: scale(0.8); + -o-transform: scale(0.8); + } }/*# sourceMappingURL=main.css.map */ \ No newline at end of file diff --git a/src/main.css.map b/src/main.css.map index 27b57da..af59f89 100644 --- a/src/main.css.map +++ b/src/main.css.map @@ -1 +1 @@ -{"version":3,"sources":["../sass/_miscs.scss","main.css","../sass/main.scss"],"names":[],"mappings":"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","file":"main.css"} \ No newline at end of file +{"version":3,"sources":["../sass/_miscs.scss","main.css","../sass/main.scss"],"names":[],"mappings":"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","file":"main.css"} \ No newline at end of file