[CSS] Links should be aligned with content now. Underlined in main content by default. Highlighted when focused.

This commit is contained in:
Eliseu Amaro 2021-09-06 13:08:27 +01:00 committed by Hugo Sales
parent bdde047dfa
commit 1f792a0183
Signed by untrusted user: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
2 changed files with 20 additions and 43 deletions

View File

@ -1,6 +1,5 @@
:root {
/* FONTS */
--display-font: 'Manrope', sans-serif;
--main-font: 'Inter var', sans-serif;
/* UNITS
@ -35,15 +34,12 @@ a,
a:visited {
text-decoration: none;
color: var(--white);
margin-bottom: 1px;
outline: 0;
}
a:focus,
a:hover {
text-decoration: underline;
color: var(--white);
transition: var(--cubic-transition);
}
figcaption a:link {
@ -164,16 +160,22 @@ summary:focus {
display: flex;
justify-content: space-evenly;
font-size: var(--main-size);
font-family: var(--display-font);
}
/* NOTES */
.h-entry {
margin-top: var(--unit-size);
}
.h-entry hr {
margin-top: 5px;
}
.h-entry {
margin-top: var(--unit-size);
.h-entry a {
text-decoration: underline;
}
.h-entry a:focus {
animation-name: highlight;
animation-duration: 500ms;
animation-timing-function: ease-in-out;
}
.h-entry,
@ -203,7 +205,6 @@ summary:focus {
}
.note-author {
font-family: var(--display-font);
font-size: var(--medium-size);
font-weight: bold;
display: flex;
@ -319,15 +320,12 @@ summary:focus {
border-radius: var(--unit-size);
border: solid 2px var(--bg2);
font-family: var(--main-font);
font-weight: 400;
color: var(--white);
}
.section-title-details {
font-family: var(--display-font);
font-weight: 900;
font-size: var(--main-size);
font-weight: 700;
border-radius: var(--unit-size);
padding: 5px 10px 5px 10px;
@ -386,13 +384,12 @@ summary:focus {
/* BUTTONS AND INPUT SHENANIGANS */
label {
font-family: var(--display-font);
font-weight: bold;
}
button {
font-size: var(--small-size) !important;
font-family: var(--display-font) !important;
font-family: var(--main-font) !important;
font-weight: bold !important;
background-image: linear-gradient(180deg, var(--bg2), transparent) !important;
color: var(--white) !important;
@ -489,13 +486,13 @@ input[type=file]:hover {
/* button part of file selector */
::file-selector-button {
font-family: var(--display-font) !important;
font-family: var(--main-font) !important;
font-weight: bold !important;
color: var(--white) !important;
}
select {
font-family: var(--display-font) !important;
font-family: var(--main-font) !important;
font-size: var(--small-size);
font-weight: normal !important;
background: linear-gradient(180deg, var(--bg2), transparent) !important;

View File

@ -67,7 +67,6 @@ details > summary::-webkit-details-marker {
}
* {
vertical-align: middle !important;
box-sizing: border-box !important;
}
@ -86,49 +85,30 @@ html {
}
h1 {
font-family: var(--display-font);
font-size: var(--main-size);
font-weight: 900;
opacity: 1.00;
letter-spacing: -0.40px;
word-spacing: 4.00px;
font-weight: 700;
}
h2 {
font-family: var(--display-font);
font-size: var(--medium-size);
font-weight: 800;
letter-spacing: -0.75px;
word-spacing: 3.00px;
text-transform: none;
font-weight: 600;
}
h3 {
font-family: var(--display-font);
font-size: var(--small-size);
font-weight: 700;
line-height: 1.00;
letter-spacing: -0.20px;
word-spacing: 1.00px;
text-transform: none;
font-weight: 600;
}
p {
font-family: var(--main-font);
font-size: var(--small-size);
font-weight: 400;
letter-spacing: -0.30px;
word-spacing: -0.10px;
margin-bottom: var(--small-size);
text-transform: none;
}
textarea {
font-family: var(--main-font);
font-weight: 400;
letter-spacing: -0.30px;
word-spacing: -0.10px;
text-transform: none;
}
ul {
@ -147,7 +127,6 @@ li {
button {
cursor: pointer !important;
float: right !important;
/*width: min-content !important;*/
align-self: end !important;
}
input {
@ -187,8 +166,9 @@ input[type=radio] {
/* file selector */
input[type=file] {
all: unset;
display: block !important;
border-radius: var(--unit-size);
display: block;
width: 100%;
border-radius: var(--unit-size) !important;
}
input + label {