Ungol/blog
1
0
Fork 0
Code Issues Projects Releases Packages 1 Activity Actions

feat: improve global responsivity

Browse source
This commit is contained in:
Ungol 2025-12-23 22:27:52 +01:00
parent c332052930
commit b2286abd85
7 changed files with 101 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

1
sass/_constants.scss Normal file
View file

@ -0,0 +1 @@
$smartphone: 750px;

14
sass/_mixins.scss Normal file
View file

@ -0,0 +1,14 @@
@mixin link($color, $hover-color: $color, $visited-color: $color) {
a {
color: $color;
text-decoration: none;
&:visited {
color: $visited-color;
}
&:hover {
color: $hover-color;
}
}
}

2
sass/_theme.scss
View file

@ -2,6 +2,8 @@
@use 'colors/catppuccin-latte' as light; @use 'colors/catppuccin-latte' as light;
@use 'fonts'; @use 'fonts';
$smartphone: 750px;
:root { :root {
--pink: #{light.$pink}; --pink: #{light.$pink};
--mauve: #{light.$mauve}; --mauve: #{light.$mauve};

26
sass/parts/_navbar.scss
View file

@ -1,17 +1,6 @@
@mixin header_link($color, $hover-color) { @use '../constants' as *;
a { @use '../mixins' as *;
color: $color;
text-decoration: none;
&:visited {
color: $color;
}
&:hover {
color: $hover-color;
}
}
}
header { header {
background-color: var(--crust); background-color: var(--crust);
@ -37,12 +26,12 @@ nav {
font-size: 2.5rem; font-size: 2.5rem;
font-weight: 100; font-weight: 100;
text-transform: uppercase; text-transform: uppercase;
@include header_link(var(--text), var(--text)); @include link(var(--text), var(--text));
} }
.nav-bar { .nav-bar {
flex: 1 auto; flex: 1 auto;
@include header_link(var(--subtext1), var(--subtext0)); @include link(var(--subtext1), var(--subtext0));
font-size: 1.2rem; font-size: 1.2rem;
text-transform: lowercase; text-transform: lowercase;
} }
@ -70,7 +59,11 @@ nav {
} }
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: $smartphone) {
header {
margin-bottom: 1.5rem;
}
nav { nav {
max-width: 100%; max-width: 100%;
flex-direction: column; flex-direction: column;
@ -83,6 +76,7 @@ nav {
.home-title { .home-title {
text-align: center; text-align: center;
font-size: 1.8rem;
} }
} }
} }

16
sass/parts/_page_title.scss
View file

@ -1,3 +1,5 @@
@use '../constants' as *;
section { section {
&.title { &.title {
margin-bottom: 4rem; margin-bottom: 4rem;
@ -48,3 +50,17 @@ section {
} }
} }
} }
@media only screen and (max-width: $smartphone) {
section.title {
margin-bottom: 2.5rem;
h1.title {
font-size: 2.2rem;
}
p.subtitle {
font-size: 1.3rem;
}
}
}

24
sass/shortcodes/_callout.scss
View file

@ -1,13 +1,26 @@
@use '../constants' as *;
@mixin callout-customization($type, $color, $text-icon) { @mixin callout-customization($type, $color, $text-icon) {
&[type="#{$type}"] { &[type="#{$type}"] {
&>.callout-content { &>.callout-content {
border-color: var(#{$color}); border-color: var(#{$color});
background-color: color-mix(in srgb, var(#{$color}), transparent 90%); background-color: color-mix(in srgb, var(#{$color}), transparent 90%);
@media only screen and (max-width: $smartphone) {
&::before {
content: $text-icon;
color: var(#{$color});
float: left;
margin-right: .5rem;
}
}
} }
&::before { @media only screen and (min-width: $smartphone) {
content: $text-icon; &::before {
color: var(#{$color}); content: $text-icon;
color: var(#{$color});
}
} }
} }
} }
@ -33,9 +46,12 @@
text-align: initial; text-align: initial;
vertical-align: middle; vertical-align: middle;
display: inline-block; display: inline-block;
width: 85%;
padding: 1.25rem; padding: 1.25rem;
@media only screen and (min-width: $smartphone) {
width: 85%;
}
&>p { &>p {
margin: 0; margin: 0;
} }

39
sass/styles.scss
View file

@ -1,3 +1,4 @@
@use 'constants' as *;
@use 'theme'; @use 'theme';
@use 'shortcodes/callout'; @use 'shortcodes/callout';
@use 'parts/anchor'; @use 'parts/anchor';
@ -34,7 +35,7 @@ article {
margin-right: auto; margin-right: auto;
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: $smartphone) {
article { article {
max-width: var(--main-width); max-width: var(--main-width);
} }
@ -84,6 +85,42 @@ h6 {
overflow-wrap: break-word; overflow-wrap: break-word;
} }
@media only screen and (max-width: $smartphone) {
h1 {
font-size: 1.5rem;
margin-top: 1.3rem;
}
h2 {
font-size: 1.3rem;
margin-bottom: 1rem;
font-weight: medium;
}
h3 {
font-size: 1.1rem;
margin-bottom: .6rem;
font-weight: medium;
}
h4 {
font-size: 1rem;
font-weight: medium;
}
h5 {
font-size: .9rem;
font-weight: 700;
}
h6 {
font-size: .9rem;
font-weight: 300;
}
}
p { p {
margin-top: 1.25rem; margin-top: 1.25rem;
margin-bottom: 1.25rem; margin-bottom: 1.25rem;