Skip to content

Commit

Permalink
chore: google fonts to local
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nyveon
Nyveon committed Nov 7, 2024
1 parent b388cb7 commit 733bb0f
Show file tree
Hide file tree
Showing 6 changed files with 122 additions and 98 deletions.
210 changes: 121 additions & 89 deletions docs/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,39 @@
--background-dark: #cfd5eb;
}

/* nunito-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: "Nunito";
font-style: normal;
font-weight: 400;
src: url("../fonts/nunito-v26-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: "Nunito";
font-style: italic;
font-weight: 400;
src: url("../fonts/nunito-v26-latin-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-500 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: "Nunito";
font-style: normal;
font-weight: 500;
src: url("../fonts/nunito-v26-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-700 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: "Nunito";
font-style: normal;
font-weight: 700;
src: url("../fonts/nunito-v26-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

body {
width: 100%;
max-width: 100vw;
Expand Down Expand Up @@ -46,13 +79,13 @@ h1,
h2,
h3,
cite {
margin: 0;
margin: 0;
margin-top: 0.5rem;
margin-bottom: 0.75rem;
margin-bottom: 0.75rem;
}

h1 {
margin-top: 2rem;
margin-top: 2rem;
font-size: 2rem;
}

Expand Down Expand Up @@ -82,14 +115,14 @@ h2::before {
}

h3 {
padding-left: 1.5ch;
padding-left: 1.5ch;
}

h3::before {
content: "•";
position: absolute;
left: 0;
color: var(--accent);
color: var(--accent);
/* bottom: 0; */
/* width: 100%; */
/* height: 1px; */
Expand All @@ -101,14 +134,14 @@ section {
}

section::after {
content: "";
display: block;
width: 100%;
border-bottom: thin solid rgba(0, 0, 0, 0.25);
content: "";
display: block;
width: 100%;
border-bottom: thin solid rgba(0, 0, 0, 0.25);
}

section.last::after {
display: none;
display: none;
}

section,
Expand Down Expand Up @@ -140,7 +173,8 @@ a {
} */

