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

styling updates; still needs assets/

Browse source
This commit is contained in:
John Hess 2022-08-22 20:18:13 -05:00
parent e0f232f049
commit ddb9336a60
6 changed files with 159 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

142
_scss/pages/home.scss
View file

@ -11,22 +11,22 @@ body {
// -------------------------
a:link {
text-decoration: none;
color: white;
color: black;
}
a:visited {
text-decoration: none;
color: white;
color: black;
}
a:hover {
text-decoration: underline;
color: white;
color: black;
}
a:active {
text-decoration: underline;
color: white;
color: black;
}
.darklink:link {
@ -49,27 +49,10 @@ a:active {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 40px;
@media (max-width: 576px) {
flex-direction: column;
padding-top: 30px;
}
}
.header-logo {
display: flex;
align-items: center;
&-text {
margin-left: 15px;
p {
font-size: 21px;
font-weight: 700;
}
}
flex-direction: column;
}
.header-menu {
@media (max-width: 576px) {
margin-top: 20px;
}
margin-top: 20px;
&-list {
padding-left: 0;
list-style: none;
@ -91,33 +74,109 @@ a:active {
// Content Styles
// -------------------------
.content-area {
background-color: white;
border-top-left-radius: 50vw;
border-top-right-radius: 50vw;
border-bottom-left-radius: 50vw;
border-bottom-right-radius: 50vw;
padding-bottom: Min(50vw, 250px);
&-topper {
margin-top: 175px;
height: Min(50vw, 250px);
text-align: center;
.topper-img {
position: relative;
top: -170px;
}
.content-title {
position: relative;
top: -150px;
margin-left: 15%;
margin-right: 15%;
font-size: 36px;
font-weight: 800;
@media (max-width: 500px) {
font-size: 28px;
}
}
}
&-wrapper {
margin-top: 30px;
min-height: calc(100vh - 202px); // take up space above the footer
margin-bottom: 30px;
.content-title {
font-size: 42px;
font-weight: 800;
@media (max-width: 768px) {
font-size: 36px;
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-bleed {
width: 35%;
img {
height: 100%;
}
}
.content-text {
br {
@media (max-width: 768px) {
display: none;
}
}
text-align: left;
}
// Expander per: https://www.digitalocean.com/community/tutorials/css-collapsible
input[type='checkbox'] {
display:none;
}
.lbl-toggle {
display: block;
cursor: pointer;
transition: all 0.5s ease-out;
}
.lbl-toggle::before {
content: ' ';
display: inline-block;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid currentColor;
vertical-align: middle;
margin-right: .7rem;
transform: translateY(-2px);
transition: transform .5s ease-out;
}
.content-expander {
border-bottom-color: $light-gray;
border-bottom-style: solid;
border-bottom-width: 1px;
padding: 10px;
width: 100%;
text-align: left;
font-weight: 600;
font-size: 14px;
}
.toggle:checked + .lbl-toggle + .content-expanded {
max-height: 100vh;
overflow: visible;
}
.toggle:checked + .lbl-toggle::before {
transform: rotate(90deg) translateX(-3px);
}
.content-expanded {
max-height: 0px;
overflow: hidden;
transition: max-height .5s ease-in-out;
width: 100%;
margin-top: 20px;
text-align: left;
font-size: 13px;
}
.content-img {
margin: 55px 0 45px;
@media (max-width: 768px) {
margin: 40px 0;
}
img {
display: block;
margin: 0 auto;
max-width: 70%;
margin-top: 10px;
position: relative;
left: -20vw;
width: 150%;
}
}
}
@ -129,7 +188,6 @@ a:active {
// -------------------------
.footer-area {
font-family: $footer-font-family;
background-color: $shade-gold;
padding: 35px 0;
}