[Scummvm-git-logs] scummvm-web master -> 6d0d66d19e5de85764a62fa29b0af5a158a9d40c
Mataniko
mataniko at gmail.com
Sat Jul 28 06:41:30 CEST 2018
This automated email contains information about 3 new commits which have been
pushed to the 'scummvm-web' repo located at https://github.com/scummvm/scummvm-web .
Summary:
00398fcde7 IMAGES: Clean up hero banners
10ea0f80bc TEMPLATES: Inline subhead classes since the template was simplified to a one-liner
6d0d66d19e CSS: Extract all colors into a theme file and general cleanup
Commit: 00398fcde729623f612e69a3e28e20e2a8988dc5
https://github.com/scummvm/scummvm-web/commit/00398fcde729623f612e69a3e28e20e2a8988dc5
Author: Matan Bareket (mataniko at gmail.com)
Date: 2018-07-28T00:15:38-04:00
Commit Message:
IMAGES: Clean up hero banners
Changed paths:
A images/heroes-single-template.png
A images/heroes-template.png
A images/heroes/roger.png
A images/heroes/tentacle.png
images/heroes0.png
images/heroes1.png
images/heroes2.png
images/heroes3.png
images/heroes4.png
diff --git a/images/heroes-single-template.png b/images/heroes-single-template.png
new file mode 100644
index 0000000..df8b4ed
Binary files /dev/null and b/images/heroes-single-template.png differ
diff --git a/images/heroes-template.png b/images/heroes-template.png
new file mode 100644
index 0000000..891980a
Binary files /dev/null and b/images/heroes-template.png differ
diff --git a/images/heroes/roger.png b/images/heroes/roger.png
new file mode 100644
index 0000000..11a809b
Binary files /dev/null and b/images/heroes/roger.png differ
diff --git a/images/heroes/tentacle.png b/images/heroes/tentacle.png
new file mode 100644
index 0000000..553ebc5
Binary files /dev/null and b/images/heroes/tentacle.png differ
diff --git a/images/heroes0.png b/images/heroes0.png
index d109dc5..5ec0738 100755
Binary files a/images/heroes0.png and b/images/heroes0.png differ
diff --git a/images/heroes1.png b/images/heroes1.png
index 088390c..d844d31 100755
Binary files a/images/heroes1.png and b/images/heroes1.png differ
diff --git a/images/heroes2.png b/images/heroes2.png
index 86fe4c4..604f197 100755
Binary files a/images/heroes2.png and b/images/heroes2.png differ
diff --git a/images/heroes3.png b/images/heroes3.png
index 484f4c1..cc900f8 100755
Binary files a/images/heroes3.png and b/images/heroes3.png differ
diff --git a/images/heroes4.png b/images/heroes4.png
index dcc461b..4d956de 100755
Binary files a/images/heroes4.png and b/images/heroes4.png differ
Commit: 10ea0f80bcdf30cf2ae4d69598295af1b1e18a75
https://github.com/scummvm/scummvm-web/commit/10ea0f80bcdf30cf2ae4d69598295af1b1e18a75
Author: Matan Bareket (mataniko at gmail.com)
Date: 2018-07-28T00:18:41-04:00
Commit Message:
TEMPLATES: Inline subhead classes since the template was simplified to a one-liner
Changed paths:
R templates/components/subhead.tpl
templates/components/intro_header.tpl
templates/pages/_index.tpl
templates/pages/downloads.tpl
templates/pages/game_demos.tpl
templates/pages/games.tpl
templates/pages/index.tpl
templates/pages/links.tpl
templates/pages/screenshots.tpl
templates/pages/subprojects.tpl
diff --git a/templates/components/intro_header.tpl b/templates/components/intro_header.tpl
index 0aa195e..e1c331d 100644
--- a/templates/components/intro_header.tpl
+++ b/templates/components/intro_header.tpl
@@ -8,10 +8,10 @@
<div id="intro_header">
{* Introduction text. *}
<div class="round-box">
- <div class="round-box-header">
+ <div class="header">
{#introHeaderWhatIs#}
</div>
- <div class="round-box-content text row">
+ <div class="content text row">
<div class="col-2-3 col-md-1">
<p>{#introHeaderContentP1#}</p>
<p>{#introHeaderContentP2#}</p>
@@ -27,7 +27,7 @@
</div>
<div class="col-1-3 col-md-1">
<div class="round-box">
- <div class="round-box-content gallery bg-yellow">
+ <div class="content gallery">
<a href="{$smarty.const.DIR_SCREENSHOTS}/{$rand_file.filename}-full.png" title="{$rand_file.caption}">
<img class="random-screenshot" src="{$smarty.const.DIR_SCREENSHOTS}/{$rand_file.filename}-full.png" alt="{$rand_file.caption}">
</a>
@@ -41,10 +41,10 @@
{* Screenshots.
<div class="sshots">
<div class="round-box">
- <div class="round-box-header">
+ <div class="header">
{#introHeaderScreenshots#}
</div>
- <div class="round-box-content">
+ <div class="content">
<a href="/screenshots/{$random_shot.category}/{$random_shot.screenshot->getCategory()}/{$rand_pos+1}" id="screenshots_random">
<img src="{$smarty.const.DIR_SCREENSHOTS}/{$rand_file.filename}.jpg" width="128" height="96" title="{#introHeaderFullsize#}" alt="{#introHeaderRandom#}">
</a>
diff --git a/templates/components/subhead.tpl b/templates/components/subhead.tpl
deleted file mode 100644
index 19eab35..0000000
--- a/templates/components/subhead.tpl
+++ /dev/null
@@ -1,9 +0,0 @@
-<div class="subhead">{$subhead}</div>
-{*
-<div class="par-subhead">
- {$subhead}
-</div>
-<div class="par-subhead-dots">
-
-</div>
-*}
diff --git a/templates/pages/_index.tpl b/templates/pages/_index.tpl
index a2bec86..32daed1 100644
--- a/templates/pages/_index.tpl
+++ b/templates/pages/_index.tpl
@@ -6,10 +6,10 @@
{* The actual content. *}
<div class="round-box">
- <div class="round-box-header">
+ <div class="header">
{$content_title}
</div>
- <div class="round-box-content">
+ <div class="content">
{$content}
</div>
diff --git a/templates/pages/downloads.tpl b/templates/pages/downloads.tpl
index 3a8d1e4..7d4c541 100644
--- a/templates/pages/downloads.tpl
+++ b/templates/pages/downloads.tpl
@@ -4,7 +4,7 @@
{if $smarty.foreach.downloads_loop.first}
<div class="intro row">
<div class="navigation col-1-2">
- <h4>{#downloadsHeader#}</h4>
+ <h4 class="subhead">{#downloadsHeader#}</h4>
<ul>
{foreach from=$sections item=arr}
<li>
diff --git a/templates/pages/game_demos.tpl b/templates/pages/game_demos.tpl
index 8346632..f404375 100644
--- a/templates/pages/game_demos.tpl
+++ b/templates/pages/game_demos.tpl
@@ -4,7 +4,7 @@
<div class="box">
<div class="intro row">
<div class="navigation col-1-2">
- <h4>{#gamesDemosHeading#}</h4>
+ <h4 class="subhead">{#gamesDemosHeading#}</h4>
<ul>
{foreach from=$demos item=group}
<li><a href="/demos/#{$group.href}">{$group.name}</a></li>
diff --git a/templates/pages/games.tpl b/templates/pages/games.tpl
index 75a95de..bb9ae25 100644
--- a/templates/pages/games.tpl
+++ b/templates/pages/games.tpl
@@ -5,7 +5,7 @@
{if $smarty.foreach.downloads_loop.first}
<div class="intro row">
<div class="navigation col-1-2">
- <h4>{#gamesHeader#}</h4>
+ <h4 class="subhead">{#gamesHeader#}</h4>
<ul>
{foreach from=$sections item=arr}
<li><a href="/games/#{$arr.anchor}">{eval var=$arr.title}</a></li>
diff --git a/templates/pages/index.tpl b/templates/pages/index.tpl
index dfaa60f..74fd7ba 100644
--- a/templates/pages/index.tpl
+++ b/templates/pages/index.tpl
@@ -48,10 +48,10 @@
{* The actual content. *}
<div class="round-box">
- <div class="round-box-header">
+ <div class="header">
{$content_title}
</div>
- <div class="round-box-content">
+ <div class="content">
{$content}
</div>
diff --git a/templates/pages/links.tpl b/templates/pages/links.tpl
index ee7663c..2c245fc 100644
--- a/templates/pages/links.tpl
+++ b/templates/pages/links.tpl
@@ -8,7 +8,7 @@
</div>
<div class="content">
{foreach from=$links item=group}
- {include file='components/subhead.tpl' subhead=$group.name}
+ <div class="subhead">{$group.name}</div>
<div class="subhead-content">
<p>{$group.description}</p>
<div class="linklist">
diff --git a/templates/pages/screenshots.tpl b/templates/pages/screenshots.tpl
index c418481..ffa1f73 100644
--- a/templates/pages/screenshots.tpl
+++ b/templates/pages/screenshots.tpl
@@ -9,7 +9,7 @@
<div class="head">{#screenshotsHeading#}</div>
<div class="intro row">
<div class="navigation col-1-2">
- <h4>{#screenshotsNavigation#}</h4>
+ <h4 class="subhead">{#screenshotsNavigation#}</h4>
<ul>
{foreach from=$screenshots item=arr}
<li><a href="/screenshots/#{$arr.category}">{eval var=$arr.title}</a></li>
@@ -18,7 +18,7 @@
</div>
<div class="text col-1-2">
<div class="round-box">
- <div class="round-box-content gallery bg-yellow">
+ <div class="content gallery">
<a href="{$smarty.const.DIR_SCREENSHOTS}/{$rand_file.filename}-full.png" title="{$rand_file.caption}">
<img class="random-screenshot" src="{$smarty.const.DIR_SCREENSHOTS}/{$rand_file.filename}-full.png" alt="{$rand_file.caption}">
</a>
diff --git a/templates/pages/subprojects.tpl b/templates/pages/subprojects.tpl
index c0623f1..b6b647b 100644
--- a/templates/pages/subprojects.tpl
+++ b/templates/pages/subprojects.tpl
@@ -10,7 +10,7 @@
<div class="content">
{foreach from=$subprojects item=project}
- {include file='components/subhead.tpl' subhead=$project->getName()}
+ <div class="subhead">{$project->getName()}</div>
<div class="subhead-content">
{$project->getInfo()}
{include file='components/list_items.tpl' list=$project->getDownloads() type='platforms'}
Commit: 6d0d66d19e5de85764a62fa29b0af5a158a9d40c
https://github.com/scummvm/scummvm-web/commit/6d0d66d19e5de85764a62fa29b0af5a158a9d40c
Author: Matan Bareket (mataniko at gmail.com)
Date: 2018-07-28T00:38:44-04:00
Commit Message:
CSS: Extract all colors into a theme file and general cleanup
Now that all colors are defined in a theme file, we can easily reuse all the work on the website for our sister project ResidualVM
Changed paths:
A scss/theme/_residualvm.scss
A scss/theme/_scummvmold.scss
scss/abstracts/_variables.scss
scss/base/_base.scss
scss/components/_box.scss
scss/components/_roundbox.scss
scss/components/_toc.scss
scss/layout/_footer.scss
scss/layout/_grid.scss
scss/layout/_header.scss
scss/layout/_menu.scss
scss/layout/_shame.scss
scss/main.scss
scss/pages/_chart.scss
scss/pages/_compatibility.scss
scss/pages/_credits.scss
scss/pages/_downloads.scss
scss/pages/_links.scss
scss/pages/_screenshots.scss
scss/theme/_scummvm.scss
diff --git a/scss/abstracts/_variables.scss b/scss/abstracts/_variables.scss
index a8fdc8c..c09684a 100644
--- a/scss/abstracts/_variables.scss
+++ b/scss/abstracts/_variables.scss
@@ -8,7 +8,10 @@ $double-pearl-lustra: rgb(251, 241, 206) !default; //252, 244, 208
$turbo: rgb(221, 221, 0) !default; //250, 230, 0
$gray: rgb(153, 153, 153) !default; //128, 128, 128
$alto: rgb(224, 224, 224) !default; //219, 219, 219
+$silver: rgb(192, 192, 192) !default;
$bamboo: rgb(209, 111, 10) !default;
+$cashmere: rgb(228, 186, 155) !default;
+$marzipan: rgb(246, 224, 138);
$breakpoints: (
'small': (min-width: 320px) and (max-width: 640px),
@@ -17,3 +20,4 @@ $breakpoints: (
);
$nav-width: 165px;
+//linear-gradient(to bottom, #cd816f 0%, #b85038 23%, #aa2b0e 45%, #a82709 100%)
diff --git a/scss/base/_base.scss b/scss/base/_base.scss
index ba71ef1..ae19b07 100644
--- a/scss/base/_base.scss
+++ b/scss/base/_base.scss
@@ -1,7 +1,6 @@
/* General layout rules */
html {
- background: rgb(209, 111, 10);
- background: linear-gradient(to bottom, rgb(209, 111, 10) 0%, rgb(231, 172, 21) 400px, rgb(239, 196, 24) 100%);
+ background: $theme-background;
background-repeat: repeat-x;
}
@@ -16,12 +15,12 @@ body {
overflow-y: hidden;
}
-a {
- color: rgb(170, 51, 51);
+a {
+ color: $theme-link;
}
a:hover {
- color: rgb(255, 0, 0);
+ color: lighten($theme-link, 20%);
text-decoration: none;
}
@@ -33,42 +32,6 @@ a:hover {
display: block;
}
-/* Random Screenshot */
-.random-screenshot {
- display: block;
- margin: 0 auto;
- width: 100%;
- transform: translateZ(0);
-}
-
-.scr-content {
- padding-left: 20px;
-}
-
-.screenshot {
- display: inline-block;
- margin-top: 10px;
- padding: 10px;
- margin: 4px;
- width: 215px;
- height: auto;
- background: #ccc;
-}
-
-.screenshot img {
- width: 100%;
- height: auto;
- image-rendering: crisp-edges;
-}
-
-.gallery {
- text-align: center;
-}
-
-.gallery .subhead {
- text-align: left;
-}
-
.bottom-link {
padding-left: 15px;
padding-right: 15px;
@@ -96,60 +59,11 @@ header .row .top {
height: 37px;
}
-/* Responsive Menu */
-
-.menu-trigger,
-.nav-trigger {
- display: none;
-}
-
-label[for="nav-trigger"] {
- display: none;
- position: absolute;
- right: 8px;
- top: 15px;
- z-index: 2;
- height: 30px;
- width: 30px;
- cursor: pointer;
- background-image: url('/images/nav-trigger.svg');
- background-size: contain;
-}
-
-.nav-trigger:checked~label[for="nav-trigger"] {
- position: fixed;
-}
-
-.nav-trigger+label,
-.site-wrap,
-header,
-nav {
- transition: right 0.2s ease-in-out;
-}
-
-.nav-trigger:checked~.site-wrap nav {
- right: 0;
-}
-
-.menu-trigger:checked~dd {
- display: block;
-}
-
/* Content boxes */
-#donate-header {
- margin: 5px;
-}
-
.container {
border-radius: 0 0 8px 8px;
- background: rgb(251, 241, 206);
-}
-
-
-/* Color overrides */
-.bg-yellow {
- background: rgb(251, 241, 206);
+ background: $theme-wrapper-background;
}
span.sprite {
@@ -157,3 +71,17 @@ span.sprite {
vertical-align: middle;
filter: drop-shadow(0 2px 2px $black-semi-transparent);
}
+
+.subhead {
+ color: $theme-container-sub-title;
+ font-weight: bold;
+ line-height: 300%;
+ padding-left: 5px;
+ text-align: left;
+ margin: 0px 15px;
+ border-bottom: 2px dotted $theme-container-sub-title;
+}
+.subhead-content {
+ margin: 0;
+ padding: 10px 20px;
+}
diff --git a/scss/components/_box.scss b/scss/components/_box.scss
index 856bb26..508c004 100644
--- a/scss/components/_box.scss
+++ b/scss/components/_box.scss
@@ -1,52 +1,39 @@
.box {
- margin: 8px;
- border: 1px solid rgb(192, 192, 192);
- .head {
- background: rgb(170, 43, 14);
- background: linear-gradient(to bottom, rgb(205, 129, 111) 0%, rgb(184, 80, 56) 23%, rgb(170, 43, 14) 45%, rgb(168, 39, 9) 100%);
- min-height: 24px;
- color: #fff;
- font-weight: bold;
- padding: 4px;
- width: 100%;
- a {
- text-decoration: none;
- color: #fff;
- }
- .news-date {
- font-weight: normal;
- }
- }
- .intro {
- background: rgb(192, 192, 192);
- padding: 4px 8px 4px 5px;
- }
- .subhead {
- color: rgb(168, 39, 9);
- font-weight: bold;
- line-height: 300%;
- padding-left: 5px;
- margin: 0px 15px;
- border-bottom: 2px dotted rgb(168, 39, 9);
- }
- .subhead-content {
- margin: 0;
- padding: 10px 20px;
- }
- .content {
- background: rgb(231, 231, 231);
- padding: 8px;
- .news-author {
- color: rgb(119, 119, 119);
- font-style: italic;
- margin: 0px 0px -8px 0px;
- position: relative;
- text-align: right;
- top: -8px;
- }
- &.news img {
- float: right;
- max-width: 100%;
- }
- }
- }
+ margin: 8px;
+ border: 1px solid $theme-container-border;
+ > .head {
+ background: $theme-container-title-background;
+ min-height: 24px;
+ color: $theme-container-title;
+ font-weight: bold;
+ padding: 4px;
+ width: 100%;
+ a {
+ text-decoration: none;
+ color: $theme-container-title;
+ }
+ .news-date {
+ font-weight: normal;
+ }
+ }
+ > .content {
+ background: $theme-container-background;
+ padding: 8px;
+ .news-author {
+ color: $gray;
+ font-style: italic;
+ margin: 0px 0px -8px 0px;
+ position: relative;
+ text-align: right;
+ top: -8px;
+ }
+ &.news img {
+ float: right;
+ max-width: 100%;
+ }
+ }
+ .intro {
+ background: $theme-container-navigation-background;
+ padding: 4px 8px 4px 5px;
+ }
+}
diff --git a/scss/components/_roundbox.scss b/scss/components/_roundbox.scss
index 31df3e3..b76dfb1 100644
--- a/scss/components/_roundbox.scss
+++ b/scss/components/_roundbox.scss
@@ -1,34 +1,34 @@
.round-box {
- margin: 8px;
+ margin: 8px;
+ > .header {
+ background: $theme-round-container-title-background;
+ border-left: 1px solid $theme-round-container-border;
+ border-right: 1px solid $theme-round-container-border;
+ border-top: 1px solid $theme-round-container-border;
+ height: 28px;
+ border-radius: 8px 8px 0 0;
+ padding-left: 18px;
+ // TODO: Extract font
+ font: bold large/1.4 "Trebuchet MS", Verdana, Tahoma, Sans-Serif;
+ color: $theme-round-container-header;
+ text-shadow: 3px 0 1px $theme-round-container-header-shadow;
}
-
-.round-box-header {
- background: rgb(246, 225, 158);
- background: linear-gradient(to bottom, rgb(235, 183, 24) 0%, rgb(241, 206, 96) 4%, rgb(246, 225, 158) 46%, rgb(251, 241, 212) 89%, rgb(252, 245, 223) 100%);
- border-left: 1px solid rgb(235, 177, 118);
- border-right: 1px solid rgb(235, 177, 118);
- border-top: 1px solid rgb(235, 177, 118);
- height: 28px;
- border-radius: 8px 8px 0 0;
- padding-left: 18px;
- font: bold large/1.4 "Trebuchet MS", Verdana, Tahoma, Sans-Serif;
- color: #821d06;
- text-shadow: 3px 0 1px #fff;
-}
-
-.round-box-content {
- background: #fff;
- border: 1px solid rgb(235, 177, 118);
- border-radius: 8px;
- margin: 0;
- padding: 8px;
- overflow: hidden;
- &.text {
- padding-left: 16px;
- }
-}
-
-.round-box-header ~ .round-box-content {
- border-radius: 0 0 8px 8px;
- border-top: 0;
+ > .content {
+ background: $theme-round-container-background;
+ border: 1px solid $theme-round-container-border;
+ border-radius: 8px;
+ margin: 0;
+ padding: 8px;
+ overflow: hidden;
+ &.text {
+ padding-left: 16px;
+ }
+ &:first-child {
+ background: $theme-round-container-headless-background;
+ }
+ }
+ > .header ~ .content {
+ border-radius: 0 0 8px 8px;
+ border-top: 0;
+ }
}
diff --git a/scss/components/_toc.scss b/scss/components/_toc.scss
index abfa915..02ae52b 100644
--- a/scss/components/_toc.scss
+++ b/scss/components/_toc.scss
@@ -2,12 +2,8 @@
.navigation {
padding: 0.5em 1.65em;
- h4 {
- border-bottom: 1px dotted rgb(168, 39, 9);
- padding-bottom: 4px;
- }
a {
- color: rgb(64, 106, 4);
+ color: $theme-container-navigation-link;
text-decoration: none;
padding: 5px;
}
@@ -15,7 +11,7 @@
padding-left: 2.0em;
}
li {
- color: rgb(251, 241, 206);
+ color: $theme-container-navigation-bullet;
list-style-type: '\27A3';
margin: 0.5em auto;
}
diff --git a/scss/layout/_footer.scss b/scss/layout/_footer.scss
index 0468f96..cb26c8b 100644
--- a/scss/layout/_footer.scss
+++ b/scss/layout/_footer.scss
@@ -1,13 +1,13 @@
/* Footer */
footer {
- color: rgba(0, 0, 0, 0.5);
+ color: $black-semi-transparent;
padding: 15px 0;
position: relative;
a {
- color: rgba(0, 0, 0, 0.5);
+ color: $black-semi-transparent;
&:hover {
- color: rgba(0, 0, 0, 0.5);
+ color: $black-semi-transparent;
text-decoration: none;
}
}
diff --git a/scss/layout/_grid.scss b/scss/layout/_grid.scss
index be3ba27..644ab93 100644
--- a/scss/layout/_grid.scss
+++ b/scss/layout/_grid.scss
@@ -1,51 +1,51 @@
/* Grid */
.site-wrap {
- max-width: 1440px;
- position: relative;
- margin: 0 auto;
- padding: 0 50px;
- }
-
- .col-4-5 {
- width: calc(100% - #{$nav-width - 10px});
- }
-
- .col-1-5 {
- width: $nav-width - 15px;
- position: relative;
- }
-
- .col-1-3 {
- width: 33.33%;
- }
-
- .col-2-3 {
- width: 66.66%;
- }
-
- .col-1-2 {
- width: 50%;
- }
-
- .col-1-1 {
- width: 100%;
- }
-
- [class*='col-'] {
- float: left;
- padding-right: 8px;
- }
-
- .row:after {
- content: "";
- display: table;
- clear: both;
- }
-
- * {
- box-sizing: border-box;
- &:after, &:before {
- box-sizing: border-box;
- }
- }
+ max-width: 1440px;
+ position: relative;
+ margin: 0 auto;
+ padding: 0 50px;
+}
+
+.col-4-5 {
+ width: calc(100% - #{$nav-width - 10px});
+}
+
+.col-1-5 {
+ width: $nav-width - 15px;
+ position: relative;
+}
+
+.col-1-3 {
+ width: 33.33%;
+}
+
+.col-2-3 {
+ width: 66.66%;
+}
+
+.col-1-2 {
+ width: 50%;
+}
+
+.col-1-1 {
+ width: 100%;
+}
+
+[class*='col-'] {
+ float: left;
+ padding-right: 8px;
+}
+
+.row:after {
+ content: "";
+ display: table;
+ clear: both;
+}
+
+* {
+ box-sizing: border-box;
+ &:after, &:before {
+ box-sizing: border-box;
+ }
+}
diff --git a/scss/layout/_header.scss b/scss/layout/_header.scss
index b39df5e..dd7a8ef 100644
--- a/scss/layout/_header.scss
+++ b/scss/layout/_header.scss
@@ -22,7 +22,7 @@
height: auto;
position: absolute;
bottom: 0;
- filter: drop-shadow(1px 1px 2px #0c0c0c);
+ filter: drop-shadow(1px 1px 2px $black);
}
.maniac {
@@ -34,7 +34,7 @@
.topper {
height: 29px;
- background: rgb(246, 224, 138);
+ background: $theme-wrapper-topper ;
border-radius: 8px 8px 0 0;
position: relative;
}
diff --git a/scss/layout/_menu.scss b/scss/layout/_menu.scss
index c3a7b76..80e5ff5 100644
--- a/scss/layout/_menu.scss
+++ b/scss/layout/_menu.scss
@@ -5,7 +5,7 @@ nav {
font-size: 0.9em;
dl {
border-radius: 8px;
- background: rgb(168, 39, 9);
+ background: $theme-menu-background;
z-index: 20;
margin: 8px 0 16px;
&::after {
@@ -16,7 +16,7 @@ nav {
left: 4px;
right: 10px;
width: $nav-width - 14px;
- background-color: rgb(228, 186, 155);
+ background-color: $theme-menu-shadow;
height: 6px;
z-index: -1;
border-radius: 0 0 0 8px;
@@ -31,7 +31,7 @@ nav {
background-position: 1px 2px;
background-repeat: no-repeat;
padding-left: 28px;
- color: rgb(255, 255, 255);
+ color: $theme-menu-link;
text-decoration: none;
}
dd.no-bullet a {
@@ -43,12 +43,12 @@ nav {
}
a:hover {
text-decoration: underline;
- color: white;
+ color: $theme-menu-link;
}
dl {
dt {
- background-color: rgb(130, 29, 6);
- color: rgb(221, 221, 0);
+ background: $theme-menu-title-background;
+ color: $theme-menu-title;
font-weight: 700;
border-radius: 8px 8px 0 0;
background-clip: padding-box;
@@ -82,7 +82,7 @@ nav {
padding: 0;
height: 100%;
overflow-y: auto;
- background: #A82709;
+ background: $theme-menu-background;
line-height: 50px;
font-size: 1.2em;
a {
@@ -115,7 +115,7 @@ nav {
padding-bottom: 1px;
padding-left: 19px;
cursor: pointer;
- color: white;
+ color: $theme-menu-link;
}
dd {
padding-right: 0;
@@ -138,10 +138,49 @@ nav {
}
nav dl {
dd:hover {
- background: rgb(130, 29, 6);
+ background: $theme-menu-title-background;
}
&::after {
height: 0;
}
}
}
+
+// Repsonsive menu checkbox
+.menu-trigger, .nav-trigger {
+ display: none;
+}
+
+label[for="nav-trigger"] {
+ display: none;
+ position: absolute;
+ right: 8px;
+ top: 15px;
+ z-index: 2;
+ height: 30px;
+ width: 30px;
+ cursor: pointer;
+ background-image: url('/images/nav-trigger.svg');
+ background-size: contain;
+}
+
+.nav-trigger {
+ &:checked ~ label[for="nav-trigger"] {
+ position: fixed;
+ }
+ + label {
+ transition: right 0.2s ease-in-out;
+ }
+}
+
+.site-wrap, header, nav {
+ transition: right 0.2s ease-in-out;
+}
+
+.nav-trigger:checked ~ .site-wrap nav {
+ right: 0;
+}
+
+.menu-trigger:checked ~ dd {
+ display: block;
+}
diff --git a/scss/layout/_shame.scss b/scss/layout/_shame.scss
index 7c7e103..d63bf37 100644
--- a/scss/layout/_shame.scss
+++ b/scss/layout/_shame.scss
@@ -9,7 +9,6 @@
float: left;
}
-
/* Responsive Behavior */
@include respond-to('medium') {
diff --git a/scss/main.scss b/scss/main.scss
index 625026b..9a991df 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -29,5 +29,3 @@
@import 'sprites/platforms';
@import 'vendor/baguetteBox.min';
-
-
diff --git a/scss/pages/_chart.scss b/scss/pages/_chart.scss
index 92662f7..d1179ae 100644
--- a/scss/pages/_chart.scss
+++ b/scss/pages/_chart.scss
@@ -5,16 +5,16 @@
padding: 0;
width: 95%;
caption {
- background: rgb(168, 39, 9) url('../images/table-head.png');
- color: rgb(255, 255, 255);
+ background: $theme-chart-caption-background;
+ color: $theme-chart-caption-header;
font-weight: bold;
margin: 0 auto;
}
a {
- color: rgb(0, 0, 0);
+ color: $theme-chart-link;
text-decoration: none;
&:hover {
- color: rgb(255, 0, 0);
+ color: lighten($theme-link, 20%);
}
}
tr, th, td {
@@ -22,7 +22,7 @@
padding: 2px;
}
th, td {
- border: 1px solid rgb(192, 192, 192);
+ border: 1px solid $theme-chart-border;
}
th {
font-weight: normal;
@@ -31,22 +31,19 @@
td.details {
padding: 1em 3em;
}
- .color0 {
- background-color: rgb(224, 224, 224);
- }
- .color1 {
- background-color: rgb(192, 192, 192);
- }
- .color2 {
- background-color: rgb(255, 255, 255);
- }
- .color4 {
- background-color: rgb(153, 153, 153);
+ tr {
+ &.color0 {
+ background-color: $theme-chart-row-odd;
+ }
+ &.color2 {
+ background-color: $theme-chart-row-even;
+ }
+ }
+ thead {
+ background-color: $theme-chart-head-background;
}
}
-/* query row colors */
-
.gameDemos {
tr {
padding: 0;
diff --git a/scss/pages/_compatibility.scss b/scss/pages/_compatibility.scss
index 3cd3a2b..1cf4617 100644
--- a/scss/pages/_compatibility.scss
+++ b/scss/pages/_compatibility.scss
@@ -1,12 +1,3 @@
-.bottom-link {
- text-align: right;
- a {
- color: rgb(168, 39, 9);
- font-weight: bold;
- text-decoration: none;
- }
-}
-
.colorKeyTable {
td {
text-align: center;
diff --git a/scss/pages/_credits.scss b/scss/pages/_credits.scss
index 52e0ae2..0c36986 100644
--- a/scss/pages/_credits.scss
+++ b/scss/pages/_credits.scss
@@ -26,7 +26,3 @@ table.credits {
font-style: italic;
}
}
-
-.box .subhead-content {
- padding: 5px 20px;
-}
diff --git a/scss/pages/_downloads.scss b/scss/pages/_downloads.scss
index 6813d73..68d7863 100644
--- a/scss/pages/_downloads.scss
+++ b/scss/pages/_downloads.scss
@@ -3,26 +3,12 @@ ul.downloads {
list-style-type: none;
padding: 3px;
}
- img {
- height: 29px;
- vertical-align: middle;
- width: 29px;
- }
- li {
- &.file a:hover, &.link a:hover {
- color: rgb(255, 0, 0);
- }
- }
span.download-extras {
- color: rgb(133, 177, 50);
+ color: $theme-subscript;
font-size: x-small;
}
li.link {
- margin-left: 1.5em;
- a {
- color: rgb(170, 51, 51);
- text-decoration: underline;
- }
+ margin-left: 1.5em;
}
}
@@ -41,49 +27,39 @@ span.daily_provider {
@include respond-to('small') {
text-align: center;
}
-}
-#downloadButton {
- min-height: 53px;
- float: left;
- margin-bottom: 30px;
- width: 100%;
- padding: 15px;
- color: white;
- border-radius: 8px;
- border: 1px solid white;
- -webkit-box-shadow: 0 0 10px #222;
- -moz-box-shadow: 0 0 10px #222;
- box-shadow: 0 0 10px #222;
- text-decoration: none;
- background: rgb(200, 68, 48);
- background: linear-gradient(to bottom, rgb(191, 117, 93) 0%, rgb(200, 68, 48) 100%);
- img {
- display: block;
- float: left;
- margin: 0 auto;
-
- @include respond-to('small') {
- float: none;
- }
- }
- &:hover {
- background: rgb(223, 145, 132);
- background: linear-gradient(to bottom, rgb(239, 198, 190) 0%, rgb(223, 145, 132) 41%, rgb(207, 92, 74) 83%, rgb(200, 70, 50) 100%);
- }
-}
-
-.downloadText {
- font-size: 32px;
- line-height: 32px;
- letter-spacing: .03em;
- padding-bottom: 6px;
- display: block;
-}
-
-#downloadDetails {
- padding-left: 3px;
- color: white;
+ #downloadButton {
+ min-height: 53px;
+ float: left;
+ margin-bottom: 30px;
+ width: 100%;
+ padding: 15px;
+ color: $theme-download-text;
+ border-radius: 8px;
+ border: 1px solid $theme-download-text;
+ box-shadow: 0 0 10px $black;
+ text-decoration: none;
+ background: $theme-download-background linear-gradient(to bottom, lighten($theme-download-background, 40%) 0%, $theme-download-background 100%);;;
+ img {
+ display: block;
+ float: left;
+ margin: 0 auto;
+
+ @include respond-to('small') {
+ float: none;
+ }
+ }
+ &:hover {
+ background: lighten($theme-download-background, 40%) linear-gradient(to bottom, lighten($theme-download-background, 50%) 0%, lighten($theme-download-background, 40%) 35%, $theme-download-background 100%);
+ }
+
+ .downloadText {
+ font-size: 2em;
+ line-height: 1.3em;
+ padding-bottom: 6px;
+ display: block;
+ }
+ }
}
ul.downloads {
diff --git a/scss/pages/_links.scss b/scss/pages/_links.scss
index e43673a..c860c7b 100644
--- a/scss/pages/_links.scss
+++ b/scss/pages/_links.scss
@@ -1,5 +1,4 @@
.linklist {
- color: #000;
margin-left: 3em;
.linkentry {
margin-bottom: 1em;
diff --git a/scss/pages/_screenshots.scss b/scss/pages/_screenshots.scss
index 3cbf3d9..5bdcf7e 100644
--- a/scss/pages/_screenshots.scss
+++ b/scss/pages/_screenshots.scss
@@ -19,12 +19,16 @@
img {
width: 100%;
height: auto;
+ image-rendering: pixelated;
}
}
.gallery {
- text-align: center;
- .subhead {
- text-align: left;
- }
+ text-align: center;
+
+ .caption {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ }
}
diff --git a/scss/theme/_residualvm.scss b/scss/theme/_residualvm.scss
new file mode 100644
index 0000000..4fe222f
--- /dev/null
+++ b/scss/theme/_residualvm.scss
@@ -0,0 +1,8 @@
+$theme-menu-title-background: #43a25c;
+$theme-menu-background: #398b4c;
+$theme-wrapper-topper: #b5d7bd;
+$theme-round-container-title-background: #b5d7bd linear-gradient(to top, lighten(desaturate(#b5d7bd, 36.50), 17.25) 0%, lighten(desaturate(#b5d7bd, 36.50), 12.35) 35%, #b5d7bd 100%);
+$theme-container-title-background: #45a63d linear-gradient(to bottom, lighten(desaturate(#45a63d, 41.38), 27.25) 0%, lighten(desaturate(#45a63d, 36.50), 12.35) 35%, #45a63d 100%);
+$theme-background: #6699cc;
+$theme-download-background: #398b4c;
+$theme-round-container-border: #43a25c;
diff --git a/scss/theme/_scummvm.scss b/scss/theme/_scummvm.scss
index 841f3d2..1fee25e 100644
--- a/scss/theme/_scummvm.scss
+++ b/scss/theme/_scummvm.scss
@@ -1,36 +1,65 @@
+// Theme colors:
+//$theme-primary-color: rgb(168, 39, 9) !default;
+//$theme-secondary-color: rgb(130, 29, 6) !default;
+//$theme-subscript-color: rgb(64, 106, 4) !default;
+//$theme-primary-background: rgb(209, 111, 10) !default;
+
// Main elements
-$theme-background:
- $bamboo
- linear-gradient(to bottom, rgb(209, 111, 10) 0%, rgb(231, 172, 21) 400px, rgb(239, 196, 24) 100%);
-$theme-text: $black;
+$theme-background: $bamboo linear-gradient(to bottom, rgb(209, 111, 10) 0%, rgb(231, 172, 21) 400px, rgb(239, 196, 24) 100%) !default;
+$theme-text: $black !default;
$theme-fonts: (
'verdana',
'tahoma',
'arial',
'helvetica',
sans-serif
-);
+) !default;
+
+$theme-link: $kenyan-copper !default;
+$theme-light-link: $white !default;
-$theme-link: $kenyan-copper;
-$theme-light-link: $white;
+$theme-wrapper-topper: $marzipan !default;
+$theme-wrapper-background: $double-pearl-lustra !default;
// Menu
-$theme-menu-title: $turbo;
-$theme-menu-title-background: $kenyan-copper;
-$theme-menu-background: $totem-pole;
+$theme-menu-title: $turbo !default;
+$theme-menu-title-background: $kenyan-copper !default;
+$theme-menu-background: $totem-pole !default;
+$theme-menu-link: $white !default;
+$theme-menu-shadow: $cashmere !default;
// Box containers
-$theme-container-title: $white;
-$theme-container-title-background: '';
-$theme-container-sub-title: $totem-pole;
-$theme-container-background: '';
+$theme-container-title: $white !default;
+$theme-container-title-background: $totem-pole linear-gradient(to bottom, mix($totem-pole, $white) 0%, $totem-pole 80%) !default;
+$theme-container-sub-title: $totem-pole !default;
+$theme-container-background: $alto !default;
+$theme-container-navigation-background: $silver !default;
+$theme-container-border: $silver !default;
+$theme-container-navigation-link: $japanese-laurel !default;
+$theme-container-navigation-bullet: $double-pearl-lustra !default;
+
+// Round box containers
+$theme-round-container-title-background: $marzipan linear-gradient(to bottom, darken($marzipan, 10%) 0%, $marzipan 50%, lighten($marzipan, 20%) 100%) !default;
+$theme-round-container-border: $cashmere !default;
+$theme-round-container-headless-background: $double-pearl-lustra !default;
+$theme-round-container-header: $kenyan-copper !default;
+$theme-round-container-background: $white !default;
+$theme-round-container-header-shadow: $white !default;
// Charts
-$theme-chart-header: $gray;
-$theme-chart-row: $white;
-$theme-chart-alt-row: $alto;
+$theme-chart-head-background: $gray !default;
+$theme-chart-row-odd: $alto !default;
+$theme-chart-row-even: $white !default;
+$theme-chart-caption-background: $theme-container-title-background !default;
+$theme-chart-caption-header: $white !default;
+$theme-chart-link: $black !default;
+$theme-chart-border: $silver !default;
// Misc elements
-$theme-table-of-contents: $japanese-laurel;
-$theme-subscript: $japanese-laurel;
-$theme-table-of-contents-bullet: $double-pearl-lustra;
+$theme-table-of-contents: $japanese-laurel !default;
+$theme-subscript: $japanese-laurel !default;
+$theme-table-of-contents-bullet: $double-pearl-lustra !default;
+
+// Download button
+$theme-download-background: $theme-link !default;
+$theme-download-text: $white !default;
diff --git a/scss/theme/_scummvmold.scss b/scss/theme/_scummvmold.scss
new file mode 100644
index 0000000..b2f1af0
--- /dev/null
+++ b/scss/theme/_scummvmold.scss
@@ -0,0 +1,9 @@
+$theme-menu-background: #6f43a4;
+$theme-menu-title-background: linear-gradient(to bottom, rgb(115, 15, 107) 0%, rgb(163, 26, 156) 71%);
+$theme-background: #6699cc;
+$theme-container-title-background: $theme-menu-title-background;
+$theme-download-background: #6f43a4;
+$theme-round-container-title-background: #6f43a4;
+$theme-round-container-header: $turbo;
+$theme-round-container-header-shadow: unset;
+$theme-wrapper-topper: $theme-menu-title-background;
More information about the Scummvm-git-logs
mailing list