@media (max-width: 600px) {
h1, h2 {
h1,
h2 {
align-self: center;
}
}
Expand All @@ -150,21 +184,21 @@ a {
}

.underline-blue {
position: relative;
padding-bottom: 0;
margin-bottom: 0;
position: relative;
padding-bottom: 0;
margin-bottom: 0;
}

.underline-blue::before {
content: "";
position: absolute;
left: 0;
top: 80%;
width: 100%;
height: 3px;
border-radius: 1px;
background-color: var(--blue);
background-size: 8px 8px;
content: "";
position: absolute;
left: 0;
top: 80%;
width: 100%;
height: 3px;
border-radius: 1px;
background-color: var(--blue);
background-size: 8px 8px;
background-image: repeating-linear-gradient(
to right,
transparent,
Expand All @@ -175,29 +209,28 @@ a {
}

.underline-green {
position: relative;
position: relative;
}

.underline-green::before {
content: "";
position: absolute;
left: 0;
top: 80%;
width: 100%;
height: 3px;
border-radius: 1px;
background-color: var(--green);
background-size: 7px 7px;
background-image: repeating-linear-gradient(
to top,
transparent,
transparent 5px,
rgba(255, 255, 255, 0.08) 5px,
rgba(255, 255, 255, 0.08)
);
content: "";
position: absolute;
left: 0;
top: 80%;
width: 100%;
height: 3px;
border-radius: 1px;
background-color: var(--green);
background-size: 7px 7px;
background-image: repeating-linear-gradient(
to top,
transparent,
transparent 5px,
rgba(255, 255, 255, 0.08) 5px,
rgba(255, 255, 255, 0.08)
);
}


.bg-blue {
background-color: var(--blue);
background-size: 8px 8px;
Expand Down Expand Up @@ -230,7 +263,7 @@ a {
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 0.5rem;
margin-bottom: 0.5rem;
}

@media (max-width: 600px) {
Expand Down Expand Up @@ -292,46 +325,45 @@ a {

/*#endregion */


footer {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.5rem;
align-items: center;
width: 100%;
margin-block: 2rem;
font-style: italic;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.5rem;
align-items: center;
width: 100%;
margin-block: 2rem;
font-style: italic;
}

#logo {
position: absolute;
position: absolute;

/* align-self: flex-start; */

width: 12rem;
border-radius: 0rem 0rem 1rem 0rem;
padding-left: 0.5rem;
padding-left: 0.5rem;
padding-right: 0.25rem;
padding-bottom: 0.25rem;

background-color: var(--lines);
}

@media (max-width: 660px) {
#logo {
width: 8rem;
}
#logo {
width: 8rem;
}

h1 {
margin-top: 3.5rem;
}
h1 {
margin-top: 3.5rem;
}
}

.admonition {
display: flex;
flex-direction: row;
align-items: center;
align-items: center;

gap: 1rem;

Expand All @@ -344,10 +376,10 @@ footer {
border-style: solid;
}

.admonition>div:first-child {
display: flex;
align-items: center;
justify-content: center;
.admonition > div:first-child {
display: flex;
align-items: center;
justify-content: center;
}

.admonition:has(svg.feather-info) {
Expand All @@ -365,63 +397,63 @@ footer {
border-color: var(--green);
}


h3>sup{
font-weight: normal;
font-size: 0.5em;
/* color: var(--gray); */
top: -1em;
h3 > sup {
font-weight: normal;
font-size: 0.5em;
/* color: var(--gray); */
top: -1em;
}

h4 {
font-size: 1.1rem;
margin-bottom: 0.5rem;
margin-top: 1rem;
font-size: 1.1rem;
margin-bottom: 0.5rem;
margin-top: 1rem;
}

table {
width: 100%;
border-collapse: collapse;
margin-bottom: 0.5rem;
width: 100%;
border-collapse: collapse;
margin-bottom: 0.5rem;
}

th, td {
text-align: center;
border: 1px solid var(--gray);
th,
td {
text-align: center;
border: 1px solid var(--gray);
}

th {
background-color: var(--accent);
color: #fff;
background-color: var(--accent);
color: #fff;
}

tr:nth-child(odd) {
background-color: rgba(1, 1, 1, 0.1);
background-color: rgba(1, 1, 1, 0.1);
}

/* ul a bit more spacing between items */

/*custom ul deco */

ul {
list-style-type: none;
padding-inline-start: 0;
list-style-type: none;
padding-inline-start: 0;
}

ul:not(.emojis) {
position: relative;
padding-inline-start: 1.5ch;
position: relative;
padding-inline-start: 1.5ch;
}

ul:not(.emojis) li::before {
content: "•";
position: absolute;
left: 0;
color: var(--accent);
color: var(--accent);
}

ul li {
margin-bottom: 0.5rem;
margin-bottom: 0.5rem;
}

/* last section should have no lower border */
/* last section should have no lower border */
Binary file added docs/fonts/nunito-v26-latin-500.woff2
View file
Binary file not shown.
Binary file added docs/fonts/nunito-v26-latin-700.woff2
View file
Binary file not shown.
Binary file added docs/fonts/nunito-v26-latin-italic.woff2
View file
Binary file not shown.
Binary file added docs/fonts/nunito-v26-latin-regular.woff2
View file
Binary file not shown.
10 changes: 1 addition & 9 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Prácticas DCC - Datos y Estadísticas</title>

<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"
rel="stylesheet"
/>

<!-- CSS -->
<link rel="stylesheet" href="css/modern-normalize.css" />
<link rel="stylesheet" href="css/styles.css" />
Expand Down Expand Up @@ -198,7 +190,7 @@ <h3>Duración</h3>
<div><i data-feather="help-circle"></i></div>
<div>
En tus primeras semanas de práctica, es normal no lograr
demasiado, ya que el objetivo inicial es aprender y desarrollarse.
demasiado, ya que el objetivo inicial es aprender.
</div>
</div>

Expand Down

0 comments on commit 733bb0f

Please sign in to comment.