ruben/folderweb
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Activity Actions

Create a simple hero section with title, subtitle, and call-to-action

Browse source 
button Add a features section with icons and descriptions Include a
stats section with live data Add a responsive design with modern CSS
features
This commit is contained in:
Ruben 2025-11-27 21:31:47 +01:00
parent f0d50ff8bf
commit 0e19040473
101 changed files with 1356 additions and 7532 deletions
Download patch file Download diff file Expand all files Collapse all files

191
app/default/styles/base.css
View file

@ -1,191 +0,0 @@
/* MINIMAL CSS RESET*/
* { margin-bottom: 0; }
/* VARIABLES */
:root {
--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-heading: Georgia, "Times New Roman", serif;
--color-primary: #4a90e2;
--color-primary: oklch(0.65 0.15 250);
--color-secondary: #2c5aa0;
--color-secondary: oklch(0.50 0.12 250);
--color-light: #f0f4f8;
--color-light: oklch(0.97 0.01 250);
--color-grey: #404040;
--color-grey: oklch(0.37 0 0);
}
/* GLOBAL */
html { font-family: var(--font-body); font-size: clamp(16px, 2.3vw, 20px); scroll-behavior: smooth; }
body { margin: 0; color: var(--color-grey) }
p, ul, ol, aside { line-height: 1.5em; hyphens: auto }
img { max-width: 100%; height: auto; }
h1 { color: var(--color-primary); font-size: 2.3rem }
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 400;
line-height: 1.3em;
margin-top: 1.3em;
text-wrap: pretty;
}
a {
color: var(--color-primary);
text-decoration: none;
&:hover { color: var(--color-secondary) }
}
.grid-container {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr;
grid-template-areas: "header" "main" "footer";
height: 100%;
width: 100%;
justify-content: center;
min-height: 100vh;
align-items: stretch;
}
.contain, :where(main>article, main>aside, main>section) {
display: grid;
grid-template-columns: minmax(.4rem, 1fr) minmax(0, 42rem) minmax(.3rem, 1fr);
> * {
grid-column: 2;
}
}
.escape {
grid-column: 1 / -1 !important;
}
/* HEADER */
header {
border-bottom: 3px #00000022 solid;
grid-area: header;
> div {
padding-bottom: .2rem;
display: flex;
.logo {
margin-right: .3rem;
svg {
width: 7rem;
height: 100%;
color: var(--color-primary);
}
}
nav {
display:flex;
align-items: center;
justify-content:flex-end;
flex: 1;
ul {
display: flex;
list-style: none;
flex-wrap: wrap;
margin-top: .4rem;
padding: 0;
justify-content: flex-end;
li {
margin-left:0.4rem;
margin-top:0.4rem;
}
}
}
}
}
/* MAIN */
main {
grid-area: main;
background-color: var(--color-light);
padding-bottom: 2rem;
aside { margin-top: 1.3em }
article {
.intro {
font-size: 1.2rem;
line-height: 1.35em;
}
}
.button {
margin-top: 1.3rem;
justify-self: start;
}
}
/* BUTTONS */
.button {
display: inline-block;
text-decoration: none;
border-radius: 2rem;
padding: 0.35rem 1rem;
background-color: transparent;
color: var(--color-grey);
outline: 0.08rem var(--color-grey) solid;
&:hover {
background-color: var(--color-grey);
color: white;
outline: none;
}
&:active, &.active {
background-color: var(--color-primary);
color: white;
outline: none;
}
&:focus {
background-color: var(--color-primary);
color: white;
outline: none;
}
&.inverted {
background-color: transparent;
color: white;
outline: 0.08rem white solid;
&:hover {
background-color: white;
color: var(--color-primary);
outline: none;
}
&:active, &.active {
background-color: var(--color-light);
color: var(--color-primary);
outline: none;
}
&:focus {
color: white;
background-color: var(--color-grey);
outline: none;
}
}
&.bigger {
font-size: 1.2em;
padding: calc(0.35rem * 1.2) calc(1rem * 1.2);
border-radius: calc(1rem * 1.2);
}
}
/* FOOTER */
footer {
color: var(--color-light);
a {
color: var(--color-light);
&:hover { color: white; text-decoration: underline }
}
background-color: var(--color-secondary);
grid-area: footer;
> div {
margin: 1rem 0;
text-align: center;
.generated { font-size: .6rem }
}
}