Clean up about page.
250
public/css/style.css
vendored
|
@ -1,215 +1,95 @@
|
||||||
|
body {
|
||||||
.site-title {
|
font-family: Roboto;
|
||||||
/*background-image: url("background.jpg");*/
|
background-image: url(/images/clouds.jpg);
|
||||||
margin: -8px;
|
background-color: #F5F7FA;
|
||||||
|
color: #2d2d2d;
|
||||||
height: 50px;
|
|
||||||
background-color: white;
|
|
||||||
font-weight:bolder;
|
|
||||||
padding-left: 890px;
|
|
||||||
padding-top:10px;
|
|
||||||
color: black;
|
|
||||||
white-space:nowrap;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar{
|
a {
|
||||||
|
text-decoration:none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navlist{
|
.card {
|
||||||
position:relative;
|
background-color:white;
|
||||||
list-style-type:none;
|
box-shadow: 2px 2px 3px rgba(0,0,0,.13) ,1px 2px 2px rgba(0,0,0,.1) , -1px -2px 2px rgba(0,0,0,.05);
|
||||||
padding: 0px;
|
margin: auto;
|
||||||
padding-left:20px;
|
margin-top: 20px;
|
||||||
height:40px;
|
max-width: 750px;
|
||||||
min-width:550px;
|
padding: 20px;
|
||||||
width:100%;
|
|
||||||
margin:8px;
|
|
||||||
margin-left:-8px;
|
|
||||||
width:end;
|
|
||||||
background-color: white;
|
|
||||||
white-space:nowrap;
|
|
||||||
padding-top:10px;
|
|
||||||
box-shadow: 0px 3px 0px rgba(0,0,0,.13) ,1px 2px 2px rgba(0,0,0,.1) , 0px 0px 0px rgba(0,0,0,.05);
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.navlink a{
|
.member-container{
|
||||||
color:black;
|
display:flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.navlink:hover a{
|
.person-photo img{
|
||||||
color: #109EF2;
|
padding-top:10px;
|
||||||
}
|
height:30%;
|
||||||
.navlink {
|
width:30%;
|
||||||
display:inline;
|
display: block;
|
||||||
padding: 10px;
|
|
||||||
font-size:21px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.active{
|
|
||||||
border-bottom:3px solid #109EF2;
|
|
||||||
}
|
|
||||||
|
|
||||||
header{
|
|
||||||
color:black;
|
|
||||||
}
|
|
||||||
body a{
|
|
||||||
font-family:Roboto;
|
|
||||||
text-decoration:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.twit-container{
|
|
||||||
|
|
||||||
font-family:Roboto;
|
|
||||||
background-color: #F5F7FA;
|
|
||||||
display:flex;
|
|
||||||
flex-flow: row wrap;
|
|
||||||
width:71vw;
|
|
||||||
|
|
||||||
padding-left:22%;
|
|
||||||
|
|
||||||
padding-top:25%;
|
|
||||||
padding-bottom:10%;
|
|
||||||
|
|
||||||
}
|
|
||||||
.person-photo img:first-child{
|
|
||||||
padding-top:10px;
|
|
||||||
height:30%;
|
|
||||||
width:30%;
|
|
||||||
display: block;
|
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
border-radius:50%;
|
border-radius:50%;
|
||||||
|
|
||||||
}
|
|
||||||
/*img{
|
|
||||||
display: block;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
border-radius:50%;
|
|
||||||
}*/
|
|
||||||
.twit{
|
|
||||||
position:relative;
|
|
||||||
flex-grow:1;
|
|
||||||
flex-shrink:1;
|
|
||||||
flex-basis:100%;
|
|
||||||
max-width:250px;
|
|
||||||
width:250px;
|
|
||||||
margin-top:230px;
|
|
||||||
margin-bottom:-230px;
|
|
||||||
|
|
||||||
min-height:350px;
|
|
||||||
background-color:white;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.member {
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
flex-grow:1;
|
||||||
|
flex-basis:50%;
|
||||||
|
|
||||||
|
background-color:white;
|
||||||
|
}
|
||||||
|
|
||||||
.toplevel{
|
.toplevel{
|
||||||
z-index:2;
|
position:relative;
|
||||||
position:absolute;
|
display: flex;
|
||||||
margin-top:-470px;
|
flex-wrap: wrap;
|
||||||
height:61%;
|
|
||||||
|
|
||||||
width:52.6%;;
|
|
||||||
background-color:white;
|
|
||||||
box-shadow: 2px 2px 3px rgba(0,0,0,.13) ,1px 2px 2px rgba(0,0,0,.1) , -1px -2px 2px rgba(0,0,0,.05);
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.leadership{
|
h2 {
|
||||||
z-index:0;
|
font-size:30px;
|
||||||
position:absolute;
|
color:#546076;
|
||||||
margin-top:100px;
|
font-weight:100;
|
||||||
height:430px;
|
text-align:center;
|
||||||
width:52.6%;;
|
width: 100%;
|
||||||
background-color:white;
|
|
||||||
box-shadow: 2px -2px 3px rgba(0,0,0,.13) , 1px 3px 5px rgba(0,0,0,.1) , -1px -2px 2px rgba(0,0,0,.05);
|
|
||||||
}
|
|
||||||
.Headership{
|
|
||||||
font-size:45px;
|
|
||||||
color:#546076;
|
|
||||||
font-weight:100;
|
|
||||||
font-family: Roboto;
|
|
||||||
padding-top:0px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
text-align:center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.Mission{
|
.Mission{
|
||||||
font-size:40px;
|
font-size:40px;
|
||||||
font-weight:100;
|
font-weight:100;
|
||||||
color:#546076;
|
padding-top:16px;
|
||||||
padding-top:16px;
|
margin-left: auto;
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
text-align:center;
|
text-align:center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.Person-Name{
|
.Person-Name{
|
||||||
font-size:20px;
|
font-size:20px;
|
||||||
font-weight:600;
|
font-weight:600;
|
||||||
color:#546076;
|
padding-top:16px;
|
||||||
padding-top:16px;
|
margin-left: auto;
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
text-align:center;
|
text-align:center;
|
||||||
}
|
}
|
||||||
.twit-text {
|
.member-text {
|
||||||
position:center;
|
position:center;
|
||||||
display: block;
|
display: block;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
width:50%;
|
font:Roboto;
|
||||||
width:200px;
|
font-style:italic;
|
||||||
font:Roboto;
|
font-weight:400;
|
||||||
font-style:italic;
|
|
||||||
font-weight:400;
|
|
||||||
text-align:center;
|
|
||||||
padding-top:1%;
|
|
||||||
color:#5F6076;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mission-text {
|
.mission-text {
|
||||||
position:center;
|
position:center;
|
||||||
display: block;
|
display: block;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
width:50%;
|
width:50%;
|
||||||
width:800px;
|
width:800px;
|
||||||
font:Roboto;
|
font:Roboto;
|
||||||
font-weight:400;
|
font-weight:400;
|
||||||
text-align:center;
|
text-align:center;
|
||||||
padding-top:1%;
|
padding-top:1%;
|
||||||
color:#5F6076;
|
|
||||||
}
|
|
||||||
|
|
||||||
.twit-attribution:hover a{
|
|
||||||
color:#109EF2;
|
|
||||||
cursor:pointer;
|
|
||||||
}
|
|
||||||
.twit-attribution a{
|
|
||||||
|
|
||||||
color: #363437;
|
|
||||||
height:20%;
|
|
||||||
font-weight:bolder;
|
|
||||||
display: block;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-top:auto;
|
|
||||||
margin-bottom:auto;
|
|
||||||
height:50%;
|
|
||||||
width:50%;
|
|
||||||
|
|
||||||
}
|
|
||||||
.twit-icon{
|
|
||||||
padding-top:20px;
|
|
||||||
font-size:25px;
|
|
||||||
position:absolute;
|
|
||||||
padding-left:20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body{
|
|
||||||
background-color: #F5F7FA;;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Before Width: | Height: | Size: 1.0 MiB |
Before Width: | Height: | Size: 5.9 KiB After Width: | Height: | Size: 5.9 KiB |
BIN
public/images/clouds.jpg
Normal file
After Width: | Height: | Size: 330 KiB |
Before Width: | Height: | Size: 44 KiB |
BIN
public/images/danila.jpg
Normal file
After Width: | Height: | Size: 9.4 KiB |
Before Width: | Height: | Size: 23 KiB |
BIN
public/images/matthew.jpg
Normal file
After Width: | Height: | Size: 9.4 KiB |
BIN
public/images/michael.jpg
Normal file
After Width: | Height: | Size: 9.4 KiB |
|
@ -162,6 +162,10 @@ def handle_message(id, game, socket, message)
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
|
get "/about" do |env|
|
||||||
|
render "src/Go/views/about.ecr"
|
||||||
|
end
|
||||||
|
|
||||||
get "/" do |env|
|
get "/" do |env|
|
||||||
render "src/Go/views/index.ecr", "src/Go/views/base.ecr"
|
render "src/Go/views/index.ecr", "src/Go/views/base.ecr"
|
||||||
end
|
end
|
||||||
|
@ -260,4 +264,4 @@ Kemal.run
|
||||||
# For save on close
|
# For save on close
|
||||||
# at_exit do
|
# at_exit do
|
||||||
# save_all(GAME_CACHE)
|
# save_all(GAME_CACHE)
|
||||||
# end
|
# end
|
||||||
|
|
72
src/Go/views/about.ecr
Normal file
|
@ -0,0 +1,72 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>About Us</title>
|
||||||
|
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400,700" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="/css/style.css" media="screen">
|
||||||
|
<script src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" defer></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="card">
|
||||||
|
<h2>Hello!</h2>
|
||||||
|
<p>
|
||||||
|
Welcome to our Go website. We are Group 4 from CS 290. Our mission is very ambitious - to get an A in CS 290, Web Development. Despite the immense difficulty of this task, we did our best to bring you this website, so that you may enjoy playing the game of Go with your friends. After Google's AlphaGo's victory against the best human Go player, there's not really a point to playing against a computer - you will lose.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="member-container card">
|
||||||
|
<h2>Group Members</h2>
|
||||||
|
<div class="toplevel">
|
||||||
|
<article class="member">
|
||||||
|
<div class="member-content">
|
||||||
|
<div class="person-photo" alt"">
|
||||||
|
<img src="/images/danila.jpg" alt="daa">
|
||||||
|
</div>
|
||||||
|
<h2 class="Person-Name" >Danila Fedorin</h2>
|
||||||
|
<p class="member-text">
|
||||||
|
We don't need a weakened government but a strong government that would take responsibility for the rights of the individual and care for the society as a whole.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="member">
|
||||||
|
<div class="member-content">
|
||||||
|
<div class="person-photo" alt"">
|
||||||
|
<img src="/images/matthew.jpg" alt="daa">
|
||||||
|
</div>
|
||||||
|
<h2 class="Person-Name" >Matthew Sessions</h2>
|
||||||
|
<p class="member-text">
|
||||||
|
Education is a weapon whose effects depend on who holds it in his hands and at whom it is aimed.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="member">
|
||||||
|
<div class="member-content">
|
||||||
|
<div class="person-photo" alt"">
|
||||||
|
<img src="/images/michael.jpg" alt="daa">
|
||||||
|
</div>
|
||||||
|
<h2 class="Person-Name" >Michael Huang</h2>
|
||||||
|
<p class="member-text">
|
||||||
|
To be fair, you have to have a very high IQ to understand Rick and Morty. The humour is extremely subtle, and without a solid grasp of theoretical physics most of the jokes will go over a typical viewer's head.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="member">
|
||||||
|
<div class="member-content">
|
||||||
|
<div class="person-photo" alt"">
|
||||||
|
<img src="/images/claire.jpg" alt="daa">
|
||||||
|
</div>
|
||||||
|
<h2 class="Person-Name" >Claire Cahill</h2>
|
||||||
|
<p class="member-text">
|
||||||
|
Unfortunately these two properties are only implemented in Firefox and are behind a -moz- prefix. Here’s how you can use the various
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -1,119 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>About Us</title>
|
|
||||||
|
|
||||||
|
|
||||||
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400,700" rel="stylesheet">
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="../../../public/css/style.css" media="screen">
|
|
||||||
|
|
||||||
<script src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" defer></script>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<header>
|
|
||||||
<a href="#">
|
|
||||||
<h1 class="site-title">GO</h1>
|
|
||||||
|
|
||||||
</a>
|
|
||||||
|
|
||||||
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main class="twit-container">
|
|
||||||
|
|
||||||
|
|
||||||
<article class="toplevel">
|
|
||||||
|
|
||||||
<div class="twit-content">
|
|
||||||
|
|
||||||
<h2 class="Mission" >- Our Mission -</h2>
|
|
||||||
<p class="mission-text">
|
|
||||||
Here's where I would write some stuff about something. I made it my task to try to replicate this webpage's design using twit as a baseline<br/>
|
|
||||||
<a href="https://apptopia.com/about">Here's the Website</a>
|
|
||||||
|
|
||||||
</p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article class="leadership">
|
|
||||||
|
|
||||||
<div class="twit-content">
|
|
||||||
|
|
||||||
<h2 class="Headership" >Leadership</h2>
|
|
||||||
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article class="twit">
|
|
||||||
|
|
||||||
<div class="twit-content">
|
|
||||||
<div class="person-photo" alt"">
|
|
||||||
<img src="../../../public/images/download.jpg" alt="daa">
|
|
||||||
</div>
|
|
||||||
<h2 class="Person-Name" >Danila Fedorin</h2>
|
|
||||||
<p class="twit-text">
|
|
||||||
We don't need a weakened government but a strong government that would take responsibility for the rights of the individual and care for the society as a whole.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article class="twit">
|
|
||||||
|
|
||||||
<div class="twit-content">
|
|
||||||
<div class="person-photo" alt"">
|
|
||||||
<img src="../../../public/images/daa.jpg" alt="daa">
|
|
||||||
</div>
|
|
||||||
<h2 class="Person-Name" >Matthew Sessions</h2>
|
|
||||||
<p class="twit-text">
|
|
||||||
Education is a weapon whose effects depend on who holds it in his hands and at whom it is aimed.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article class="twit">
|
|
||||||
|
|
||||||
<div class="twit-content">
|
|
||||||
<div class="person-photo" alt"">
|
|
||||||
<img src="../../../public/images/5.png" alt="daa">
|
|
||||||
</div>
|
|
||||||
<h2 class="Person-Name" >Michael Huang</h2>
|
|
||||||
|
|
||||||
<p class="twit-text">
|
|
||||||
To be fair, you have to have a very high IQ to understand Rick and Morty. The humour is extremely subtle, and without a solid grasp of theoretical physics most of the jokes will go over a typical viewer's head.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article class="twit">
|
|
||||||
<div class="twit-content">
|
|
||||||
<div class="person-photo" alt"">
|
|
||||||
<img src="../../../public/images/person2.jpg" alt="daa">
|
|
||||||
</div>
|
|
||||||
<h2 class="Person-Name" >Claire Cahill</h2>
|
|
||||||
<p class="twit-text">
|
|
||||||
Unfortunately these two properties are only implemented in Firefox and are behind a -moz- prefix. Here’s how you can use the various
|
|
||||||
</p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|