Difference between revisions of "Widget:Homepage"

From LINKS Community Center
Jump to: navigation, search
Line 3: Line 3:
 
         #hp-wrapper { font-family: 'Open Sans'; }
 
         #hp-wrapper { font-family: 'Open Sans'; }
 
         #hp-heading {
 
         #hp-heading {
             padding: .5em;
+
             padding: 1em;
 
             margin-bottom: 8em;
 
             margin-bottom: 8em;
 
             background:
 
             background:
Line 14: Line 14:
 
         }
 
         }
 
         .loaded #hp-heading { clip-path: inset(0); }
 
         .loaded #hp-heading { clip-path: inset(0); }
         #hp-heading h1 { font-family: 'Raleway'; font-size: 5em; margin-bottom: .5em; }
+
         #hp-heading h1 { font-family: 'Raleway'; font-size: 3.7em; margin-bottom: .5em; }
 
         #hp-heading h1 span {
 
         #hp-heading h1 span {
 
             display: block;
 
             display: block;
Line 26: Line 26:
 
         #hp-heading h1 span:nth-child(2) { font-weight: 500; transition-delay: 400ms; }
 
         #hp-heading h1 span:nth-child(2) { font-weight: 500; transition-delay: 400ms; }
 
         #hp-heading h1 span:nth-child(3) { font-weight: 100; transition-delay: 500ms; }
 
         #hp-heading h1 span:nth-child(3) { font-weight: 100; transition-delay: 500ms; }
         #hp-heading .hp-lead { font-size: 2em; font-weight: 300; margin-bottom: 2em; opacity: 0; transition: all 500ms ease-in-out 1000ms; }
+
         #hp-heading .hp-lead { font-size: 1.4em; font-weight: 300; margin-bottom: 2em; opacity: 0; transition: all 500ms ease-in-out 1000ms; }
 
         .loaded #hp-heading .hp-lead { opacity: .95; }
 
         .loaded #hp-heading .hp-lead { opacity: .95; }
 
         .hp-large-button {
 
         .hp-large-button {
 
             display: inline-block;
 
             display: inline-block;
 
             font-weight: 600;
 
             font-weight: 600;
             font-size: 1.6em;
+
             font-size: 1.3em;
 
             padding: .5em;
 
             padding: .5em;
 
             border: 1px solid rgba(0, 0, 0, .9);
 
             border: 1px solid rgba(0, 0, 0, .9);
Line 72: Line 72:
 
         @media screen and (min-width: 992px) {
 
         @media screen and (min-width: 992px) {
 
             #hp-heading { padding: 3em; }
 
             #hp-heading { padding: 3em; }
             #hp-heading .hp-lead { max-width: 50%; }
+
            #hp-heading h1 { font-size: 5em; }
 +
             #hp-heading .hp-lead { max-width: 50%; font-size: 2em; }
 +
            .hp-large-button { font-size: 1.6em; }
 
         }
 
         }
 
     </style>
 
     </style>

Revision as of 14:57, 24 May 2022

Development verstion of the DCT Homepage.
Not ready for production!