I would like my site to take on a different design when the browser is 500-700px as opposed to a full size browser.
This same layout occurs when i load the mobile page. For some reason this one works just fine with media queries .
the full size desktop version looks something like this
___________ _____________________
| | | |
| | | |
| | | |
| sidebar | | content |
| | | |
| | | |
| | | |
|_________| |___________________|
i would like that when the browser is 500-700px it should look like this
_____________________
| |
| |
| |
| content |
| |
| |
| |
|___________________|
_____________________
| |
| sidebar |
|___________________|
I am using this as my media query to change to this layout,
#media only screen
and (min-device-width: 500px)
and (max-device-width: 700px)
and the full screen desktop site is using this
#media screen
and (min-device-width: 750px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1)
However when i resize my browser screen as of now my site is just responsive to the full screen design...
If you could please help me i'd appreciate it ! thanks!
I tried using several different media queries ( #media screen, #media screen only) and for some reason the media queries only work for mobile and full screen desktop
Related
I create a documentation with asciidoctor and Maven.
I need to put a large table (more than page width), but I don't know how to put an equivalent to css overflow-x:auto for this table.
my.adoc:
Tables :
|===
10+|*usertable*
| id | hostname | ip | profile | username 5+|
10+|*tapplications*
| id | category | feature | app_license_type | app_long_desc | app_name | app_nam_exec | app_short_desc | id_feature | logo
10+|*licenseusertable*
| id | date_since_granted | display | feature_version | handler | server_host | server_port | id_feature | id_user |
|===
Thanks in advance
You would need to add some custom CSS to accomplish that.
You could supply your own stylesheet file, totally overriding the Asciidoctor styles, by adding -a stylesheet="mystyles.css" to your asciidoctor invocation.
Since you likely just want to add a style to the existing styles, you need to use a docinfo file. See: https://asciidoctor.org/docs/user-manual/#docinfo-file
Create a file called docinfo.html containing your styles. For example:
<style>
.scrollable {
overflow-x: auto;
}
</style>
Note the <style> tag: the docinfo.html file is an HTML file (which gets embedded into the <head> of the generated page), so you can also embed custom Javascript, meta tags, etc.
Then, in the document containing the table, add the following attribute definition immediately after the document's title:
:docinfo: shared
Also, since HTML tables don't support horizontal scrolling, you need to wrap your table in an open block (which translates to some <div> wrappers):
[.scrollable]
--
Tables :
|===
10+|*usertable*
| id | hostname | ip | profile | username 5+|
10+|*tapplications*
| id | category | feature | app_license_type | app_long_desc | app_name | app_nam_exec | app_short_desc | id_feature | logo
10+|*licenseusertable*
| id | date_since_granted | display | feature_version | handler | server_host | server_port | id_feature | id_user |
|===
--
There is the grid layout in vs-code, and there is the terminal panel. Is there a way to combine both?
Lets say I want this :
--------------------------------------------------------------
| | |
| | |
| | |
| | something |
| | here |
| editor here | |
| | |
| | |
| |---------------------------|
| | |
| | |
| | terminal |
| | here |
| | |
| | |
| | |
--------------------------------------------------------------
I know we can put the terminal on the right, but I do not know if we can put it in the bottom of the right column. It works with other panel though, like editor.
To my best understanding, you cannot put the whole terminal panel (thinking of the combined: problems, output, debug console, terminal, ... group) in the grid layout.
However, you can put individual terminal shells into the editor and they will behave like opened files, able to be moved between editor panes.
After you have opened the terminal panel, you can drag and drop the shell's name (located just left of the little + sign where you can create a new terminal. It will have a name like bash or any other shell you are using) into the editor.
To make it easier, there is a setting for terminal.integrated.defaultLocation where you can specify the value to be editor. You split the editor panel as you see fit and then press workbench.action.terminal.new (default keycode is Ctrl+`) and you terminal will appear in the selected grid section.
The title is ambiguous; let me clarify: I have an svg image which includes a text I want rendered with a custom font.
However, there seem to be new issues that do not pop up when embedding fonts in html page. Also, some browsers (namely Firefox) seem to treat in-page svg ("in a img tag") differently than when rendering the svg directly.
<defs>
<style>
#font-face {
font-family: "Open Sans";
src: local("Open Sans"),
local("OpenSans"),
url('https://example.com/OpenSans-Regular.eot') format('eot'),
url('https://example.com/OpenSans-Regular.woff') format('woff'),
url('https://example.com/OpenSans-Regular.ttf') format('truetype');
}
/* ...
As far as I know, if this was a web page it would render successfully across pretty much everywhere. However, as an svg, I can't get it to work. The current format works pretty much everywhere except in IE10 (and presumably older versions): the font sometimes loads, other time it doesn't. Literally every second refresh uses the system fallback font. Including the woff file inline as a base64 encoded file works, but that breaks it for Safari (and changing order does not fix it).
Is there a solid way of cross browser embedded fonts in svg image? (Again, I don't mean embedding svg font in a web page, but rendering embedded font inside an svg image.)
In Firefox at least, images must be completely self-contained i.e. everything in one file for privacy reasons.
If you want the fonts to work you'll have to base64 encode them and embed them as a data URLs in the SVG file i.e.
#font-face {
font-family: 'Open Sans';
src: url("data:application/x-font-ttf;base64,[base-encoded font here]");
}
I ended up using this:
<defs>
<style type="text/css">
<![CDATA[
#font-face {
font-family: "Open Sans";
src: local("Open Sans"), /* IE */
local("OpenSans"),
url("data:application/vnd.ms-fontobject;charset=utf-8;base64,{$fontEot}") format('embedded-opentype'),
url("data:application/x-font-woff;charset=utf-8;base64,{$fontWoff}") format('woff'),
url('https://example.com/OpenSans-Regular.ttf') format('truetype');
}
]]>
</style>
Support:
+------------+--------+-------+-------+-----------+
| | Win XP | Win 7 | iOS 6 | OS X 10.9 |
+------------+--------+-------+-------+-----------+
| IE 8 | no | no | | |
| IE 9 | | yes | | |
| IE 10 | | yes | | |
| IE 11 | | yes | | |
| Safari 4 | | yes | | |
| Safari 5.0 | | yes | | |
| Safari 5.1 | | no | | |
| Safari 7 | | no | | yes |
| Safari iOS | | | yes | |
| FF 3.6 | no | no | | |
| FF 4 | yes | yes | | |
| FF 27 | yes | yes | | yes |
| Chrome 14 | yes | yes | | |
| Chrome 33 | yes | yes | | yes |
| Opera 10.6 | yes | yes | | |
| Opera 19 | yes | | | |
+------------+--------+-------+-------+-----------+
Per http://gs.statcounter.com/#browser_version_partially_combined-ww-monthly-201310-201312-bar
this amounts for overall support of somewhere around 85 %.
The only really bothering thing is that Safari 5.1 renders NO text at all like this. I had to make a Safari only fallback in the css declaration:
/* Win Safari fallback */
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari only */
::i-block-chrome,text {
font-family: 'Verdana';
}
}
Anyway, embedding the font just feels wrong as the files are huge.
I have been using the Notion Window Manager (http://notion.sourceforge.net/) for a few weeks. I was wondering if it is possible to create a keybinding that splits a workspace in the same way that META+S and META+K S splits a frame horizontally and vertically.
So if I had two vertical frames in a workspace like this:
-----
|1|2|
| | |
| | |
| | |
-----
The keybinding to split horizontally should add a new frame that spans the workspace horizontally:
-----
|1|2|
| | |
-----
| 3 |
-----
Currently META+S only splits the selected frame horizontally:
-----
|1|2|
| | |
|-| |
|3| |
-----
Is there any way to accomplish splitting the entire workspace horizontally or vertically in Notion?
The solution I came up with is to add a keybinding to the split_top function in cfg_tiling.lua. To split horizontally I added:
kpress(META.."Z", "WTiling.split_top(_, 'bottom')")
to the WTiling defbindings function. I also added
kpress("Z", "Wtiling.split_top(_, 'left')")
to the submap META.."K" bindings.
The split_top function splits at the root of the split tree. This will create a new frame that splits the entire workspace rather than the current frame.
One sizing issue that I noticed with this approach is that it will try to split the workspace exactly in half. If there is a horizontal frame splitting a workspace split_top will resize it to the smallest size and add a new frame below it. If there is a vertical frame it will become about 10 pixels wide when the new frame is added.
Horizontal size issue. New frames are 0 height:
Start ->Mod1+Z ->Mod1+Z
-1--2-- -1--2-- -1--2--
| | | | | | | | |
| | | | | | | | |
-3----- -3----- -3-----
| | -4----- -4-----
| | | | -5-----
| | | | | |
| | | | | |
------- ------- -------
Vertical size issue. New frames are 0 width:
Start -> Mod1+K Z -> Mod1+K Z
-1----2---- -4--1-2---- -5-41-2----
| | | | || | | ||| |
| | | | || | | ||| |
| |3---| | ||3---| | |||3---|
| | | | || | | ||| |
| | | | || | | ||| |
----------- ----------- -----------
Another issue is the focus does not change to the newly create frame. Hitting Mod1+Z will create the frame but the user has to Mod1+TAB to the frame to manipulate it.
This is a start but a comprehensive solution would check for frames that already split the workspace and split them instead and change the focus to the new frame.
Yes, you can.
You either need to put your binding in the workspace context or from the frame/mplex context you need to look up the managing workspace and then call split on that.
(I'd post code and more concrete terms but I'm not in front of a notion machine at the moment and don't want to confuse things by using the wrong ones.)
I am trying to position an inner element inside the root element. The root element is set to be 100% high and 100% wide. However, I want the inner svg to be 10px or so from the edge of the outer svg--all except the right edge, which I would like to be 200px from the outer right edge. I want this to display in a web browser and so the user should be able to resize the browser and hence the outer svg while the inner svg should be able to maintain the correct distance from the outer svg on each side.
Like this:
+OUTER SVG------------------------------------------+
| |
| +INNER SVG----------------+ |
| | | |
| | | 200px |
| | | <---+-----+----> |
| | | |
| | | | 1
| | | | 0
| | | | 0
| | | | %
| | | |
| | | | h
| | | | i
| +-------------------------+ | g
| | h
| |
+---------------------------------------------------+
100% Wide
Is it possible to do this with SVG alone?
If I understand you correctly, this is trivial. SVG is built to have many visual elements in a Z stack, aligned, overlapped, whatever.
Use Inkscape, free and opensource, to create SVGs, and then you can edit the file directly in a text editor if you want to see how SVG is formed. In Inkscape you can use the alignment tools, the grid, the transform-scaling tool, drag and drop, and probably some other tools to accomplish this.