smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2025-07-15 05:40:36 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: app is complete however needs styling

Browse source
This commit is contained in:
Smigz 2025-02-18 20:55:25 -05:00
parent 05411c6bbb
commit 9d0787a5e8
18 changed files with 525 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

128
keynotes.app/public/css/style.css
View file

@ -75,10 +75,44 @@ h6 {
isolation: isolate;
}
a {
text-decoration: none;
}
nav {
font-size: 1.5rem;
margin: 1em 0 2em;
}
nav > ul {
list-style: none;
}
ul {
padding: 0;
margin: auto;
justify-content: space-around;
max-width: 80vw;
}
ul > li {
display: inline-block;
text-align: center;
}
form {
width: 100%;
max-width: 50vw;
}
.flex {
display: flex;
}
.col {
flex-direction: column;
}
.container.flex.hero {
align-items: center;
justify-content: center;
@ -98,6 +132,14 @@ h6 {
padding: 1em;
}
.center-horizontal {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.hero__heading {
margin: 0;
font-size: var(--mobile-heading-font-size);
@ -138,7 +180,84 @@ h6 {
flex-wrap: wrap;
}
.feed-heading {
margin-left: 1em;
text-transform: capitalize;
}
.feed-heading span {
text-transform: initial;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1em;
padding: 2em;
grid-auto-flow: dense;
}
.grid-item {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.grid-item.card {
border: 1px solid black;
text-align: center;
padding: 1.5em 1.5em 0.5em;
}
.grid__card__metadata {
font-size: 0.8em;
justify-content: space-between;
}
.card .card__message {
margin-bottom: 1em;
}
.form-item {
flex-direction: column;
width: 100%;
}
/*.active__underline {*/
/**/
/*}*/
.hover__underline {
/*display: inline-block;*/
position: relative;
}
.red {
color: red;
}
.hover__underline::after {
content: "";
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: black;
transform-origin: bottom left;
transition: transform 0.25s ease-out;
}
.hover__underline:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
@media only screen and (min-width: 750px) {
ul {
max-width: 60vw;
}
.hero__heading {
margin: 0;
font-size: var(--desktop-heading-font-size);
@ -159,8 +278,11 @@ h6 {
#main > .container.flex {
gap: 10em;
}
.form-item > .btn {
max-width: 200px;
.grid__span_two {
grid-column-end: span 2;
}
/*.form-item > .btn {*/
/* max-width: 200px;*/
/*}*/
}