public/website
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Moving CSS and updating with new colors and design

Browse source
This commit is contained in:
Michael Boelen 2024-11-19 10:16:28 +00:00
parent 483f9daf2f
commit dc32ca9709
3 changed files with 10 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
themes/nluug/assets/scss/_colors.scss
View file

@ -24,6 +24,7 @@ $midnight-blue-light: #7D7DA6;
$magenta-dark: #FA198B;
$magenta-medium: #FB47A2;
$magenta-light: #FC75B9;
$magenta-lightest: #FFDCEE;
// Persian green
$persian-green-dark: #1B998B;
@ -55,6 +56,10 @@ $color-button-call-to-action: $midnight-blue-dark;
//$color-button-call-to-action-hover: #0F6D06; // %25 donkerder dan #138808 met encycolorpedia
$color-button-call-to-action-hover: $midnight-blue-medium;
// Variatie CTA-knop
$color-button-call-to-action2: $magenta-dark;
$color-button-call-to-action2-hover: $magenta-medium;
$color-footer-background: $persian-green-light;
$color-footer-text: $raisin-black-dark;
@ -68,7 +73,7 @@ $color-highlight-box-other-background: $magenta-light;
//$color-highlight-box-nluug-border: #6A2060;
$color-highlight-box-nluug-border: $magenta-medium;
//$color-highlight-box-nluug-background: #F5E1ED;
$color-highlight-box-nluug-background: $magenta-light;
$color-highlight-box-nluug-background: $magenta-lightest;
//$color-border: #6A2060;
$color-border: #26266B;

73
themes/nluug/assets/scss/styles.scss
View file

@ -11,8 +11,9 @@ body {
padding: 1.0rem;
// background: hsla(93, 0%, 96%, 1.00);
//color: #2E2E2E;
color: #222226;
max-width: 1024px;
//color: #222226;
color: #333333;
max-width: 1180px;
margin: 0 auto;
}
@ -71,64 +72,6 @@ h4, h5, strong, b {
font-size: inherit;
font-weight: 600;
}
// Highlight-box om bijvoorbeeld onze evenementen opvallend op homepage te laten zien
.highlight-box {
border-radius: 6px;
margin: 2px;
padding: 20px;
}
// Events voor alleen NLUUG-leden krijgen een andere kleur dan events in samenwerking met of die extra aandacht nodig hebben.
.highlight-box-nluug {
background-color: $color-highlight-box-nluug-background;
border: 1px solid $color-highlight-box-nluug-border;
}
.highlight-box-other {
background-color: $color-highlight-box-other-background;
border: 1px solid $color-highlight-box-other-border;
}
.link {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
}
a.button:link, a.button:visited {
background-color: $color-button;
border-radius: 4px;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a.button:hover, a.button:active {
background-color: $color-button-hover;
}
// Button
.btn:link, .btn:visited {
border-radius: 4px;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
// Button voor call-to-action, <a href="#" class="btn btn-cta">#</a>
.btn-cta:link, .btn-cta:visited {
background-color: $color-button-call-to-action;
}
.btn-cta:hover, .btn-cta:active {
background-color: $color-button-call-to-action-hover;
}
.persian-green-dark {
color: $persian-green-dark;
@ -152,16 +95,6 @@ a.button:hover, a.button:active {
}
a,
a:visited {
color: inherit;
}
a:hover,
a.heading-link {
color: inherit;
text-decoration: underline;
}
blockquote {
border-left: 5px solid #eee;

2
themes/nluug/assets/scss/styles_grid_homepage.scss Executable file → Normal file
View file

@ -3,7 +3,7 @@
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 1fr auto;
column-gap: 1.5em;
column-gap: 3em;
}
}
.grid-fourth {