franzz/ugc
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

mobile friendly

Browse Source
This commit is contained in:
Franzz
2015-08-18 21:07:17 +02:00
parent b0dc4f6483
commit 6a97fba1de
9 changed files with 263 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -1,3 +1,6 @@
/.buildpath /.buildpath
/.project /.project
/.settings/ /.settings/
/build.xml
/.externalToolBuilders/
/.sass-cache/

8
masks/index.html
View File

@@ -3,12 +3,10 @@
<head> <head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="author" content="Franzz" /> <meta name="author" content="Franzz" />
<meta name="viewport" content="width=device-width, initial-scale=0.5">
<link rel='shortcut icon' href='favicon.ico' type='image/x-icon' /> <link rel='shortcut icon' href='favicon.ico' type='image/x-icon' />
<link rel="stylesheet" href="style/normalize.css" type="text/css" />
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic' type='text/css'> <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic' type='text/css'>
<link rel="stylesheet" href="style/font-awesome.css" type="text/css" />
<link rel="stylesheet" href="style/ugc.css" type="text/css" /> <link rel="stylesheet" href="style/ugc.css" type="text/css" />
<link rel="stylesheet" href="style/big_screen.css" type="text/css" media="(min-width: 40.5em)" />
<script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/film.js"></script> <script type="text/javascript" src="script/film.js"></script>
<title>UGC Clone</title> <title>UGC Clone</title>
@@ -26,7 +24,9 @@
</head> </head>
<body> <body>
<header><div class="title"><time id="date"></time></div></header> <header><div class="title"><time id="date"></time></div></header>
<main><div id="buffer"><i class="fa fa-spinner fa-spin"></i></div></main> <main>
<div id="buffer"><i class="fa fa-spinner fa-spin"></i></div>
</main>
<div id="feedback"> <div id="feedback">
<h1><i class="fa fa-icon fa-feedback"></i>Filtered films</h1> <h1><i class="fa fa-icon fa-feedback"></i>Filtered films</h1>
<div id="feed_content"></div> <div id="feed_content"></div>

0
style/big_screen.css → style/_big_screen.scss
View File

0
style/font-awesome.css → style/_font-awesome.scss
View File

0
style/normalize.css → style/_normalize.scss
View File

9
style/_small_screen.scss Normal file
View File

@@ -0,0 +1,9 @@
@media (max-width: 40.5em) {
#buffer {
width: 6em;
height: 6em;
}
#buffer .fa {
font-size:6em;
}
}

228
style/ugc.css Executable file → Normal file
View File

File diff suppressed because one or more lines are too long

7
style/ugc.css.map Normal file
View File

File diff suppressed because one or more lines are too long

235
style/ugc.scss Executable file
View File

@@ -0,0 +1,235 @@
@CHARSET "UTF-8";
/* External librairies */
@import 'normalize';
@import 'font-awesome';
/* Default Tags */
body {
margin:0;
padding:1em;
font-family: 'Open Sans', sans-serif;
font-size: 1em;
color:#222;
background:white;
min-width: 30em;
}
a {
text-decoration: none;
color:#222;
}
a:hover {
color:#08288B;
}
h1 {
margin:0 0 1em 0;
}
/* Common Classes */
.fa-icon {
margin-right:0.5em;
}
/* Font Awesome Classes */
.fa-film:before {
content: "\f008";
}
.fa-trailer:before {
content: "\f144";
}
.fa-spinner:before {
content: "\f110";
}
.fa-cinema:before {
content: "\f017";
}
.fa-date:before {
content: "\f133";
}
.fa-power:before {
content: "\f1b0";
}
.fa-edito:before {
content: "\f0e7";
}
.fa-feedback:before {
content: "\f0b0";
}
/* Sections */
/* Section - Header */
header {
margin:0;
visibility:hidden;
text-align: center;
}
header .title {
display:inline-block;
padding-left:113px;
background:url(../images/logo_ugc.png) 0 50% no-repeat;
}
header .title time {
display:inline-block;
font-size: 2em;
color:#08288B;
padding:1.5em 0 1.5em 0.75em;
}
/* Section - Main */
main {
margin-top:1em;
}
#buffer {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 2em;
height: 2em;
margin: auto;
padding: 0px;
color:#08288B;
}
#buffer .fa {
font-size:2em;
}
/* Section - Film */
.film {
position:relative;
background:white;
margin-bottom:1em;
overflow: hidden;
-webkit-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
-moz-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
}
.film:nth-child(even) {
}
.film img.bg {
position:absolute;
top:50%;
margin-top:-25%;
left:152px;
right:0;
bottom:0;
width:calc(100% - 152px);
opacity:0.25;
}
.film img.poster {
width:152px;
display: block;
z-index:2;
}
.film .info {
z-index:2;
position:absolute;
top:0;
left:152px;
padding-left:1em;
width: calc(100% - 1em - 152px);
}
.film p {
margin:0.5em 0;
}
.film .title a.name {
font-weight: bold;
}
.film .title .edito {
font-style: italic;
margin-left:1em;
color:#777;
}
.film .trailer {
}
.film .timetable {
margin-top:1em;
font-size: 0.8em;
}
.film .timetable p {
line-height: 2.0;
margin: 0;
}
.film .timetable .cinema {
margin-right:0.5em;
}
.film .timetable .cinema .fa {
font-size: 1.25em;
line-height: 0.7656249414em;
vertical-align: -14.06250352%;
}
.film .timetable .lang {
margin-right:0.5em;
}
.film .timetable .time {
background:#666;
color:white;
padding:0.1em 0.4em;
border-radius:3px;
}
.film .timetable .time:hover {
background:#08288B;
}
/* Section - Feeback */
#feedback {
background:#EEE;
padding:1em;
font-size:0.6em;
margin-bottom: 1em;
display:none;
color:#999;
}
#feedback p:FIRST-CHILD {
margin-top:0;
}
#feedback p:LAST-CHILD {
margin-bottom:0;
}
/* Section - Footer */
footer {
font-size: 0.8em;
margin: 1em 0 0 0;
display: none;
color:#08288B;
}
/* Mobile Support */
@import 'small_screen';
@import 'big_screen';