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

7
styles/components/_page.scss
View file

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

14
styles/components/_site.scss
View file

@ -121,12 +121,14 @@
}
.site-footer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: layout.$normal-gap;
@media screen and (min-width: layout.$breakpoint) {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: layout.$normal-gap;
.site-navigation a {
text-align: right;
.site-navigation a {
text-align: right;
}
}
}

11
styles/components/_tabs.scss
View file

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