Issue/exec info (#15)
* added template, need to style Signed-off-by: Ash Entwisle <ash.entwisle@protonmail.com> * fixed css issues Signed-off-by: Ash Entwisle <ash.entwisle@protonmail.com> * updated tailwind config Signed-off-by: Ash Entwisle <ash.entwisle@protonmail.com> --------- Signed-off-by: Ash Entwisle <ash.entwisle@protonmail.com>issue/index
Ash
GitHub
parent
5cbcb0de77
commit
7d791c0df2
|
|
@ -0,0 +1,26 @@
|
|||
---
|
||||
export interface Exec {
|
||||
title: string;
|
||||
name: string;
|
||||
pronouns: string;
|
||||
gh: string;
|
||||
img: string;
|
||||
}
|
||||
|
||||
const { title, name, pronouns, gh, img } = Astro.props;
|
||||
|
||||
const img_url = `/assets/execs/${img}`;
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
<div class="exec">
|
||||
<div class="exec-pfp">
|
||||
<img src={img_url} alt={name}>
|
||||
</div>
|
||||
<div class="exec-info">
|
||||
<h3><b>{title}: <a href={gh}>{name}</a> </b> <i> ({pronouns}) </i></h3>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
---
|
||||
import Exec from "./Exec.astro";
|
||||
---
|
||||
|
||||
<div class="execs">
|
||||
<h2>Meet the Team: </h2>
|
||||
|
||||
<Exec
|
||||
title="President"
|
||||
name="Zoe"
|
||||
pronouns="add/here"
|
||||
gh="add-here"
|
||||
img="zoe.png"
|
||||
>
|
||||
lorem
|
||||
</Exec>
|
||||
|
||||
<Exec
|
||||
title="Secretary"
|
||||
name="Will"
|
||||
pronouns="add/here"
|
||||
gh="add-here"
|
||||
img="will.png"
|
||||
>
|
||||
Hey! I'm Will and I am a second year computer science student on the year industry course.
|
||||
I am the secretary for this year meaning I will be ensuring that our society communicates well with other societies
|
||||
and opportunities so that fun and memorable events can take place!
|
||||
I hope everyone has a great and if you ever need to reach out you can reach me on the discord :).
|
||||
</Exec>
|
||||
|
||||
<Exec
|
||||
title="Treasurer"
|
||||
name="Alex"
|
||||
pronouns="add/here"
|
||||
gh="add-here"
|
||||
img="alex.png"
|
||||
>
|
||||
lorem
|
||||
</Exec>
|
||||
|
||||
<Exec
|
||||
title="Social Secretary"
|
||||
name="Aren"
|
||||
pronouns="add/here"
|
||||
gh="add-here"
|
||||
img="aren.png"
|
||||
>
|
||||
lorem
|
||||
</Exec>
|
||||
|
||||
<Exec
|
||||
title="Webmaster"
|
||||
name="Ash"
|
||||
pronouns="she/they"
|
||||
gh="ash-entwisle"
|
||||
img="ash.png"
|
||||
>
|
||||
Hi, I'm Ash. A second year Computer Science student and your webmaster for this year.
|
||||
Its my job to make sure the website stays up and running.
|
||||
I'm a big fan of Linux, FOSS, Rust and Blue Ikea Sharks <i>(BLÅHAJ my beloved)</i>.
|
||||
Feel free to message me on discord if you need a hand with anything.
|
||||
</Exec>
|
||||
|
||||
</div>
|
||||
110
src/styles.scss
110
src/styles.scss
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
|
||||
:root {
|
||||
@apply bg-mono_5;
|
||||
@apply bg-mono_4;
|
||||
@apply text-mono_1;
|
||||
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
|
|
@ -78,9 +78,7 @@ header {
|
|||
margin-right: 15px;
|
||||
|
||||
a {
|
||||
font-size: larger;
|
||||
padding-left: 25px;
|
||||
text-decoration: none;
|
||||
|
||||
line-height: 25px;
|
||||
|
||||
|
|
@ -90,8 +88,21 @@ header {
|
|||
transition: 0.125s ease-in-out;
|
||||
font-weight: bolder;
|
||||
|
||||
//increase font size
|
||||
font-size: larger;
|
||||
|
||||
@apply text-hue_4a;
|
||||
}
|
||||
|
||||
&:not(:hover) {
|
||||
font-size: large;
|
||||
text-decoration: none;
|
||||
font-weight: normal;
|
||||
|
||||
transition: 0.125s ease-in-out;
|
||||
|
||||
@apply text-mono_1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -113,19 +124,98 @@ header {
|
|||
}
|
||||
|
||||
main {
|
||||
// add 5% padding to l and r
|
||||
padding-left: 10%;
|
||||
padding-right: 10%;
|
||||
|
||||
.execs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
h2 {
|
||||
font-size: xx-large;
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.exec {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
padding-bottom: 25px;
|
||||
|
||||
h3 {
|
||||
margin: 0px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
|
||||
.exec-pfp {
|
||||
// center image
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
img {
|
||||
|
||||
box-sizing: content-box;
|
||||
|
||||
height: 175px;
|
||||
width: 175px;
|
||||
margin-right: 25px;
|
||||
// round corners
|
||||
border-radius: 20px;
|
||||
|
||||
@apply bg-mono_5;
|
||||
|
||||
&:hover {
|
||||
transition: 0.2s ease-in-out;
|
||||
transform: scale(1.05);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
// on not hover, transition back to normal
|
||||
&:not(:hover) {
|
||||
transition: 0.1s ease-in-out;
|
||||
transform: scale(1);
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// if less than 800, hide exec-pfp
|
||||
@media only screen and (max-width: 800px) {
|
||||
.exec-pfp {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
@apply text-hue_4a;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
|
||||
@apply text-hue_1a;
|
||||
transition: 0.125s ease-in-out;
|
||||
|
||||
@apply text-hue_4b;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
@apply text-hue_2a;
|
||||
&:not(:hover) {
|
||||
text-decoration: none;
|
||||
|
||||
transition: 0.125s ease-in-out;
|
||||
|
||||
@apply text-hue_4a;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,8 @@ module.exports = {
|
|||
hue_2a: 'hsl(207, 82%, 66%)',
|
||||
hue_3a: 'hsl(286, 60%, 67%)',
|
||||
hue_4a: 'hsl(95, 38%, 62%)',
|
||||
hue_4b: 'hsl(03, 17%, 41%)',
|
||||
hue_4b: 'hsl( 95, 38%, 50%)',
|
||||
hue_4c: '#617958',
|
||||
hue_5a: 'hsl(355, 65%, 65%)',
|
||||
hue_5b: 'hsl( 5, 48%, 51%)',
|
||||
hue_6a: 'hsl( 29, 54%, 61%)',
|
||||
|
|
|
|||
Loading…
Reference in New Issue