-
-
-
404
-
Page not found :(
-
The requested page could not be found.
+
+
+
404
+
+
Page not found :(
+
diff --git a/_includes/header.html b/_includes/header.html
index 9ed0015..bc092d0 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -1,4 +1,4 @@
-
\ No newline at end of file
diff --git a/_scss/helpers/utilities.scss b/_scss/helpers/utilities.scss
index 3319ac9..83c2753 100644
--- a/_scss/helpers/utilities.scss
+++ b/_scss/helpers/utilities.scss
@@ -21,8 +21,6 @@ body {
}
.main-area {
- min-width: 375px;
- max-width: 500px;
margin: 0 auto;
overflow: hidden;
}
diff --git a/_scss/pages/home.scss b/_scss/pages/home.scss
index 6b61e5c..5b6d5b5 100644
--- a/_scss/pages/home.scss
+++ b/_scss/pages/home.scss
@@ -2,12 +2,11 @@
// Body Styles
// -------------------------
body {
- background-color: $gold;
- background-image: url("/assets/images/btr-texture.png");
- background-size: 170px;
+ background-color: #FFFCEC;
min-height: 100vh;
}
+
// -------------------------
// Link Styles
// -------------------------
@@ -34,19 +33,34 @@ a:active {
.darklink:link {
color: grey;
}
-.darklink:visited {
- color: grey;
-}
.darklink:hover {
color: grey;
}
.darklink:active {
color: grey;
}
+
+
// -------------------------
-// Header Styles
+// Content Styles
// -------------------------
-.header-area {
+.container {
+ width: 100%;
+ max-width: 400px;
+ margin: 0 auto;
+}
+
+.header {
+ position: relative;
+ background-color: $gold;
+ background-image: url("/assets/images/btr-texture.png");
+ background-size: 170px;
+ padding: 0 0 100px 0;
+ text-align: center;
+ border-radius: 0 0 20px 20px;
+ z-index: 1;
+
+ // Language selector
&-wrapper {
display: flex;
align-items: center;
@@ -54,7 +68,6 @@ a:active {
flex-direction: column;
}
.header-menu {
- margin-top: 20px;
&-list {
padding-left: 0;
list-style: none;
@@ -64,160 +77,63 @@ a:active {
font-weight: 600;
}
&:not(:last-child) {
- margin-right: 45px;
+ margin: 10px;
}
}
}
}
+
}
+.header-content {
+ position: relative;
+ z-index: 2;
+}
-// -------------------------
-// Content Styles
-// -------------------------
-.content-area {
+.header-image {
+ width: 150px;
+}
+
+.header-title {
+ font-size: 1.5em;
+ color: #333;
+ margin: 20px 0;
+ font-weight: bold;
+}
+
+.content {
+ position: relative;
+ top: -100px;
+ padding: 20px;
+ z-index: 2;
+}
+
+.card {
background-color: white;
- // This makes the radius as large as a pill shape can be.
- border-top-left-radius: 9999px;
- border-top-right-radius: 9999px;
- border-bottom-left-radius: 9999px;
- border-bottom-right-radius: 9999px;
- padding-bottom: Min(50vw, 250px);
- &-topper {
- margin-top: 175px;
- // The content below the topper shouldn't be too high or too low.
- height: Min(Max(50vw, 175px), 250px);
- text-align: center;
- position:relative;
- // Keep Paddy just cresting the top.
- top: calc(-20px - Min(Max(50vw, 175px), 250px) * .3);
- .topper-img {
- width: 40%;
- height: auto;
- }
- .content-title {
- margin-top: 25px;
- margin-left: 15%;
- margin-right: 15%;
- font-size: 36px;
- font-weight: 800;
- @media (max-width: 500px) {
- font-size: 28px;
- }
- }
- }
- &-wrapper {
- margin-bottom: 30px;
- margin-left: 30px;
- margin-right: 30px;
- .content-subtitle {
- font-size: 20px;
- font-weight: bold;
- text-align: left;
- }
- .split-content {
- display: flex;
- }
- .left-content {
- width: 65%;
- }
- .right-content {
- width: 65%;
- }
- .right-bleed {
- width: 35%;
- img {
- width: calc(100% + 40px);
- }
- }
- .left-img {
- width: 35%;
- img {
- width: 80%;
- }
- }
- .content-text {
- text-align: left;
- }
- // Expander per: https://www.digitalocean.com/community/tutorials/css-collapsible
- input[type='checkbox'] {
- display:none;
- }
- .outlink {
- display: block;
- cursor: pointer;
- transition: all 0.5s ease-out;
- }
- .outlink::after {
- content: url("/assets/images/btr-carrot.svg");
- display: inline-block;
- vertical-align: middle;
- transform: rotate(90deg);
- }
- .lbl-toggle {
- display: block;
- cursor: pointer;
- transition: all 0.5s ease-out;
- }
- .lbl-toggle::after {
- content: url("/assets/images/btr-carrot.svg");
- display: inline-block;
- vertical-align: middle;
- transform: rotate(180deg);
- transition: transform .25s ease-out;
- }
- .content-expander {
- border-bottom-color: $light-gray;
- border-bottom-style: solid;
- border-bottom-width: 2px;
- padding: 10px;
- width: 100%;
- text-align: left;
- font-weight: 600;
- font-size: 14px;
- span {
- // Take up space so ::after is on the right
- display: inline-block;
- width: 94%;
- }
- }
- .toggle:checked + .lbl-toggle + .content-expanded {
- max-height: 100vh;
- overflow: visible;
- display: inherit;
- }
- .toggle:checked + .lbl-toggle::after {
- transform: rotate(360deg) translate(0, -2px);
- }
- .toggle:checked + .content-expander {
- border-bottom: none;
- }
- .content-expanded {
- max-height: 0px;
- display: none;
- overflow: hidden;
- transition: max-height .5s ease-in-out;
- width: 100%;
- padding: 0 10px 20px 10px;
- margin-bottom: 40px;
- margin-top: 5px;
- text-align: left;
- font-size: 13px;
- border-bottom-color: $light-gray;
- border-bottom-style: solid;
- border-bottom-width: 2px;
- }
- .content-img {
- img {
- margin-top: 10px;
- position: relative;
- left: -40px;
- // Bleed to the edges of the main section.
- width: calc(100% + 80px);
- height: auto;
- }
- }
- }
+ padding: 20px;
+ margin: 10px 0;
+ 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;
+}
+
+.card-icon {
+ width: 32px; /* Desired width */
+ height: 32px; /* Desired height */
+ margin-bottom: 10px;
+ object-fit: cover;
+}
+
+.card-icon-big {
+ width: 60px; /* Desired width */
+ height: 60px; /* Desired height */
+ margin-bottom: 10px;
+ object-fit: cover;
}
// -------------------------
diff --git a/assets/images/appstore-icon.png b/assets/images/appstore-icon.png
new file mode 100644
index 0000000..e24e203
Binary files /dev/null and b/assets/images/appstore-icon.png differ
diff --git a/assets/images/explore-icon.png b/assets/images/explore-icon.png
new file mode 100644
index 0000000..e601bd0
Binary files /dev/null and b/assets/images/explore-icon.png differ
diff --git a/assets/images/maps-icon.png b/assets/images/maps-icon.png
new file mode 100644
index 0000000..ccff574
Binary files /dev/null and b/assets/images/maps-icon.png differ
diff --git a/assets/images/message-icon.png b/assets/images/message-icon.png
new file mode 100644
index 0000000..3963f84
Binary files /dev/null and b/assets/images/message-icon.png differ
diff --git a/assets/images/paddy.svg b/assets/images/paddy.svg
new file mode 100644
index 0000000..6d42943
--- /dev/null
+++ b/assets/images/paddy.svg
@@ -0,0 +1,36 @@
+
diff --git a/index.html b/index.html
index fb13e42..f4342c7 100644
--- a/index.html
+++ b/index.html
@@ -4,84 +4,25 @@ layout: default
{% assign page_data = site.data.home %}
-
-
-
-
-
{% t butter_box_title %}
+
+ 
+ Explore
- 
- 
+ Message Board
- 
+ App store
- 
- 
+ Offline maps