Difference between revisions of "MediaWiki:Tweeki.css"
From LINKS Community Center
Line 31: | Line 31: | ||
#lcc-footer { | #lcc-footer { | ||
width: 100%; | width: 100%; | ||
− | |||
− | |||
− | |||
− | |||
padding: 5em; | padding: 5em; | ||
font-size: 1rem; | font-size: 1rem; | ||
Line 41: | Line 37: | ||
color: #fff; | color: #fff; | ||
} | } | ||
− | #lcc-footer a { display: block; } | + | #lcc-footer-content { |
− | #lcc-footer .footer-links { grid-area: links; } | + | display: grid; |
− | #lcc-footer .footer-nav { grid-area: nav; } | + | grid-template: |
− | #lcc-footer .footer-legal { grid-area: legal; } | + | "links nav legal" |
− | #lcc-footer .footer-eu-logo { grid-area: eu-logo; } | + | "eu-logo eu-text eu-text"; |
− | #lcc-footer .footer-eu-text { grid-area: eu-text; } | + | } |
+ | #lcc-footer-content a { display: block; } | ||
+ | #lcc-footer-content .footer-links { grid-area: links; } | ||
+ | #lcc-footer-content .footer-nav { grid-area: nav; } | ||
+ | #lcc-footer-content .footer-legal { grid-area: legal; } | ||
+ | #lcc-footer-content .footer-eu-logo { grid-area: eu-logo; } | ||
+ | #lcc-footer-content .footer-eu-text { grid-area: eu-text; } | ||
/* LCC FOOTER END */ | /* LCC FOOTER END */ | ||
Revision as of 16:15, 24 May 2022
/* CSS placed here will affect users of the Tweeki skin */ :root { --links-blue: #1980c3; --links-cyan: #34b8b8; --links-grey: #415262; --links-orange: #ee7802; } /* TODO: Add static fallback fonts */ @supports (font-variation-settings: normal) { @font-face { font-family: 'Open Sans'; src: url('/resources/assets/fonts/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf') format("truetype supports variations"), url('/resources/assets/fonts/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf') format("truetype-variations"); font-weight: 300 800; font-stretch: 75% 100%; } @font-face { font-family: 'Raleway'; src: url('/resources/assets/fonts/Raleway/Raleway-VariableFont_wght.ttf') format("truetype supports variations"), url('/resources/assets/fonts/Raleway/Raleway-VariableFont_wght.ttf') format("truetype-variations"); font-weight: 100 900; } } /* LCC FOOTER START */ footer#footer.footer { padding: 0; } /* This is MediaWiki's own footer */ #lcc-footer { width: 100%; padding: 5em; font-size: 1rem; font-family: 'Open Sans'; background-color: var(--links-grey); color: #fff; } #lcc-footer-content { display: grid; grid-template: "links nav legal" "eu-logo eu-text eu-text"; } #lcc-footer-content a { display: block; } #lcc-footer-content .footer-links { grid-area: links; } #lcc-footer-content .footer-nav { grid-area: nav; } #lcc-footer-content .footer-legal { grid-area: legal; } #lcc-footer-content .footer-eu-logo { grid-area: eu-logo; } #lcc-footer-content .footer-eu-text { grid-area: eu-text; } /* LCC FOOTER END */ /* DCT PROFILE START */ @keyframes showRight { from { transform-origin: left; transform: scaleX(0); } to { transform-origin: left; transform: scaleX(1); } } @keyframes showDown { from { transform-origin: top; transform: scaleY(0); } to { transform-origin: top; transform: scaleY(1); } } @keyframes hideDown { from { transform-origin: bottom; transform: scaleY(1); } to { transform-origin: bottom; transform: scaleY(0); } } #dct-profile { display: grid; grid-template: "meta" "desc" "info" "func" "more"; font-family: 'Open Sans'; font-weight: 400; font-stretch: 100%; color: var(--links-grey); margin-bottom: 3em; clip-path: inset(0 0 100% 0); opacity: 0; transition: all 500ms ease-in-out; } body.loaded #dct-profile { clip-path: inset(0 0 0 0); opacity: 1; } /* TODO: Generalize link formatting later (remove #dct-profile) */ .skin-tweeki #content #dct-profile a.external { background: initial; padding: 0; text-decoration: none; border-bottom: 1px solid var(--links-blue); } .skin-tweeki #content #dct-profile a.external::after { content: "\1F865"; padding-left: .4em; display: inline-block; transition: all 300ms ease-in-out; } .skin-tweeki #content #dct-profile a.external:hover::after { transform: translate(15%, -15%); } #dct-profile h1, #dct-profile h2, #dct-profile h3, #dct-profile h4, #dct-profile h5, #dct-profile h6 { color: var(--links-blue); font-family: 'Raleway'; font-weight: 300; } #dct-profile h1 { font-weight: 900; } #dct-profile .dct-logo { height: 2em; width: auto; margin-right: 1em; } #dct-profile>section { box-sizing: border-box; padding: 2em 0 2em 2em; transition: all 500ms ease-in-out; transition-delay: 1000ms; } body.loaded #dct-profile>section { padding-left: 0; } #dct-profile .dct-meta { grid-area: meta; } #dct-profile .dct-desc { grid-area: desc; } #dct-profile .dct-info { grid-area: info; display: grid; grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); gap: 1em 1em; } #dct-profile .dct-info .country-flag { height: 1em; width: auto; } #dct-profile .dct-func { grid-area: func; } #dct-profile .dct-more { grid-area: more; } .anim-border { position: relative; } .anim-border::after { content: ""; display: block; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background-color: var(--links-blue); transform: scaleX(0); } .anim-border::before { content: ""; display: block; position: absolute; left: 0; top: 0; width: 2px; height: 100%; background-color: var(--links-blue); transform: scaleY(0); } body.loaded .anim-border::before { animation: showDown 500ms ease-in-out 500ms 1 normal forwards, hideDown 500ms ease-in-out 1000ms 1 normal forwards; } body.loaded .anim-border::after { animation: showRight 500ms ease-in-out 1000ms 1 normal forwards; } @media only screen and (orientation: landscape) { #dct-profile { grid-template: "meta meta" "desc info" "func info" "more info" / 2fr 1fr; } #dct-profile>section { box-sizing: border-box; padding: 2em; } #dct-profile .dct-info { display: block; padding-left: 2em !important; padding-right: 0; } #dct-profile .dct-info>div { margin-bottom: 2.5em; } #dct-profile .dct-info::before { animation: showDown 500ms ease-in-out 1500ms 1 normal forwards; } #dct-profile .dct-info::after { animation: none 0; } } /* DCT PROFILE END */