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:
Alexis Fourmaux 2025-05-17 00:37:16 +02:00
parent 4a5ee3cd67
commit 9d15a6ebd6
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 'fonts';
$smartphone: 750px;
:root {
--pink: #{light.$pink};
--mauve: #{light.$mauve};

26
sass/parts/_navbar.scss
View file

@ -1,17 +1,6 @@
@mixin header_link($color, $hover-color) {
a {
color: $color;
text-decoration: none;
@use '../constants' as *;
@use '../mixins' as *;
&:visited {
color: $color;
}
&:hover {
color: $hover-color;
}
}
}
header {
background-color: var(--crust);
@ -37,12 +26,12 @@ nav {
font-size: 2.5rem;
font-weight: 100;
text-transform: uppercase;
@include header_link(var(--text), var(--text));
@include link(var(--text), var(--text));
}
.nav-bar {
flex: 1 auto;
@include header_link(var(--subtext1), var(--subtext0));
@include link(var(--subtext1), var(--subtext0));
font-size: 1.2rem;
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 {
max-width: 100%;
flex-direction: column;
@ -83,6 +76,7 @@ nav {
.home-title {
text-align: center;
font-size: 1.8rem;
}
}
}

16
sass/parts/_page_title.scss
View file

@ -1,3 +1,5 @@
@use '../constants' as *;
section {
&.title {
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;
}
}
}

20
sass/shortcodes/_callout.scss
View file

@ -1,13 +1,26 @@
@use '../constants' as *;
@mixin callout-customization($type, $color, $text-icon) {
&[type="#{$type}"] {
&>.callout-content {
border-color: var(#{$color});
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;
}
}
}
@media only screen and (min-width: $smartphone) {
&::before {
content: $text-icon;
color: var(#{$color});
}
}
}
}
@ -33,9 +46,12 @@
text-align: initial;
vertical-align: middle;
display: inline-block;
width: 85%;
padding: 1.25rem;
@media only screen and (min-width: $smartphone) {
width: 85%;
}
&>p {
margin: 0;
}

39
sass/styles.scss
View file

@ -1,3 +1,4 @@
@use 'constants' as *;
@use 'theme';
@use 'shortcodes/callout';
@use 'parts/anchor';
@ -34,7 +35,7 @@ article {
margin-right: auto;
}
@media only screen and (max-width: 600px) {
@media only screen and (max-width: $smartphone) {
article {
max-width: var(--main-width);
}
@ -84,6 +85,42 @@ h6 {
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 {
margin-top: 1.25rem;
margin-bottom: 1.25rem;