Source files of fsfe.org, pdfreaders.org, freeyourandroid.org, ilovefs.org, drm.info, and test.fsfe.org. Contribute: https://fsfe.org/contribute/web/
https://fsfe.org
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
2.4 KiB
107 lines
2.4 KiB
// ============================================================================ |
|
// Styles for coloured boxes around normal content |
|
// These can be: |
|
// * coloured border: <div class="color-box border [...]" data-color="..."> |
|
// * full-background colour: <div class="color-box background [...]" data-color="..."> |
|
// ============================================================================ |
|
|
|
div.color-box { |
|
|
|
// VARIANT 1: A coloured border around the content |
|
&.border { |
|
padding: 1em; |
|
border: 6px red solid; |
|
margin: 1em 0; |
|
|
|
& > h2, |
|
& > div.grid-50-50 > div.box > h2, |
|
& > section > h2 |
|
{ |
|
margin-top: 0; |
|
} |
|
|
|
// Pre-defined colours for border box |
|
&[data-color=fsfe-darkblue] { |
|
border-color: #202D79; |
|
} |
|
&[data-color=fsfe-blue] { |
|
border-color: #3394CE; |
|
} |
|
&[data-color=fsfe-blue] { |
|
border-color: #4AD2F0; |
|
} |
|
&[data-color=fsfe-lime] { |
|
border-color: #D0F400; |
|
} |
|
&[data-color=burnt-sienna] { |
|
border-color: #F0684A; |
|
} |
|
&[data-color=heliotrope] { |
|
border-color: #BB4AF0; |
|
} |
|
&[data-color=screaming-green] { |
|
border-color: #7FF04A; |
|
} |
|
} |
|
|
|
// VARIANT 2: a box with a coloured background, with different sub-variants |
|
&.background { |
|
font-weight: 500; |
|
text-align: center; |
|
color: white; |
|
padding: 15px; |
|
|
|
// Move the headline closer to the box top, and thicker |
|
h2, h3 { |
|
margin-top: 0; |
|
font-weight: 700; |
|
} |
|
|
|
// Define the text inside the box |
|
p { |
|
font-size: 120%; |
|
// no margin-bottom to not distort inner paddings |
|
margin-bottom: 0; |
|
} |
|
|
|
// balance missing margin-bottom from p |
|
a.btn { |
|
margin-top: 10px; |
|
} |
|
|
|
// Background variant: a coloured box with round corners |
|
&.rounded { |
|
padding: 1em; |
|
margin: 20px auto; |
|
border-radius: 15px; |
|
|
|
// center all the things |
|
display: flex; |
|
flex-direction: row; |
|
flex-wrap: wrap; |
|
align-items: center; |
|
justify-content: center; |
|
|
|
@media (min-width: @screen-sm-min) { |
|
max-width: 70%; |
|
} |
|
} |
|
|
|
// Specifics for fullwidth coloured box |
|
&.fullwidth { |
|
margin-top: 30px; |
|
margin-bottom: 30px; |
|
} |
|
|
|
// Pre-defined colours for background box |
|
&[data-color=android-lime] { |
|
background-color: #A4C639; |
|
} |
|
&[data-color=android-blue] { |
|
background-color: #1c68a6; |
|
} |
|
&[data-color=dark-green] { |
|
background-color: #6BB340; |
|
} |
|
} |
|
}
|
|
|