new styles with placeholder EN text
This commit is contained in:
John Hess
parent
e24293429a
commit
d510942558
10 changed files with 135 additions and 254 deletions
|
|
@ -21,8 +21,6 @@ body {
|
|||
}
|
||||
|
||||
.main-area {
|
||||
min-width: 375px;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
// -------------------------
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue