make site static
This commit is contained in:
parent
fa220feae0
commit
38b43284a2
|
|
@ -0,0 +1,22 @@
|
|||
# image: "ruby:alpine3.14"
|
||||
|
||||
deploy:
|
||||
stage: deploy
|
||||
environment:
|
||||
name: production
|
||||
url: https://links.bij1.org/
|
||||
variables:
|
||||
HOST: static.bij1.net
|
||||
KNOWN_HOSTS: |
|
||||
static.bij1.net ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIBqkbrb28kEg5HSNx4s4aoFbkqLPWRHR4g5wxHmC5jR8
|
||||
static.bij1.net ecdsa-sha2-nistp256 AAAAE2VjZHNhLXNoYTItbmlzdHAyNTYAAAAIbmlzdHAyNTYAAABBBL9OdVKd3UPN62b8S/yfZ5ifgFT0Pe/exqlSZt8dEl51weBekpKLZO9hWKvjyHkLbYX39gdqY+sIYj0vOZSKoEk=
|
||||
script:
|
||||
- apk add openssh
|
||||
- apk add openrc
|
||||
- mkdir -p ~/.ssh/
|
||||
- echo "$SSH_KEY" | base64 -d > ~/.ssh/id_rsa
|
||||
- chmod 600 ~/.ssh/id_rsa
|
||||
- echo "$KNOWN_HOSTS" >> ~/.ssh/known_hosts
|
||||
- scp -r static/* root@$HOST:/var/www/linkbee
|
||||
only:
|
||||
- main
|
||||
21
README.md
21
README.md
|
|
@ -1,24 +1,7 @@
|
|||
# Linkbee
|
||||
|
||||
Linkbee is a statically generated page with a design initially adapted
|
||||
from [LinkFree](https://github.com/MichaelBarney/LinkFree). The user
|
||||
information is specified in `gatsby-config.js` and the links are
|
||||
currently retreived from a menu that is managed in
|
||||
[Wings](https://docs.wings.dev/).
|
||||
|
||||
## Configuration
|
||||
|
||||
Information for connecting to the Wings API should be specified through
|
||||
environment variables, for example as follows using a `.env` file.
|
||||
```
|
||||
GATSBY_WINGS_APP_KEY=app_key_here
|
||||
GATSBY_WINGS_PROJECT=project_id_here
|
||||
GATSBY_WINGS_ENDPOINT=https://api.wings.dev
|
||||
```
|
||||
|
||||
## Running
|
||||
|
||||
To run for development use `npm start` and to build use `npm build`.
|
||||
Linkbee is a static page with a design initially adapted
|
||||
from [LinkFree](https://github.com/MichaelBarney/LinkFree).
|
||||
|
||||
## License
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
import "./src/styles/global.scss"
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
require("dotenv").config()
|
||||
|
||||
module.exports = {
|
||||
siteMetadata: {
|
||||
title: `linkbee`,
|
||||
siteUrl: process.env.SITE_URL || process.env.URL || 'http://localhost:8000',
|
||||
user: {
|
||||
name: `@politiek_bij1`,
|
||||
link: `https://www.instagram.com/politiek_bij1/`,
|
||||
avatar: `avatar.png`
|
||||
},
|
||||
socialmedia: {
|
||||
instagram: 'https://instagram.com/politiek_bij1',
|
||||
youtube: 'https://www.youtube.com/channel/UCI1wgi8HoU-wAnuSPSTDDUA/featured',
|
||||
linkedin: 'https://linkedin.com/company/BIJ1',
|
||||
facebook: 'https://facebook.com/www.bij1.org',
|
||||
twitter: 'https://twitter.com/politiekbij1'
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
'gatsby-plugin-sass',
|
||||
{
|
||||
resolve: 'gatsby-source-graphql',
|
||||
options: {
|
||||
typeName: 'Wings',
|
||||
fieldName: 'wings',
|
||||
url: process.env.GATSBY_WINGS_ENDPOINT || 'https://api.wings.dev',
|
||||
headers: {
|
||||
Authorization: `Bearer ${process.env.GATSBY_WINGS_APP_KEY}`,
|
||||
'X-Wings-Project': process.env.GATSBY_WINGS_PROJECT,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
21
package.json
21
package.json
|
|
@ -1,21 +0,0 @@
|
|||
{
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "gatsby develop",
|
||||
"build": "gatsby build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.30",
|
||||
"@fortawesome/free-brands-svg-icons": "^5.14.0",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.14.0",
|
||||
"@fortawesome/react-fontawesome": "^0.1.11",
|
||||
"dotenv": "^8.0.0",
|
||||
"gatsby": "^2.7.3",
|
||||
"gatsby-plugin-google-fonts": "^1.0.1",
|
||||
"gatsby-plugin-sass": "^2.3.12",
|
||||
"gatsby-source-graphql": "^2.6.1",
|
||||
"node-sass": "^4.14.1",
|
||||
"react": "^16.8.6",
|
||||
"react-dom": "^16.8.6"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import React from "react"
|
||||
import styles from "./link.module.scss"
|
||||
|
||||
export default function Link({ url, text }) {
|
||||
return <a href={url} className={styles.link}>{text}</a>
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
.link{
|
||||
display: block;
|
||||
background-color: var(--accentColor);
|
||||
color: black;
|
||||
font-family: var(--font);
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
padding: 17px;
|
||||
text-decoration: none;
|
||||
font-size: 1rem;
|
||||
transition: all .25s cubic-bezier(.08,.59,.29,.99);
|
||||
border: solid var(--accentColor) 2px;
|
||||
letter-spacing: 0.05rem;
|
||||
}
|
||||
|
||||
.link:hover{
|
||||
background-color: black;
|
||||
color: var(--accentColor);
|
||||
border-color: black;
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import React from "react"
|
||||
import Link from "./link.js"
|
||||
import styles from "./page.module.scss"
|
||||
|
||||
const Page = ({ user, links }) =>
|
||||
<>
|
||||
<img className={styles.userAvatar} src={user.avatar} alt="user avatar" />
|
||||
<a href={user.link} className={styles.userName}>{user.name}</a>
|
||||
<div className={styles.links}>
|
||||
{links.map(({ text, url }) => <Link text={text} url={url} />)}
|
||||
</div>
|
||||
</>
|
||||
|
||||
export default Page
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
.userAvatar{
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
display: block;
|
||||
margin: 35px auto 20px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.userName{
|
||||
color: #bbb;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
display: block;
|
||||
font-family: var(--font);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.links{
|
||||
max-width: 675px;
|
||||
width: auto;
|
||||
display: block;
|
||||
margin: 27px auto;
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
import React from "react"
|
||||
import styles from "./socials.module.scss"
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import {
|
||||
faFacebook,
|
||||
faTwitter,
|
||||
faInstagram,
|
||||
faYoutube,
|
||||
faLinkedinIn,
|
||||
} from '@fortawesome/free-brands-svg-icons'
|
||||
|
||||
const Socials = ({socialmedia}) => (
|
||||
<main
|
||||
style={{
|
||||
maxWidth: '608px',
|
||||
margin: '0 auto',
|
||||
}}
|
||||
>
|
||||
<div className={styles.container}>
|
||||
<a href={socialmedia.facebook} target="_blank"><FontAwesomeIcon icon={faFacebook} size="2x"/></a>
|
||||
<a href={socialmedia.twitter} target="_blank"><FontAwesomeIcon icon={faTwitter} size="2x" /></a>
|
||||
<a href={socialmedia.instagram} target="_blank"><FontAwesomeIcon icon={faInstagram} size="2x" /></a>
|
||||
<a href={socialmedia.youtube} target="_blank"><FontAwesomeIcon icon={faYoutube} size="2x" /></a>
|
||||
<a href={socialmedia.linkedin} target="_blank"><FontAwesomeIcon icon={faLinkedinIn} size="2x" /></a>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
|
||||
export default Socials
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
.container {
|
||||
width: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
a {
|
||||
color: black;
|
||||
:hover {
|
||||
color: yellow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
import React from "react"
|
||||
import { graphql } from 'gatsby'
|
||||
import Page from "../components/page.js"
|
||||
import Socials from "../components/socials.js"
|
||||
|
||||
export default function Home({ data }) {
|
||||
return (
|
||||
<div>
|
||||
<Page
|
||||
user={data.site.siteMetadata.user}
|
||||
links={data.wings.menu.items}
|
||||
>
|
||||
</Page>
|
||||
<Socials
|
||||
socialmedia={data.site.siteMetadata.socialmedia}
|
||||
></Socials>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export const query = graphql`
|
||||
query {
|
||||
wings {
|
||||
menu(selector: {id: {eq: "GJ2j4JxMRlF9vXpZOoQO"}}) {
|
||||
items {
|
||||
text
|
||||
url
|
||||
}
|
||||
}
|
||||
}
|
||||
site {
|
||||
siteMetadata {
|
||||
user {
|
||||
name
|
||||
link
|
||||
avatar
|
||||
}
|
||||
socialmedia {
|
||||
instagram
|
||||
youtube
|
||||
facebook
|
||||
twitter
|
||||
linkedin
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
:root {
|
||||
--bgColor: white;
|
||||
--accentColor: #FDFD31;
|
||||
--font: Roboto, sans-serif;
|
||||
}
|
||||
|
||||
body{
|
||||
background-color: var(--bgColor);
|
||||
}
|
||||
|
|
@ -0,0 +1,455 @@
|
|||
svg:not(:root).svg-inline--fa {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.svg-inline--fa {
|
||||
display: inline-block;
|
||||
font-size: inherit;
|
||||
height: 1em;
|
||||
overflow: visible;
|
||||
vertical-align: -0.125em;
|
||||
}
|
||||
.svg-inline--fa.fa-lg {
|
||||
vertical-align: -0.225em;
|
||||
}
|
||||
.svg-inline--fa.fa-w-1 {
|
||||
width: 0.0625em;
|
||||
}
|
||||
.svg-inline--fa.fa-w-2 {
|
||||
width: 0.125em;
|
||||
}
|
||||
.svg-inline--fa.fa-w-3 {
|
||||
width: 0.1875em;
|
||||
}
|
||||
.svg-inline--fa.fa-w-4 {
|
||||
width: 0.25em;
|
||||
}
|
||||
.svg-inline--fa.fa-w-5 {
|
||||
width: 0.3125em;
|
||||
}
|
||||
.svg-inline--fa.fa-w-6 {
|
||||
width: 0.375em;
|
||||
}
|
||||
.svg-inline--fa.fa-w-7 {
|
||||
width: 0.4375em;
|
||||
}
|
||||
.svg-inline--fa.fa-w-8 {
|
||||
width: 0.5em;
|
||||
}
|
||||
.svg-inline--fa.fa-w-9 {
|
||||
width: 0.5625em;
|
||||
}
|
||||
.svg-inline--fa.fa-w-10 {
|
||||
width: 0.625em;
|
||||
}
|
||||
.svg-inline--fa.fa-w-11 {
|
||||
width: 0.6875em;
|
||||
}
|
||||
.svg-inline--fa.fa-w-12 {
|
||||
width: 0.75em;
|
||||
}
|
||||
.svg-inline--fa.fa-w-13 {
|
||||
width: 0.8125em;
|
||||
}
|
||||
.svg-inline--fa.fa-w-14 {
|
||||
width: 0.875em;
|
||||
}
|
||||
.svg-inline--fa.fa-w-15 {
|
||||
width: 0.9375em;
|
||||
}
|
||||
.svg-inline--fa.fa-w-16 {
|
||||
width: 1em;
|
||||
}
|
||||
.svg-inline--fa.fa-w-17 {
|
||||
width: 1.0625em;
|
||||
}
|
||||
.svg-inline--fa.fa-w-18 {
|
||||
width: 1.125em;
|
||||
}
|
||||
.svg-inline--fa.fa-w-19 {
|
||||
width: 1.1875em;
|
||||
}
|
||||
.svg-inline--fa.fa-w-20 {
|
||||
width: 1.25em;
|
||||
}
|
||||
.svg-inline--fa.fa-pull-left {
|
||||
margin-right: 0.3em;
|
||||
width: auto;
|
||||
}
|
||||
.svg-inline--fa.fa-pull-right {
|
||||
margin-left: 0.3em;
|
||||
width: auto;
|
||||
}
|
||||
.svg-inline--fa.fa-border {
|
||||
height: 1.5em;
|
||||
}
|
||||
.svg-inline--fa.fa-li {
|
||||
width: 2em;
|
||||
}
|
||||
.svg-inline--fa.fa-fw {
|
||||
width: 1.25em;
|
||||
}
|
||||
|
||||
.fa-layers svg.svg-inline--fa {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.fa-layers {
|
||||
display: inline-block;
|
||||
height: 1em;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
vertical-align: -0.125em;
|
||||
width: 1em;
|
||||
}
|
||||
.fa-layers svg.svg-inline--fa {
|
||||
-webkit-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.fa-layers-counter,
|
||||
.fa-layers-text {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fa-layers-text {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
-webkit-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.fa-layers-counter {
|
||||
background-color: #ff253a;
|
||||
border-radius: 1em;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
height: 1.5em;
|
||||
line-height: 1;
|
||||
max-width: 5em;
|
||||
min-width: 1.5em;
|
||||
overflow: hidden;
|
||||
padding: 0.25em;
|
||||
right: 0;
|
||||
text-overflow: ellipsis;
|
||||
top: 0;
|
||||
-webkit-transform: scale(0.25);
|
||||
transform: scale(0.25);
|
||||
-webkit-transform-origin: top right;
|
||||
transform-origin: top right;
|
||||
}
|
||||
|
||||
.fa-layers-bottom-right {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
top: auto;
|
||||
-webkit-transform: scale(0.25);
|
||||
transform: scale(0.25);
|
||||
-webkit-transform-origin: bottom right;
|
||||
transform-origin: bottom right;
|
||||
}
|
||||
|
||||
.fa-layers-bottom-left {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: auto;
|
||||
top: auto;
|
||||
-webkit-transform: scale(0.25);
|
||||
transform: scale(0.25);
|
||||
-webkit-transform-origin: bottom left;
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
|
||||
.fa-layers-top-right {
|
||||
right: 0;
|
||||
top: 0;
|
||||
-webkit-transform: scale(0.25);
|
||||
transform: scale(0.25);
|
||||
-webkit-transform-origin: top right;
|
||||
transform-origin: top right;
|
||||
}
|
||||
|
||||
.fa-layers-top-left {
|
||||
left: 0;
|
||||
right: auto;
|
||||
top: 0;
|
||||
-webkit-transform: scale(0.25);
|
||||
transform: scale(0.25);
|
||||
-webkit-transform-origin: top left;
|
||||
transform-origin: top left;
|
||||
}
|
||||
|
||||
.fa-lg {
|
||||
font-size: 1.3333333333em;
|
||||
line-height: 0.75em;
|
||||
vertical-align: -0.0667em;
|
||||
}
|
||||
|
||||
.fa-xs {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
.fa-sm {
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
.fa-1x {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.fa-2x {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.fa-3x {
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
.fa-4x {
|
||||
font-size: 4em;
|
||||
}
|
||||
|
||||
.fa-5x {
|
||||
font-size: 5em;
|
||||
}
|
||||
|
||||
.fa-6x {
|
||||
font-size: 6em;
|
||||
}
|
||||
|
||||
.fa-7x {
|
||||
font-size: 7em;
|
||||
}
|
||||
|
||||
.fa-8x {
|
||||
font-size: 8em;
|
||||
}
|
||||
|
||||
.fa-9x {
|
||||
font-size: 9em;
|
||||
}
|
||||
|
||||
.fa-10x {
|
||||
font-size: 10em;
|
||||
}
|
||||
|
||||
.fa-fw {
|
||||
text-align: center;
|
||||
width: 1.25em;
|
||||
}
|
||||
|
||||
.fa-ul {
|
||||
list-style-type: none;
|
||||
margin-left: 2.5em;
|
||||
padding-left: 0;
|
||||
}
|
||||
.fa-ul > li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fa-li {
|
||||
left: -2em;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 2em;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.fa-border {
|
||||
border: solid 0.08em #eee;
|
||||
border-radius: 0.1em;
|
||||
padding: 0.2em 0.25em 0.15em;
|
||||
}
|
||||
|
||||
.fa-pull-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.fa-pull-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.fa.fa-pull-left,
|
||||
.fas.fa-pull-left,
|
||||
.far.fa-pull-left,
|
||||
.fal.fa-pull-left,
|
||||
.fab.fa-pull-left {
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
.fa.fa-pull-right,
|
||||
.fas.fa-pull-right,
|
||||
.far.fa-pull-right,
|
||||
.fal.fa-pull-right,
|
||||
.fab.fa-pull-right {
|
||||
margin-left: 0.3em;
|
||||
}
|
||||
|
||||
.fa-spin {
|
||||
-webkit-animation: fa-spin 2s infinite linear;
|
||||
animation: fa-spin 2s infinite linear;
|
||||
}
|
||||
|
||||
.fa-pulse {
|
||||
-webkit-animation: fa-spin 1s infinite steps(8);
|
||||
animation: fa-spin 1s infinite steps(8);
|
||||
}
|
||||
|
||||
@-webkit-keyframes fa-spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fa-spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.fa-rotate-90 {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.fa-rotate-180 {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.fa-rotate-270 {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
|
||||
-webkit-transform: rotate(270deg);
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
||||
.fa-flip-horizontal {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
|
||||
-webkit-transform: scale(-1, 1);
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
|
||||
.fa-flip-vertical {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
|
||||
-webkit-transform: scale(1, -1);
|
||||
transform: scale(1, -1);
|
||||
}
|
||||
|
||||
.fa-flip-both,
|
||||
.fa-flip-horizontal.fa-flip-vertical {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
|
||||
-webkit-transform: scale(-1, -1);
|
||||
transform: scale(-1, -1);
|
||||
}
|
||||
|
||||
:root .fa-rotate-90,
|
||||
:root .fa-rotate-180,
|
||||
:root .fa-rotate-270,
|
||||
:root .fa-flip-horizontal,
|
||||
:root .fa-flip-vertical,
|
||||
:root .fa-flip-both {
|
||||
-webkit-filter: none;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.fa-stack {
|
||||
display: inline-block;
|
||||
height: 2em;
|
||||
position: relative;
|
||||
width: 2.5em;
|
||||
}
|
||||
|
||||
.fa-stack-1x,
|
||||
.fa-stack-2x {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.svg-inline--fa.fa-stack-1x {
|
||||
height: 1em;
|
||||
width: 1.25em;
|
||||
}
|
||||
.svg-inline--fa.fa-stack-2x {
|
||||
height: 2em;
|
||||
width: 2.5em;
|
||||
}
|
||||
|
||||
.fa-inverse {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
border: 0;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.sr-only-focusable:active,
|
||||
.sr-only-focusable:focus {
|
||||
clip: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
position: static;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.svg-inline--fa .fa-primary {
|
||||
fill: var(--fa-primary-color, currentColor);
|
||||
opacity: 1;
|
||||
opacity: var(--fa-primary-opacity, 1);
|
||||
}
|
||||
|
||||
.svg-inline--fa .fa-secondary {
|
||||
fill: var(--fa-secondary-color, currentColor);
|
||||
opacity: 0.4;
|
||||
opacity: var(--fa-secondary-opacity, 0.4);
|
||||
}
|
||||
|
||||
.svg-inline--fa.fa-swap-opacity .fa-primary {
|
||||
opacity: 0.4;
|
||||
opacity: var(--fa-secondary-opacity, 0.4);
|
||||
}
|
||||
|
||||
.svg-inline--fa.fa-swap-opacity .fa-secondary {
|
||||
opacity: 1;
|
||||
opacity: var(--fa-primary-opacity, 1);
|
||||
}
|
||||
|
||||
.svg-inline--fa mask .fa-primary,
|
||||
.svg-inline--fa mask .fa-secondary {
|
||||
fill: black;
|
||||
}
|
||||
|
||||
.fad.fa-inverse {
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||
<link rel="stylesheet" href="font-awesome.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<div style="outline: none;" tabindex="-1">
|
||||
<div>
|
||||
<img class="page-module--userAvatar--3fuD7" src="avatar.png" alt="user avatar" /><a href="https://www.instagram.com/politiek_bij1/" class="page-module--userName--19ZXF">@politiek_bij1</a>
|
||||
<div class="page-module--links--2kknN">
|
||||
<a href="https://doemee.bij1.org" class="link-module--link--3eyVh">WORD LID</a><a href="https://bij1.org/doneer" class="link-module--link--3eyVh">DONEER</a>
|
||||
<a href="https://bij1.org" class="link-module--link--3eyVh">BIJ1 WEBSITE</a><a href="https://shop.bij1.org/" class="link-module--link--3eyVh">BIJ1 SHOP</a>
|
||||
<a href="https://www.youtube.com/c/BIJ1Politiek" class="link-module--link--3eyVh">BIJ1 YOUTUBE</a><a href="https://bij1.org/vacatures" class="link-module--link--3eyVh">VACATURES</a>
|
||||
</div>
|
||||
<main style="max-width: 608px; margin: 0 auto;">
|
||||
<div class="socials-module--container--Smt8Z">
|
||||
<a href="https://facebook.com/www.bij1.org" target="_blank">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook" class="svg-inline--fa fa-facebook fa-w-16 fa-2x" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://twitter.com/politiekbij1" target="_blank">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" class="svg-inline--fa fa-twitter fa-w-16 fa-2x" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://instagram.com/politiek_bij1" target="_blank">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="instagram" class="svg-inline--fa fa-instagram fa-w-14 fa-2x" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/channel/UCI1wgi8HoU-wAnuSPSTDDUA/featured" target="_blank">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="youtube" class="svg-inline--fa fa-youtube fa-w-18 fa-2x" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://linkedin.com/company/BIJ1" target="_blank">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="linkedin-in" class="svg-inline--fa fa-linkedin-in fa-w-14 fa-2x" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
:root {
|
||||
--bgColor: #fff;
|
||||
--accentColor: #fdfd31;
|
||||
--font: Roboto, sans-serif;
|
||||
}
|
||||
body {
|
||||
background-color: var(--bgColor);
|
||||
}
|
||||
.link-module--link--3eyVh {
|
||||
display: block;
|
||||
background-color: var(--accentColor);
|
||||
color: #000;
|
||||
font-family: var(--font);
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
padding: 17px;
|
||||
text-decoration: none;
|
||||
font-size: 1rem;
|
||||
transition: all 0.25s cubic-bezier(0.08, 0.59, 0.29, 0.99);
|
||||
border: 2px solid var(--accentColor);
|
||||
letter-spacing: 0.05rem;
|
||||
}
|
||||
.link-module--link--3eyVh:hover {
|
||||
background-color: #000;
|
||||
color: var(--accentColor);
|
||||
border-color: #000;
|
||||
}
|
||||
.page-module--userAvatar--3fuD7 {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
display: block;
|
||||
margin: 35px auto 20px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.page-module--userName--19ZXF {
|
||||
color: #bbb;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
display: block;
|
||||
font-family: var(--font);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
.page-module--links--2kknN {
|
||||
max-width: 675px;
|
||||
width: auto;
|
||||
display: block;
|
||||
margin: 27px auto;
|
||||
}
|
||||
.socials-module--container--Smt8Z {
|
||||
width: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.socials-module--container--Smt8Z a {
|
||||
color: #000;
|
||||
}
|
||||
.socials-module--container--Smt8Z a :hover {
|
||||
color: #ff0;
|
||||
}
|
||||
Loading…
Reference in New Issue