forked from laurens/fediversity_website
Optimalisatie structuur van stylesheets en opmaak iconen
This commit is contained in:
parent
d783d6c763
commit
5326fe77f4
19
themes/nluug/assets/scss/_colors.scss
Normal file
19
themes/nluug/assets/scss/_colors.scss
Normal file
|
@ -0,0 +1,19 @@
|
|||
|
||||
// purple: #6A2060
|
||||
// light purple-grey: #DCC9DB
|
||||
// darkblue: #1D3160
|
||||
|
||||
$color-button: #1D3160;
|
||||
$color-button-hover: #17274d;
|
||||
$color-button-call-to-action: #138808;
|
||||
$color-button-call-to-action-hover: #0F6D06; // %25 donkerder dan #138808 met encycolorpedia
|
||||
$color-header: #6A2060;
|
||||
$color-highlight-box-other-border: #99AFE2;
|
||||
$color-highlight-box-other-background: #E3E9F7;
|
||||
$color-highlight-box-nluug-border: #6A2060;
|
||||
$color-highlight-box-nluug-background: #EBBCE5; // omgezet naar lichtere kleur via https://encycolorpedia.com/6a2060
|
||||
$color-border: #6A2060;
|
||||
$color-text-inverse: white;
|
||||
$color-tags-background: #6A2060;
|
||||
$color-tags-text: white;
|
||||
|
|
@ -1,23 +1,3 @@
|
|||
|
||||
// purple: #6A2060
|
||||
// light purple-grey: #DCC9DB
|
||||
// darkblue: #1D3160
|
||||
|
||||
$color-button: #1D3160;
|
||||
$color-button-hover: #17274d;
|
||||
$color-button-call-to-action: #138808;
|
||||
$color-button-call-to-action-hover: #0F6D06; // %25 donkerder dan #138808 met encycolorpedia
|
||||
$color-header: #6A2060;
|
||||
$color-highlight-box-other-border: #99AFE2;
|
||||
$color-highlight-box-other-background: #E3E9F7;
|
||||
$color-highlight-box-nluug-border: #6A2060;
|
||||
$color-highlight-box-nluug-background: #EBBCE5; // omgezet naar lichtere kleur via https://encycolorpedia.com/6a2060
|
||||
$color-border: #6A2060;
|
||||
$color-text-inverse: white;
|
||||
$color-tags-background: #6A2060;
|
||||
$color-tags-text: white;
|
||||
|
||||
|
||||
*, :after, :before {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
|
@ -128,22 +108,6 @@ a.button:hover, a.button:active {
|
|||
background-color: $color-button-hover;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin: 3px;
|
||||
}
|
||||
.icon:link {
|
||||
text-decoration: none;
|
||||
}
|
||||
.icon:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
.icon:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.icon:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Button
|
||||
.btn:link, .btn:visited {
|
||||
border-radius: 4px;
|
||||
|
@ -265,15 +229,6 @@ ul, ol {
|
|||
margin: 1rem;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
img.shownormal {
|
||||
max-width: initial;
|
||||
}
|
||||
|
||||
.post-date {
|
||||
margin: 5% 0 5%;
|
||||
}
|
||||
|
|
29
themes/nluug/assets/scss/styles_images.scss
Normal file
29
themes/nluug/assets/scss/styles_images.scss
Normal file
|
@ -0,0 +1,29 @@
|
|||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
img.shownormal {
|
||||
max-width: initial;
|
||||
}
|
||||
|
||||
.icon {
|
||||
filter: invert(18%) sepia(32%) saturate(1326%) hue-rotate(183deg) brightness(93%) contrast(95%);
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
.icon:link {
|
||||
text-decoration: none;
|
||||
}
|
||||
.icon:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
.icon:hover {
|
||||
filter: invert(0%) sepia(0%) saturate(7500%) hue-rotate(338deg) brightness(106%) contrast(109%);
|
||||
text-decoration: none;
|
||||
}
|
||||
.icon:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
Reference in a new issue