@ -4,7 +4,7 @@
: root {
--bg : # eaeaea ;
--fg : # 333 ;
--bg-lighter : # f0f0f0 ;
--bg-dark : hsl ( 220 , 5 % , 93 % ) ;
@ -12,6 +12,7 @@
--bg-darker-2 : # d5d5d5 ;
--bg-darker-2-1 : # c8c8c8 ;
--bg-darker-3 : # c0c0c0 ;
--bg-darker-4 : # b8b8b8 ;
--accent-1 : # 278542 ;
--accent-1-fg : # 154d24 ;
@ -40,7 +41,8 @@
box-sizing : border-box ;
}
html , body {
html ,
body {
margin : 0 ;
}
@ -187,7 +189,8 @@ nav .nav-main .nav-item {
z-index : 2 ;
}
nav . nav-main . nav-element : hover , nav . nav-main . nav-button : hover {
nav . nav-main . nav-element : hover ,
nav . nav-main . nav-button : hover {
background : var ( --bg-darker ) ;
}
@ -244,7 +247,8 @@ nav .nav-main .nav-item.dropdown .nav-items::before {
background : var ( --bg-darker ) ;
} * /
nav . nav-main . nav-item . dropdown . name : hover + . nav-items , nav . nav-main . nav-item . dropdown . name + . nav-items : hover {
nav . nav-main . nav-item . dropdown . name : hover + . nav-items ,
nav . nav-main . nav-item . dropdown . name + . nav-items : hover {
display : flex ;
flex-direction : column ;
}
@ -344,7 +348,7 @@ section {
height : 1 . 5rem ;
border-radius : calc ( 1 . 5rem / 2 ) ;
padding : 0 calc ( 1 . 5rem / 2 ) ;
background : var ( --bg-darker-2 ) ;
color : var ( --card-date ) ;
@ -357,7 +361,10 @@ section {
/* Typography */
h1 , h2 , h3 , h4 {
h1 ,
h2 ,
h3 ,
h4 {
margin : 0 ;
margin-top : 1rem ;
margin-bottom : 0 . 5rem ;
@ -382,13 +389,17 @@ h4 {
font-weight : var ( --font-weight-bold ) ;
}
p , ul , ol , li {
p ,
ul ,
ol ,
li {
margin : 0 . 5rem 0 ;
width : 70ch ;
max-width : 100 % ;
}
ul , ol {
ul ,
ol {
padding : 0 0 0 1 . 5rem ;
}
@ -430,11 +441,12 @@ a:hover {
/* Buttons */
button , . button {
button ,
. button {
font-family : var ( --font-sf ) ;
font-weight : var ( --font-weight-medium ) ;
font-size : 17px ;
/* gray variant #b3b3b3 */
border : 1px solid var ( --bg-darker-3 ) ;
/* gray variant #bfbfbf */
@ -449,13 +461,14 @@ button, .button {
padding : 0 1rem ;
transition : all 100ms ease-in-out ;
box-shadow : 0 4px 8px 0 # 00000022 ;
cursor : pointer ;
}
button : hover , . button : hover {
button : hover ,
. button : hover {
background : var ( --bg-darker-2-1 ) ;
box-shadow : 0 4px 8px 0 # 00000033 ;
}
@ -479,7 +492,7 @@ select {
font-family : var ( --font-sf ) ;
font-weight : var ( --font-weight-medium ) ;
font-size : 16px ;
/* gray variant #b3b3b3 */
border : 1px solid var ( --bg-darker-3 ) ;
/* gray variant #bfbfbf */
@ -494,7 +507,7 @@ select {
padding : 0 0 . 25rem ;
transition : all 100ms ease-in-out ;
box-shadow : 0 4px 8px 0 # 00000022 ;
cursor : pointer ;
@ -502,7 +515,8 @@ select {
/* Text Fields */
input [ type = text ] , input [ type = password ] {
input [ type = 'text' ] ,
input [ type = 'password' ] {
border : none ;
background : none ;
@ -523,7 +537,7 @@ input[type=text], input[type=password] {
font-weight : var ( --font-weight-normal ) ;
}
input [ type = password ] {
input [ type = 'password' ] {
font-family : caption ;
}
@ -546,7 +560,7 @@ input[type=password] {
height : 2rem ;
width : 1px ;
background : var ( --bg-darker- 3 ) ;
background : var ( --bg-darker- 4 ) ;
}
. compound . icon {
@ -563,7 +577,10 @@ input[type=password] {
margin-right : 0 . 25rem ;
}
. compound > button , . compound > . button , . compound > input , . compound > select {
. compound > button ,
. compound > . button ,
. compound > input ,
. compound > select {
border : none ;
box-shadow : none ;
}
@ -695,6 +712,12 @@ form .field-set input {
width : 100 % ;
}
. page-utenti . user-item . icon {
width : 1 . 5rem ;
display : grid ;
place-content : center ;
}
. search {
margin : 2rem 0 ;
display : flex ;
@ -703,7 +726,7 @@ form .field-set input {
gap : 1rem ;
}
. search input [ type = text ] {
. search input [ type = 'text' ] {
width : 50ch ;
height : 2 . 5rem ;
}
@ -741,7 +764,8 @@ form .field-set input {
justify-content : center ;
}
. news-content . tags , . news-content . date {
. news-content . tags ,
. news-content . date {
justify-content : center ;
}
@ -762,11 +786,13 @@ table {
border-collapse : collapse ;
}
table td , table th {
table td ,
table th {
padding : 0 . 5rem ;
}
table td : not ( : first-child ) , table th : not ( : first-child ) {
table td : not ( : first-child ) ,
table th : not ( : first-child ) {
border-left : 1px solid var ( --bg-darker-3 ) ;
}