angestoepselt/homepage
5
0
Fork 0
mirror of https://codeberg.org/angestoepselt/homepage.git synced 2025-05-24 14:46:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Continue tweaking responsive styles

Browse source
This commit is contained in:
Yannik Rödel 2022-05-11 17:35:54 +02:00
parent 2f3e882514
commit b1a820c179
4 changed files with 27 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
styles/components/_actions.scss
View file

@ -5,7 +5,8 @@
// Actions are another module that is present on the home page. It shows a small // Actions are another module that is present on the home page. It shows a small
// number of CTA-style buttons which lead to different parts of the site. // number of CTA-style buttons which lead to different parts of the site.
.page-actions { .page-actions {
padding: layout.$large-gap; padding-top: layout.$large-gap;
padding-bottom: layout.$large-gap;
background-color: colors.$teal-300; background-color: colors.$teal-300;
@include colors.coderdojo-theme { @include colors.coderdojo-theme {
@ -30,8 +31,8 @@
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
align-items: center; align-items: center;
margin: layout.$large-gap 0; margin: 0 layout.$normal-gap;
padding: layout.$large-gap; padding: layout.$normal-gap;
background: colors.$gray-50; background: colors.$gray-50;
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
@ -64,6 +65,7 @@
grid-template-columns: repeat(6, 1fr); grid-template-columns: repeat(6, 1fr);
gap: layout.$large-gap; gap: layout.$large-gap;
align-items: stretch; align-items: stretch;
padding: layout.$large-gap;
> * { > * {
grid-column: span 3; grid-column: span 3;
@ -75,6 +77,7 @@
> a { > a {
margin: 0; margin: 0;
padding: layout.$large-gap;
&:first-of-type { &:first-of-type {
flex-direction: row; flex-direction: row;

5
styles/components/_page.scss
View file

@ -3,7 +3,12 @@
@use '../lib/typography'; @use '../lib/typography';
.page-section { .page-section {
padding-top: layout.$large-gap;
padding-bottom: layout.$large-gap;
@media screen and (min-width: layout.$breakpoint) {
padding: layout.$large-gap; padding: layout.$large-gap;
}
&.inverse { &.inverse {
$link-color: colors.$yellow-500; $link-color: colors.$yellow-500;

2
styles/components/_site.scss
View file

@ -121,6 +121,7 @@
} }
.site-footer { .site-footer {
@media screen and (min-width: layout.$breakpoint) {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
@ -130,3 +131,4 @@
text-align: right; text-align: right;
} }
} }
}

11
styles/components/_tabs.scss
View file

@ -26,7 +26,6 @@
flex-direction: row-reverse; flex-direction: row-reverse;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
margin-top: #{-1 * layout.$large-gap};
> a { > a {
display: block; display: block;
@ -39,10 +38,7 @@
flex: 100% 1; flex: 100% 1;
order: 9999; order: 9999;
display: none; display: none;
margin: layout.$large-gap 0;
padding: layout.$large-gap;
background: colors.$gray-50; background: colors.$gray-50;
@include colors.card-shadow;
&:last-of-type, &:last-of-type,
&:target { &:target {
@ -65,4 +61,11 @@
} }
} }
} }
@media screen and (min-width: layout.$breakpoint) {
> .tab {
padding: layout.$large-gap;
@include colors.card-shadow;
}
}
} }