butter/butter-kanglam-ui
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

pixel pushing

Browse source
This commit is contained in:
John Hess 2022-10-10 16:00:01 -05:00
parent e6908a34bf
commit fe5a12592b
4 changed files with 23 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

2
_data/home.yml
View file

@ -2,7 +2,7 @@
# To specify per-language data, use the _i18n folder's yml files. # To specify per-language data, use the _i18n folder's yml files.
page_logo: '/assets/images/btr-logo.svg' page_logo: '/assets/images/btr-logo.svg'
app_tiles_image: '/assets/images/butter-collection-features-offline-essentials.svg' app_tiles_image: '/assets/images/btr-apps.png'
modal: modal:
butter_app_logo: '/assets/images/butter-app-icon-large.svg' butter_app_logo: '/assets/images/butter-app-icon-large.svg'

10
_scss/helpers/utilities.scss
View file

@ -21,6 +21,7 @@ body {
} }
.main-area { .main-area {
min-width: 375px;
max-width: 500px; max-width: 500px;
margin: 0 auto; margin: 0 auto;
overflow: hidden; overflow: hidden;
@ -72,14 +73,15 @@ body {
.btn-split { .btn-split {
display: inline-flex; display: inline-flex;
.btn-logo { .btn-logo {
border-right: 1pt; margin: auto 0px;
border-right-color: black;
border-right-style: solid;
height: 60px; height: 60px;
} }
.btn-text { .btn-text {
border-left: 1pt;
border-left-color: black;
border-left-style: solid;
text-align: left; text-align: left;
padding: 0px 20px; padding: 12px 20px;
height: fit-content; height: fit-content;
margin: auto; margin: auto;
.button-main-text { .button-main-text {

3
_scss/helpers/variables.scss
View file

@ -2,8 +2,7 @@
$white: #ffffff; $white: #ffffff;
$black: #000000; $black: #000000;
$dark-gray: #242424; $dark-gray: #242424;
$light-gray: #D9D9D9; $light-gray: #EEE;
$lighter-gray: #EEE;
// Brand colors // Brand colors
$gold: #FFDF3F; $gold: #FFDF3F;

27
_scss/pages/home.scss
View file

@ -77,10 +77,11 @@ a:active {
// ------------------------- // -------------------------
.content-area { .content-area {
background-color: white; background-color: white;
border-top-left-radius: 50vw; // This makes the radius as large as a pill shape can be.
border-top-right-radius: 50vw; border-top-left-radius: 9999px;
border-bottom-left-radius: 50vw; border-top-right-radius: 9999px;
border-bottom-right-radius: 50vw; border-bottom-left-radius: 9999px;
border-bottom-right-radius: 9999px;
padding-bottom: Min(50vw, 250px); padding-bottom: Min(50vw, 250px);
&-topper { &-topper {
margin-top: 175px; margin-top: 175px;
@ -93,6 +94,7 @@ a:active {
height: auto; height: auto;
} }
.content-title { .content-title {
margin-top: 25px;
margin-left: 15%; margin-left: 15%;
margin-right: 15%; margin-right: 15%;
font-size: 36px; font-size: 36px;
@ -103,7 +105,6 @@ a:active {
} }
} }
&-wrapper { &-wrapper {
margin-top: 30px;
margin-bottom: 30px; margin-bottom: 30px;
margin-left: 30px; margin-left: 30px;
margin-right: 30px; margin-right: 30px;
@ -155,7 +156,7 @@ a:active {
transition: transform .25s ease-out; transition: transform .25s ease-out;
} }
.content-expander { .content-expander {
border-bottom-color: $lighter-gray; border-bottom-color: $light-gray;
border-bottom-style: solid; border-bottom-style: solid;
border-bottom-width: 2px; border-bottom-width: 2px;
padding: 10px; padding: 10px;
@ -191,7 +192,7 @@ a:active {
margin-top: 5px; margin-top: 5px;
text-align: left; text-align: left;
font-size: 13px; font-size: 13px;
border-bottom-color: $lighter-gray; border-bottom-color: $light-gray;
border-bottom-style: solid; border-bottom-style: solid;
border-bottom-width: 2px; border-bottom-width: 2px;
} }
@ -199,20 +200,22 @@ a:active {
img { img {
margin-top: 10px; margin-top: 10px;
position: relative; position: relative;
left: -20vw; left: -40px;
width: 150%; // Bleed to the edges of the main section.
width: calc(100% + 80px);
height: auto;
} }
} }
} }
} }
// ------------------------- // -------------------------
// Footer Styles // Button Styles
// ------------------------- // -------------------------
.btn-android { .btn-android {
margin: 17.5px 15px 17.5px 0px; margin: 15px 15px 15px 0px;
height: 25px; height: 30px;
width: auto; width: auto;
} }