Skip to content

Commit fc815e9

Browse files
MadelenaMadelena
authored
Fancy homepage (#35945)
1 parent 4e1f62d commit fc815e9

27 files changed

+978
-433
lines changed

‎sass/homeassistant/_overrides.scss

Lines changed: 216 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -444,16 +444,21 @@ header .breadcrumbs {
444444
h1 {
445445
font-family: $heading-font;
446446
-webkit-font-smoothing: antialiased;
447-
font-size: 1.33rem;
447+
font-size: 1.3125rem;
448448
font-weight: 600;
449449
letter-spacing: -0.012em;
450450
line-height: 40px;
451451
color: #212121;
452452
margin: -8px 0 0;
453+
454+
iconify-icon {
455+
margin-right: 8px;
456+
}
453457
}
454458

455459
&.text {
456460
padding: 24px;
461+
font-size: 1rem;
457462

458463
h1 {
459464
padding: 0px 0px 12px;
@@ -517,7 +522,7 @@ a.material-card:hover {
517522
.img {
518523
background-color: $grayLighter;
519524
width: calc(100%-8px);
520-
aspect-ratio: 120/63;
525+
// aspect-ratio: 120/63;
521526
background-size: cover;
522527
background-position: center;
523528
border-radius: 8px;
@@ -656,21 +661,34 @@ a.material-card:hover {
656661
.blog-date {
657662
white-space: nowrap;
658663
}
664+
ol {
665+
margin: 0;
666+
}
659667
}
660668

661669
.highlight-blog-post {
662-
font-size: 2rem;
663-
line-height: 1.15;
664-
padding: 15px;
665-
display: block;
670+
padding: 24px;
666671
text-decoration: none;
667672
color: white;
668-
transition: background-color 0.5s;
669-
background-color: #038fc7;
670-
671-
&.large {
672-
font-size: 2.25rem;
673-
line-height: 1.33333;
673+
transition: background-color 0.5s, box-shadow 0.5s;
674+
background-color: $primary-color;
675+
display: flex;
676+
padding: 20px 12px 20px 24px;
677+
align-items: center;
678+
gap: 10px;
679+
align-self: stretch;
680+
681+
p {
682+
font-size: 1rem;
683+
margin: 10px 0 0 0;
684+
685+
&.lead {
686+
font-family: $heading-font;
687+
font-size: 1.5rem;
688+
font-weight: 700;
689+
line-height: 1.15;
690+
margin-top: 0;
691+
}
674692
}
675693

676694
&:hover {
@@ -682,6 +700,71 @@ a.material-card:hover {
682700
}
683701
}
684702

703+
.highlight-detail-post {
704+
padding: 24px;
705+
text-decoration: none;
706+
color: white;
707+
transition: background-color 0.5s, box-shadow 0.5s;
708+
background-color: #006895;
709+
box-shadow: inset 0 0 64px #038fc7;
710+
font-size: 1.5rem;
711+
712+
.caption {
713+
padding-bottom: 24px;
714+
715+
p {
716+
font-family: $heading-font;
717+
font-size: 1.25rem;
718+
font-weight: 600;
719+
margin: 0;
720+
line-height: 1.2;
721+
722+
strong {
723+
font-size: 1.75rem;
724+
font-weight: 800;
725+
}
726+
}
727+
}
728+
729+
.detail-feature {
730+
display: flex;
731+
align-items: flex-start;
732+
gap: 16px;
733+
align-self: stretch;
734+
735+
p {
736+
font-size: 0.875rem;
737+
738+
&.lead {
739+
font-size: 1rem;
740+
margin-bottom: 4px;
741+
font-weight: 500;
742+
}
743+
}
744+
745+
iconify-icon {
746+
padding: 8px;
747+
border-radius: 50%;
748+
background: rgba(0, 0, 0, 0.15);
749+
color: white;
750+
}
751+
752+
}
753+
animation-name: box-shadow-color;
754+
animation-duration: 5s;
755+
animation-iteration-count: infinite;
756+
animation-direction: alternate;
757+
758+
@keyframes box-shadow-color {
759+
from {
760+
box-shadow: inset 0 0 64px hsl(197, 97%, 40%);
761+
}
762+
to {
763+
box-shadow: inset 0 0 64px hsl(159, 100%, 35%);
764+
}
765+
}
766+
}
767+
685768
.events {
686769
padding: 16px;
687770

@@ -726,15 +809,16 @@ a.material-card:hover {
726809

727810
.picture-promo {
728811
display: block;
729-
padding-top: 30%;
812+
padding-top: 33%;
730813
background-size: cover;
731814
background-position: center;
732815
text-decoration: none;
733816
border: none;
734817

735818
.caption {
736-
padding: 8px 12px 12px;
737-
background-color: rgba(0, 0, 0, 0.54);
819+
padding: 48px 24px 24px 24px;
820+
background: rgb(0,0,0);
821+
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
738822
color: white;
739823
border-bottom-left-radius: 16px;
740824
border-bottom-right-radius: 16px;
@@ -743,16 +827,19 @@ a.material-card:hover {
743827
align-items: center;
744828

745829
.title {
746-
font-size: 20px;
747-
font-weight: 400;
748-
line-height: 1.2em;
830+
font-family: $heading-font;
831+
font-size: 1.5rem;
832+
font-weight: 700;
833+
line-height: normal;
749834
}
750835

751836
.subtitle {
752-
margin-top: 4px;
753-
line-height: 1.4em;
754-
font-size: 12px;
837+
margin-top: 8px;
838+
line-height: 1.5rem;
839+
font-size: 1rem;
755840
font-weight: initial;
841+
text-shadow: 0px 4px 16px rgba(0, 0, 0, 0.33);
842+
opacity: .8;
756843
}
757844

758845
svg {
@@ -762,6 +849,21 @@ a.material-card:hover {
762849
min-width: 32px;
763850
}
764851
}
852+
853+
&.picture-top {
854+
padding-top: 0;
855+
padding-bottom: 33%;
856+
857+
.caption {
858+
padding: 24px 24px 48px 24px;
859+
background: rgb(0,0,0);
860+
background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
861+
border-top-left-radius: 16px;
862+
border-top-right-radius: 16px;
863+
border-bottom-left-radius: 0;
864+
border-bottom-right-radius: 0;
865+
}
866+
}
765867
}
766868

767869
.supported-brands {
@@ -781,8 +883,101 @@ a.material-card:hover {
781883
}
782884
}
783885

886+
.getting-started {
887+
text-align: center;
888+
889+
.badge {
890+
display: flex;
891+
padding: 2px 8px 2px 8px;
892+
align-items: flex-start;
893+
gap: 8px;
894+
border-radius: 4px;
895+
background: #E8E6F0;
896+
font-family: $heading-font;
897+
font-size: 1rem;
898+
font-weight: 700;
899+
text-transform: uppercase;
900+
}
901+
902+
.getting-started-grid {
903+
display: flex;
904+
padding: 48px 0 48px 24px;
905+
align-items: flex-start;
906+
gap: 24px;
907+
}
908+
909+
.getting-started-device {
910+
.content {
911+
display: flex;
912+
flex-direction: column;
913+
align-items: center;
914+
gap: 16px;
915+
916+
img {
917+
box-shadow: none;
918+
border: 0;
919+
}
920+
921+
h3 {
922+
font-size: 2rem;
923+
font-weight: 700;
924+
line-height: 133%;
925+
text-transform: none;
926+
letter-spacing: -.75px;
927+
margin: 0;
928+
}
929+
930+
p {
931+
font-size: 1rem;
932+
line-height: 1.5;
933+
opacity: .9;
934+
margin: 0;
935+
}
936+
}
937+
938+
.button {
939+
padding: 6px 20px;
940+
background: $primary-color;
941+
color: white;
942+
font-size: 1rem;
943+
text-transform: uppercase;
944+
}
945+
}
946+
947+
#HA_Yellow, #Raspberry_Pi {
948+
padding-top: 96px;
949+
}
950+
951+
#HA_Yellow .badge {
952+
color: $orange;
953+
}
954+
#HA_Green .badge {
955+
color: $green;
956+
}
957+
#Raspberry_Pi .badge {
958+
color: $primary-color;
959+
}
960+
961+
@media only screen and (max-width: $palm-end) {
962+
.getting-started-grid {
963+
flex-direction: column;
964+
}
965+
966+
.getting-started-device {
967+
padding-bottom: 64px;
968+
}
969+
970+
#HA_Yellow, #Raspberry_Pi {
971+
padding-top: 0;
972+
order: 2;
973+
}
974+
}
975+
}
976+
977+
784978
.sponsors-and-press {
785979
margin-top: 24px;
980+
text-align: center;
786981
}
787982

788983
.seen-press {
@@ -791,12 +986,6 @@ a.material-card:hover {
791986
gap: 24px;
792987
margin: 48px 0;
793988

794-
h2 {
795-
grid-column: 1/-1;
796-
margin: 0;
797-
text-align: center;
798-
}
799-
800989
a {
801990
aspect-ratio: 1;
802991
}
@@ -913,17 +1102,6 @@ dt:hover a.title-link {
9131102
}
9141103
}
9151104

916-
.hero-buttons {
917-
margin-bottom: 0;
918-
}
919-
920-
.hero-buttons a {
921-
margin: 0 30px 10px 0;
922-
923-
&:last-child {
924-
margin: 0;
925-
}
926-
}
9271105

9281106
// Article formatting
9291107

0 commit comments

Comments
 (0)