Skip to content

Commit e04c89c

Browse files
mattludwigsfhunleth
mattludwigs
authored and
fhunleth
committed
Start redesigning
1 parent fc8a028 commit e04c89c

File tree

3 files changed

+227
-1
lines changed

3 files changed

+227
-1
lines changed

‎_config.yml

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎index.html

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Elixir Circuits</title>
8+
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.2/gh-fork-ribbon.min.css" />
10+
<link href="https://fonts.googleapis.com/css?family=Roboto|Ubuntu" rel="stylesheet">
11+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
12+
<link rel="stylesheet" href="./styles.css"/>
13+
</head>
14+
<body>
15+
16+
<header class="container">
17+
<div class="section">
18+
<img class="block--center logo" src="./circuits.png">
19+
<h1 class="header h1 text center">Elixir Circuits</h1>
20+
<p class="p text center secondary">Elixir Circuits provides libraries for working with hardware in Elixir</p>
21+
</div>
22+
</header>
23+
24+
<hr class="container">
25+
26+
<div class="section container content">
27+
<h2 class="header h2 text center">Libraries</h2>
28+
<ul class="libraries">
29+
<li class="library">
30+
<div class="circle">
31+
<a class="text secondary library-name" href="https://github.com/elixir-circuits/circuits_gpio"><i class="far fa-lightbulb"></i></a>
32+
<h3><a href="https://github.com/elixir-circuits/circuits_gpio">GPIO</a></h3>
33+
</div>
34+
</li>
35+
<li class="library">
36+
<div class="circle">
37+
<a class="text secondary library-name" href="https://github.com/elixir-circuits/circuits_i2c"><i class="fas fa-microchip"></i></a>
38+
<h3><a href="https://github.com/elixir-circuits/circuits_i2c">I2C</a></h3>
39+
</div>
40+
</li>
41+
<li class="library">
42+
<div class="circle">
43+
<a class="text secondary library-name" href="https://github.com/elixir-circuits/circuits_spi"><i class="fas fa-sd-card"></i></a>
44+
<h3><a href="https://github.com/elixir-circuits/circuits_spi">SPI</a></h3>
45+
</div>
46+
</li>
47+
<li class="library">
48+
<div class="circle">
49+
<a class="text secondary library-name" href="https://github.com/elixir-circuits/circuits_uart"><i class="fab fa-usb"></i></a>
50+
<h3><a href="https://github.com/elixir-circuits/circuits_uart">UART</a></h3>
51+
</div>
52+
</li>
53+
</ul>
54+
</div>
55+
<footer>
56+
<a class="icon" href="https://github.com/elixir-circuits"><i class="fab fa-github"></i></a>
57+
</footer>
58+
<a class="github-fork-ribbon" href="https://github.com/elixir-circuits" data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
59+
</body>
60+
</html>

‎styles.css

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
/* Basic Normalize*/
2+
* {
3+
margin: 0 auto;
4+
font-family: 'Ubuntu', sans-serif;
5+
padding: 0;
6+
}
7+
8+
/* Update Fork Me ribbon */
9+
10+
.github-fork-ribbon::before {
11+
background-color: #665176;
12+
}
13+
14+
a {
15+
color: black;
16+
text-decoration: none;
17+
}
18+
19+
.p {
20+
margin: 12px 0;
21+
}
22+
23+
.header {
24+
margin: 20px 0;
25+
}
26+
27+
.section {
28+
margin: 50px 0;
29+
}
30+
31+
.text.center {
32+
text-align: center;
33+
}
34+
35+
.text.secondary {
36+
font-family: 'Roboto', sans-serif;
37+
}
38+
39+
.container {
40+
width: 90%;
41+
margin: 0 auto;
42+
}
43+
44+
.block--center {
45+
margin: 0 auto;
46+
display: block;
47+
}
48+
49+
.margin-bottom--20 {
50+
margin-bottom: 20px;
51+
}
52+
53+
.content {
54+
padding-top: 17px;
55+
}
56+
57+
.logo {
58+
width: 75%;
59+
}
60+
61+
.h1 {
62+
font-size: 5rem;
63+
margin-top: -32px;
64+
}
65+
66+
.h2 {
67+
font-size: 3rem;
68+
}
69+
70+
.circle {
71+
width: 150px;
72+
height: 150px;
73+
border-radius: 50%;
74+
border: 4px solid black;
75+
}
76+
77+
.circle, .circle * {
78+
-o-transition:.5s;
79+
-ms-transition:.5s;
80+
-moz-transition:.5s;
81+
-webkit-transition:.5s;
82+
/* ...and now for the proper property */
83+
transition:.5s;
84+
}
85+
86+
.circle:hover, .circle:hover * {
87+
border-color: #665176;
88+
color: #665176;
89+
}
90+
91+
.libraries {
92+
list-style: none;
93+
display: flex;
94+
flex-direction: row;
95+
flex-wrap: wrap;
96+
justify-content: center;
97+
align-items: center;
98+
margin-top: 50px;
99+
margin-bottom: 50px;
100+
}
101+
102+
.library {
103+
height: 150px;
104+
width: 100%;
105+
margin-top: 25px;
106+
}
107+
108+
.library:hover .clircle {
109+
border-color: #0E0E0E;
110+
}
111+
112+
.library .library-name {
113+
font-size: 3.5rem;
114+
}
115+
116+
.library a {
117+
display:inline-block;
118+
}
119+
120+
.library h3 {
121+
line-height: 0;
122+
margin-top: 15px;
123+
font-size: 2rem;
124+
}
125+
126+
.library .circle {
127+
text-align: center;
128+
line-height: 150px;
129+
}
130+
131+
footer {
132+
background-color: rgba(0,0,0,0.05);
133+
text-align: center;
134+
padding-top: 25px;
135+
padding-bottom: 25px;
136+
}
137+
138+
footer .icon {
139+
font-size: 2.5rem;
140+
141+
-o-transition:.5s;
142+
-ms-transition:.5s;
143+
-moz-transition:.5s;
144+
-webkit-transition:.5s;
145+
/* ...and now for the proper property */
146+
transition:.5s;
147+
}
148+
149+
footer .icon:hover {
150+
color: #665176;
151+
}
152+
153+
@media (min-width: 720px) {
154+
.logo {
155+
width: 45%;
156+
}
157+
158+
.libraries {
159+
margin-top: 55px;
160+
}
161+
162+
.library {
163+
width: 30%;
164+
margin-top: 0;
165+
margin-bottom: 90px;
166+
}
167+
}

0 commit comments

Comments
 (0)