From b00cc94e732b673cea8c06d31d208822b9d795d5 Mon Sep 17 00:00:00 2001 From: John Hess Date: Tue, 25 Jun 2024 12:37:39 -0500 Subject: [PATCH] responsive cards --- _includes/header.html | 26 +++------- _scss/pages/home.scss | 95 +++++++++++++++++++++--------------- assets/images/caret-down.svg | 4 ++ assets/images/globe.svg | 6 +++ index.html | 45 ++++++++--------- 5 files changed, 93 insertions(+), 83 deletions(-) create mode 100644 assets/images/caret-down.svg create mode 100644 assets/images/globe.svg diff --git a/_includes/header.html b/_includes/header.html index 7d673a4..e0565fd 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,21 +1,11 @@ -
-
-
-
- -
+
+
+ Paddy, the Butter Box Mascot +
{% t site_name %}
+
+ language selector icon + {{ site.lang | upcase }} +
-
- Paddy, the Butter Box Mascot -
{% t butter_box_title %}
-
\ No newline at end of file diff --git a/_scss/pages/home.scss b/_scss/pages/home.scss index 9a74dc7..99205ff 100644 --- a/_scss/pages/home.scss +++ b/_scss/pages/home.scss @@ -46,52 +46,54 @@ a:active { // ------------------------- .container { width: 100%; - max-width: 400px; + max-width: 1144px; margin: 0 auto; } .header { - position: relative; - background-color: $gold; - // Set background image in HTML so we can use site.baseurl - background-size: 170px; - padding: 0 0 100px 0; - text-align: center; - border-radius: 0 0 20px 20px; - z-index: 1; + height: 48px; + // center content vertically + display: flex; + align-items: center; - // Language selector - &-wrapper { + .header-container { display: flex; align-items: center; - justify-content: space-between; - flex-direction: column; - } - .header-menu { - &-list { - padding-left: 0; - list-style: none; - li { - display: inline-block; - &.active { - font-weight: 600; - } - &:not(:last-child) { - margin: 10px; - } - } - } + width: 100%; + padding: 0 20px; } + .title { + text-align: left; + font-size: 14; + font-weight: 600; + margin: auto; + width: -webkit-fill-available; + } + + .language-selector { + align-items: center; + background-color: #F4F3F2; + border-radius: 16px; + display: flex; + height: 32px; + padding: 0 10px; + width: 100px; + } + + .language-code { + margin: 0 8px; + } } .header-content { position: relative; - z-index: 2; } .header-image { - width: 150px; + height: 28px; + width: 28px; + margin-right: 20px; } .header-title { @@ -102,24 +104,39 @@ a:active { } .content { - position: relative; - top: -100px; padding: 20px; - z-index: 2; +} + +.card-set { + display: grid; + grid-template-columns: repeat(2, 1fr); /* Default to 2 columns */ + gap: 10px; /* Adjust the gap between the cards */ +} + +@media (min-width: 900px) { + .card-set { + grid-template-columns: repeat(4, 1fr); /* 4 columns for larger screens */ + } +} + +h1.homepage-title { + margin: 30px 0; } .card { + align-items: center; background-color: white; - padding: 20px; - margin: 10px 0; + border: 1px solid #E1E1DE; border-radius: 10px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - text-align: center; - font-size: 1.2em; color: #333; display: flex; flex-direction: column; - align-items: center; + font-size: 16px; + height: 160px; + justify-content: center; + margin: 10px 0; + padding: 20px; + text-align: center; } .card-icon { diff --git a/assets/images/caret-down.svg b/assets/images/caret-down.svg new file mode 100644 index 0000000..187d202 --- /dev/null +++ b/assets/images/caret-down.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/images/globe.svg b/assets/images/globe.svg new file mode 100644 index 0000000..fe1e5aa --- /dev/null +++ b/assets/images/globe.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 357593c..3d1dd99 100644 --- a/index.html +++ b/index.html @@ -6,35 +6,28 @@ layout: default
- -
- -
\ No newline at end of file +
\ No newline at end of file