phc/website
6
4
Fork 1
Code Issues 9 Pull Requests Projects 1 Releases Wiki Activity

miglioramenti stilistici

Browse Source
This commit is contained in:
aziis98
2024-07-30 15:41:20 +02:00
parent 8f1d6cfff1
commit ce42b2bf15
14 changed files with 12087 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/components.scss
+73 -32
View File
@@ -15,6 +15,12 @@ $news-accent-bg: #f8e8b1;
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.title {
font-family: 'Space Mono', monospace;
font-weight: 700;
font-size: 28px;
}
.search {
width: 100%;
height: 2.5rem;
@@ -185,11 +191,6 @@ $news-accent-bg: #f8e8b1;
row-gap: 0.5rem;
padding: 1rem;
.title {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 32px;
}
.description {
font-size: 16px;
@@ -200,6 +201,7 @@ $news-accent-bg: #f8e8b1;
gap: 0.5rem;
flex-wrap: wrap;
font-size: 14px;
font-weight: 600;
color: #555;
}
}
@@ -211,66 +213,105 @@ $news-accent-bg: #f8e8b1;
.news-item {
background: $news-bg;
color: #111;
@include neo-brutalist-card($size: 3px, $offset: 9px);
display: flex;
flex-direction: column;
width: 22rem;
max-height: 27rem;
overflow: hidden;
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #c67e14;
border: 2px solid #222;
&:hover {
background-color: #e69419;
}
}
a {
font-weight: 600;
text-decoration: none;
color: #c67e14;
&:hover {
text-decoration: underline solid 2px;
}
}
& > .title {
// border-bottom: 2px solid #222;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
padding: 1rem;
background: $news-accent-bg;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 1;
font-size: 26px;
}
a.title {
color: #83530c;
}
& > .abstract {
flex-grow: 1;
padding: 1rem;
overflow-y: auto;
@extend .text;
}
& > .continue {
& > .content {
display: flex;
padding: 1rem;
display: grid;
align-items: end;
justify-content: end;
flex-direction: column;
gap: 0.5rem;
background: #fff8da;
& > .continue {
padding: 1rem;
display: grid;
align-items: end;
justify-content: end;
}
& > .description {
font-size: 16px;
line-height: 1.5;
flex-grow: 1;
}
& > .tags {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
font-size: 14px;
color: #555;
}
& > .date {
font-size: 14px;
font-style: italic;
font-weight: 600;
color: #0008;
}
& > .author {
font-weight: 600;
font-size: 15px;
color: #555;
}
}
}
}
}
src/styles/main.scss
+40 -14
View File
@@ -79,7 +79,7 @@ a {
font-weight: 600;
&:hover {
text-decoration: underline;
text-decoration: underline 2px solid;
}
}
}
@@ -129,8 +129,11 @@ body {
padding: 0 1.5rem;
a {
font-size: 22px;
font-weight: 600;
font-family: 'Space Mono', monospace;
font-size: 18px;
font-weight: 700;
letter-spacing: 1px;
color: #333;
}
}
}
@@ -176,11 +179,7 @@ body {
scroll-snap-align: start;
& > .title {
font-weight: 700;
font-size: 60px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 48px;
padding-top: 4rem;
}
}
@@ -261,8 +260,6 @@ body {
gap: 1rem;
.title {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 40px;
}
@@ -285,6 +282,8 @@ body {
flex-direction: row;
gap: 3rem;
align-items: flex-start;
padding: 0 3rem;
justify-content: center;
@@ -344,8 +343,6 @@ body {
gap: 0.25rem 1rem;
.title {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 32px;
}
@@ -387,8 +384,8 @@ body {
color: #fdfdfd;
.content {
@extend .text;
}
@extend .text;
}
}
}
@@ -493,6 +490,31 @@ body {
}
}
.notizia {
background: #fffced;
--zone-color: #ac8919;
main {
margin-top: 3rem;
margin-bottom: 6rem;
background: #fff2c9;
max-width: calc(46rem + 2rem * 2);
justify-self: center;
padding: 3rem 2rem 2rem;
}
@media screen and (min-width: $screen-desktop-min) {
main {
@include neo-brutalist-card($size: 3px, $offset: 9px);
}
}
}
.notizie {
background: #fffced;
}
.guide {
main {
justify-self: center;
@@ -574,3 +596,7 @@ body {
::-webkit-scrollbar {
width: 15px;
}
::selection {
background: #0002;
}
src/styles/typography.scss
+41 -10
View File
@@ -12,20 +12,20 @@
@mixin geometric-headings {
$base-font-size: 16px;
$heading-scale: 1.33;
$heading-scale: 1.25;
@for $i from 1 through 5 {
$factor: pow($heading-scale, 5 - $i);
h#{$i} {
font-size: $base-font-size * $factor;
font-family: 'Source Sans Pro', monospace;
font-weight: 400;
font-family: 'Space Mono', monospace;
font-weight: 700;
margin-bottom: 0.25rem;
}
p + h#{$i} {
margin-top: 0.5rem * $factor;
margin-top: 0.75rem * $factor;
}
}
}
@@ -52,18 +52,21 @@
}
pre {
margin: 1rem auto;
margin: 2rem auto;
padding: 0.5rem;
padding: 0.5rem 1rem;
width: 100%;
// width: 100%;
max-width: 80ch;
width: fit-content;
line-height: 1.5;
border-radius: 0.5rem;
border-radius: 0.25rem;
box-shadow: 0.25rem 0.25rem 0 0 #777;
box-shadow: 0.25rem 0.25rem 0 0 #333;
border: 2px solid #333;
code {
padding: 0;
@@ -71,7 +74,7 @@
}
p {
line-height: 1.65;
line-height: 1.75;
margin: 0.5rem auto;
}
@@ -82,6 +85,34 @@
text-align: center;
}
h1,
h2,
h3,
h4 {
font-weight: 700;
color: #333;
}
h1,
h2,
h3,
h4,
ol,
ul {
margin-left: auto;
margin-right: auto;
}
a,
a:visited {
color: var(--zone-color, #1e6733);
font-weight: 600;
&:hover {
text-decoration: underline 2px solid;
}
}
padding: 2rem 0 3rem;
@media screen and (max-width: 1024px) {