moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Temporary icon for local timeline

This commit is contained in:
Alex Gleason 2020-04-11 14:52:41 -05:00
parent 6c6d6297f9
commit 2ee2d79156
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
1 changed files with 114 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

224
app/styles/gabsocial/fonts.scss
View File

@ -1,94 +1,94 @@
// Roboto Regular // Roboto Regular
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
src: url('../fonts/roboto/roboto-regular-400.eot?#iefix'); src: url('../fonts/roboto/roboto-regular-400.eot?#iefix');
src: url('../fonts/roboto/roboto-regular-400.eot?#iefix') format('embedded-opentype'), src: url('../fonts/roboto/roboto-regular-400.eot?#iefix') format('embedded-opentype'),
url('../fonts/roboto/roboto-regular-400.woff2') format('woff2'), url('../fonts/roboto/roboto-regular-400.woff2') format('woff2'),
url('../fonts/roboto/roboto-regular-400.woff') format('woff'), url('../fonts/roboto/roboto-regular-400.woff') format('woff'),
url('../fonts/roboto/roboto-regular-400.ttf') format('truetype'), url('../fonts/roboto/roboto-regular-400.ttf') format('truetype'),
url('../fonts/roboto/roboto-regular-400.svg') format('svg'); url('../fonts/roboto/roboto-regular-400.svg') format('svg');
} }
// Roboto Regular Italic // Roboto Regular Italic
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
font-weight: 400; font-weight: 400;
font-style: italic; font-style: italic;
src: url('../fonts/roboto/roboto-regular-italic-400.eot?#iefix'); src: url('../fonts/roboto/roboto-regular-italic-400.eot?#iefix');
src: url('../fonts/roboto/roboto-regular-italic-400.eot?#iefix') format('embedded-opentype'), src: url('../fonts/roboto/roboto-regular-italic-400.eot?#iefix') format('embedded-opentype'),
url('../fonts/roboto/roboto-regular-italic-400.woff2') format('woff2'), url('../fonts/roboto/roboto-regular-italic-400.woff2') format('woff2'),
url('../fonts/roboto/roboto-regular-italic-400.woff') format('woff'), url('../fonts/roboto/roboto-regular-italic-400.woff') format('woff'),
url('../fonts/roboto/roboto-regular-italic-400.ttf') format('truetype'), url('../fonts/roboto/roboto-regular-italic-400.ttf') format('truetype'),
url('../fonts/roboto/roboto-regular-italic-400.svg') format('svg'); url('../fonts/roboto/roboto-regular-italic-400.svg') format('svg');
} }
// Roboto Light // Roboto Light
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
font-weight: 300; font-weight: 300;
font-style: normal; font-style: normal;
src: url('../fonts/roboto/roboto-light-300.eot?#iefix'); src: url('../fonts/roboto/roboto-light-300.eot?#iefix');
src: url('../fonts/roboto/roboto-light-300.eot?#iefix') format('embedded-opentype'), src: url('../fonts/roboto/roboto-light-300.eot?#iefix') format('embedded-opentype'),
url('../fonts/roboto/roboto-light-300.woff2') format('woff2'), url('../fonts/roboto/roboto-light-300.woff2') format('woff2'),
url('../fonts/roboto/roboto-light-300.woff') format('woff'), url('../fonts/roboto/roboto-light-300.woff') format('woff'),
url('../fonts/roboto/roboto-light-300.ttf') format('truetype'), url('../fonts/roboto/roboto-light-300.ttf') format('truetype'),
url('../fonts/roboto/roboto-light-300.svg') format('svg'); url('../fonts/roboto/roboto-light-300.svg') format('svg');
} }
// Roboto Light Italic // Roboto Light Italic
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
font-weight: 300; font-weight: 300;
font-style: italic; font-style: italic;
src: url('../fonts/roboto/roboto-light-italic-300.eot?#iefix'); src: url('../fonts/roboto/roboto-light-italic-300.eot?#iefix');
src: url('../fonts/roboto/roboto-light-italic-300.eot?#iefix') format('embedded-opentype'), src: url('../fonts/roboto/roboto-light-italic-300.eot?#iefix') format('embedded-opentype'),
url('../fonts/roboto/roboto-light-italic-300.woff2') format('woff2'), url('../fonts/roboto/roboto-light-italic-300.woff2') format('woff2'),
url('../fonts/roboto/roboto-light-italic-300.woff') format('woff'), url('../fonts/roboto/roboto-light-italic-300.woff') format('woff'),
url('../fonts/roboto/roboto-light-italic-300.ttf') format('truetype'), url('../fonts/roboto/roboto-light-italic-300.ttf') format('truetype'),
url('../fonts/roboto/roboto-light-italic-300.svg') format('svg'); url('../fonts/roboto/roboto-light-italic-300.svg') format('svg');
} }
// Roboto Bold // Roboto Bold
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
src: url('../fonts/roboto/roboto-bold-700.eot?#iefix'); src: url('../fonts/roboto/roboto-bold-700.eot?#iefix');
src: url('../fonts/roboto/roboto-bold-700.eot?#iefix') format('embedded-opentype'), src: url('../fonts/roboto/roboto-bold-700.eot?#iefix') format('embedded-opentype'),
url('../fonts/roboto/roboto-bold-700.woff2') format('woff2'), url('../fonts/roboto/roboto-bold-700.woff2') format('woff2'),
url('../fonts/roboto/roboto-bold-700.woff') format('woff'), url('../fonts/roboto/roboto-bold-700.woff') format('woff'),
url('../fonts/roboto/roboto-bold-700.ttf') format('truetype'), url('../fonts/roboto/roboto-bold-700.ttf') format('truetype'),
url('../fonts/roboto/roboto-bold-700.svg') format('svg'); url('../fonts/roboto/roboto-bold-700.svg') format('svg');
} }
// Roboto Bold Italic // Roboto Bold Italic
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
font-weight: 700; font-weight: 700;
font-style: italic; font-style: italic;
src: url('../fonts/roboto/roboto-bold-italic-700.eot?#iefix'); src: url('../fonts/roboto/roboto-bold-italic-700.eot?#iefix');
src: url('../fonts/roboto/roboto-bold-italic-700.eot?#iefix') format('embedded-opentype'), src: url('../fonts/roboto/roboto-bold-italic-700.eot?#iefix') format('embedded-opentype'),
url('../fonts/roboto/roboto-bold-italic-700.woff2') format('woff2'), url('../fonts/roboto/roboto-bold-italic-700.woff2') format('woff2'),
url('../fonts/roboto/roboto-bold-italic-700.woff') format('woff'), url('../fonts/roboto/roboto-bold-italic-700.woff') format('woff'),
url('../fonts/roboto/roboto-bold-italic-700.ttf') format('truetype'), url('../fonts/roboto/roboto-bold-italic-700.ttf') format('truetype'),
url('../fonts/roboto/roboto-bold-italic-700.svg') format('svg'); url('../fonts/roboto/roboto-bold-italic-700.svg') format('svg');
} }
// Montserrat Extra Bold // Montserrat Extra Bold
// Used for all bold number, scoreboard, count displays // Used for all bold number, scoreboard, count displays
@font-face { @font-face {
font-family: 'Montserrat'; font-family: 'Montserrat';
font-weight: 800; font-weight: 800;
font-style: normal; font-style: normal;
src: url('../fonts/montserrat/montserrat-extra-bold-800.eot?#iefix'); src: url('../fonts/montserrat/montserrat-extra-bold-800.eot?#iefix');
src: url('../fonts/montserrat/montserrat-extra-bold-800.eot?#iefix') format('embedded-opentype'), src: url('../fonts/montserrat/montserrat-extra-bold-800.eot?#iefix') format('embedded-opentype'),
url('../fonts/montserrat/montserrat-extra-bold-800.woff2') format('woff2'), url('../fonts/montserrat/montserrat-extra-bold-800.woff2') format('woff2'),
url('../fonts/montserrat/montserrat-extra-bold-800.woff') format('woff'), url('../fonts/montserrat/montserrat-extra-bold-800.woff') format('woff'),
url('../fonts/montserrat/montserrat-extra-bold-800.ttf') format('truetype'), url('../fonts/montserrat/montserrat-extra-bold-800.ttf') format('truetype'),
url('../fonts/montserrat/montserrat-extra-bold-800.svg') format('svg'); url('../fonts/montserrat/montserrat-extra-bold-800.svg') format('svg');
} }
// OpenDyslexic // OpenDyslexic
@font-face { @font-face {
@ -97,19 +97,19 @@
} }
@font-face { @font-face {
font-family: 'OpenDyslexic'; font-family: 'OpenDyslexic';
font-weight: bold; font-weight: bold;
src: url('../fonts/OpenDyslexic/OpenDyslexic-Bold.woff2') format('woff2'); src: url('../fonts/OpenDyslexic/OpenDyslexic-Bold.woff2') format('woff2');
} }
@font-face { @font-face {
font-family: 'OpenDyslexic'; font-family: 'OpenDyslexic';
font-weight: bold; font-weight: bold;
font-style: italic; font-style: italic;
src: url('../fonts/OpenDyslexic/OpenDyslexic-Bold-Italic.woff2') format('woff2'); src: url('../fonts/OpenDyslexic/OpenDyslexic-Bold-Italic.woff2') format('woff2');
} }
@font-face { @font-face {
font-family: 'OpenDyslexic'; font-family: 'OpenDyslexic';
font-style: italic; font-style: italic;
src: url('../fonts/OpenDyslexic/OpenDyslexic-Italic.woff2') format('woff2'); src: url('../fonts/OpenDyslexic/OpenDyslexic-Italic.woff2') format('woff2');
} }
@ -124,28 +124,28 @@
// Numeical values always work more consistently across browsers // Numeical values always work more consistently across browsers
// Each font-weight is linked with the @font-face declaration to the actual font file // Each font-weight is linked with the @font-face declaration to the actual font file
@mixin font-weight($weight) { @mixin font-weight($weight) {
@if $weight == 'light' {font-weight: 300;} @if $weight == 'light' {font-weight: 300;}
@if $weight == 'normal' {font-weight: 400;} @if $weight == 'normal' {font-weight: 400;}
@if $weight == 'medium' {font-weight: 500;} @if $weight == 'medium' {font-weight: 500;}
@if $weight == 'bold' {font-weight: 700;} @if $weight == 'bold' {font-weight: 700;}
@if $weight == 'extrabold' {font-weight: 800;} @if $weight == 'extrabold' {font-weight: 800;}
} }
// Use these mixins to define font-size and line-height // Use these mixins to define font-size and line-height
// html and body declaration allows developer to pass px value as argument // html and body declaration allows developer to pass px value as argument
// Rendered css will default to "rem" and fall back to "px" for unsupported browsers // Rendered css will default to "rem" and fall back to "px" for unsupported browsers
@mixin font-size($size) { @mixin font-size($size) {
$rem: ($size / 10); $rem: ($size / 10);
$px: $size; $px: $size;
font-size: #{$px + "px"}; font-size: #{$px + "px"};
font-size: #{$rem + "rem"}; font-size: #{$rem + "rem"};
} }
@mixin line-height($size) { @mixin line-height($size) {
$rem: ($size / 10); $rem: ($size / 10);
$px: $size; $px: $size;
line-height: #{$px + "px"}; line-height: #{$px + "px"};
line-height: #{$rem + "rem"}; line-height: #{$rem + "rem"};
} }
// Spinster icon font // Spinster icon font
@font-face { @font-face {
@ -159,20 +159,24 @@
font-style: normal; font-style: normal;
} }
.fa-site-icon { .fa-site-icon {
position: relative; position: relative;
&:before { &:before {
content: ""; content: "";
display: block; display: block;
width: 16px; width: 16px;
height: 16px; height: 16px;
background-position: center; background-position: center;
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
position: absolute; position: absolute;
top: -14px; top: -14px;
filter: grayscale(100%) invert(100%); filter: grayscale(100%) invert(100%);
opacity: 0.5; opacity: 0.5;
} }
}
.fa-site-icon:before {
font-family: 'FontAwesome';
content: '\f0c0';
} }
.fa-fediverse:before { .fa-fediverse:before {
font-family: 'spinster' !important; font-family: 'spinster' !important;
@ -180,5 +184,5 @@
} }
.btn.grouped.active .fa-site-icon:before { .btn.grouped.active .fa-site-icon:before {
opacity: 1; opacity: 1;
} }