Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Image cards #19

Merged
merged 2 commits into from
Jan 24, 2025
Merged

Image cards #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f0bffe3
section layout fixes
Jan 24, 2025
15ecfd6
extract setup css
Jan 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions src/html/feedback.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,14 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Feedback</title>
<link rel="stylesheet" href="setup.css">
<link rel="stylesheet" href="feedback.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
<div class="grid-container">
<div></div>
<div class="grid-container">
<div></div>
<div id="app">
<h1>
<a title="feedbacks" href="https://github.com/danrusu/anonymous-feedback.git">
Expand All @@ -24,13 +25,13 @@ <h2>
</h2>

<textarea id="question" type="textarea" placeholder="Type your feedback here. You can use markdown.">
</textarea>
</textarea>

<button onclick="submitFeedback()">SUBMIT</button>

<div id="notification"></div>
</div>
<div></div>
<div></div>
</div>

<script src="feedback.js" async defer></script>
Expand Down
5 changes: 3 additions & 2 deletions src/html/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>testutils</title>
<link rel="stylesheet" href="setup.css">
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
Expand All @@ -21,9 +22,9 @@ <h2>

<main>
<section id="js4testers">
<div class="card-title">
<div class="section-title">
<img src="images/js-small.png" alt="JS" />
<span class="card-subtitle">4testers workshop<span>
<span class="section-subtitle">4testers workshop<span>
</div>

<a href="https://github.com/danrusu/js-for-testers">GitHub Repository</a>
Expand Down
55 changes: 26 additions & 29 deletions src/html/public/feedback.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,13 @@

:root {
box-sizing: border-box;
--pading: 0.5rem 0.5rem;
}

*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}

body{
font-family: "Libre Franklin", sans-serif;
--main-color: orange;
}

.grid-container {
min-height: 100vh;
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
align-items: center;
}

#app {
Expand All @@ -31,7 +18,7 @@ body{

h1 {
font-size: 2.3rem;
text-align: center;
text-align: center;
}

h2 {
Expand All @@ -40,7 +27,7 @@ h2 {
text-align: center;
}

textarea{
textarea {
min-width: 100%;
height: 15rem;
margin-top: 1.5rem;
Expand All @@ -49,23 +36,28 @@ textarea{
}

textarea:valid {
border: 2px solid orange;
border-radius: 5px;
border: 2px solid var(--main-color);
border-radius: 5px;
}

button {
margin-top: 1.5rem;
border-radius: 5px;
font-size: 1rem;
font-weight: bold;
background-color: orange;
font-weight: bold;
background-color: var(--main-color);
color: white;
padding: var(--pading);
opacity: 0.9;
}

button:hover {
opacity: 1;
}


a {
text-decoration: none;
color: orange;
color: var(--main-color);
}

#notification {
Expand All @@ -74,30 +66,35 @@ a {
}

@media (max-width: 500px) {
.grid-container{
.grid-container {
display: block;
}
#app{

#app {
justify-items: left;
}
h1{

h1 {
font-size: 1.4rem;
text-align: left;
margin-top: 0.5rem;
margin-left: 0.3rem;
}
h2{

h2 {
font-size: 1.1rem;
margin: 0.6rem 0 0.4rem 0;
text-align: left;
margin-left: 0.3rem;
}

button {
margin-left: 0.2rem;
margin-top: 0.3rem;
font-size: 1rem;
}
textarea{
margin-top: 0.5rem;

textarea {
margin-top: 0.5rem;
}
}
36 changes: 19 additions & 17 deletions src/html/public/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@
--footer-background: white;

--small-padding: 0.3rem;

box-sizing: border-box;
}

*,
Expand All @@ -22,8 +20,7 @@
body {
color: var(--main-text-color);
min-height: 100vh;
font-family: "Libre Franklin", sans-serif;
line-height: 1.5;

display: grid;
grid-template-rows: auto 1fr auto;
}
Expand Down Expand Up @@ -54,13 +51,6 @@ footer address a {
color: black;
}

section {
display: inline-block;
margin: var(--small-padding);
border: 2px solid var(--main-text-color);
border-radius: 5px;
text-align: center;
}

h1 {
font-size: 2rem;
Expand All @@ -73,13 +63,9 @@ h2 {
text-align: center;
}

a {
text-decoration: none;
cursor: pointer;
}

/* card */
.card-title {
.section-title {
font-size: 1.1rem;
font-weight: bold;
display: grid;
Expand All @@ -90,18 +76,34 @@ a {
padding-right: var(--small-padding);
}

.card-subtitle {
.section-subtitle {
padding-bottom: 0.2rem;
}

section {
display: inline-block;
margin: var(--small-padding);
border: 2px solid var(--main-text-color);
border-radius: 5px;
text-align: center;
}

section img {
border-radius: 5px 0 0 0;
}

section a {
display: block;
background-color: var(--main-text-color);
color: var(--main-background-color);
border-top: 1px solid yellow;
padding: var(--small-padding);
padding-left: calc(3*var(--small-padding));
text-align: left;
}



@media (max-width: 400px) {
main {
display: grid;
Expand Down
27 changes: 27 additions & 0 deletions src/html/public/setup.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
:root {
box-sizing: border-box;
}

*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}

body {
font-family: "Libre Franklin", sans-serif;
line-height: 1.5;
}

a {
text-decoration: none;
cursor: pointer;
}

a:hover {
text-decoration: underline;
text-underline-offset: 0.25rem;
text-decoration-thickness: 1px;
}
Loading